MCP.so
Sign In

heroicons-mcp

@SeeYangZhi

Repository

About heroicons-mcp

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.

#mcp#heroicons-react#mcp-server

Basic information

Category

Other

License

MIT license

Runtime

node

Transports

stdio

Publisher

SeeYangZhi

Submitted by

Yang Zhi

Config

Add this server to your MCP-compatible client using the configuration below.

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

Tools

3

Search for icons from heroicons by name or category

Get usage examples for an icon

List all icons from the heroicons library, optionally filtered by style

Overview

What is heroicons-mcp?

heroicons-mcp is a Model Context Protocol (MCP) server that exposes Heroicons as resources and tools for LLMs and agentic applications. Built with Bun and the MCP TypeScript SDK, it provides access to Heroicons in Outline and Solid styles.

How to use heroicons-mcp?

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.

Key features of heroicons-mcp

  • 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

Use cases of heroicons-mcp

  • AI coding assistants searching for a specific Heroicon by name
  • Generating JSX usage examples for a chosen icon
  • Listing all available icons within a single style (outline or solid)
  • Integrating icon access into agentic workflows via MCP clients

FAQ from heroicons-mcp

What runtime does heroicons-mcp require?

It requires Git and Bun for development, but can be run via npx (Node.js) in production.

How do I run heroicons-mcp in HTTP vs stdio mode?

Use npx heroicons-mcp for HTTP mode (default), or add --stdio for stdio mode.

How can I integrate heroicons-mcp with Claude Desktop?

Add it to your Claude Desktop config file under mcpServers using the npx command or a direct path to the built entry.js file with the --stdio flag.

What tools does heroicons-mcp expose?

It exposes three tools: list_all_icons, search_icons, and get_icon_usage_examples.

Which Heroicons styles are included?

The server includes icons in both Outline and Solid styles from Heroicons.

Comments

More Other MCP servers

MCP Go 🚀

mark3labs

A Go implementation of the Model Context Protocol (MCP), enabling seamless integration between LLM applications and external data sources and tools.

8.9K

ICSS

chokcoco

不止于 CSS

20.7K

🚀 Model Context Protocol (MCP) Curriculum for Beginners

microsoft

This open-source curriculum introduces the fundamentals of Model Context Protocol (MCP) through real-world, cross-language examples in .NET, Java, TypeScript, JavaScript, Rust and Python. Designed for developers, it focuses on practical techniques for building modular, scalable,

16.7K

Nginx UI

0xJacky

Yet another WebUI for Nginx

11.3K

Awesome Mcp Servers

punkpeye

A collection of MCP servers.

90.5K