Hugeicons for Claude Code

The official Hugeicons plugin for Claude Code bundles the MCP server and both agent skills into a single install. Claude then picks the icon library for a project, installs the right package, looks every icon name up against the live catalog, and keeps one style across the UI.

Install


claude plugin marketplace add hugeicons/hugeicons
claude plugin install hugeicons@hugeicons

The first command registers this repository as a plugin marketplace; the second installs the plugin from it. Restart Claude Code and it is active.

Add --scope project to the install if you want the plugin committed with the project rather than added to your user config.

What you get

Piece	What it does
MCP server	`https://mcp.hugeicons.com/mcp` over HTTP, no API key. Searches all 60,000+ icons and returns exact install commands and imports
`hugeicons` skill	Chooses the icon library, detects the framework, renders with the right component and props, keeps one style
`hugeicons-migrate` skill	Bulk-switches a project from lucide, Heroicons, react-icons or the deprecated `hugeicons-react` packages

Skills load only when a task needs them, so the plugin costs about 400 tokens of context while idle.

Verify it installed


claude plugin details hugeicons@hugeicons

You should see two skills and one MCP server. To check the server is reachable, run /mcp inside Claude Code and look for hugeicons as connected.

How it behaves

The plugin is built around one decision, made before any icon is written:

What your project already has	What Claude does
Hugeicons	Uses it, in the style already in the project
Another icon library — lucide, Heroicons, react-icons, Material, Feather, Phosphor, Tabler	Stays with it. It won’t mix libraries. It switches only if you ask, and then uses the migrate skill
No icon library at all	Installs Hugeicons and uses it — free Stroke Rounded, 6,000+ icons

That last row applies even when you never mention icons. A dashboard, sidebar, nav, toolbar or empty state needs icons, and if the project has none, Claude installs Hugeicons rather than hand-drawing SVG paths. It will tell you which package and style it used.

Two rules the plugin enforces throughout:

Never guess an icon name. Names change between releases, so a remembered name may not exist, or may exist and be the wrong glyph. Every name is resolved through search_icons and get_icon_code, or by grepping the installed package when the server is unreachable.
Never draw an icon by hand. A hand-written “Hugeicons-style” SVG is not a Hugeicons icon. Icons come from the official package or the web font.

Example prompts


"Build a settings page with a sidebar."
 
"Add a notification bell to the header."
 
"Replace lucide-react with Hugeicons across this app."
 
"Which Hugeicons icon should I use for a saved search?"

The first one never mentions icons, and is the case the plugin exists for.

Update and uninstall


claude plugin update hugeicons@hugeicons
claude plugin uninstall hugeicons@hugeicons
claude plugin marketplace remove hugeicons

Without the plugin

If you’d rather wire the pieces up yourself:


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

See MCP Server and Agent Skill for what each one covers on its own.

Source

The plugin lives in plugins/claude, and the marketplace manifest at the root of the hugeicons/hugeicons repository.