icons8

Icons8 图标

该 MCP 是 Icons8 搜索 API 的轻量封装。它提供以下图标工具，但不会替你把关： search_icons、list_categories、list_platforms、get_icon_png_url、get_icon_animation， 以及付费套餐中的 get_icon_svg。 默认行为有四个明显问题，而这份技能就是为了解决这些问题。

1. 不加筛选的搜索会返回同一种隐喻的十种风格。 使用 search_icons("delete") 并设置 amount=12，会返回 12 个不同图标包中的同一只垃圾桶。你只能看到一个点子，看不到其他 选择；无论选哪个，都不会与五分钟前选的图标匹配。

2. 排名不代表审美排序。 search_icons("settings") 会把四个 Apple 徽标 （apple-settings，类别为 Logos）排在普通齿轮前面。search_icons("dashboard") 会把 汽车仪表盘上的仪表排在第一位。API 会匹配名称和标签，但它不知道你正在制作设置页面。

3. SVG 是缓慢且付费的路径。 get_icon_svg 每个图标需要调用一次（每次约 1 秒，串行）， 载荷从 600 个字符（Flat Color）到 46,000 个字符（Color Hand Drawn，单个图标约 11k 个 token）不等。PNG 预览免费、即时，而且完全不需要 MCP 调用。

4. 动画图标默认是个陷阱。 大约每 50 个图标中就有一个会动；用动画版本替换静态图标， 会让整个界面闪烁。规则见下方的动画图标。

工作循环

0. 阅读锁定文件。 在你正在处理的项目旁边查找 icons8.json。如果存在，该图标包就是唯一 可用的图标包，没有例外，即使只多加一个图标也不行。如果还不存在，你将在第 5 步创建它。

{
  "version": 2,
  "icons": {
    "pack": "m_outlined",
    "sizes": [16, 20, 24],
    "color": "currentColor",
    "items": { "settings": { "id": "82535", "commonName": "settings" } }
  },
  "illustrations": {
    "style": "notion-line-art",
    "slots": { "hero": { "id": "6a3d01f2fae3aa473512807f", "file": "assets/hero.svg" } }
  },
  "tokens": { "iconColor": "--foreground", "accent": "--primary", "radius": "--radius" }
}

锁定文件包含后续页面与当前页面保持一致所需的一切信息：

• icons.pack 是强制约束。icons.sizes 列出项目实际使用的尺寸，因此下一个图标会导出为 其中一个尺寸，而不是某个没人选过的新数值。
• illustrations 由 ouch 技能写入同一个文件。读取它，不要编辑。
• tokens 记录项目使用的 CSS 变量名称，而非其值：下一个素材也会连接到同一组变量。值会 变化，名称不会。创建这些变量是别人的工作，不归你负责：读取名称，不要自行编造。

旧版锁定文件。 顶层包含 pack 且没有 version 的文件属于第一种格式 （{"pack": …, "size": 24, "color": …, "icons": {…}}）。读取时，将 pack 视为 icons.pack，将 size 视为 icons.sizes 中唯一的条目，并将 icons 视为 icons.items。 在有新内容需要写入之前，不要改动它；写入时，按上文格式保存，并保留所有旧值。不要悄悄丢弃 自己不理解的字段。

1. 搜索前列出所有概念。 写出页面所需的完整图标列表 （导航、操作、状态、空状态）。图标包的选择取决于它对整个列表的覆盖情况，而非第一个图标。 任何给定的图标包中总会缺少约 40 个概念中的两个。

2. 只选择一次图标包。 参见 references/PACKS.md。根据下方的上下文表，为每个项目选择 一个图标包。使用准确的 apiCode。不要只写部分名称：wired 会静默解析为 Dusk_Wired， material 会解析为 androidL（Material Filled），office 会解析为 office40，而 forma、glyph、sf 和 tiny 会返回零条结果。

3. 每个概念只搜索一次，且始终指定 platform。 search_icons(query="settings", platform="m_outlined", animated=False, amount=10) 筛选条件能让搜索真正有用：这 10 个结果现在代表 10 种不同的隐喻，而非同一种隐喻的 10 种 风格。amount=10 时约消耗 1k 个 token，amount=30 时约消耗 2.6k（最多 100 个）。 不要对同一概念搜索两次，也不要为了“再次确认”而重新搜索。animated=False 会排除排名靠前 的动画 --vN 变体，避免它们出现在静态页面中；只对你打算设置为动画的图标移除该参数。

4. 按照下方规则为候选图标评分，然后 查看它们。制作一张联系表并打开它，无需 MCP 调用：

为用户打开 sheet.html。如果你对某个候选图标不确定，就下载 PNG 并亲自查看；这才是真正的核查，只需一次 Read。

无人查看时。 在子 Agent、批处理任务或其他没有人在另一端的运行中，打开图标表只是做样子：没人看得到。照样生成图标表并亲自查看，然后在报告中说明哪些候选图标让你拿不准。没人能质疑的无声选择，比明确说出疑虑更糟。

5. 用 PNG 制作原型，写入锁定配置。 在 HTML/JSX 中直接使用 URL： https://img.icons8.com/?id=82535&format=png&size=24。添加 &color=1F2937 可为任意单色图标重新着色（彩色图标集会忽略该参数）。无需调用 MCP，也没有延迟，免费和付费图标都能用。然后编写 icons8.json，确保下一个会话和下一个 Agent 使用同一图标集。写入 icons.pack、icons.sizes、icons.color 和 icons.items；illustrations 和 tokens 保持原样。如果项目旁边有单独的 ouch.json，就将其内容合并到这里的 illustrations 中，旧文件保留在磁盘上，并在报告中说明它已被取代：未经询问就删除别人的文件，不是你能擅自决定的。

6. 最后再获取 SVG，且只获取已批准的图标。 原型获得认可后，为这些图标调用 get_icon_svg 并内联使用。如果你要一气呵成地自行完成整个任务，中间不进行任何审批？那么“已批准”就指“你刚刚在屏幕上用的那组图标”：先用 PNG 完成布局并查看，然后才为保留下来的图标获取 SVG。设立这条规则，是为了避免你还在挑选时就拉取 40 个 SVG，而不是要你在项目需要矢量图时仍交付 PNG。为单色图标设置 fill="currentColor"，让 CSS 控制颜色。彩色、3D 和手绘图标集则完全跳过这一步：它们的 SVG 很大，2x PNG 是更好的素材。

应拒绝的图标

用户的反馈是“设置图标应该是一个普通齿轮，而不是带有额外部件的齿轮”。具体来说：

拒绝	原因	实例
只属于 Logos 类别，或名称以 -logo 结尾	这是品牌图标，不是 UI 图标	settings → apple-settings（前 4 个结果）
将 Industry、Transport、Household 类图标用于 UI 操作	具象的机器部件，放在工具栏中看起来不对	settings → gear、gears、automatic、settings-3；dashboard → 汽车仪表盘
明明有普通图标，却选择组合图标	多余的物体会添加你未要求的含义	普通设置项却使用 laptop-settings、sync-settings、api-settings
普通 commonName 存在且外观合适时，选择 --v2 / --v3（要制作动画的图标除外：这类图标的 ID 带有后缀）	带后缀的变体属于替代版本，通常有额外装饰	m_outlined 中的 star--v2 和 star--v3 是星中有星；filled-star 才是简洁的选择
显示名称与概念不符的任何图标	搜索匹配的是子字符串，不是概念	webhook → webtoon-logo；dark mode → do-not-disturb、film-noir
在 16-24px 尺寸下使用彩色或 3D 图标集	细节会糊成一团	产品 UI 中的 plasticine、isometric、badges
在 96px 及以上尺寸下使用 1px 描边的单色图标集	看起来过细且未完成	落地页主视觉中的 p1em、tiny-glyph
在屏幕上的任何位置使用第二套图标集	这是用户唯一会注意到的问题	同为单色图标的 m_outlined 和 ios7，看起来仍明显不匹配

优先顺序：完全匹配的普通 commonName，然后是 category: Popular 或 User Interface，最后选择仍能表达该概念的最短名称。

category 是以逗号连接的列表。应将其视为一个集合：其中一个标签不合适，并不意味着这个图标就不合适。普通铃铛标记为 Business,Logos,User Interface，标准警告三角形 error 标记为 Industry,User Interface。仅按子字符串触发的类别规则会把这两个图标都排除。

按场景选择

场景	尺寸	图标包	关注点
产品界面、工具栏、导航	16-24	仅单色：m_outlined、ios7、fluent-systems-regular、forma-light、16 尺寸的 p1em	统一使用一个系列；为非激活/激活状态搭配线框/实心图标（ios7 + ios_filled、m_outlined + androidL）；保持相同的视觉字重；通过 currentColor 改变颜色
营销、落地页、功能网格	48-128	彩色：color、plumpy、pulsar-color、liquid-glass、dusk、cotton	优先考虑品牌色彩协调，而非完全忠于原意；尺寸达到 200px 及以上时，插画比放大的图标更合适（Ouch! 是内部资源，不在此 MCP 中）
幻灯片、演示文稿、文档	40-80	color、office40、m_two_tone、ultraviolet	确保在投影距离下清晰可读；所有幻灯片使用同一个图标包
友好、随意、有人情味的语气	50-100	claude-hand-drawn、carbon_copy、plasticine、doodle	仅使用 PNG，切勿内嵌这些 SVG
开发文档、密集表格、类似 IDE 的界面	16	p1em、tiny-glyph、glyph-neue	唯一标准是在 16px 下清晰易读
OS 原生风格的模拟界面	原生	iOS：ios7/ios_filled/ios11；Windows：fluent-systems-filled；Android：m_*	与模拟界面所声称的平台保持一致

这些注意事项会浪费你的时间

• get_icon_svg 遇到无效 ID 时会返回 {"svg": ""}，且不会报错。写入文件前，务必确认字符串非空。
• img.icons8.com 使用 format=svg 会返回 403 PAID_FORMAT。只有通过使用账户密钥的 MCP 才能获取 SVG。没有其他捷径。
• list_platforms 会返回 98 个图标包，但仍会漏掉实际可用的图标包（fluent 和 fluent-systems-regular 可用于搜索，但不在列表中）。未列出的代码并不能证明该图标包已下架。
• category 筛选器接受 apiCode（user-interface），而不是显示名称（Logos 会返回 0）。category="free-icons" 是有效的免费图标筛选条件。
• 平台代码区分大小写：FLUENT 会返回 0。
• 只有图标包包含相应图标时，多个图标包才会共用 commonName（filled-trash 存在于 12 个图标包中，而 ios7 将其垃圾桶图标命名为 full-trash）。要将一组图标迁移到另一个图标包，请重新搜索，不要转换 ID。
• isFree: true 表示免费图标集（需要署名）。其他所有图标都需要许可证。这不会影响 PNG 预览，两者都可用。如果要在产品中发布素材，请在交付付费图标前确认许可证。

动画图标

默认使用静态图标。动画图标只会播放一次，并响应用户操作：改变状态的点击操作（保存、发送）、独立元素上的鼠标悬停，或仅在加载过程持续期间播放。开关类操作（例如点赞、书签）会播放半个周期，切换关闭时再播放另一半。键盘焦点不会触发动画。动画不会在悬停或点击时循环播放，导航、列表行、空状态和错误状态都不会动。悬停和点击仅使用 Lottie：gif 和 apng 天生会无限循环。动画必须表达与操作相同的含义（m_outlined 中唯一的动画链接会分解：用于 Unlink 合适，用于 Copy link 则不合适）；拿不准时，就用静态图标。开始制作动画前，请阅读 references/ANIMATION.md。

从错误的搜索中恢复

没有结果或结果不相关，说明搜索措辞不对，而不是缺少该图标。搜索会匹配名称和标签，因此要搜索 Icons8 会绘制的对象：

不要用	搜索	结果
ellipsis、changelog、onboarding	more、document、guide	more 是三个点
webhook、integration	api、code、plugin	api、source-code、plugin
dark mode	moon	full-moon、moon
trending up	growth	positive-dynamic、bullish
notification	bell	appointment-reminders（普通铃铛）
warning	error	error 是带 ! 的三角形；high-priority 是菱形

如果 countAll 为 1-2，且唯一结果是徽标，就将其视为未命中并换一种措辞。完整对照表见 references/VOCABULARY.md。

参考文件

• references/PACKS.md：不同任务适用的图标包、概述与填写示例，以及覆盖率数据。
• references/VOCABULARY.md：概念到 commonName 的映射，已通过视觉核验，并列出容易踩的坑。
• references/ANIMATION.md：图标何时可以动、如何让动效与操作匹配、三种格式、仅播放一次的 Lottie 代码片段、开关和锁定字段。
• references/KITS.md：适用于 SaaS UI、落地页、电商、开发文档、分析和空状态的现成概念列表。请从工具包开始，而不是自行编造列表。

需要返回的内容

每个图标都需提供：commonName、id、图标包和预览 URL。绝不要编造或自行构造 id，它们只能来自 search_icons。如果 MCP 工具不可用，请说明这一点并停止。