关于 Icons8 MCP Server
Icons8 MCP Server 为 AI 编码环境提供搜索和获取 Icons8 图标的远程 MCP 服务,适用于原型制作和界面开发。登录后可获取高分辨率 PNG;付费方案还开放 SVG 工具。
主要功能
- 01搜索图标
- 02列出类别和平台
- 03获取高分辨率 PNG
- 04付费方案提供 SVG 获取
- 05通过 OAuth 或 API 密钥认证
适用场景
- 01在 IDE 中为界面添加图标
- 02先用 PNG 预览,再为生产用途获取 SVG
- 03在构建服务器或 CI 中通过 API 密钥访问图标
MCP 相关
该服务通过 Streamable HTTP 远程端点连接 MCP 客户端,提供图标搜索、类别和平台列表及 PNG 获取工具;付费方案还提供 SVG 工具。
配置
本地服务的配置在各客户端中通用,复制后粘贴到客户端的 MCP 配置文件即可。
工具
4收录的工具列表 · 更新于 3 周前
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| query | string | 是 | |
| platform | string | 否 | |
| category | string | 否 | |
| amount | integer | 否 | |
| offset | integer | 否 |
详细介绍
Icons8 MCP 服务
Icons8 MCP Server 可让 AI 编码环境即时访问 420,000 多个 Icons8 图标,涵盖 130 多种设计风格,以及 340 多种风格的 110,000 多幅插画。连接 Claude、Cursor、Windsurf、VS Code 或任意 MCP 主机,登录一次,即可免费获取高清 PNG;也可以升级付费方案,获取完整的 SVG 文件,适用于原型设计、生产代码和快速 UI 实验。
使用场景
- 将现有项目中的整套图标替换为风格统一、紧跟潮流的图标。
- 无需离开 IDE,即可在项目符号列表、功能亮点、流程步骤和仪表板中添加图标。
- 使用免费的 PNG 预览快速制作原型,再升级为适用于生产环境的 SVG 资源。
- 构建 AI 辅助工作流,直接在代码中搜索、预览并插入图标。
- 使用现成的演示展示交互效果,例如下落的表情符号、科幻风格仪表板和产品目录。
工作原理
Icons8 MCP 端点托管于 https://mcp.icons8.com/mcp/,采用 MCP Streamable HTTP
传输方式。客户端可直接连接该端点,无需安装本地进程,也无需在编辑器旁运行任何程序。
前提条件
- 兼容 MCP 的编辑器或 Agent 主机(Claude Code、Cursor、Windsurf、VS Code 等)。
- Icons8 账户。服务通过 OAuth 进行身份验证,因此首次连接时会打开浏览器并提示你登录。
步骤 1:连接
一份配置即可满足所有需求。将客户端指向该端点:
{
"mcpServers": {
"icons8mcp": {
"type": "http",
"url": "https://mcp.icons8.com/mcp/"
}
}
}
浏览器打开后登录,即可开始搜索并获取高清 PNG。你会看到四个工具:
search_icons、list_categories、list_platforms 和 get_icon_png_url。
步骤 2:按需解锁 SVG
SVG 是适用于生产环境的格式,需要付费方案才能使用。订阅,费用为 $15
后,已登录的账户会自动关联该方案,无需添加另一个服务,也无需切换配置。第五个工具 get_icon_svg 会与其他四个工具一同显示。
如果你的 Agent 仍返回 PNG,请重新登录以获取新方案:在 Claude Code 中运行 /mcp,
在 Codex 中运行 codex mcp login icons8mcp,或在 Cursor 中点击 Connect。
不支持 OAuth 的客户端
改为发送 API 密钥。Icons8 账户的 MCP 选项卡中已包含你的密钥片段,也可以手动添加请求头:
{
"mcpServers": {
"icons8mcp": {
"type": "http",
"url": "https://mcp.icons8.com/mcp/",
"headers": {
"Authorization": "Bearer YOUR_API_KEY"
}
}
}
}
使用密钥即可完全跳过浏览器。这也适用于构建服务器或 CI 等无人登录的场景。之前已经用密钥配置过?无需更改,仍可继续使用。
配置客户端
Claude Code
- 打开终端并运行:
claude mcp add --transport http icons8mcp https://mcp.icons8.com/mcp/ - 确认服务已注册,然后使用
/mcp登录:
登录前,状态显示为claude mcp listNeeds authentication,这表示端点已响应,并不意味着配置有误。
Codex
- 添加服务并登录:
codex mcp add icons8mcp --url https://mcp.icons8.com/mcp/ codex mcp login icons8mcp
Cursor
- Cursor → Settings → Cursor Settings → MCP 选项卡。
- 点击 + Add new global MCP server。
- 粘贴步骤 1 中的 JSON,然后点击 Connect 登录。
Windsurf
- Windsurf → Settings → Windsurf Settings → MCP 部分。
- Manage plugins → View raw config。
- 粘贴 JSON 配置并保存。
VS Code(Agent 模式)
- Code → Settings → Settings → 搜索“MCP”。
- 选择 Edit in settings.json。
- 添加 JSON 配置。
- 打开聊天工具栏(
⌥⌘B),切换到 Agent 模式,并在 MCP Server: Icons8 MCP 下查找工具。如果工具没有立即显示,请重启 VS Code。
其他 MCP 主机
使用步骤 1 中的相同 JSON。若主机支持 OAuth,它会引导你完成登录;否则,请添加上文所示的 Authorization 标头。请查阅主机文档,了解在哪里粘贴 MCP 服务设置。
不同主机对这种传输方式的名称各不相同,可能称为 http、streamable-http,或在重命名前就已存在的客户端中称为 SSE。它们都表示通过 HTTP 访问同一个远程端点,因此请选择主机提供的任一选项,并填入上方的 URL。
开始使用图标构建
向 AI 助手描述你需要的图标,例如:“创建一个使用彩色风格 SVG 图标的分析仪表板”,或“添加 iOS 字形风格的 MCP 服务图标 SVG”。浏览下方的在线演示获取灵感;如果遇到问题,请查看 FAQ。
在线演示
常见问题
我的客户端提示服务需要身份验证。出问题了吗?
没有——这是登录前的正常状态。端点已响应,正在等待你登录。在 Claude Code 中使用 /mcp,在 Codex 中使用 codex mcp login icons8mcp,或在 Cursor 中点击 Connect。
如何获取 SVG 图标?
在提示词中明确要求 SVG 图标,并确保连接关联了付费套餐——可以是你登录所用的账户,也可以是 Authorization 标头中的 API 密钥。
有哪些格式可用?
PNG 在所有套餐中均可使用。下载 SVG 需要付费套餐。
我可以免费下载 PNG 图标吗?
可以。登录后即可免费获取高分辨率 PNG;无需付费套餐或 API 密钥。
免费套餐的许可条款是什么?
免费使用 PNG 时,需要注明来源并附上指向 Icons8 的链接。详情请参阅 Icons8 许可协议。
我需要 API 密钥吗?
只有在客户端不支持 OAuth,或在无人登录的构建服务器上才需要。
其他情况下,登录即可替代密钥——关联套餐的是账户,而不是密钥。
我请求了 SVG,却收到 PNG。怎么回事?
只有连接使用付费套餐时才会显示 get_icon_svg,因此 Agent 回退到了 PNG。如果你是在连接后订阅的,请重新登录以启用新套餐,然后明确请求 SVG。
我还需要 Node.js 或 npx mcp-remote 吗?
不需要。该服务使用 Streamable HTTP,因此客户端可以直接连接。如果你已有旧版 npx mcp-remote 配置,它仍然可用,但也可以替换为上面的纯 URL。
我可以批量下载图标吗?
批量下载功能正在开发中——敬请期待。
需要帮助?
请查看上面的设置步骤,或联系我们。
更多 Icons8 资源
图标只是起点——Icons8 还提供 110,000 多款插画,涵盖 340 多种风格(3D Casual Life、Cherry、3D Stickle),以及用于制作完整图形的 Mega Creator。
致谢
- Product Hunt“每日最佳产品”发布认可。
- © 2025 Icons8——条款、隐私和支持链接请见 icons8.com。
评论
一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。