Universal SVG Icons MCP Server

A production-ready Model Context Protocol (MCP) server that gives LLMs (like Claude & Gemini) instant access to 60,000+ SVG icons from 10 popular, open-source collections.

It features fuzzy search, automatic AI fallbacks, Tailwind CSS class injection, and React/JSX support, making it the perfect companion for frontend coding with AI.

✨ Features

• 🔍 Smart Search: Fuzzy matching finds user-profile even if you type user profile.
• 🛡️ Bulletproof Reliability: Automatic rate limiting and AI fallback system if the API times out.
• 🎨 Tailwind Ready: Automatically injects w-6 h-6 and currentColor (or custom classes).
• 🛠️ 10+ Collections Supported:
  • material (Google Material Symbols)
  • lucide (Clean, modern, shadcn/ui standard)
  • heroicons (Tailwind Labs)
  • tabler, phosphor, fontawesome, feather, bootstrap, remix, iconoir
• ⚛️ React/JSX Support: Outputs generic SVG or JSX-ready code (camelCase attributes).

📦 Installation

Quick Install (Claude Code CLI)

Run this single command:

claude mcp add universal-icons -- npx -y mcp-universal-icons

Claude Desktop App

Add this to your claude_desktop_config.json:

Mac: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "icons": {
      "command": "npx",
      "args": ["-y", "mcp-universal-icons"]
    }
  }
}

Google Gemini CLI

You can install it directly from the repository or via NPM:

Git Extension (Recommended)

gemini extensions install https://github.com/awssat/mcp-universal-icons

Manual via NPM

gemini mcp add universal-icons npx -y mcp-universal-icons

Cursor / Other MCP Clients

• Command: npx
• Args: -y mcp-universal-icons

🚀 How to Use

Once installed, just ask your AI naturally.

Examples

1. Basic Usage

"Give me a rounded home icon from Material symbols."

2. With Tailwind CSS

"I need a user profile icon using Lucide. Make it w-8 h-8 text-blue-500."

3. Searching

"Search for an icon representing 'speed' or 'fast' in the Tabler collection."

4. React/JSX

"Get me a settings icon formatted for React (JSX)."

🛠️ Tools Available

get_icon

Fetches the raw SVG code.

• icon_name: Name of the icon (e.g., home, arrow-right).
• collection: lucide (default), material, heroicons, tabler, phosphor, etc.
• variant: Style variant (e.g., sharp, solid, outline).
• classes: CSS classes to inject (e.g., w-6 h-6).
• format: svg (default), jsx, or data-uri.

search_icons

Searches for icons when you don't know the exact name.

• query: Search keywords (e.g., "analytics graph").
• collection: Which set to search in.

health_check

Verifies connectivity to the Iconify API.

⚖️ License & Commercial Usage

This MCP server is MIT Licensed (permissive).

The icons themselves are provided under their respective open-source licenses. All supported collections are safe for commercial projects.

| Collection | License | Commercial? | Attribution? | |------------|---------|:-----------:|:------------:| | Material Symbols | Apache 2.0 | ✅ Yes | No | | Lucide | ISC / MIT | ✅ Yes | No | | Heroicons | MIT | ✅ Yes | No | | Tabler | MIT | ✅ Yes | No | | Phosphor | MIT | ✅ Yes | No | | Feather | MIT | ✅ Yes | No | | Bootstrap | MIT | ✅ Yes | No | | Remix Icon | Apache 2.0 | ✅ Yes | No | | Iconoir | MIT | ✅ Yes | No | | FontAwesome 6 | CC BY 4.0 | ✅ Yes | Required* |

*FontAwesome Free requires attribution (e.g., in a footer or "About" page).

Note: This tool simply fetches official SVGs from the Iconify API. It does not modify license terms.

📄 License

MIT © awssat