Icons8 MCP server
官方在你的vibe编码项目中获取MCP服务器SVG和MCP服务器PNG图标的访问权限
你可以用 Icons8 MCP 做什么?
- Search the icon catalog — Ask for icons by label and style from 422,674 SVG/PNG icons across 130 styles.
- Preview icons as free PNGs — Request PNG previews without an API key to compare styles before committing.
- Export SVG for production — Ask for SVG versions of approved icons once an API key is configured.
- Lock one style per project — Have the agent save the chosen style to
icons8.jsonso future sessions keep it. - Restyle existing UI — Ask the agent to swap every icon in the project to a named style while keeping current sizes.
文档
Icons8 MCP server
422,674 个 SVG 和 PNG 图标,涵盖 130 种风格,直接进入你正在使用的 AI 编辑器
免费使用
Product Hunt
当日产品
超大型图标包,单一风格最多达 40,000 个图标
130 种风格可供选择
适用于
Claude Code、
Codex、
Cursor、
Windsurf
及其他 AI 编码工具
将项目中的所有图标替换为时尚图标
或其他任何风格
为所有项目符号列表和功能区块、流程步骤、导航等添加图标
使用 Icons8 MCP 制作的演示
Emoji 风格 · 36 个图标
29 个图标,以内联 SVG 形式呈现
10 个图标,统一线框风格
Color 风格 · 27 个图标
如何使用 Icons8 MCP
你需要准备什么
- Claude Code、Codex、Cursor、Windsurf、VS Code 或类似的 AI 编码工具
- Claude Code 和 Codex 中插件方式需要 Node.js:内置服务器通过
npx mcp-remote运行。Cursor、Windsurf 和 VS Code 的手动配置直接使用 HTTP 协议,因此无需安装任何内容
第 1 步:连接 Icons8
Claude Code
Codex
Cursor
Windsurf
VS Code
其他
在终端中执行一行命令即可同时安装 MCP 服务器和 icons8 技能:
claude plugin marketplace add icons8/agent-skills && claude plugin install icons8@icons8
复制代码
首次使用时批准服务器,然后通过 /mcp 检查。整个设置就完成了。
想留在 Claude Code 里面操作?这两条命令效果相同:
/plugin marketplace add icons8/agent-skills
复制代码
/plugin install icons8@icons8
复制代码
icons8 技能增加了什么
- 每个项目一种风格,保存到
icons8.json。提交该文件后,下一次会话会保持该风格,而不是重新选择新风格。 - 使用一个朴素的齿轮图标作为设置入口,而不是同名的品牌 Logo。
- 在迭代过程中提供免费 PNG 预览,只有你批准的图标集才会提供 SVG。
MCP 为你的代理提供图标目录,技能则提供使用规则。没有技能时,代理会为每个标签取第一个搜索结果,这就是为什么一个界面最终会混入来自四种不同风格的图标。开源项目,采用 Apache-2.0 许可证:github.com/icons8/agent-skills。
第 2 步:在需要时解锁 SVG
以上所有功能已经可用:搜索、PNG 预览、任意尺寸的高分辨率 PNG。SVG 是生产格式,需要密钥。订阅 $15 后,从你账户的 MCP 选项卡中获取现成的设置代码:其中已填入你的密钥。也可以手动将密钥添加到任何配置中:
{ "mcpServers": { "icons8mcp-svg": { "type": "http", "url": "https://mcp.icons8.com/mcp/", "headers": { "Authorization": "Bearer YOUR_API_KEY" } } } }
复制代码
在 Claude Code 中,同样的操作只需一条命令:
claude mcp add --transport http icons8mcp-svg https://mcp.icons8.com/mcp/ --header "Authorization: Bearer YOUR_API_KEY"
复制代码
如果你安装了插件,带密钥的服务器会与内置的无密钥服务器同时运行,因此 PNG 工具会出现两次。这无害;如果让你感到困扰,可以禁用插件的服务器,保留自己的配置。
第 3 步:将图标添加到你的项目
说出你的需求。如果你心里有特定的风格就指明它;如果没有,可以先要求查看几种风格:PNG 预览是免费的,不需要密钥,因此比较风格不会产生任何成本。
- “给我展示一个设置图标,用六种不同的 Icons8 风格制作 PNG 预览,并告诉我每种风格的名称。”
- “构建一个设置界面。图标来自 Icons8,Material Outlined 风格,24px。”
- “将这个项目中的每个图标替换为 Flat Color 风格,并保持当前尺寸。”
- “为着陆页上的六个功能区块添加图标,统一风格,48px。”
描述外观也可以:“细线框、无颜色、24px”,“着陆页用的平面彩色”,“手绘风格”。技能会将你的代理选择的风格保存到 icons8.json,这样后续会话会自动保持该风格。全部 130 种风格都可以在 icons8.com/icons 上浏览。
值得写进提示词的三件事
- 风格。 指定一次,技能就会在整个项目中将其锁定在
icons8.json。图标 ID 是针对特定风格的,因此之后更改风格意味着需要重新选择每个图标。 - 尺寸。 每种风格都是按特定尺寸绘制的,从 16px 的字形到 64px 的彩色场景。询问你的代理你选择的风格是为哪种尺寸绘制的,然后使用该尺寸或将其加倍。50px 的图标缩小到 16px 会丢失使其清晰可辨的细节。
- 格式。 PNG 预览免费且即时,因此先在 PNG 上迭代,等图标集最终确定后再请求 SVG。
下面是同一个界面构建两次的效果:左侧没有指定风格,因此代理为每个标签取了第一个搜索结果。右侧为整个界面指定了一种风格。
未指定风格
图标来自四种不同风格:设置用了品牌 Logo,单色侧边栏里出现全彩头像,状态用了表情符号。
Material Outlined,24px
18 个图标,统一描边粗细,统一外观。每个图标都跟随文字颜色,因此深色模式和主题化自动实现。
查看实时演示获取灵感。如果出现问题,请参阅常见问题。
常见问题
提示“No API key”怎么办?
订阅 $15,在 Icons8 账户中找到 MCP 选项卡获取设置代码。或者从 Icons8 开发者门户获取 API 密钥。
如何在整个项目中保持统一的图标风格?
第 1 步中的 icons8 技能会为你完成此操作:它为整个项目选择一个图标包并将其锁定在 icons8.json。提交该文件后,下一次会话或另一个代理会保持相同的风格。没有技能时,在第一个提示词中指定风格,并在之后添加图标时重复指定。图标 ID 是针对特定风格的:同一个图标在不同风格中具有不同的 ID,因此之后更改风格意味着需要重新选择每个图标。
我可以获得哪些格式?
SVG(需要 API 密钥),所有用户均可使用 PNG 预览。
我可以免费通过 MCP 服务器下载 PNG 图标吗?
可以,当你连接到 Icons8 MCP 服务器时,PNG 图标预览无需 API 密钥即可使用。
免费版本的许可条款是什么?
通过 MCP 下载的所有 PNG 图标均可免费使用,只要你在生产环境中提供指向我们的链接即可。在此处查看我们的许可证。对于在生产 UI 中需要缩放的元素,请使用带有 API 密钥的 SVG。
这是开源的吗?
技能和插件在 GitHub 上采用 Apache-2.0 许可证,并且 skills.sh 列表通过了 Socket、Snyk 和 Gen Agent Trust Hub 安全审计。图标本身单独许可:免费使用需注明出处,SVG 属于付费计划。
我需要 API 密钥吗?
PNG 无需密钥即可使用,SVG 下载需要付费 API 密钥,可在账户的 MCP 选项卡中找到。
我请求 SVG 但得到的仍是 PNG
在 MCP 选项卡中完成 API 密钥设置,或明确请求 SVG 格式。
我应该请求什么图标尺寸?
该风格所绘制的尺寸:Simple Small 为 16px,Material 和 Windows 11 为 24px,iOS 为 30 到 50px,彩色风格为 48px 及以上。大尺寸风格缩小时细节会消失。你的代理可以告诉你任何风格所绘制的尺寸。
我可以批量下载图标吗?
暂时不行,但这正是我们目前正在积极开发的功能。
它支持 OpenAI Codex 吗?
支持。运行 codex plugin marketplace add icons8/agent-skills,然后从插件浏览器安装 icons8。MCP 服务器已捆绑,请参阅第 1 步。
需要帮助?
查看我们的文档或与我们在线聊天。