Mcp Icon Visual

io.github.n0isy由 GitHub 账号 n0isy 发布v0.1.1更新于 Oct 24, 2026

Search, retrieve, compare, and render SVG icons visually for AI agents.

已验证STDIO仅桌面开发者工具媒体与设计

概览

AI 生成的概览

一个本地 MCP 服务器，让具备视觉能力的助手搜索、获取、比较 SVG 图标，并以 PNG 网格形式可视化渲染。

可以做什么
按关键词搜索图标，返回 4x4 PNG 网格，并给出单元格编号到 SVG 链接的对应关系，让助手凭视觉挑选而非盲选。从 URL、Iconify ID、本地文件路径或内联 SVG 字符串获取原始 SVG 标记。将 1 至 16 个 SVG 来源渲染到 512x512 的对比网格上，背景色可配置，用于并排比较风格或迭代修改。
适用场景
适合具备视觉能力的助手为界面挑选图标、让新图标匹配项目既有视觉风格，或在多轮迭代中对比 SVG 修改效果。由于工具返回的是图片，对纯文本模型用处不大。
运行要求
以 stdio 在本地运行，通常通过 npx 使用 npm 包，或使用 Rust 编译的二进制文件。需要访问远程图标渲染 API 的网络连接（默认上游服务，或通过 api-base 参数指定自定义端点）。未声明需要账号、API 密钥或环境变量。
安装前请注意
传入文件路径时服务器会读取本地文件，磁盘上的 SVG 可能因此暴露给助手和远程渲染 API。图标来源和内联 SVG 内容会发送给第三方渲染服务；如有顾虑，可改用自定义端点。

安装

在 SourceWeft 中

  1. 打开 控制台中的 Mcp Icon Visual，将其添加到工作区。
  2. 为需要使用其工具的对话启用该服务。

Desktop only，通过 STDIO。 STDIO 服务会启动本地进程，因此需要 SourceWeft 桌面宿主。

其他 MCP 客户端

参照 仓库 中的启动说明。

README

mcp-icon-visual

[MCP Registry] [npm] [License: MIT]

MCP server that gives AI agents the ability to search, retrieve, compare, and render SVG icons. Built with Rust and the rmcp SDK.

Combines local filesystem access with a remote rendering API to resolve SVGs from any source — inline strings, URLs, local files, or Iconify IDs — and render them onto visual comparison grids.

The key insight: every tool returns images. A vision-capable LLM doesn't just get metadata — it sees the icons. This turns icon selection from guesswork into a visual conversation.

[search_icons result for 'machine learning' — 4x4 grid with 16 icons]
search_icons("machine learning") — 4x4 grid, cells 0–15, returned as PNG

Agent Pipelines

These tools are designed to be composed by AI agents with vision. Below are three proven patterns.

1. Visual Search & Selection

An agent searches for icons and visually picks the best match — no blind URL selection.

                          ┌─────────────────────────────┐                          │        Agent + Vision        │                          └──────────────┬──────────────┘                                         │                        ┌────────────────┼────────────────┐                        v                v                v                  search_icons     search_icons     search_icons                  "cloud"          "upload"          "storage"                        │                │                │                        v                v                v                  ┌──────────┐    ┌──────────┐    ┌──────────┐                  │ 4x4 grid │    │ 4x4 grid │    │ 4x4 grid │                  │  (sees)  │    │  (sees)  │    │  (sees)  │                  └────┬─────┘    └────┬─────┘    └────┬─────┘                       │               │               │                       └───────────────┼───────────────┘                                       v                              "cells 3, 7, 12 match                               the project style"                                       │                                       v                               render_grid [3 winners]                                       │                                       v                              ┌──────────────────┐                              │  final comparison │                              │   grid (sees)     │──> pick best                              └──────────────────┘

The agent runs multiple searches, looks at each grid, picks candidates by cell number, then renders a final side-by-side comparison to make the choice. Works especially well when the agent has context about the project's visual style.

2. Iterative Icon Editing

An agent modifies SVG code and uses render_grid as a visual diff to track progress across iterations.

         get_svg "mdi/cloud"                │                v          ┌───────────┐          │ raw SVG    │          │ markup     │          └─────┬─────┘                │       ┌────────┴─────────────────────────────────────┐       │              Edit Loop                        │       │                                               │       │   Agent modifies SVG code                     │       │        │                                      │       │        v                                      │       │   render_grid [original, v1, v2, v3]          │       │        │                                      │       │        v                                      │       │   ┌──────────────────────────────┐            │       │   │ cell 0: original             │            │       │   │ cell 1: thicker strokes      │            │       │   │ cell 2: rounded corners      │            │       │   │ cell 3: filled variant       │            │       │   └──────────────┬───────────────┘            │       │                  │                            │       │        agent sees all versions                │       │        decides next edit                      │       │                  │                            │       │                  └──── loop ──────────────────┘       │       v  save final SVG to disk

Each iteration, the agent passes all versions (original + edits) as inline SVGs to render_grid. It sees them side-by-side in one image and decides whether to keep iterating or stop. The original always stays in cell 0 as a reference.

3. Style Matching & Consistency

An agent ensures new icons match the visual style of existing project icons.

  Project icons on disk             Candidate sources  ─────────────────────             ─────────────────  /app/icons/nav-home.svg           search_icons "settings"  /app/icons/nav-search.svg              │  /app/icons/nav-profile.svg             v          │                        picks cells 2, 5, 9          │                              │          └──────────┬───────────────────┘                     v              render_grid [                /app/icons/nav-home.svg,      ← cell 0: existing                /app/icons/nav-search.svg,    ← cell 1: existing                /app/icons/nav-profile.svg,   ← cell 2: existing                candidate_url_1,              ← cell 3: candidate                candidate_url_2,              ← cell 4: candidate                candidate_url_3,              ← cell 5: candidate                "<svg>...custom edit...</svg>" ← cell 6: agent's edit              ]                     │                     v              ┌────────────────────────────────┐              │ grid image:                     │              │  existing icons  vs  candidates │              │  (agent sees style match/clash) │              └────────────────┬───────────────┘                               │                      agent judges:                  "cell 4 matches stroke weight                   and corner radius of cells 0-2,                   cell 3 is too thin,                   cell 5 wrong fill style"                               │                               v                       get_svg cell_4_url                               │                               v                    save to /app/icons/nav-settings.svg

By mixing local file paths and remote sources in a single grid, the agent can visually compare existing project icons against candidates in one shot. The grid becomes a style audit tool.

Combining Pipelines

These patterns compose naturally. A real-world workflow might:

  1. Search across multiple keywords (pipeline 1)
  2. Compare top candidates against existing project icons (pipeline 3)
  3. Edit the closest match to fix style inconsistencies (pipeline 2)
  4. Verify the final icon one more time against the full icon set (pipeline 3)

All driven by a single agent with vision, using three tools.

Tools

search_icons

Semantic icon search. Returns a 4x4 PNG grid (512x512, cells 0-15) and a mapping of cell numbers to SVG URLs.

ParameterTypeDefaultDescription
keywordstringrequiredSemantic search query (e.g. "cloud computing", "arrows")
backgroundstring"#FFFFFF"Grid background color, CSS hex
colorstring | nullnullRecolor all icons to this CSS hex color

get_svg

Retrieve raw SVG markup from any source. Returns the complete SVG string for inspection or modification.

ParameterTypeDescription
sourcestringURL, Iconify ID (mdi/cloud), absolute file path, or inline <svg>

render_grid

Render 1-16 SVGs onto a 4x4 comparison grid (512x512, cells 0-15). Useful for comparing icon variants side-by-side or previewing local icons alongside search results.

ParameterTypeDefaultDescription
sourcesstring[]required1-16 SVG sources (URLs, Iconify IDs, file paths, or inline SVGs)
backgroundstring"#FFFFFF"Grid background color, CSS hex

Source Resolution

All tools share a unified resolution pipeline that classifies sources automatically:

Source typeExampleResolution
Inline SVG<svg xmlns="...">...</svg>Returned as-is
URLhttps://mdn.alipayobjects.com/.../originalResolved via API
File path/home/user/icons/logo.svgRead from local disk
Iconify IDmdi/cloud, lucide/homeResolved via API

File paths are detected by prefix (/, ./, ~/) or .svg extension. Everything else without http:///https:// is treated as an Iconify ID.

Grid Format

All grid outputs are 512x512 PNG images with a 4x4 layout (128x128 cells), numbered 0-15 left-to-right, top-to-bottom:

┌────┬────┬────┬────┐│  0 │  1 │  2 │  3 │├────┼────┼────┼────┤│  4 │  5 │  6 │  7 │├────┼────┼────┼────┤│  8 │  9 │ 10 │ 11 │├────┼────┼────┼────┤│ 12 │ 13 │ 14 │ 15 │└────┴────┴────┴────┘

Cell numbers appear at the bottom-left of each cell. Unused cells show the number only.

Installation

npx (recommended)

No build needed. Works on Linux (x64/arm64), macOS (Intel/Apple Silicon), and Windows (x64).

json
{  "mcpServers": {    "icon-visual": {      "command": "npx",      "args": ["-y", "@br-ai-n/mcp-icon-visual"]    }  }}

From source

Requires Rust (edition 2024):

bash
cargo build --release --target x86_64-unknown-linux-musl

The release profile produces a fully static binary (musl libc, rustls-tls, LTO, stripped).

Usage

bash
# Default upstream API./mcp-icon-visual
# Custom API endpoint./mcp-icon-visual --api-base http://localhost:3000

The server communicates over stdio using the MCP protocol.

MCP Client Configuration

Claude Desktop / Cursor

json
{  "mcpServers": {    "icon-visual": {      "command": "npx",      "args": ["-y", "@br-ai-n/mcp-icon-visual"]    }  }}

Custom API endpoint

json
{  "mcpServers": {    "icon-visual": {      "command": "/path/to/mcp-icon-visual",      "args": ["--api-base", "http://localhost:3000"]    }  }}

Project Structure

src/├── main.rs           # Entrypoint, CLI args, stdio transport├── server.rs         # IconServer + MCP tool routing + response builders├── api_client.rs     # HTTP client for upstream rendering API├── resolve.rs        # Source classification and SVG resolution├── error.rs          # Error types└── tools/    ├── mod.rs    ├── search_icons.rs   # SearchIconsParams    ├── get_svg.rs        # GetSvgParams    └── render_grid.rs    # RenderGridParams

Testing

bash
# Unit tests (source classification)cargo test
# Integration tests (requires network access to icons.buan.me)cargo test -- --ignored

Dependencies

CratePurpose
rmcpMCP server SDK (tool routing, stdio transport)
tokioAsync runtime
reqwestHTTP client (rustls-tls, no OpenSSL)
serde / serde_jsonSerialization
schemarsJSON Schema generation for tool parameters
clapCLI argument parsing
base64Base64 encoding
tracingLogging
thiserrorError derive macros

License

MIT License

Copyright (c) 2025

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

来源：README.md，提交 92d593c

工具

0
SourceWeft 尚未在沙箱中启动过该软件包，因此其工具未知。

版本历史

1
  1. v0.1.1最新Sep 16, 2026

评分

已满足适用检查项的 40%

该评分衡量此收录条目的完整程度，依据注册中心条目、端点与公开来源计算得出。它不是对服务器本身的评价，也不表示服务器安全或当前可用：可连通性是带日期的检查结果，评分也不包含安装量或用户评价。

  • 近 30 天内可连通25 分

    请保持端点能够响应 MCP 握手；SourceWeft 每 30 天探测一次。

  • 已声明认证方式10 分

    请在注册中心条目中声明凭据请求头，或保持端点能够响应探测，以便判定其认证方式。

  • 已列出工具15 分

    请让服务器在无凭据时响应 tools/list，或发布可在沙箱中无凭据启动的软件包。

  • 描述必需15 分
  • 图标10 分
  • 文档15 分
  • 许可证10 分

    请在仓库或注册中心条目中声明许可证。