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.
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.
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:
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
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.
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.
Search documentation...