Svg/icons MCP

Svg/icons MCP

Svg/icons MCP 服务将 AI 编码工具连接到 svgicons.com，这是一个包含 320K+ 个开源 SVG 图标的目录。助手可以搜索图标和图标集、获取图标元数据，并为 UI 获取图标推荐，无需任何账户。使用 Pro 账户（OAuth 或限定范围的 API 令牌）后，还可以获取原始 SVG 标记、渲染 PNG 导出文件，以及创建、读取、扩展和导出持久化的 Icon Collections（包括自定义样式的图标），让图标发现流程始终留在开发工作流中。

该服务托管为基于 Streamable HTTP 的远程 MCP 服务（通过 HTTP POST 发送 JSON-RPC 请求）。无需本地安装，也没有本地 Svg/icons MCP 服务包。

端点：

https://svgicons.com/mcp

当前 MCP 服务版本：0.3.2（协议 2025-06-18）。

官方 MCP Registry 名称：com.svgicons/mcp — 请参阅官方 MCP Registry 列表。

此仓库包含的内容

此仓库介绍托管的 MCP 端点，不包含服务端代码。

• 客户端连接说明和配置参考
• 实时工具参考
• 身份验证和权限范围指南
• 提示词编写指南和提示词库
• 示例工作流文档
• 安全指南和故障排除
• 与 REST API 和 CLI 仓库的关系
• 社区用例模板

实时产品文档是权威信息来源：MCP 服务文档和 MCP 开发者概览。

实时 MCP 工具

托管端点恰好提供以下 12 个实时工具。

搜索和读取（匿名访问元数据；使用 Pro 获取原始 SVG）：

• search_icons — 按查询、类别或图标集前缀搜索图标元数据；添加 includeSvg 并使用 Pro 令牌即可获取原始 SVG。
• search_icon_sets — 按名称、前缀、作者、类别或描述搜索图标集，以选择风格一致的系列。
• get_icon — 按 ID 获取一个图标；元数据公开可用，获取原始 SVG 需要 Pro 令牌。

推荐（匿名访问）：

• recommend_icons_for_ui — 描述 UI 或屏幕，即可获取图标候选项及简短理由。

Icon Collections — 创建、读取、扩展（Pro）：

• create_icon_kit — 创建持久化的 Icon Collection，并可选择使用图标 ID 初始化。
• generate_icon_kit_for_project — 根据项目简介、屏幕列表或所需概念生成 Icon Collection。
• list_icon_collections — 列出你的 Icon Collections，并显示图标数量；支持按名称或 slug 筛选及分页。
• get_icon_collection — 读取一个集合及其分页条目，包括自定义图标条目及其自定义 SVG 内容。
• add_icons_to_collection — 向现有集合添加目录图标；操作具有幂等性，已存在的图标会被跳过。
• remove_icon_from_collection — 从集合中移除图标；默认精确移除指定条目，传入 allVariants: true 可移除该图标的所有条目。

导出（Pro）：

• export_icon_png — 将一个图标渲染为 PNG 文件或包含多个 PNG 变体的 ZIP，并以 JSON 安全的 base64 负载形式返回。
• export_icon_collection — 将 Icon Collection 导出任务加入队列：SVG 文件夹、SVG 精灵图、React/Vue/Svelte/Solid/Blade 组件、Storybook 图库、npm 包脚手架、PNG 包、Iconify JSON，以及 JSON/许可证清单。

请参阅 docs/TOOLS.md，了解经验证的输入字段、输出说明、访问要求和安全的提示词示例。

值得了解的导出行为

• 集合中的自定义图标条目会将自定义快照导出为唯一的派生文件名——自定义内容会保留，不会被目录图标替换。
• 如果未传递 colorPolicy，带有样式（已应用样式或包含自定义图标条目）的集合默认使用 preserve，因此导出文件会保留自定义内容定义的颜色。普通集合则默认使用 currentColor。显式指定的 colorPolicy 始终优先。
• 使用 formats: ["png"] 可简写为 png-pack。

访问级别与身份验证

匿名（无账户）： 仅可访问 search_icons、search_icon_sets、get_icon 和 recommend_icons_for_ui 的元数据。匿名请求按方法进行速率限制，目前每次搜索或推荐最多返回 10 个图标。匿名用户无法使用原始 SVG、PNG 导出和所有 Icon Collection 工具。

Pro： 可通过以下任一方式进行身份验证：

• OAuth 2.0 —— 使用带 PKCE 的授权码流程和 Dynamic Client Registration。客户端会从 https://svgicons.com/.well-known/oauth-authorization-server 发现配置（资源元数据位于 /.well-known/oauth-protected-resource/mcp），动态注册，然后引导你前往 svgicons.com 登录并批准访问。
• Pro API 令牌 —— 在账户页面创建带作用域的个人访问令牌，并在支持私有标头的客户端中以 Authorization: Bearer YOUR_API_TOKEN 发送。

Pro 会提高搜索上限（每次搜索最多 50 个图标），并解锁原始 SVG、PNG 导出、Icon Collection 及导出工具。

令牌作用域——为每个客户端授予其所需的最小权限集：

作用域	解锁内容
mcp:use	任何经过身份验证的 MCP 调用都必须具备此权限。
search:read	搜索工作流。
icons:read	原始 SVG 和 PNG 导出输入。
collections:read	列出和读取 Icon Collection。
collections:write	创建和扩展 Icon Collection。
exports:create	PNG 导出和 Icon Collection 导出工作流。

Pro Plan 的价格为每月 €6/$7，或终身 €69/$79——请参阅定价。在网站上，免费 Member 账户也可以通过一次性试用额度（15 个 Pro 积分）使用 Icon Collection；MCP 和 API 访问始终需要 Pro 令牌。

请参阅 docs/AUTHENTICATION.md 和 MCP 服务文档。

连接客户端

Claude Code

claude mcp add --transport http svgicons https://svgicons.com/mcp

然后在 Claude Code 中运行 /mcp，完成 OAuth 登录。若要改用 Pro API 令牌：

claude mcp add --transport http svgicons https://svgicons.com/mcp \
  --header "Authorization: Bearer YOUR_API_TOKEN"

Claude.ai 和 Claude Desktop（自定义连接器）

1. 打开 Customize → Connectors，然后点击 Add custom connector。
2. 输入 https://svgicons.com/mcp，然后点击 Add。
3. 完成 OAuth 提示，登录 svgicons.com（Dynamic Client Registration——无需客户端 ID）。
4. 在对话中通过 + 菜单 → Connectors 启用连接器。

Team/Enterprise 所有者可在 Organization settings → Connectors → Add → Custom → Web 中添加；成员随后可分别连接。

Cursor

项目级 .cursor/mcp.json 或全局 ~/.cursor/mcp.json：

{
  "mcpServers": {
    "svgicons": {
      "url": "https://svgicons.com/mcp"
    }
  }
}

省略 headers 即可使用 Cursor 的 OAuth 流程，或添加令牌：

{
  "mcpServers": {
    "svgicons": {
      "url": "https://svgicons.com/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_TOKEN"
      }
    }
  }
}

Windsurf

~/.codeium/windsurf/mcp_config.json：

{
  "mcpServers": {
    "svgicons": {
      "serverUrl": "https://svgicons.com/mcp"
    }
  }
}

省略 headers 即可使用 OAuth，或引用环境变量：

{
  "mcpServers": {
    "svgicons": {
      "serverUrl": "https://svgicons.com/mcp",
      "headers": {
        "Authorization": "Bearer ${env:SVGICONS_API_TOKEN}"
      }
    }
  }
}

VS Code（GitHub Copilot Agent 模式）

工作区 .vscode/mcp.json：

{
  "servers": {
    "svgicons": {
      "type": "http",
      "url": "https://svgicons.com/mcp"
    }
  }
}

ChatGPT 和 Codex

ChatGPT 通过 Dynamic Client Registration 使用 OAuth 进行身份验证；Codex 风格的客户端可以使用 Bearer 令牌。请按照网站指南操作：将 MCP 与 ChatGPT 和 Codex 搭配使用，另请参阅 configs/chatgpt-codex.md 和 configs/codex.example.md。

其他客户端

支持远程 HTTP MCP 服务的客户端可以使用通用格式连接：

{
  "mcpServers": {
    "svgicons": {
      "type": "http",
      "url": "https://svgicons.com/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_TOKEN"
      }
    }
  }
}

只能启动基于本地命令的 MCP 服务的客户端可以通过 mcp-remote 桥接：

{
  "mcpServers": {
    "svgicons": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://svgicons.com/mcp",
        "--header",
        "Authorization: Bearer ${SVGICONS_API_TOKEN}"
      ],
      "env": {
        "SVGICONS_API_TOKEN": "YOUR_API_TOKEN"
      }
    }
  }
}

更多客户端指南：docs/CLIENTS.md 和 configs/README.md。

官方 MCP 注册表条目

该服务已作为 com.svgicons/mcp 发布到官方 MCP 注册表。查看当前条目：

curl -s "https://registry.modelcontextprotocol.io/v0/servers?search=com.svgicons"

接入官方注册表的目录（例如 PulseMCP）会自动收录该条目。

从公开元数据开始

如需终端入门指南，请参阅 CLI 公开元数据快速入门。CLI 0.1.0 已于 2026 年 10 月 17 日在 Windows 上通过验证，可用于匿名搜索、元数据检查、系列筛选和分页。此验证仅针对 CLI 使用流程，不代表所有 MCP 客户端或经过身份验证的导出流程均已通过验证。

搜索和元数据功能不会下载原始 SVG 文件。从发现内容转向导出原始 SVG、PNG 或图标集，需要使用上文所述的 Pro 权限和访问范围。React filebar 示例使用的是经过本地调整的 Lucide 组件；这并不能证明已通过身份验证导出 Pro 图标集。

Agent 提示词示例

1. “帮我找一个适用于 16px 尺寸的简洁锁图标，并将它添加到应用的图标集。”
2. “为账单设置页面推荐图标——我需要付款方式、发票和退款相关概念——然后创建一个名为‘Billing UI’的图标集，并加入最合适的图标。”
3. “将我的‘Dashboard’图标集导出为 React TypeScript 组件，默认尺寸为 20px，并以 2x 密度下载 PNG 包。”

提示词库包含可复制的工作流，涵盖搜索、React 组件、仪表盘导航、表情符号替换、无障碍审查、可换主题的图标、设计系统审查、图标集和 PNG 导出。请先从搜索图标开始，检查工具调用和选定的图标后，再使用代码或导出提示词。

示例和使用场景

• 示例展示了实用的托管 MCP 工作流。这些是文档示例，不是可运行的本地 MCP 服务应用。
• 社区使用场景介绍了如何安全地分享工作流。
• 使用场景模板提供了可重复使用的提交格式。
• GitHub 问题模板支持提交使用场景、寻求设置帮助、反馈和错误报告。

示例使用场景均标记为示例，并非真实客户提交。提交更改前，请检查生成的 SVG 和代码。

验证

提出更改前，请运行本地检查：

npm ci
npm run validate

CI 会运行相同的验证，不会调用实时 MCP、使用身份验证令牌、发布或部署。

相关仓库和文档

• 网站 MCP 开发者页面：https://svgicons.com/developers/mcp
• MCP 服务文档：https://svgicons.com/docs/mcp-server
• ChatGPT 和 Codex 设置文档：https://svgicons.com/docs/chatgpt-codex-mcp-setup
• REST API 仓库：https://github.com/svgicons-com/api
• CLI 仓库：https://github.com/svgicons-com/cli

仓库职责：

• MCP 仓库：AI 编码工具工作流、托管 MCP 设置、提示词、示例、安全说明和故障排除。
• API 仓库：REST API、OpenAPI、SDK、示例和直接的程序化集成。
• CLI 仓库：终端工作流、导出自动化和项目命令。

请参阅 docs/API_RELATIONSHIP.md。

安全摘要

• 请勿将令牌粘贴到公开提示词、问题、截图、提交或仓库中。
• MCP 客户端支持时，请使用 OAuth。
• 仅在受支持的客户端中使用 bearer 令牌，并妥善保密。
• 为每个客户端仅授予其所需的最小权限范围，并撤销未使用的令牌。
• 批准前，请检查工具调用。
• 提交前，请检查 AI 生成的 SVG 和代码。
• 将插入 SVG 视为代码和内容插入。

请参阅 SECURITY.md 和 docs/SECURITY.md。

从这里开始

• 身份验证
• 工具
• 客户端设置概览
• 配置示例
• 故障排除
• API 关系
• MCP 安全
• 提示词指南
• 提示词库
• 示例
• 社区用例