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