Skip to main content
The HugeIcon component provides access to the HugeIcons library with support for icon variants and extensive customization.

​
Installation

HugeIcons are included with Reflex UI. The component automatically imports icons from:

​
Basic Usage

import reflex_ui as ui

# Basic icon
ui.hi("Home01Icon")

# With custom size
ui.hi("Search01Icon", size=24)

# Shorthand alias
ui.icon("Settings01Icon", size=20)

​
Props

​
icon
str
required
The main icon to display. Use the icon name from the HugeIcons library (e.g., “Home01Icon”, “Search01Icon”).
​
alt_icon
str
Alternative icon for states or interactions. When show_alt is True, this icon will be displayed instead of the main icon.
​
show_alt
bool
default:"false"
Whether to show the alternative icon. Toggle between the main icon and alt_icon.
​
size
int
default:"16"
The size of the icon in pixels.
​
stroke_width
float
default:"2"
The stroke width of the icon. Controls the thickness of the icon lines.

​
Icon Variants

HugeIcons supports switching between icon variants using the alt_icon prop: 
import reflex as rx
import reflex_ui as ui

class IconState(rx.State):
    show_alt: bool = False
    
    def toggle_icon(self):
        self.show_alt = not self.show_alt

def icon_variant_example():
    return ui.button(
        ui.hi(
            "Heart01Icon",
            alt_icon="HeartFilled01Icon",
            show_alt=IconState.show_alt,
            size=24,
        ),
        on_click=IconState.toggle_icon,
    )

​
Customization

​
Size and Stroke

# Small icon with thin strokes
ui.hi("Star01Icon", size=16, stroke_width=1.5)

# Large icon with thick strokes
ui.hi("Star01Icon", size=32, stroke_width=3)

​
Styling with Tailwind

The icon inherits color and other styles from its parent or applied classes: 
# Colored icon
ui.hi("AlertCircleIcon", class_name="text-red-500")

# Icon with hover effect
ui.hi(
    "InfoCircleIcon",
    class_name="text-blue-500 hover:text-blue-700 transition-colors"
)

​
Finding Icons

Browse the complete HugeIcons library at hugeicons.com. Each icon has a unique name that you can use with the icon prop. Common icons include:
  • Navigation: Home01Icon, Menu01Icon, ArrowLeft01Icon
  • Actions: Add01Icon, Edit01Icon, Delete01Icon
  • UI: Search01Icon, Settings01Icon, User01Icon
  • Status: CheckIcon, AlertCircleIcon, InfoCircleIcon

​
Aliases

The HugeIcon component is available via multiple aliases: 
ui.hi("Home01Icon")        # Primary alias
ui.icon("Home01Icon")      # Alternative alias
ui.HugeIcon.create("Home01Icon")  # Full component name

Build docs developers (and LLMs) love

Get started for freeTalk to us