Hugeicons

Hugeicons splits rendering from icon data. A renderer package (@hugeicons/react, @hugeicons/vue, ...) exports one HugeiconsIcon component. Icon packages (@hugeicons/core-free-icons, @hugeicons-pro/core-*) export plain SVG data arrays such as Home01Icon. You always pass an icon object to the component.

Workflow

1. Check the setup: renderer package and version, free vs Pro icon packages, how the repo sizes icons (Tailwind size-* classes or size prop), the strokeWidth it uses, and any app-level Icon wrapper. Match the existing convention. Do not add a second icon library.
2. Find the icon name. Do not guess names.
   • With the Hugeicons MCP server: search_icons with a few comma-separated terms ("trash, delete"), then pick from the returned kebab names.
   • Without it: search the type declarations in the installed package (see Find and verify names).
3. Convert the kebab name to the export: home-01 → Home01Icon, arrow-right-02 → ArrowRight02Icon, information-circle → InformationCircleIcon. Confirm the export exists before you use it.
4. Render it with HugeiconsIcon and the repo's conventions. For other frameworks, Pro setup, or migrations, read the matching reference below.

React Usage

bun add @hugeicons/react @hugeicons/core-free-icons