MCP Integration
Use Unicon with Claude Desktop, Cursor, and other AI assistants via the Model Context Protocol. Search and generate icon components using natural language.
Quick Install
Add Unicon to your AI assistant with one click or command.
What is MCP?
Model Context Protocol (MCP) is an open protocol that enables AI assistants to connect to external tools and data sources. The Unicon MCP Server lets AI assistants search through 19,000+ icons and generate framework-specific components on demand.
Instead of manually searching for icons and copying code, you can simply ask your AI assistant: "Give me React components for home, settings, and user icons from Lucide" — and get production-ready code instantly.
How It Works
Desktop Apps (stdio)
Cloud IDEs (HTTP)
Desktop apps require a local bridge for stdio transport. Cloud IDEs connect directly via HTTP. Both methods provide the same functionality.
Quick Start: Claude Desktop
1Locate your config file
~/Library/Application Support/Claude/claude_desktop_config.json%APPDATA%\Claude\claude_desktop_config.json2Add Unicon to your config
{
"mcpServers": {
"unicon": {
"command": "npx",
"args": ["-y", "@webrenew/unicon-mcp-server"]
}
}
}3Restart Claude Desktop
Important
You must completely quit and restart Claude (not just close the window). On macOS, use Cmd+Q. On Windows, right-click the system tray icon and select "Quit".
✓Verify installation
Look for the 🔌 icon in the bottom right corner of Claude Desktop. Click it and you should see "unicon" in the list of MCP servers.
Quick Start: Claude Code (CLI)
Add the Unicon MCP server with a single command:
claude mcp add unicon -- npx -y @webrenew/unicon-mcp-server✓Verify installation
Run claude mcp list to verify "unicon" appears in your configured servers.
Quick Start: Cursor IDE
Easiest: Use the one-click install button at the top of this page to add Unicon to Cursor instantly.
1Open MCP settings
In Cursor, go to Settings → MCP Servers
2Add server configuration
{
"mcpServers": {
"unicon": {
"command": "npx",
"args": ["-y", "@webrenew/unicon-mcp-server"]
}
}
}3Restart Cursor
Completely restart Cursor for the changes to take effect.
Cloud IDEs (v0, Bolt, Lovable)
For cloud-based environments that support URL-based MCP connections, use the Streamable HTTP endpoint directly — no local installation required.
https://unicon.sh/api/mcpSupported Platforms
Why two methods? Desktop apps like Claude Desktop and Cursor require a local bridge (stdio transport). Cloud IDEs can connect directly via HTTP.
Usage Examples
🔍 Search for Icons
Try asking:
"Search for arrow icons in Lucide"
"Find dashboard icons"
"Show me social media icons from Simple Icons"
📦 Get Single Icon
Try asking:
"Get React component for lucide:arrow-right"
"Generate Vue component for heroicons:bell"
"Get SVG code for simple-icons:github"
🎨 Get Multiple Icons
Try asking:
"Give me React components for home, settings, and user icons from Lucide"
"Generate Svelte components for all arrow icons in Phosphor"
"Get Vue components for social media icons with size 32"
ℹ️ Get Information
Try asking:
"What icon libraries are available in Unicon?"
"How many icons does Unicon have?"
"What categories exist?"
Available Tools
search_icons
Search through 19,000+ icons using AI-powered semantic search.
get_icon
Retrieve source code for a specific icon in any format.
get_multiple_icons
Retrieve multiple icons in one request (max 50).
get_starter_pack
Get a curated starter pack of icons for common use cases.
Available Resources
unicon://sources
List all icon libraries with metadata (version, license, icon count).
unicon://categories
List all available icon categories for filtering.
unicon://stats
Get library statistics including total icon count and breakdown by source.
unicon://starter_packs
List available starter packs with their icons for common use cases.
Troubleshooting
Server not appearing in Claude/Cursor
1. Verify your JSON config is valid (no trailing commas)
2. Completely restart the application (Cmd+Q on Mac)
3. Check Developer Console for errors
4. Try running manually: npx -y @webrenew/unicon-mcp-server
Icon not found
1. Verify icon ID format: source:icon-name (all lowercase)
2. Use search_icons tool first to find the exact ID
3. Check icon exists at unicon.sh
Slow responses
First request may be slower due to cold start (npx downloading the package)
Subsequent requests should be fast
Check your internet connection
Advanced Configuration
Local Development
Point to a local Unicon instance for development:
{
"mcpServers": {
"unicon": {
"command": "npx",
"args": ["-y", "@webrenew/unicon-mcp-server"],
"env": {
"UNICON_API_URL": "http://localhost:3000/api/mcp"
}
}
}
}