Hugeicons with React Overview
Hugeicons gives you a flexible icon system for React, from a free starter pack to the full 40,000+ icon Pro library.
The @hugeicons/react package exposes a single HugeiconsIcon component that can render any icon you import from our packages.
Use this overview page as the entry point into all React-related docs.
Prerequisites
Before using Hugeicons with React, you should have:
- A React app (Create React App, Next.js, Vite, etc.)
- Node.js and a package manager (npm, pnpm, or Yarn)
- Basic familiarity with JSX and React components
Free vs Pro at a glance
| Free | Pro | |
|---|---|---|
| Icon library | 4,000+ free icons in 1 style (Stroke Rounded only) | 40,000+ icons across 9 styles |
| Packages | @hugeicons/react, @hugeicons/core-free-icons | @hugeicons/react, @hugeicons-pro/core-* |
| Registry | Public npm registry | Private Hugeicons registry (https://npm.hugeicons.com/) |
| Best for | Trying Hugeicons, simple projects, or commercial projects that only need Stroke Rounded icons | Full access for personal and commercial projects with all 9 styles and 40K icons |
| Setup guide | Quick Start (Free) | Hugeicons Pro with React |
Choose your path
-
Just getting started and want free icons?
Go to Quick Start (Free) to install@hugeicons/reactand@hugeicons/core-free-icons, and render your first icon. -
Already a Pro customer or need more styles?
Go to Hugeicons Pro with React to authenticate with our private registry, install Pro icon packages, and use them in your app. -
Need the full API for
HugeiconsIcon?
Go to HugeiconsIcon Wrapper for the props table, styling options, accessibility guidance, and performance tips. -
Optimizing how you use icons across your app?
Go to Best Practices with React for patterns around imports, theming, accessibility, and component composition. -
Looking for ready-made patterns and snippets?
Go to Examples with React for copy-paste examples like search bars, theme toggles, and navigation bars that showcase dynamic icon behavior.