### Icon

The Icon component is used to display an icon from a library of icons. This implementation is based on the [Lucide Icons](https://lucide.dev/icons) where you can find a list of all available icons.

### Icons List

### 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](https://lucide.dev/icons).

### Dynamic Icons

There are two ways to use dynamic icons in Reflex:

#### Using rx.match

If you have a specific subset of icons you want to use dynamically, you can define an `rx.match` with them:

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

#### Using Dynamic Icon Tags

Reflex also supports using dynamic values directly as the `tag` prop in `rx.icon()`. This allows you to use any icon from the Lucide library dynamically at runtime.

## Dynamic Icon Example

### Change Icon

Under the hood, when a dynamic value is passed as the `tag` prop to `rx.icon()`, Reflex automatically uses a special `DynamicIcon` component that can load icons at runtime.

When using dynamic icons, make sure the icon names are valid. Invalid icon names will cause runtime errors.

### Styling

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

#### Stroke Width

#### Size

#### Color

Here is an example using basic colors in icons.

A radix color with a scale may also be specified using `rx.color()` as seen below.

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

### Final Example

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

### API Reference

#### rx.lucide.Icon

An Icon component.

### Props

| Prop | Type | Description |
| --- | --- | --- |
| `size` | `int` | The size of the icon in pixels. |

### Event Triggers

[See the full list of default event triggers](/content/docs/api-reference/event-triggers/index.html)  
[Built with Reflex](/content/site-root.html)