heroicons-mcp
About
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.
Details
- License
- MIT license
Explore
- 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
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
heroicons-mcpCommand (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
Refer to the official Bun installation guide.
After installation, restart your terminal and check:
bun --version
bun install
heroicons-mcp --stdio
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>
);
}
```
search_icons
Search for icons from heroicons by name or category
get_icon_usage_examples
Get usage examples for an icon
list_all_icons
List all icons from the heroicons library, optionally filtered by style
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")
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"heroicons-mcp": {
"heroicons": {
"command": "npx",
"args": [
"heroicons-mcp",
"--stdio"
]
}
}
}
}McpServers
{
"heroicons": {
"command": "npx",
"args": [
"heroicons-mcp",
"--stdio"
]
}
}<a href="https://glama.ai/mcp/servers/@SeeYangZhi/heroicons-mcp">
</a>
A Model Context Protocol (MCP) server exposing Heroicons as resources and tools for LLMs and agentic applications. Built with Bun and the MCP TypeScript SDK.
What is Heroicons?
Heroicons is a popular library of hand-crafted SVG icons, designed by the makers of Tailwind CSS. The icons are available in multiple styles (Outline, Solid) and are easy to integrate into web projects.
What is MCP?
The Model Context Protocol (MCP) is a standard for AI tools to request specific context from sources outside their main training data.
This MCP server allows AI coding assistants and other agentic applications to access information about Heroicons, enabling better assistance and icon search capabilities.
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
Prerequisites
Getting Started (Development)
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
Usage
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
```bash
npx heroicons-mcp --stdio
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
