icons8
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseIcons8 icons
Icons8 icons
The MCP is a thin wrapper over the Icons8 search API. It gives you 5 tools and no taste:
, , , , .
You will often see only 4 of them: appears solely on a paid plan, see step 6.
Default behaviour is bad in three specific ways, and this skill exists to fix them.
search_iconslist_categorieslist_platformsget_icon_svgget_icon_png_urlget_icon_svg1. Unfiltered search returns one metaphor in ten styles. with
returns the same trash can in 12 different packs. You see one idea and no
alternatives, and whatever you pick will not match the icon you picked five minutes ago.
search_icons("delete")amount=122. Ranking is not taste-ranking. puts four Apple logos
(, category ) above the plain gear. puts a
car dashboard gauge first. The API matches names and tags, it does not know you are building
a settings screen.
search_icons("settings")apple-settingsLogossearch_icons("dashboard")3. SVG is the slow, paid path. is one call per icon (~1s each, serial) and
the payload runs from 600 characters (Flat Color) to 46,000 (Color Hand Drawn, about 11k
tokens for a single icon). PNG previews are free, instant and need no MCP call at all.
get_icon_svgMCP是Icons8搜索API的轻量级封装,它提供5个工具,不涉及审美判断:、、、、。你通常只会看到其中4个:仅在付费套餐中可用,详见步骤6。
search_iconslist_categorieslist_platformsget_icon_svgget_icon_png_urlget_icon_svg默认行为存在三个明确的问题,本技能正是为解决这些问题而生。
1. 未过滤搜索会返回同一隐喻的十种样式。 调用并设置时,会返回12个不同图标包中的同一个垃圾桶图标。你只能看到一种设计思路,没有其他选择,而且你选的图标会和五分钟前选的图标不匹配。
search_icons("delete")amount=122. 排序并非基于审美判断。 调用时,四个苹果标志(,分类为)会排在普通齿轮图标之前。调用时,汽车仪表盘会排在首位。API仅匹配名称和标签,并不知晓你正在构建设置界面。
search_icons("settings")apple-settingsLogossearch_icons("dashboard")3. SVG是耗时的付费路径。 每个图标需要一次调用(每次约1秒,串行执行),返回的内容大小从600字符(Flat Color风格)到46000字符(Color Hand Drawn风格,单个图标约11k tokens)不等。PNG预览是免费、即时的,且无需调用MCP。
get_icon_svgThe loop
操作流程
0. Read the lock. Look for next to the project you are working in. If it
exists, that pack is the only pack, no exceptions, even for one extra icon. If it does not
exist yet, you will write it in step 5.
icons8.jsonjson
{ "pack": "m_outlined", "size": 24, "color": "1F2937",
"icons": { "settings": { "id": "82535", "commonName": "settings" } } }1. List every concept before searching. Write the full list of icons the screen needs
(nav, actions, states, empty states). Pack choice depends on coverage of the whole list, not
of the first icon. Two of ~40 concepts are always missing from any given pack.
2. Pick the pack once. See . One pack per project, chosen from the
context table below. Use the exact . Never a partial name: silently resolves
to , to (Material Filled), to , while
, , and return zero results.
references/PACKS.mdapiCodewiredDusk_WiredmaterialandroidLofficeoffice40formaglyphsftiny3. One search per concept, always with .
The filter is what makes search useful: those 10 results are now 10 different metaphors
instead of 10 styles of one. Cost is about 1k tokens at , 2.6k at 30 (max 100).
Do not search the same concept twice, and do not re-search to "double check" a pick.
platformsearch_icons(query="settings", platform="m_outlined", amount=10)amount=104. Score the candidates with the rules below, then look at them. Build one contact
sheet and open it, no MCP calls needed:
html
<!-- sheet.html: each cell is <img src="https://img.icons8.com/?id=ID&format=png&size=48"> + commonName -->open sheet.html5. Prototype with PNG, write the lock. In HTML/JSX use the URL directly:
. Add to recolor any
monochrome icon (ignored by color packs). Zero MCP calls, zero latency, works for free and
paid icons alike. Then write so the next session and the next agent stay on
the same pack.
https://img.icons8.com/?id=82535&format=png&size=24&color=1F2937icons8.json6. Fetch SVG last, only for the approved set. When the prototype is agreed, call
for those icons and inline them. Set on monochrome
icons so CSS drives the color. Skip this step entirely for color, 3D and hand-drawn packs:
their SVG is huge and a PNG at 2x is the better asset.
get_icon_svgfill="currentColor"SVG is the one paid part of this workflow, and the gate is the connection's API key, not the icon.
Three states, read them correctly:
- is missing from your tool list. The account has no SVG plan. The tool still exists on the server and still answers if you call it; the server just stops advertising it without a key. Its absence is not a broken server, not proof the server is PNG-only, and not a reason to rewrite this skill.
get_icon_svg - It answers . The usual case, and the clearest one: no key on the connection. One call is enough to confirm it, so you never have to guess.
{"error": "You don't have access to this tool. Use get_icon_png_url instead."} - It answers . A key is attached but the API refused the call, and the server hands you the API's own message:
{"error": "Icons8 API: ..."}for a key it does not accept. Read the message before blaming the plan —Authentication data is invalid or missing (HTTP 401)means the id is wrong, not the subscription.Icon not found (HTTP 404)
In all three, say it in one line and keep moving: SVG needs a plan from
https://icons8.com/icons/pricing, and the key goes into the MCP server config as an
header — per-client setup at https://icons8.com/mcp. Then ship the PNG
version at 2x. The design does not wait on a subscription.
Authorization: Bearer <key>If the requirement is , PNG still gets you there. This is the one thing inline SVG
buys in product UI, and a plain cannot do it — but the same PNG used as an alpha mask can,
because the browser paints through the icon's transparency:
currentColor<img>background-colorcss
.icon { width: 24px; height: 24px; background-color: currentColor;
mask: url("https://img.icons8.com/?id=82535&format=png&size=48") center / contain no-repeat;
-webkit-mask: url("https://img.icons8.com/?id=82535&format=png&size=48") center / contain no-repeat; }Ask for the PNG at 2x the CSS size, and keep the prefix for Safari before 15.4. The icon
now inherits the theme token exactly as would. It is a raster mask, so it has a
ceiling inline SVG doesn't — say that rather than implying parity. This is a real technique, not a
workaround: the asset is still the genuine Icons8 drawing.
-webkit-fill="currentColor"Do not go looking for another way in. These all cost turns and produce something worse:
| Detour | What you actually get |
|---|---|
| 403 |
| Tracing or vectorising the PNG | a path that is not the Icons8 drawing, usually visibly worse at 24px |
| a raster in an SVG wrapper: no |
| Writing the path by hand | an invented icon, which breaks the one-pack rule harder than a wrong pack |
| Substituting Lucide, Heroicons, Font Awesome | a second icon set, the one thing this skill exists to prevent |
0. 读取锁定配置。 查看你正在处理的项目旁是否有文件。如果存在,该文件指定的图标包是项目唯一可使用的包,无例外,哪怕只是新增一个图标。如果不存在,你将在步骤5中创建它。
icons8.jsonjson
{ "pack": "m_outlined", "size": 24, "color": "1F2937",
"icons": { "settings": { "id": "82535", "commonName": "settings" } } }1. 搜索前列出所有需求概念。 写下界面所需的所有图标列表(导航、操作、状态、空状态)。图标包的选择取决于对整个列表的覆盖度,而非第一个图标。任何给定图标包都会缺少约40个概念中的2个。
2. 一次性选定图标包。 查看。每个项目使用一个图标包,从下方的场景表中选择。使用精确的。切勿使用部分名称:会自动解析为,解析为(Material Filled),解析为,而、、和会返回零结果。
references/PACKS.mdapiCodewiredDusk_WiredmaterialandroidLofficeoffice40formaglyphsftiny3. 为每个概念单独搜索,且始终指定参数。
过滤参数让搜索变得有用:此时返回的10个结果是10种不同的隐喻设计,而非同一种设计的10种样式。时约消耗1k tokens,时约消耗2.6k tokens(最大值为100)。不要重复搜索同一概念,也不要为了“再次确认”选择而重新搜索。
platformsearch_icons(query="settings", platform="m_outlined", amount=10)amount=10amount=304. 按照以下规则为候选图标评分,然后查看实际效果。 创建一个联系表并打开,无需调用MCP:
html
<!-- sheet.html: 每个单元格包含 <img src="https://img.icons8.com/?id=ID&format=png&size=48"> + commonName -->为用户打开。对于任何你不确定的选择,下载PNG并自行查看,这是真实的验证方式,仅消耗一次读取权限。
sheet.html5. 使用PNG进行原型设计,写入锁定配置。 在HTML/JSX中直接使用URL:。添加可为任何单色图标重新着色(彩色图标包会忽略此参数)。无需调用MCP,零延迟,免费和付费图标均可使用。然后写入,以便下一次会话和其他agent使用同一图标包。
https://img.icons8.com/?id=82535&format=png&size=24&color=1F2937icons8.json6. 最后仅为获批集合获取SVG。 当原型获得批准后,为这些图标调用并内联到代码中。为单色图标设置,以便通过CSS控制颜色。完全跳过此步骤如果使用彩色、3D和手绘风格的图标包:它们的SVG文件体积庞大,2倍尺寸的PNG是更好的资源。
get_icon_svgfill="currentColor"SVG是此工作流程中唯一付费的部分,权限取决于连接的API密钥,而非图标本身。存在三种状态,请正确解读:
- 你的工具列表中缺少。 该账户没有SVG套餐。该工具仍在服务器上存在,调用时仍会响应;只是服务器在没有密钥的情况下不再显示它。它的缺失并非服务器故障,也不能证明服务器仅支持PNG,更不是重写本技能的理由。
get_icon_svg - 返回。 这是常见情况,也是最明确的提示:连接没有密钥。只需一次调用即可确认,无需猜测。
{"error": "You don't have access to this tool. Use get_icon_png_url instead."} - 返回。 连接已附加密钥,但API拒绝了调用,服务器会返回API自身的消息:
{"error": "Icons8 API: ..."}表示密钥不被接受。在归咎于套餐前先阅读消息——Authentication data is invalid or missing (HTTP 401)表示ID错误,而非订阅问题。Icon not found (HTTP 404)
在所有三种情况下,用一句话说明并继续推进:SVG需要从https://icons8.com/icons/pricing购买套餐,密钥需作为`Authorization: Bearer <key>`头部配置到MCP服务器中——可在https://icons8.com/mcp进行客户端单独设置。然后交付2倍尺寸的PNG版本。设计无需等待订阅。
如果需求是,PNG同样可以实现。 这是内联SVG在产品UI中的唯一优势,普通无法做到——但将同一PNG用作alpha蒙版即可实现,因为浏览器会透过图标的透明区域绘制:
currentColor<img>background-colorcss
.icon { width: 24px; height: 24px; background-color: currentColor;
mask: url("https://img.icons8.com/?id=82535&format=png&size=48") center / contain no-repeat;
-webkit-mask: url("https://img.icons8.com/?id=82535&format=png&size=48") center / contain no-repeat; }请求2倍CSS尺寸的PNG,并为Safari 15.4之前的版本保留前缀。此时图标会像一样完全继承主题令牌。这是一种光栅蒙版,因此它有内联SVG没有的上限——说明这一点,而非暗示两者完全等效。这是一种真实的技术,而非权宜之计:资源仍是正版Icons8绘图。
-webkit-fill="currentColor"不要尝试其他替代方法,这些方法既耗时又会产生更差的结果:
| 弯路 | 实际结果 |
|---|---|
| 返回403 |
| 追踪或矢量化PNG | 得到的路径并非Icons8的原始绘图,通常在24px尺寸下可见地变差 |
| SVG包裹中的光栅图:不支持 |
| 手动绘制路径 | 自创图标,这比使用错误的图标包更严重地违反单包规则 |
| 替换为Lucide、Heroicons、Font Awesome | 使用第二个图标集,这正是本技能要防止的情况 |
Reject these
需拒绝的情况
The user's complaint is "settings should be a plain gear, not a gear with extra parts". Concretely:
| Reject | Why | Real example |
|---|---|---|
| brand icon, not a UI icon | |
| literal machine part, reads wrong in a toolbar | |
| Compound icons when a plain one exists | extra objects add meaning you did not ask for | |
| suffixed variants are alternates, often decorated | |
| Any icon whose display name does not match the concept | search matched a substring, not the idea | |
| Color or 3D packs at 16-24px | detail turns to mud | |
| 1px-stroke mono packs at 96px+ | looks thin and unfinished | |
| A second pack anywhere on the screen | this is the one thing users notice | |
Prefer, in order: exact plain match, then or ,
then the shortest name that still means the concept.
commonNamecategory: PopularUser InterfacecategoryBusiness,Logos,User InterfaceerrorIndustry,User Interface用户的诉求是“设置图标应该是普通齿轮,而非带额外部件的齿轮”。具体如下:
| 拒绝项 | 原因 | 实际示例 |
|---|---|---|
仅选择 | 品牌图标,而非UI图标 | |
为UI操作选择 | 写实机械部件,在工具栏中显示效果不佳 | |
| 已有普通图标时选择复合图标 | 额外对象会添加你未要求的含义 | 为普通设置项选择 |
存在合适的普通 | 带后缀的变体是替代样式,通常带有装饰 | |
| 显示名称与概念不匹配的图标 | 搜索匹配的是子字符串,而非实际概念 | |
| 在16-24px尺寸下使用彩色或3D图标包 | 细节会变得模糊不清 | 在产品UI中使用 |
| 在96px+尺寸下使用1px描边的单色图标包 | 看起来单薄且未完成 | 在着陆页hero区域使用 |
| 界面中使用第二个图标包 | 这是用户最容易注意到的问题 | |
优先选择顺序:精确匹配普通的图标,其次是分类为或的图标,最后是仍能表达概念的最短名称。
commonNamePopularUser InterfacecategoryBusiness,Logos,User InterfaceerrorIndustry,User InterfaceCriteria by context
按场景划分的标准
| Context | Size | Packs | What matters |
|---|---|---|---|
| Product UI, toolbars, nav | 16-24 | mono only: | one family; grab the outline/filled pair for inactive/active states ( |
| Marketing, landing, feature grid | 48-128 | color: | brand color harmony over literal accuracy; at 200px+ an illustration beats a scaled icon (Ouch! is in-house, not in this MCP) |
| Slides, decks, docs | 40-80 | | readable at projector distance; one pack across all slides |
| Friendly, informal, human tone | 50-100 | | PNG only, never inline these SVGs |
| Dev docs, dense tables, IDE-like | 16 | | legibility at 16px is the only criterion |
| OS-native mockups | native | iOS | match the platform the mock claims to be |
| 场景 | 尺寸 | 图标包 | 关键要求 |
|---|---|---|---|
| 产品UI、工具栏、导航 | 16-24 | 仅单色: | 单一图标家族;获取轮廓/填充配对用于非激活/激活状态( |
| 营销、着陆页、功能网格 | 48-128 | 彩色: | 品牌色彩和谐优先于字面准确性;200px+尺寸下插画优于缩放图标(Ouch!为内部资源,不在此MCP中) |
| 幻灯片、演示文稿、文档 | 40-80 | | 在投影距离下可读;所有幻灯片使用同一图标包 |
| 友好、非正式、人性化风格 | 50-100 | | 仅使用PNG,切勿内联这些SVG |
| 开发文档、密集表格、类IDE界面 | 16 | | 16px尺寸下的可读性是唯一标准 |
| 原生系统原型 | 原生包 | iOS: | 匹配原型声称的平台 |
Gotchas that will cost you time
会耗费时间的陷阱
- never answers with an empty string. Every failure comes back as
get_icon_svg, a bad id as{"error": ...}. Test for the{"error": "Icons8 API: Icon not found (HTTP 404)"}key before writing a file; a test for an emptyerrornever fires.svg - with
img.icons8.comreturns 403format=svg. SVG only comes throughPAID_FORMAT, which the server offers only when the connection carries a paid account's key (step 6). There is no shortcut.get_icon_svg - returns 130 packs,
list_platformsandfluentamong them. If a code you know works is still absent from the list, trust the search result: a missing code is not proof the pack is gone.fluent-systems-regular - The filter takes an
category(apiCode), not a display name (user-interfacereturns 0).Logosis a working free-only filter.category="free-icons" - Platform codes are case sensitive: returns 0.
FLUENT - is shared across packs only where the pack has that icon (
commonNameexists in 12 packs,filled-trashcalls its trashios7). To move a set to another pack, re-run the searches, do not translate ids.full-trash - marks the free set (attribution required). Paid icons omit the field entirely rather than setting it to
isFree: true, so read absence as paid: a test forfalsenever matches, and indexing the key blindly raises on every paid icon. It does not affect PNG previews, both work. If the assets ship in a product, confirm the license before handing over paid icons — a set that looks free because nothing said otherwise is the easy way to get this wrong.isFree == false
- 永远不会返回空字符串。所有失败都会返回
get_icon_svg,无效ID会返回{"error": ...}。写入文件前先检查{"error": "Icons8 API: Icon not found (HTTP 404)"}键;检查空error的逻辑永远不会触发。svg - 使用
img.icons8.com会返回403format=svg。SVG仅能通过PAID_FORMAT获取,只有当连接携带付费账户的密钥时,服务器才会提供该工具(步骤6)。没有捷径。get_icon_svg - 返回130个图标包,其中包括
list_platforms和fluent。如果你知道有效的代码未出现在列表中,请信任搜索结果:代码缺失并不意味着图标包已不存在。fluent-systems-regular - 过滤器接受
category(如apiCode),而非显示名称(user-interface返回0结果)。Logos是有效的仅免费图标过滤器。category="free-icons" - 平台代码区分大小写:返回0结果。
FLUENT - 仅在图标包包含该图标时才会跨包共享(
commonName存在于12个图标包中,filled-trash中的垃圾桶图标名为ios7)。要将图标集迁移到另一个包,请重新运行搜索,不要直接转换ID。full-trash - 标记免费图标集(需要署名)。付费图标完全省略该字段,而非设置为
isFree: true,因此需将缺失视为付费:检查false的逻辑永远不会匹配,盲目索引该键会在每个付费图标上引发错误。这对PNG预览没有影响,两者均可使用。如果资源要在产品中交付,在提供付费图标前请确认许可证——因为没有明确说明而看起来免费的图标集,很容易导致错误。isFree == false
Recovering from a bad search
从无效搜索中恢复
Zero results or junk means the wording is wrong, not that the icon is missing. Search matches
names and tags, so ask for the object Icons8 would have drawn:
| Instead of | Search | You get |
|---|---|---|
| | |
| | |
| | |
| | |
| | |
| | |
If is 1-2 and the single hit is a logo, treat it as a miss and reword. Full map in
.
countAllreferences/VOCABULARY.md零结果或垃圾结果意味着措辞错误,而非图标不存在。搜索匹配名称和标签,因此请搜索Icons8会绘制的对象:
| 不要搜索 | 改为搜索 | 你会得到 |
|---|---|---|
| | |
| | |
| | |
| | |
| | |
| | |
如果为1-2且唯一结果是标志,则视为搜索失败并重新措辞。完整映射见。
countAllreferences/VOCABULARY.mdReference files
参考文件
- : which pack for which job, outline plus filled pairs, coverage numbers.
references/PACKS.md - : concept to
references/VOCABULARY.mdmap, verified visually, plus the traps.commonName - : ready concept lists for SaaS UI, landing, ecommerce, dev docs, analytics, empty states. Start from a kit instead of inventing the list.
references/KITS.md
- :不同场景适用的图标包、轮廓与填充配对、覆盖范围数据。
references/PACKS.md - :概念到
references/VOCABULARY.md的映射(已视觉验证),以及陷阱说明。commonName - :适用于SaaS UI、着陆页、电商、开发文档、分析、空状态的现成概念列表。从套件开始,而非自行创建列表。
references/KITS.md
What to hand back
交付内容
Per icon: , id, pack, and the preview URL. Never invent or construct an id, they
come from only.
commonNamesearch_iconsIf is not in your tool list, the server is not connected for you, and that is the
finding to report: say it plainly and tell the user to connect it, because they can fix it and you
cannot. What you must not do is paper over it — an id you remember from a previous session or from
this skill's own examples is unverified, and shipping one is worse than shipping a gap. Leave the icon
out with a note on what it needs, hand over whatever else is genuinely verified, and be explicit that
this part of the task is unfinished.
search_icons每个图标需提供:、id、图标包、预览URL。切勿自行创建或构造id,它们仅来自。
commonNamesearch_icons如果你的工具列表中没有,说明服务器未为你连接该工具,这就是你需要报告的结果:直白说明并告知用户连接该工具,因为他们可以解决这个问题,而你不能。切勿敷衍了事——你从之前会话或本技能示例中记住的id是未经验证的,交付这样的id比交付空白更糟糕。留下图标位置并注明所需内容,交付其他所有已验证的内容,并明确说明这部分任务未完成。
search_icons