Iconify SVG MCP server

This MCP server allows you to retrieve SVG icons from the Iconify API directly through Large Language Models (LLMs), eliminating the need to manually search and copy icons from websites. It streamlines your workflow by letting you request icons through simple text prompts.

Installation

Installing via Smithery

You can install the Pickapicon MCP for Claude Desktop automatically using Smithery:

npx -y @smithery/cli install @Leee62/pickapicon-mcp --client claude

Manual Configuration

To configure the MCP server manually, add the following to your MCP server configuration:

"mcpServers": {
  "pickapicon-mcp": {
    "type": "stdio",
    "command": "npx",
    "args": [
      "-y",
      "pickapicon-mcp@latest"
    ],
    "env": {
      "PREFIX": "<LIKE ant-design>"
    }
  }
}

Replace <LIKE ant-design> with your preferred icon set prefix, such as "ant-design", "mdi", etc.

Usage

The MCP server provides three main tools to help you work with icons:

Get Icon Repositories

This tool retrieves all available icon repository names, which you can use as prefixes for other tools.

Get Icons by Description and Prefix

This tool helps you find icons based on a text description:

• Required inputs:
  • desc: Description of the icon you want
  • prefix (optional): Icon set prefix (defaults to the value in your environment configuration)

Get Icon Detail by Prefix and Name

This tool retrieves the actual SVG code for a specific icon:

• Required inputs:
  • svg_name: The name of the SVG icon
  • prefix (optional): Icon set prefix (defaults to the value in your environment configuration)

Examples

Finding Icons Based on Description

You can ask the LLM to find icons related to specific components or concepts:

1. "Find me icons related to navigation buttons"
2. "Show icons for user profiles"
3. "Get SVG icons for shopping cart elements"

Getting Specific Icons with Color Customizations

You can request specific icons and even ask for styling suggestions:

1. "Get me a download icon in modern design colors"
2. "Find an arrow icon and make it blue"
3. "Show me notification bell icons with a red accent"

Additional Resources

For reference, you can browse all available icon sets on the Iconify website: Iconify Icon Sets

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

claude mcp add-json "pickapicon-mcp" '{"type":"stdio","command":"npx","args":["-y","pickapicon-mcp@latest"],"env":{"PREFIX":"<LIKE ant-design>"}}'

See the official Claude Code MCP documentation for more details.

For Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "pickapicon-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "pickapicon-mcp@latest"
            ],
            "env": {
                "PREFIX": "<LIKE ant-design>"
            }
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

{
    "mcpServers": {
        "pickapicon-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "pickapicon-mcp@latest"
            ],
            "env": {
                "PREFIX": "<LIKE ant-design>"
            }
        }
    }
}

3. Restart Claude Desktop for the changes to take effect