!Hugeicons Logo

@hugeicons/react

> A fast, customizable, tree-shakeable React icon renderer for Hugeicons. Use HugeiconsIcon with @hugeicons/core-free-icons or @hugeicons-pro/core-* to render SVG icons in React (TypeScript-ready).

What is Hugeicons?

Hugeicons is a beautiful icon library for modern web and mobile apps. The free package includes 4,600+ Stroke Rounded React icons. The Pro package provides 46,000+ React icons across 10 styles, including 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)

$3

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

!Hugeicons Icons

Table of Contents

- What is Hugeicons?
- How It Works
- Features
- Installation
- Usage
- Props
- Examples
- Basic Usage
- Custom Size and Color
- More examples and patterns
- 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

``bash


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-icons
`

Usage

`jsx
import { HugeiconsIcon } from '@hugeicons/react';
import { SearchIcon } from '@hugeicons/core-free-icons';

function App() {
return (
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

$3


`jsx
import { HugeiconsIcon } from '@hugeicons/react';
import { SearchIcon } from '@hugeicons/core-free-icons';


`

$3


`jsx
import { NotificationIcon } from '@hugeicons/core-free-icons';

icon={NotificationIcon}
size={32}
color="#FF5733"
/>
`

$3

- 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

$3

1. Icons not showing up?
- Make sure you've installed both @hugeicons/react and @hugeicons/core-free-icons
- Check that the icon names are correctly imported

2. TypeScript errors?
- Ensure your tsconfig.json includes the necessary type definitions
- Check that you're using the latest version of the package

3. 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.

$3


- Stroke Styles
- Stroke Rounded (@hugeicons-pro/core-stroke-rounded)
- Stroke Sharp (@hugeicons-pro/core-stroke-sharp)
- Stroke Standard (@hugeicons-pro/core-stroke-standard)
- Solid Styles
- Solid Rounded (@hugeicons-pro/core-solid-rounded)
- Solid Sharp (@hugeicons-pro/core-solid-sharp)
- Solid Standard (@hugeicons-pro/core-solid-standard)
- 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)

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