Heroicons MCP

🚀 heroicons-mcp

A Model Context Protocol (MCP) server that exposes Heroicons as resources and tools for LLMs and agentic applications. It's built with Bun and the MCP TypeScript SDK, providing seamless access to Heroicons for AI - related projects.

🚀 Quick Start

This MCP server enables AI coding assistants and other agentic applications to access Heroicons, enhancing assistance and icon search capabilities. Before you start, make sure you have Git and Bun installed.

📦 Installation

1. Clone the repository

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

2. Install Bun (if you don't have it)

Refer to the official Bun installation guide. After installation, restart your terminal and check:

bun --version

3. Install dependencies

bun install

4. Build the project

This compiles the TypeScript source to JavaScript in the build directory.

bun run build

✨ Features

• Exposes Heroicons as MCP resources (Outline and Solid styles)
• Provides tools for searching icons by name or keywords
• Allows listing all icons or icons within a specific style
• Ready for integration with Claude Desktop and other MCP clients
• Can be run as an HTTP server or a stdio - based MCP server

💻 Usage Examples

HTTP Mode

You can run the HTTP server using npx:

npx heroicons-mcp

This starts the HTTP server (defaults to port 3000, as defined in src/http.ts).

Or install globally:

npm install -g heroicons-mcp

Then run:

heroicons-mcp

Stdio Mode

npx heroicons-mcp --stdio
# or if installed globally
heroicons-mcp --stdio

Local Development

1. HTTP Mode

Suitable for clients that support communication over HTTP.

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

2. Stdio Mode

Often used for direct integration with tools like Claude Desktop or the MCP Inspector, communicating over standard input/output.

bun run src/entry.ts --stdio

Configuration with AI Tools

Example: Claude Desktop

To use this MCP server in Claude Desktop:

1. Open your Claude Desktop configuration file:

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

(Or use your preferred editor) 2. Add the server to the mcpServers section. Option A: via npx:

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

Option B: Pointing directly to the build output (ensure you have built the project using bun run build):

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

Replace /ABSOLUTE/PATH/TO/heroicons-mcp/build/entry.js with the actual absolute path to your built entry.js file. 3. Save the file and restart Claude Desktop. 4. You should now see the "heroicons" server available in Claude's tools panel.

⚠️ Important Note

The npx heroicons-mcp --stdio command is the recommended way for stdio mode.

📚 Documentation

Tools Available (MCP)

This MCP server exposes the following tools to AI coding assistants:

1. list_all_icons
   • Description: Lists all available Heroicons, optionally filtered by style (outline, solid).
   • Parameters: style (optional: "outline" | "solid")
2. search_icons
   • Description: Searches for Heroicons by name or keywords across all styles.
   • Parameters: query (string), style (optional: "outline" | "solid")
3. get_icon_usage_examples
   • Description: Retrieves JSX example usage for a specific icon.
   • Parameters: name (string), style (string: "outline" | "solid")

Example Usage

Here's how an AI tool might use this MCP server:

1. User asks AI tool: "Find me a 'user' icon from Heroicons, preferably the solid style."
2. AI tool calls search_icons:
   • query: "user"
   • style: "solid"
3. MCP server responds with a list of matching solid Heroicons (e.g., UserIcon, UserCircleIcon, UserPlusIcon).
4. User asks tool: "Show usage example of UserIcon".
5. AI tool calls get_icon_usage_examples:
   • name: "UserIcon"
   • style: "solid"
6. MCP server responds with the 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 MCP Locally with Inspector

You can test the MCP server (stdio mode) locally using the MCP Inspector. First, ensure the project is built:

bun run build

Then launch the Inspector and connect it to your server using the node ./build/entry.js command with the --stdio flag:

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

🔧 Technical Details

This MCP server is built with Bun and the MCP TypeScript SDK. The Model Context Protocol (MCP) is a standard for AI tools to request specific context from sources outside their main training data. The server exposes Heroicons as resources and provides tools for AI coding assistants and agentic applications to access information about Heroicons.

Development Scripts

• bun run dev: Starts the server in HTTP mode for development (uses src/entry.ts).
• bun run dev:stdio: Starts the stdio MCP server for development (uses src/entry.ts --stdio).
• bun run build: Compiles TypeScript to JavaScript (output in build/).
• bun run lint: Lints the codebase using ESLint.

📄 License

MIT

📚 Resources

• Heroicons
• Model Context Protocol
• MCP Inspector
• MCP TypeScript SDK
• Bun