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
- Author
- SeeYangZhi
- Downloads
- 290
- Categories
- Other
Jump to
- Exposes Heroicons as MCP resources (Outline and Solid)
- Provides list_all_icons tool with optional style filter
- Provides search_icons tool by name or keywords
- Provides get_icon_usage_examples tool returning JSX code
- Works in HTTP mode or stdio mode for MCP clients
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
Install dependencies with bun install, then run either npx heroicons-mcp for HTTP mode (defaults to port 3000) or npx heroicons-mcp --stdio for stdio mode. For integration with Claude Desktop, add the server to the mcpServers section of the Claude Desktop configuration file using the npx command or a direct path to the built entry point.
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
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"
]
}
}heroicons-mcp
<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.
