Heroicons

heroicons-mcp is a Model Context Protocol (MCP) server that exposes Heroicons. It allows LLMs and agentic applications to search, list, and generate usage examples of icons in React applications.

typescript

0

GitHub Stars

typescript

Language

7 months ago

First Indexed

3 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

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

You can run Heroicons as an MCP server to expose both Outline and Solid icons as resources and provide tools to search and retrieve icon usage examples. This enables AI copilots and agents to access icon data directly, improving icon lookup and integration workflows.

How to use

Start the MCP server in stdio mode to integrate with tools that communicate over standard input/output, such as Claude Desktop or the MCP Inspector. You can also run in HTTP mode for clients that talk over HTTP, but the provided setup here emphasizes the stdio workflow.

How to install

Prerequisites you need before proceeding are Git and Bun.

git clone https://github.com/SeeYangZhi/heroicons-mcp.git
cd heroicons-mcp
```} ,{

Install Bun if you don’t have it yet, then verify the installation.

bun install
bun run build
bun --version

Starting the server in stdio mode

Run the MCP server in stdio mode using a direct command or via an installed binary. The standard approach is to use npx so you don’t need a global install.

npx heroicons-mcp --stdio

Starting the server in HTTP mode

If you prefer HTTP communication, you can start the server with a single command. This will listen for HTTP-based MCP requests on the default port (3000).

npx heroicons-mcp

Local testing with the MCP Inspector

To test the stdio setup locally, build the project and connect the MCP Inspector to the stdio instance. This lets you interactively test resources and tools exposed by the server.

bun run build

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

Notes on configuration and usage

The server exposes three tools for working with Heroicons: list_all_icons, search_icons, and get_icon_usage_examples. You can enable integrations with clients like Claude Desktop by adding the server to your MCP configuration as a stdio server.

Available tools

list_all_icons

Lists all available Heroicons, optionally filtered by style (outline or solid).

search_icons

Searches for icons by name or keywords across all styles with an optional style filter.

get_icon_usage_examples

Retrieves JSX usage examples for a specific icon by name and style.