Skip to main content

​
Import

from reflex_ui import hi

# or
from reflex_ui import icon

# or
from reflex_ui import HugeIcon

​
Description

The HugeIcon component provides access to icons from the @hugeicons/react library. It supports icon switching for interactive states and customizable stroke properties.

​
Library

​
Usage

from reflex_ui import hi

# Basic usage
hi("Home01Icon")

# With custom size and stroke
hi(
    "Home01Icon",
    size=24,
    stroke_width=2.5
)

# With alternative icon for hover/active states
hi(
    "Heart01Icon",
    alt_icon="HeartSolidIcon",
    show_alt=rx.State.is_liked
)

​
Props

​
icon
str
required
The main icon to display. This should be the icon name from the Hugeicons library.When passed as a string, the component automatically imports the icon from @hugeicons/[email protected].
​
alt_icon
str | None
default:"None"
Alternative icon for states or interactions. Like icon, this automatically imports from the Hugeicons library when provided as a string.Use with show_alt to toggle between the main and alternative icons.
​
show_alt
bool
default:"False"
Whether to show the alternative icon instead of the main icon.This is typically bound to a state variable to toggle between icons based on user interaction.
​
size
int
default:"16"
The size of the icon in pixels. Controls both width and height.
​
stroke_width
float
default:"2"
The stroke width of the icon paths. This affects the thickness of the icon lines.Note: This prop is applied via Tailwind CSS class [&_path]:stroke-[{value}].

​
Special Behavior

​
create() Method

The HugeIcon.create() method (also available as hi() and icon()) accepts the icon name as the first positional argument: 
# These are equivalent
hi("Home01Icon")
hi(icon="Home01Icon")
HugeIcon.create("Home01Icon")
HugeIcon.create(icon="Home01Icon")
When using the positional argument, any additional children passed after the icon name are forwarded to the component.

​
Automatic Icon Imports

When icon or alt_icon props are provided as strings, the component automatically:
  1. Creates a Var with the icon name
  2. Adds the necessary import from @hugeicons/[email protected]
  3. Makes the icon available to the frontend
This means you don’t need to manually handle icon imports - just provide the icon name as a string.

​
Icon Names

Icon names follow the Hugeicons naming convention. Browse available icons at: Icon names typically use PascalCase with a number suffix (e.g., Home01Icon, User02Icon, Settings03Icon).

Build docs developers (and LLMs) love

Get started for freeTalk to us