MCP Icon Visual

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

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "mcp-icon-visual": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-icon-visual"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

mcp-icon-visual

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("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.

Code

                          ┌─────────────────────────────┐
                          │        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.

Code

         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.

Code

  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:

Search across multiple keywords (pipeline 1)
Compare top candidates against existing project icons (pipeline 3)
Edit the closest match to fix style inconsistencies (pipeline 2)
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.

Parameter	Type	Default	Description
`keyword`	string	required	Semantic search query (e.g. `"cloud computing"`, `"arrows"`)
`background`	string	`"#FFFFFF"`	Grid background color, CSS hex
`color`	string \| null	`null`	Recolor 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.

Parameter	Type	Description
`source`	string	URL, 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.

Parameter	Type	Default	Description
`sources`	string[]	required	1-16 SVG sources (URLs, Iconify IDs, file paths, or inline SVGs)
`background`	string	`"#FFFFFF"`	Grid background color, CSS hex

Source Resolution

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

Source type	Example	Resolution
Inline SVG	`<svg xmlns="...">...</svg>`	Returned as-is
URL	`https://mdn.alipayobjects.com/.../original`	Resolved via API
File path	`/home/user/icons/logo.svg`	Read from local disk
Iconify ID	`mdi/cloud`, `lucide/home`	Resolved 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:

Code

┌────┬────┬────┬────┐
│  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).

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about MCP Icon Visual

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "mcp-icon-visual": { "command": "npx", "args": ["-y", "mcp-icon-visual"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/mcp-icon-visual?style=directory)](https://allmcps.com/mcp/mcp-icon-visual)

HTML Embed

<a href="https://allmcps.com/mcp/mcp-icon-visual"><img src="https://allmcps.com/api/badge/mcp-icon-visual?style=directory" alt="MCP Icon Visual on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

27Quality signal: Emerging · 27/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership8/20

Documentation & tools11/30

Adoption & activity1/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

★ Featured

AllMCPs Server

The official MCP server for AllMCPs.com - submit and manage tools directly from your AI. The open directory for MCP servers. Connect Claude, Cursor, Windsurf, and AI agents to databases, tools, files, and APIs. Explore 10,000+ servers. AllMCPs is the premier, open directory for discovering, evaluating, and installing Model Context Protocol (MCP) servers to equip AI agents and LLMs with real-world superpowers.

Explore Server →

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge and attach your website — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to MCP Icon Visual →Install in Claude Desktop Install in Cursor Install in VS Code

MCP Icon Visual

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

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "mcp-icon-visual": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-icon-visual"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

mcp-icon-visual

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("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.

Code

                          ┌─────────────────────────────┐
                          │        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
                              └──────────────────┘

2. Iterative Icon Editing

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

Code

         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

3. Style Matching & Consistency

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

Code

  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:

Search across multiple keywords (pipeline 1)
Compare top candidates against existing project icons (pipeline 3)
Edit the closest match to fix style inconsistencies (pipeline 2)
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.

Parameter	Type	Default	Description
`keyword`	string	required	Semantic search query (e.g. `"cloud computing"`, `"arrows"`)
`background`	string	`"#FFFFFF"`	Grid background color, CSS hex
`color`	string \| null	`null`	Recolor 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.

Parameter	Type	Description
`source`	string	URL, 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.

Parameter	Type	Default	Description
`sources`	string[]	required	1-16 SVG sources (URLs, Iconify IDs, file paths, or inline SVGs)
`background`	string	`"#FFFFFF"`	Grid background color, CSS hex

Source Resolution

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

Source type	Example	Resolution
Inline SVG	`<svg xmlns="...">...</svg>`	Returned as-is
URL	`https://mdn.alipayobjects.com/.../original`	Resolved via API
File path	`/home/user/icons/logo.svg`	Read from local disk
Iconify ID	`mdi/cloud`, `lucide/home`	Resolved 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:

Code

┌────┬────┬────┬────┐
│  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).

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about MCP Icon Visual

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "mcp-icon-visual": { "command": "npx", "args": ["-y", "mcp-icon-visual"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/mcp-icon-visual?style=directory)](https://allmcps.com/mcp/mcp-icon-visual)

HTML Embed

<a href="https://allmcps.com/mcp/mcp-icon-visual"><img src="https://allmcps.com/api/badge/mcp-icon-visual?style=directory" alt="MCP Icon Visual on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

27Quality signal: Emerging · 27/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership8/20

Documentation & tools11/30

Adoption & activity1/15

Community engagement0/10

★ Featured

AllMCPs Server

Explore Server →

Own this project?

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to MCP Icon Visual →Install in Claude Desktop Install in Cursor Install in VS Code