hugeicons
@hugeicons/react
Hugeicons React rendering library for fast, customizable icons with TypeScript and tree-shaking support
What is Hugeicons?
Hugeicons is a large icon set for modern web and mobile apps. The free package includes 4,600+ Stroke Rounded icons. The Pro package provides 46,000+ icons across 10 styles with multicolor support for Bulk, Duotone, and Twotone styles.
How It Works
This package (@hugeicons/react) is a rendering library - it provides the HugeiconsIcon component that displays icons in your React app. The icons themselves come from separate icon packages:
- Free icons:
@hugeicons/core-free-icons(4,600+ icons) - Pro icons:
@hugeicons-pro/core-*packages (46,000+ icons, requires license)
Key Highlights
- 4,600+ Free Icons: Stroke Rounded set for unlimited personal and commercial projects
- 46,000+ Pro Icons, 10 Styles: Stroke, Solid, Bulk, Duotone, and Twotone families for sharp, rounded, and standard needs with richer variants
- Pixel Perfect Grid: Built on a 24x24 grid for crisp rendering at any size
- Customizable: Easily adjust colors, sizes, and styles to match your design needs
- Multicolor Support: Full multicolor customization for Bulk, Duotone, and Twotone styles in the Pro version
- Tree Shaking Ready: Named exports keep bundles lean in modern bundlers
- Regular Updates: New icons added regularly to keep up with evolving design trends
Looking for Pro Icons? Check out our docs at hugeicons.com/docs for detailed information about pro icons, styles, and advanced usage.
Table of Contents
- What is Hugeicons?
- How It Works
- Features
- Installation
- Usage
- Props
- Examples
- Performance
- Troubleshooting
- Browser Support
- Related Packages
- Pro Version
- License
- Related
Features
- Customizable colors, sizes, and stroke width
- Multicolor support for Bulk, Duotone, and Twotone styles
- TypeScript support with full type definitions
- Tree shakeable builds (ESM, CJS, UMD) for bundlers like Vite, Next.js, and CRA
- Optimized SVGs for small payloads and fast render
- Alternate icon support for dynamic interactions
Installation
# Using npm
npm install @hugeicons/react @hugeicons/core-free-icons
# Using yarn
yarn add @hugeicons/react @hugeicons/core-free-icons
# Using pnpm
pnpm add @hugeicons/react @hugeicons/core-free-icons
# Using bun
bun add @hugeicons/react @hugeicons/core-free-iconsUsage
import { HugeiconsIcon } from '@hugeicons/react';
import { SearchIcon } from '@hugeicons/core-free-icons';
function App() {
return (
<HugeiconsIcon
icon={SearchIcon}
size={24}
color="currentColor"
strokeWidth={1.5}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon |
IconSvgElement |
Required | The main icon to display |
altIcon |
IconSvgElement |
- | Alternative icon for states, interactions, or dynamic icon swapping |
showAlt |
boolean |
false |
When true, displays the altIcon instead of the main icon |
size |
number | string |
24 |
Icon size in pixels |
color |
string |
currentColor |
Icon color (CSS color value) |
strokeWidth |
number |
1.5 |
Width of the icon strokes |
absoluteStrokeWidth |
boolean |
false |
When true, the stroke width will be scaled relative to the icon size |
primaryColor |
string |
- | Primary color for multicolor icons (Bulk, Duotone, Twotone styles) |
secondaryColor |
string |
- | Secondary color for multicolor icons (Bulk, Duotone, Twotone styles) |
disableSecondaryOpacity |
boolean |
false |
Disables the default opacity applied to the secondary color |
className |
string |
- | Additional CSS classes |
Examples
Basic Usage
import { HugeiconsIcon } from '@hugeicons/react';
import { SearchIcon } from '@hugeicons/core-free-icons';
<HugeiconsIcon icon={SearchIcon} />Custom Size and Color
import { NotificationIcon } from '@hugeicons/core-free-icons';
<HugeiconsIcon
icon={NotificationIcon}
size={32}
color="#FF5733"
/>More examples and patterns
- Examples: https://hugeicons.com/docs/integrations/react/examples
- Best practices: https://hugeicons.com/docs/integrations/react/best-practices
Performance
- Tree-shaking: The package is fully tree-shakeable, ensuring only the icons you use are included in your final bundle
- Optimized SVGs: All icons are optimized for size and performance
- Code Splitting: Icons can be easily code-split when using dynamic imports
Troubleshooting
Common Issues
Icons not showing up?
- Make sure you've installed both
@hugeicons/reactand@hugeicons/core-free-icons - Check that the icon names are correctly imported
- Make sure you've installed both
TypeScript errors?
- Ensure your
tsconfig.jsonincludes the necessary type definitions - Check that you're using the latest version of the package
- Ensure your
Bundle size concerns?
- Use named imports instead of importing the entire icon set
- Add code splitting for different sections of your app
- Verify your bundler is configured to tree shake ESM builds
Browser Support
The library supports all modern browsers.
Related Packages
- @hugeicons/vue - Vue component
- @hugeicons/angular - Angular component
- @hugeicons/svelte - Svelte component
- @hugeicons/react-native - React Native component
Pro Version
Want access to 46,000+ icons and 10 unique styles? Check out our Pro Version and visit our docs for detailed documentation.
Available Pro Styles
- Stroke Styles
- Stroke Rounded (
@hugeicons-pro/core-stroke-rounded) - Stroke Sharp (
@hugeicons-pro/core-stroke-sharp) - Stroke Standard (
@hugeicons-pro/core-stroke-standard)
- Stroke Rounded (
- Solid Styles
- Solid Rounded (
@hugeicons-pro/core-solid-rounded) - Solid Sharp (
@hugeicons-pro/core-solid-sharp) - Solid Standard (
@hugeicons-pro/core-solid-standard)
- Solid Rounded (
- Special Styles
- Bulk Rounded (
@hugeicons-pro/core-bulk-rounded) - Duotone Rounded (
@hugeicons-pro/core-duotone-rounded) - Duotone Standard (
@hugeicons-pro/core-duotone-standard) - Twotone Rounded (
@hugeicons-pro/core-twotone-rounded)
- Bulk Rounded (
License
The code in this package (@hugeicons/react) is licensed under the MIT License.
This package only provides rendering utilities. It does not include or grant any rights to Hugeicons icon assets. Using Pro icon styles requires a valid Hugeicons Pro license.
Hugeicons icon packs are licensed separately:
- Free icon packs: use the license included with the specific free icon package you install.
- Pro icon packs (
@hugeicons-pro/*): require a paid Hugeicons Pro license and are governed by the Hugeicons Pro Terms (see Pro License.).
Related
- Changelog - Version history and release notes
- @hugeicons/core-free-icons - Free icon package
- Hugeicons Website - Browse all available icons