Generates usage examples for integrating Iconify icons into Astro projects.
Provides access to Iconify's collection of over 200,000 open-source vector icons from 200+ icon sets, enabling tools to browse, search, and retrieve icon metadata.
Enables searching and retrieval of specific icons from the Lucide icon set.
Enables searching and retrieval of specific icons from the Material Design Icons (MDI) collection.
Provides framework-specific usage examples for using Iconify icons within React applications.
Provides framework-specific usage examples for using Iconify icons within Svelte applications.
Offers code snippets and usage examples for integrating Iconify icons within Tailwind CSS.
Provides code snippets and usage examples for integrating Iconify icons with the UnoCSS engine.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Iconify MCP Serversearch for 'shopping cart' icons and show me the React code for one"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Iconify MCP Server
An MCP (Model Context Protocol) server that provides AI assistants with access to Iconify's extensive collection of over 200,000 open source vector icons from 200+ icon sets.
Features
Get all icon sets: Browse all available icon collections
Get specific icon set: Retrieve detailed information about a specific icon set
Search icons: Search through icons with flexible query parameters
Get icon data: Retrieve specific icon data with usage examples for popular frameworks
Installation
Install in Cursor
Go to: Settings -> Cursor Settings -> MCP -> Add new global MCP server
Pasting the following configuration into your Cursor ~/.cursor/mcp.json file is the recommended approach. You may also install in a specific project by creating .cursor/mcp.json in your project folder. See Cursor MCP docs for more info.
{
"mcpServers": {
"iconify": {
"command": "npx",
"args": ["-y", "iconify-mcp-server@latest"]
}
}
}Install in Claude Code
Run this command. See Claude Code MCP docs for more info.
claude mcp add iconify -- npx -y iconify-mcp-server@latestInstall in Windsurf
Add this to your Windsurf MCP config file. See Windsurf MCP docs for more info.
{
"mcpServers": {
"iconify": {
"command": "npx",
"args": ["-y", "iconify-mcp-server@latest"]
}
}
}Cursor One-Click Install
Usage
This MCP server runs as a stdio server and can be integrated with MCP-compatible clients.
Available Tools
get_all_icon_sets
Get a list of all available icon sets from Iconify.
Response: JSON object containing all icon collections with metadata.
get_icon_set
Retrieve detailed information about a specific icon set.
Parameters:
set(string): The icon set prefix (e.g., "mdi", "heroicons", "lucide")
Response: JSON object with icon set information including total icons, categories, etc.
search_icons
Search for icons across all or specific icon sets.
Parameters:
query(string): Search querylimit(number, optional): Maximum results (32-999, default: 64)start(number, optional): Starting index for paginationprefix(string, optional): Icon set prefix to limit search scope
Response: JSON array of matching icons with metadata.
get_icon
Get detailed information about a specific icon.
Parameters:
set(string): Icon set prefixicon(string): Icon name
Response: Icon data with usage examples for:
UnoCSS
Tailwind CSS
Iconify Icon web component
Vue (Iconify)
React (Iconify)
Svelte (Iconify)
Astro
Unplugin Icons
Build
bun run buildDevelopment
Prerequisites
Node.js >= 18.0.0
Bun runtime
Setup
Clone the repository:
git clone https://github.com/imjac0b/iconify-mcp-server.git
cd iconify-mcp-serverInstall dependencies:
bun installBuild the project:
bun run buildRun in development mode:
bun run dist/index.jsProject Structure
src/
├── index.ts # Main MCP server implementation
├── utils.ts # Utility functions
└── ...
dist/ # Built output
├── index.js # ES module build
├── index.cjs # CommonJS build
└── index.d.ts # TypeScript definitionsTesting
Test the MCP server using the MCP Inspector:
npx -y @modelcontextprotocol/inspector bun run dist/index.jsThis will open a web interface where you can test all available tools interactively.
Usage Examples
Get All Icon Sets
# This would be called by your MCP client
# Returns: JSON object with all available icon collections
get_all_icon_setsGet Specific Icon Set
# Get information about Material Design Icons
get_icon_set({"set": "mdi"})Search Icons
# Search for "home" icons across all sets
search_icons({"query": "home", "limit": 10})
# Search for "heart" icons in Lucide set only
search_icons({"query": "heart", "prefix": "lucide"})Get Icon Data
# Get detailed information about a specific icon
get_icon({"set": "heroicons", "icon": "home"})API Reference
All tools return structured JSON responses. See the tool definitions above for detailed parameter and response information.
Contributing
Fork the repository
Create a feature branch (
git checkout -b feature/amazing-feature)Commit your changes (
git commit -m 'Add some amazing feature')Push to the branch (
git push origin feature/amazing-feature)Open a Pull Request
License
This project is licensed under the GPL-3.0 License - see the LICENSE file for details.
Support
If you find this MCP server useful, please consider:
⭐ Starring the repository
🐛 Reporting bugs or issues
💡 Suggesting new features
🔗 Sharing with other developers
Changelog
v1.0.0
Initial release
Support for all major Iconify operations
Compatible with Cursor, Claude Code, and Windsurf
Comprehensive icon set and search functionality