Hugeicons MCP Server

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

It’s hosted at https://mcp.hugeicons.com/mcp, so you can connect with just the URL. Nothing to install, no API key.

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

List icon names a page at a time, optionally filtered by category. The first page also returns every category with its icon count.

• category (optional): only list icons in this category, such as arrows or e-commerce
• offset (optional): where to start; pass next_offset from the previous page
• limit (optional): icons per page, up to 500 (default 200)

Use it when you want to browse a category or page through the whole library.

search_icons

Search icons by name or tags. Exact name and tag matches rank first, and loosely related icons are left out. Each result includes the icon’s JavaScript export name.

• query: what to search for. Separate several searches with commas, like home, notification, settings, to get results for each — up to 10 per call
• limit (optional): results per search, up to 50 (default 8)
• include_tags (optional): include each icon’s tags. Off by default, since ranking already accounts for them and they roughly triple the response

Use it when you want to find icons for a specific purpose or UI element. Search every icon a task needs in one call rather than one call per icon.

get_icon_code

Return the exact install command, import and usage snippet for one icon on one platform, with the correct export or constant name for the style.

• icon_name: the icon name, such as home-01. Export and constant names like Home01Icon or strokeRoundedHome01 are accepted too
• platform: react, vue, angular, svelte, solid-js, react-native, flutter or html
• style (optional): defaults to stroke-rounded, the free style

Use it when you have the icon and need code you can paste. Export names aren’t predictable from the icon name — 2nd-bracket is SecondBracketIcon, sorting-1-9 is SortingOneNineIcon — so this is the tool that keeps an assistant from guessing.

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, SolidJS, 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.

Icon names aren’t case-sensitive, and component names like Home01Icon work too. If an icon doesn’t exist, the tool says so, and your assistant can search for the right name.

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)
• SolidJS Integration Guide (hugeicons://docs/platforms/solid-js)
• 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) – the name and category of every icon, in JSON

Installation

Hosted server (recommended)

Add this URL as a remote MCP server in your client:

https://mcp.hugeicons.com/mcp

claude mcp add --transport http hugeicons https://mcp.hugeicons.com/mcp

{
  "mcpServers": {
    "hugeicons": {
      "url": "https://mcp.hugeicons.com/mcp"
    }
  }
}

{
  "servers": {
    "hugeicons": {
      "type": "http",
      "url": "https://mcp.hugeicons.com/mcp"
    }
  }
}

{
  "mcpServers": {
    "hugeicons": {
      "url": "https://mcp.hugeicons.com/mcp"
    }
  }
}

Run locally with npx

If your client only supports local (stdio) servers, or you’d rather run it on your machine, use the npm package. It needs Node.js 18 or later.

In Claude Code:

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

For other clients, add an entry like this to your MCP configuration file (often .mcp.json or mcp.json):

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

-y answers “yes” to the npx install prompt. You can also start the server directly with npx @hugeicons/mcp-server.

Usage examples

For AI assistants

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

1. Call search_icons (for example, with "search") to find suitable icons
2. Call get_platform_usage (for example, for React) to fetch the right guide
3. 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 60,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