mcpField
I
Icons8 MCP Server

Icons8 MCP Server

本地服务
github.com/icons8开发工具173 周前更新

关于 Icons8 MCP Server

Icons8 MCP Server 为 AI 编码环境提供搜索和获取 Icons8 图标的远程 MCP 服务,适用于原型制作和界面开发。登录后可获取高分辨率 PNG;付费方案还开放 SVG 工具。

主要功能

  1. 01搜索图标
  2. 02列出类别和平台
  3. 03获取高分辨率 PNG
  4. 04付费方案提供 SVG 获取
  5. 05通过 OAuth 或 API 密钥认证

适用场景

  1. 01在 IDE 中为界面添加图标
  2. 02先用 PNG 预览,再为生产用途获取 SVG
  3. 03在构建服务器或 CI 中通过 API 密钥访问图标

MCP 相关

该服务通过 Streamable HTTP 远程端点连接 MCP 客户端,提供图标搜索、类别和平台列表及 PNG 获取工具;付费方案还提供 SVG 工具。

配置

本地服务的配置在各客户端中通用,复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
"mcpServers": {
"icons8": {
"command": "npx",
"args": [
"-y",
"mcp-remote"
]
}
}
}
启动命令npx -y mcp-remote

本地服务需要在你的电脑上安装运行环境(如 Node.js 18+)。各客户端的配置文件位置不同,请参考客户端文档。

安装包
npmmcp-remote

工具

4

收录的工具列表 · 更新于 3 周前

参数类型必填说明
querystring是
platformstring否
categorystring否
amountinteger否
offsetinteger否

详细介绍

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 传输方式。客户端可直接连接该端点,无需安装本地进程,也无需在编辑器旁运行任何程序。

前提条件
  1. 兼容 MCP 的编辑器或 Agent 主机(Claude Code、Cursor、Windsurf、VS Code 等)。
  2. 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

  1. 打开终端并运行:
    claude mcp add --transport http icons8mcp https://mcp.icons8.com/mcp/
    
  2. 确认服务已注册,然后使用 /mcp 登录:
    claude mcp list
    
    登录前,状态显示为 Needs authentication,这表示端点已响应,并不意味着配置有误。

Codex

  1. 添加服务并登录:
    codex mcp add icons8mcp --url https://mcp.icons8.com/mcp/
    codex mcp login icons8mcp
    

Cursor

  1. Cursor → Settings → Cursor Settings → MCP 选项卡。
  2. 点击 + Add new global MCP server。
  3. 粘贴步骤 1 中的 JSON,然后点击 Connect 登录。

Windsurf

  1. Windsurf → Settings → Windsurf Settings → MCP 部分。
  2. Manage plugins → View raw config。
  3. 粘贴 JSON 配置并保存。

VS Code(Agent 模式)

  1. Code → Settings → Settings → 搜索“MCP”。
  2. 选择 Edit in settings.json。
  3. 添加 JSON 配置。
  4. 打开聊天工具栏(⌥⌘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。

致谢

评论

支持 Markdown

第一次接触 MCP?

从协议是什么,到在客户端里装上第一个服务,这几条回答覆盖了大多数入门问题。

一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。