HugeiconsIcon Wrapper

The @hugeicons/react package provides a universal HugeiconsIcon component that can render any icon from our libraries.
Think of it as a smart wrapper: you pass it an icon object, and it handles sizing, color, stroke width, and even switching between two icons for different states.

Props

Prop	Type	Default	Description
icon	IconSvgObject	Required	The main icon component imported from an icon package
altIcon	IconSvgObject	-	Alternative icon component for states, interactions, or animations
showAlt	boolean	false	When true, displays the altIcon instead of the main icon
size	number	24	Icon size in pixels
color	string	currentColor	Icon color (CSS color value)
strokeWidth	number	1.5	Width of the icon strokes (works with stroke-style icons)
absoluteStrokeWidth	boolean	false	When true, keeps the visual stroke width fixed as `size` changes
primaryColor	string	-	Primary color for multicolor Pro icons (Bulk, Duotone, Twotone)
secondaryColor	string	-	Secondary color for multicolor Pro icons (Bulk, Duotone, Twotone)
disableSecondaryOpacity	boolean	false	Disables the default opacity applied to the secondary color
className	string	-	Additional CSS classes

Multicolor icons with `primaryColor` and `secondaryColor`

Bulk, Duotone, and Twotone Pro icons are drawn from two layers. color sets both, while primaryColor and secondaryColor target each layer independently:


import { HugeiconsIcon } from '@hugeicons/react'
import { Notification03Icon } from '@hugeicons-pro/core-duotone-rounded'
 
<HugeiconsIcon
  icon={Notification03Icon}
  primaryColor="#4f46e5"
  secondaryColor="#a5b4fc"
/>

The secondary layer is rendered at a reduced opacity so it recedes behind the primary layer. Pass disableSecondaryOpacity when you want secondaryColor applied at full strength:


<HugeiconsIcon
  icon={Notification03Icon}
  primaryColor="#4f46e5"
  secondaryColor="#a5b4fc"
  disableSecondaryOpacity
/>

These props only affect multicolor styles. On single-layer icons (Stroke, Solid) they are ignored, so use color instead.

State-based icons with `altIcon` and `showAlt`

Use altIcon and showAlt to swap between two icons based on component state:


import { useState } from 'react'
import { HugeiconsIcon } from '@hugeicons/react'
import { SunIcon, Moon02Icon } from '@hugeicons/core-free-icons'
 
function ThemeToggle() {
    const [isDark, setIsDark] = useState(false)
 
    return (
        <button onClick={() => setIsDark(!isDark)}>
            <HugeiconsIcon icon={SunIcon} altIcon={Moon02Icon} showAlt={isDark} />
        </button>
    )
}

Styling icons

You can style icons in a few ways:

size: controls the rendered icon size in pixels.
color: accepts any valid CSS color (e.g. #111827, rgb(0,0,0), currentColor).
strokeWidth: adjusts the thickness of stroke-based icons.
absoluteStrokeWidth: keeps that thickness fixed as the icon scales.
primaryColor / secondaryColor: color each layer of a multicolor Pro icon separately.
className: attach utility classes from Tailwind, CSS Modules, etc.


<HugeiconsIcon
  icon={Notification03Icon}
  size={32}
  color="#6366f1"
  strokeWidth={1.75}
  className="inline-block align-middle"
/>

When using currentColor, the icon inherits the text color from its parent, which works well inside buttons, links, and headings.

absoluteStrokeWidth changes how strokeWidth scales. By default the stroke grows with size, so a 48px icon has a stroke twice as thick as a 24px one. With absoluteStrokeWidth the stroke stays at the width you pass no matter the size, which keeps a set of differently sized icons visually consistent. It only takes effect when strokeWidth is set explicitly.

More patterns and examples

For accessibility, theming, and composition patterns, see Best Practices with React.
For complete UI examples (search bar, theme toggle, navigation), see Examples with React.