Skip to Content
IntegrationsAgent Skill

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 https://github.com/hugeicons/hugeicons --skill 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: detect the framework, render with its component, then pick icon names from the right catalog.

1. Framework detection

It reads your manifest and matches the installed package:

FrameworkDetect byComponent
React@hugeicons/react in package.jsonHugeiconsIcon
Vue@hugeicons/vue in package.jsonHugeiconsIcon
Svelte@hugeicons/svelte in package.jsonHugeiconsIcon
Angular@hugeicons/angular in package.jsonhugeicons-icon
React Native@hugeicons/react-native in package.jsonHugeiconsIcon
Flutterhugeicons in pubspec.yamlHugeIcon

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

The skill bundles the complete catalogs as reference files and greps them instead of guessing:

  • references/icon-list.md: 5,471 icons for the JS frameworks, PascalCase exports ending in Icon (Search01Icon, Home01Icon, Notification03Icon). Number words are spelled out: 1st-bracket → FirstBracketIcon, 3d-view → ThreeDViewIcon.
  • references/icon-list-flutter.md: 4,547 HugeIcons.strokeRounded<Name> constants.

This is the main thing the skill buys you: a guessed icon name may not exist, or may exist and be the wrong glyph. The skill confirms the name against the catalog before writing the import.

Free vs Pro awareness

The skill suggests only free icons from @hugeicons/core-free-icons (5,900+ stroke-rounded) unless you have a Pro license, so it won’t hand you an import that fails on install.

Skill or MCP server?

Both give an agent Hugeicons knowledge, and they compose well.

  • The agent skill is instructions plus bundled icon catalogs. No server, no network calls, works offline, and is the better fit for writing correct code in an existing project.
  • The MCP server is a live connection to the Hugeicons platform. Use it for search across all 59,000+ icons and every style, glyph/Unicode data for icon fonts, and always-current platform guides.

Neither replaces the other. Install both if you want offline correctness and live search.

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."
MCP ServerOverview