Hugeicons Agent Skill

The Hugeicons agent skill teaches coding agents (Claude Code, Cursor, and any other tool that supports the open skills format) how to use Hugeicons correctly in your project: which package to install, which component renders an icon, which props exist, and what the icons are actually named.

It ships from the hugeicons/hugeicons repository and is listed at skills.sh/hugeicons/hugeicons/hugeicons.

Installation

npx skills add hugeicons/hugeicons

Run this from the root of your project. The skill is installed locally and loaded by your agent whenever the task involves Hugeicons.

What the skill covers

The skill works in three steps: pick the icon library and detect the framework, render with the right component, then resolve icon names against the live catalog.

1. Which icon library, then which framework

Before any icon is written, the skill settles what the project should use:

That last row applies even when your request never mentions icons. A dashboard, sidebar, nav or empty state needs them, and without a rule the common outcome is a hand-drawn inline SVG that only resembles a real icon.

Then it reads your manifest and matches the installed package:

It reads your manifest and matches the installed package:

2. Install and render

The skill knows the two architectures:

• JS frameworks: the @hugeicons/* package is a renderer only. Icons are named exports from a separate package (@hugeicons/core-free-icons for free, @hugeicons-pro/core-* for Pro). The same icon names work across React, Vue, Svelte, SolidJS, Angular, and React Native.
• Flutter: the hugeicons package bundles the icon data. Icons are HugeIcons.* constants of type List<List<dynamic>>, rendered with HugeIcon, never Flutter’s Icon.

It also carries the full props table per framework and is instructed to keep generated code minimal: icon is the only required prop, so it won’t emit props that only repeat a default (size={24}, color="currentColor", strokeWidth={1.5}).

3. Exact icon names

This is the main thing the skill buys you: a guessed icon name may not exist, or may exist and be the wrong glyph. Export names are not predictable from the icon name — 2nd-bracket is SecondBracketIcon, sorting-1-9 is SortingOneNineIcon, 3d-view is ThreeDViewIcon — so the skill resolves every name before writing the import, then copies it verbatim.

It deliberately ships no bundled icon list. The catalog moves with every release, so a copy frozen at install time goes stale within weeks. It resolves against a live source instead:

1. The MCP server, preferred: search_icons to find an icon, get_icon_code for the exact install command, import and usage.
2. The installed package, when there is no MCP server or you are offline: grepping the project’s own node_modules, which always matches the version the project actually builds against.

It also refuses to hand-draw an icon. A “Hugeicons-style” inline SVG is not a Hugeicons icon; icons come from the official package or the web font.

Free vs Pro awareness

The skill defaults to free Stroke Rounded (@hugeicons/core-free-icons, 6,000+ icons) and does not stop to ask about licensing. Stroke Rounded covers the whole library, so no icon is out of reach without Pro. It reaches for a Pro style only when the project already imports @hugeicons-pro/... or you ask for one, so it won’t hand you an import that fails on install.

Migrating an existing project

A second skill, hugeicons-migrate, bulk-switches a project to Hugeicons. Install it alongside the first:

npx skills add hugeicons/hugeicons-migrate

It covers the deprecated hugeicons-react and @hugeicons/react-native-pro packages, @hugeicons/core-free-icons upgrades where exports were renamed, and lucide-react, @heroicons/react and react-icons, with prop translation and verified name maps.

Which integration do I need?

The skill and the MCP server are complements, not alternatives: the skill is the instructions, the server is what the names get resolved against. The three plugins exist so you don’t have to wire them together by hand.

Example prompts

Once the skill is installed, prompts like these route through it automatically:

"Add a search input with a Hugeicons search icon to the homepage."
 
"Replace the emoji in the sidebar nav with Hugeicons equivalents."
 
"Set up Hugeicons in this Flutter app and use a home icon in the bottom nav."