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

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

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.