Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

Datadisplay

Icon

The Icon component is used to display an icon from a library of icons. This implementation is based on the Lucide Icons where you can find a list of all available icons.

Basic Example

To display an icon, specify the tag prop from the list of available icons. Passing the tag as the first children is also supported and will be assigned to the tag prop.

The tag is expected to be in snake_case format, but kebab-case is also supported to allow copy-paste from https://lucide.dev/icons .

rx.flex(
    rx.icon("calendar"),
    rx.icon(tag="calendar"),
    gap="2",
)

Dynamic Icons

It is not possible to use dynamic values as the tag prop, because it is used to import the icon from the Lucide library. If you have a specific subset of icons you want to use dynamically, define an rx.match with them:

def dynamic_icon(icon_name):
    return rx.match(
        icon_name,
        ("plus", rx.icon("plus")),
        ("minus", rx.icon("minus")),
        ("equal", rx.icon("equal")),
    )

You can then use the dynamic_icon function to display the icons dynamically.

rx.foreach(["plus", "minus", "equal"], dynamic_icon)

Styling

Icon from Lucide can be customized with the following props stroke_width, size and color.

Stroke Width

rx.flex(
    rx.icon("moon", stroke_width=1),
    rx.icon("moon", stroke_width=1.5),
    rx.icon("moon", stroke_width=2),
    rx.icon("moon", stroke_width=2.5),
    gap="2",
)

Size

rx.flex(
    rx.icon("zoom_in", size=15),
    rx.icon("zoom_in", size=20),
    rx.icon("zoom_in", size=25),
    rx.icon("zoom_in", size=30),
    align="center",
    gap="2",
)

Color

Here is an example using basic colors in icons.

rx.flex(
    rx.icon("zoom_in", size=18, color="indigo"),
    rx.icon("zoom_in", size=18, color="cyan"),
    rx.icon("zoom_in", size=18, color="orange"),
    rx.icon("zoom_in", size=18, color="crimson"),
    gap="2",
)

A radix color with a scale may also be specified using the var() token syntax seen below.

rx.flex(
    rx.icon("zoom_in", size=18, color="var(--purple-1)"),
    rx.icon("zoom_in", size=18, color="var(--purple-2)"),
    rx.icon("zoom_in", size=18, color="var(--purple-3)"),
    rx.icon("zoom_in", size=18, color="var(--purple-4)"),
    rx.icon("zoom_in", size=18, color="var(--purple-5)"),
    rx.icon("zoom_in", size=18, color="var(--purple-6)"),
    rx.icon("zoom_in", size=18, color="var(--purple-7)"),
    rx.icon("zoom_in", size=18, color="var(--purple-8)"),
    rx.icon("zoom_in", size=18, color="var(--purple-9)"),
    rx.icon("zoom_in", size=18, color="var(--purple-10)"),
    rx.icon("zoom_in", size=18, color="var(--purple-11)"),
    rx.icon("zoom_in", size=18, color="var(--purple-12)"),
    gap="2",
)

Here is another example using the accent color with scales. The accent is the most dominant color in your theme.

rx.flex(
    rx.icon("zoom_in", size=18, color="var(--accent-1)"),
    rx.icon("zoom_in", size=18, color="var(--accent-2)"),
    rx.icon("zoom_in", size=18, color="var(--accent-3)"),
    rx.icon("zoom_in", size=18, color="var(--accent-4)"),
    rx.icon("zoom_in", size=18, color="var(--accent-5)"),
    rx.icon("zoom_in", size=18, color="var(--accent-6)"),
    rx.icon("zoom_in", size=18, color="var(--accent-7)"),
    rx.icon("zoom_in", size=18, color="var(--accent-8)"),
    rx.icon("zoom_in", size=18, color="var(--accent-9)"),
    rx.icon("zoom_in", size=18, color="var(--accent-10)"),
    rx.icon("zoom_in", size=18, color="var(--accent-11)"),
    rx.icon("zoom_in", size=18, color="var(--accent-12)"),
    gap="2",
)

Final Example

Icons can be used as child components of many other components. For example, adding a magnifying glass icon to a search bar.

Search documentation...

rx.badge(
    rx.flex(
        rx.icon("search", size=18),
        rx.text(
            "Search documentation...",
            size="3",
            weight="medium",
        ),
        direction="row",
        gap="1",
        align="center",
    ),
    size="2",
    radius="full",
    color_scheme="gray",
)