Heroicons MCP server

Heroicons MCP provides a Model Context Protocol (MCP) server that exposes Heroicons icon library as resources and tools for Large Language Models (LLMs) and agentic applications. It allows AI assistants to search, retrieve, and provide usage examples for icons from the Heroicons collection, making it easier to incorporate these icons into web development projects.

Prerequisites

• Git
• Bun

Installation

Clone and Setup

git clone https://github.com/SeeYangZhi/heroicons-mcp.git
cd heroicons-mcp

Install Bun (if needed)

Follow the Bun installation guide, then verify installation:

bun --version

Install Dependencies

bun install

Build the Project

bun run build

Running the Server

You can run the server in two modes: HTTP or stdio.

HTTP Mode

Install and run globally:

npm install -g heroicons-mcp
heroicons-mcp

Or use npx without installing:

npx heroicons-mcp

The server runs on port 3000 by default.

Stdio Mode

This mode is used for direct integration with tools like Claude Desktop:

npx heroicons-mcp --stdio

Or if installed globally:

heroicons-mcp --stdio

Development Mode

Run in HTTP mode during development:

bun run start
# or
bun run src/entry.ts

Run in stdio mode during development:

bun run src/entry.ts --stdio

Configuring with AI Tools

Claude Desktop Integration

1. Open your Claude Desktop configuration file:

code ~/Library/Application\ Support/Claude/claude_desktop_config.json

2. Add the server configuration:

{
  "mcpServers": {
    "heroicons": {
      "command": "npx",
      "args": ["heroicons-mcp", "--stdio"]
    }
  }
}

Alternatively, point directly to the build output:

{
  "mcpServers": {
    "heroicons": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/heroicons-mcp/build/entry.js", "--stdio"]
    }
  }
}

3. Save the file and restart Claude Desktop.

Available MCP Tools

The server exposes these tools for AI assistants:

list_all_icons

Lists all available Heroicons, optionally filtered by style.

• Parameters: style (optional: "outline" | "solid")

search_icons

Searches for Heroicons by name or keywords.

• Parameters:
  • query (string)
  • style (optional: "outline" | "solid")

get_icon_usage_examples

Retrieves JSX example usage for a specific icon.

• Parameters:
  • name (string)
  • style (string: "outline" | "solid")

Usage Example

Here's a typical interaction flow:

1. User asks: "Find me a 'user' icon from Heroicons in solid style."
2. AI assistant calls search_icons with parameters:
   • query: "user"
   • style: "solid"
3. Server responds with matching icons like UserIcon, UserCircleIcon, etc.
4. User asks: "Show usage example of UserIcon"
5. AI assistant calls get_icon_usage_examples with:
   • name: "UserIcon"
   • style: "solid"
6. Server responds with JSX code example:

import { UserIcon } from "@heroicons/react/24/solid";

function Example() {
  return (
    <div>
      <UserIcon className="w-6 h-6 text-blue-500" />
    </div>
  );
}

Testing Locally with MCP Inspector

Test the server in stdio mode using the MCP Inspector:

bun run build
npx @modelcontextprotocol/inspector node ./build/entry.js --stdio

This opens an interface where you can test the server's resources and tools interactively.

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 "heroicons" '{"command":"npx","args":["heroicons-mcp","--stdio"]}'

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": {
        "heroicons": {
            "command": "npx",
            "args": [
                "heroicons-mcp",
                "--stdio"
            ]
        }
    }
}

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": {
        "heroicons": {
            "command": "npx",
            "args": [
                "heroicons-mcp",
                "--stdio"
            ]
        }
    }
}

3. Restart Claude Desktop for the changes to take effect