Hugeicons MCP Server

The Hugeicons MCP (Model Context Protocol) server lets AI agents in tools like Claude Code, Cursor, and other MCP-compatible IDEs search the Hugeicons library, read integration docs, and fetch font glyph data for you.

Overview

The Hugeicons MCP server is a TypeScript-based bridge between AI assistants and the Hugeicons ecosystem. It provides:

Icon discovery and search
Platform-specific integration guides
Usage examples and best practices
Unicode glyph data for font-based integrations

Tools

The server exposes these MCP tools:

`list_icons`

Return the full Hugeicons icon list with metadata.

Use it when you need the entire icon library for broad search, browsing, or indexing.

`search_icons`

Search icons by name, tags, or category with filtering.

Use it when you want to find specific icons by function, style, or use case.

`get_platform_usage`

Return platform-specific usage instructions and integration guides.

Use it when you need concrete steps for using Hugeicons with React, Vue, Angular, Svelte, React Native, Flutter, or HTML.

`get_icon_glyphs`

Return all glyph (Unicode character) entries for an icon across all styles.

Use it when you are building or consuming icon fonts or other font-based workflows.

`get_icon_glyph_by_style`

Return the glyph (Unicode character) for a single icon in a single style.

Use it when you need a specific Unicode value for a known icon + style pair.

Resources

The server also exposes documentation and data as MCP resources:

Platform docs

React Integration Guide (hugeicons://docs/platforms/react)
Vue Integration Guide (hugeicons://docs/platforms/vue)
Angular Integration Guide (hugeicons://docs/platforms/angular)
Svelte Integration Guide (hugeicons://docs/platforms/svelte)
React Native Integration Guide (hugeicons://docs/platforms/react-native)
Flutter Integration Guide (hugeicons://docs/platforms/flutter)
HTML Integration Guide (hugeicons://docs/platforms/html) – font-based integration via CDN

Icon data

Complete Icon Index (hugeicons://icons/index) – all Hugeicons icon data in JSON

Installation

Claude Code

In Claude Code, connect Hugeicons as an MCP server by running:

claude mcp add --transport stdio hugeicons -- npx -y @hugeicons/mcp-server

This uses the claude CLI to run npx -y @hugeicons/mcp-server whenever Claude Code needs the Hugeicons server.

Manual configuration (other AI agents)

For other MCP-compatible tools (such as Cursor or custom AI agents), find your client’s MCP configuration file (often named .mcp.json or mcp.json) and add an entry like this:

{
  "mcpServers": {
    "hugeicons": {
      "command": "npx",
      "args": [
        "-y",
        "@hugeicons/mcp-server"
      ]
    }
  }
}

Most IDEs that support MCP will read this from a .mcp.json or mcp.json file at the project or user level—check your client’s documentation for the exact location.

Key parameters:

-y: automatically answers “yes” to npx prompts
Package: @hugeicons/mcp-server

Run directly with npx

You can also start the server directly:

npx @hugeicons/mcp-server

Usage examples

For AI assistants

When running in Claude Code, Cursor, or another MCP-compatible client, an assistant might:

Call search_icons (for example, with "search") to find suitable icons
Call get_platform_usage (for example, for React) to fetch the right guide
Combine both to return a concrete installation and usage snippet to the user

Example user prompts

Here are some example prompts a user might type in Claude Code, Cursor, or another MCP IDE once the Hugeicons MCP server is configured:

“Install Hugeicons on React with their free icon package and add a search icon to the homepage with a search input using Hugeicons MCP.”
 
“Install Hugeicons in a Vue 3 project and add a profile avatar icon to the top navigation using Hugeicons MCP.”
 
“Set up Hugeicons Pro in a React Native app and show different styles for a settings icon using Hugeicons MCP.”
 
“Use Hugeicons as a web font on a plain HTML page and add a heart icon next to a ‘Favorite’ button using Hugeicons MCP.”

Benefits

For AI assistants

Comprehensive coverage: Access to all 40,000+ icons and their metadata
Platform expertise: Up-to-date integration guides for all major platforms
Accurate guidance: Real-time best practices and code examples
Context-aware: Tools and resources keyed to the user’s tech stack

For end users

Faster development: Immediate, accurate integration instructions
Better suggestions: Assistants can recommend specific icons and patterns
Consistency: Recommendations stay aligned with Hugeicons guidance
Discovery: Easier to surface new icons, styles, and integration ideas

Styling Overview