Icon
Generate and manage professional-grade icons for diverse design needs. Simplifies the search for high-quality visual assets to streamline development workflows. Enhances user interface design with consistent and scalable imagery.
Ask AI about Icon
Powered by Claude ยท Grounded in docs
I know everything about Icon. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
๐จ mcp-icon
A Model Context Protocol (MCP) server for semantic SVG icon search.
Generate infographic SVG icons by keyword โ over 100,000 icons with semantic search support, powered by AntV Infographic.
๐ Table of Contents
โจ Features
- ๐ Semantic search โ Find icons by meaning, not just exact names
- ๐ผ๏ธ 100,000+ SVG icons โ A massive library of high-quality infographic icons
- โก Three transport modes โ
stdio,sse, andstreamable-http - ๐ชถ Minimal dependencies โ Clean, focused implementation
- ๐งช Fully tested โ Unit tests with Vitest
Available Tool
| Tool | Description |
|---|---|
search_icons | Search for SVG icons by keyword. Returns a list of SVG URLs matching the semantic query. |
search_icons parameters:
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
keyword | string | โ | โ | Search keyword or phrase (e.g. "data analysis", "cloud") |
topK | number | โ | 3 | Number of icons to return (1โ20) |
๐ค Usage
Add to your MCP client configuration (e.g. Claude Desktop, VS Code, Cursor):
macOS / Linux:
{
"mcpServers": {
"mcp-icon": {
"command": "npx",
"args": ["-y", "mcp-icon"]
}
}
}
Windows:
{
"mcpServers": {
"mcp-icon": {
"command": "cmd",
"args": ["/c", "npx", "-y", "mcp-icon"]
}
}
}
๐ฐ Transport Modes
mcp-icon supports three standard MCP transport protocols.
stdio (default)
Used by desktop MCP clients (Claude Desktop, Cursor, etc.):
npx mcp-icon
# or explicitly:
npx mcp-icon --transport stdio
SSE (Server-Sent Events)
npx mcp-icon --transport sse --port 3456
# Server available at: http://localhost:3456/sse
Streamable HTTP
npx mcp-icon --transport streamable --port 3456
# Server available at: http://localhost:3456/mcp
๐ฎ CLI Options
mcp-icon CLI
Options:
--transport, -t Transport protocol: "stdio", "sse", or "streamable" (default: "stdio")
--host, -h Host for SSE or streamable transport (default: localhost)
--port, -p Port for SSE or streamable transport (default: 3456)
--endpoint, -e Endpoint path:
- For SSE: default is "/sse"
- For streamable: default is "/mcp"
--help, -H Show this help message
๐จ Development
# Clone the repository
git clone https://github.com/hustcc/mcp-icon.git
cd mcp-icon
# Install dependencies
npm install
# Build
npm run build
# Run tests
npm test
# Start with MCP inspector (for local debugging)
npm start
Project Structure
src/
โโโ index.ts # CLI entry point
โโโ server.ts # MCP server + tool handlers
โโโ services/
โ โโโ stdio.ts # Stdio transport
โ โโโ sse.ts # SSE transport
โ โโโ streamable.ts # Streamable HTTP transport
โโโ tools/
โ โโโ search-icons.ts # Tool definition
โโโ utils/
โโโ api.ts # Icon search API client
โโโ logger.ts # Logger utility
tests/
โโโ api.test.ts # API client unit tests
โโโ server.test.ts # MCP server integration tests
๐ License
MIT ยฉ hustcc
