Heroicons MCP Server

This project, heroicons-mcp, is a Model Context Protocol (MCP) server built with Bun and the MCP TypeScript SDK. It exposes Heroicons as resources

Local serverstdioTypeScript

What is the Heroicons MCP server?

Most developer tooling work still happens through a UI a human drives. Heroicons MCP server moves it into the conversation instead. This project, heroicons-mcp, is a Model Context Protocol (MCP) server built with Bun and the MCP TypeScript SDK. It exposes Heroicons as resources and tools, enabling LLMs and agentic applications to search for and utilize icons. Key.

The short version

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.

  • 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

The tools it exposes

The server publishes 5 tools. What each one is for:

  • Description — Lists all available Heroicons, optionally filtered by style (outline, solid)
  • Parameters — style (optional: "outline" | "solid")
  • query — "user"
  • style — "solid"
  • name — "UserIcon"

Getting it running

The server ships on npm as heroicons-mcp, so your MCP client can launch it on demand — there is no separate build step. Add the server block to your client's configuration, restart it, and the tools register themselves.

What it needs from you

How it compares

This sits in the developer tooling group, where several servers overlap in what they claim to do but differ sharply once you actually set them up. Heroicons's toolset — Description, Parameters, query and 2 more — is a fair guide to whether it matches your workflow. It is maintained by seeyangzhi; worth a glance at recent repository activity before you build anything load-bearing on it.

We check each listing at SyncDev against the project's documentation before it goes live — if something here drifts out of date, it is a bug worth reporting.

Things to watch

  • It runs with your machine's permissions. That is convenient and also the reason to think about what you point it at before you approve a tool call.
  • Keep per-call confirmation enabled while you learn its behaviour; it is the cheapest safeguard you have.

Available tools

ToolWhat it does
DescriptionLists all available Heroicons, optionally filtered by style (outline, solid).
Parametersstyle (optional: "outline" | "solid")
query"user"
style"solid"
name"UserIcon"

How to install the Heroicons MCP server

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

Add to claude_desktop_config.json, then restart Claude Desktop.

Configuration

Example prompts to try

  • Use Heroicons to Description.
  • Use Heroicons to Parameters.
  • Use Heroicons to query.

Frequently asked questions

It connects Heroicons to MCP-compatible AI assistants such as Claude and Cursor, exposing 5 tools (Description, Parameters, query, and more) that the assistant can call on your behalf. Instead of copying data back and forth by hand, the assistant works with Heroicons directly.