Logo Beartropy UI
Icons
The icon component is a universal, flexible, and fast way to use SVG or font-based icons in your project. It supports multiple icon sets (Heroicons, Lucide, FontAwesome), style variants (outline/solid), different sizes, and full class customization.
By default, the icon set and variant are defined in your config, but you can always override them per icon.

Component name

As you will see in the examples, the component name is bt-icon.
We use the blade-heroicons package that is part of the Blade UI Kit, and they already have the icon component. So we set our component as bt-icon to avoid conflicts.

Integrations

In any component you see that accepts an icon parameter like Button, Alert, etc., you can use what you would use in the icon component.
For example, you are setting up your Nav component, and you want to use an icon, you can do it like this:

Basic usage

Use the icon component with just the icon name, and it will use your default set and variant: 

1<x-bt-icon md name="user" class="text-black dark:text-white" />
2<x-bt-icon md name="check-circle" class="text-black dark:text-white" />
3<x-bt-icon md name="user" class="text-black dark:text-white" />

Icon sizes

You can set the icon size using the magic attributes xs, sm, md, lg, or xl.
If you want a custom size, just use the class prop to set any width/height you want! 

1<x-bt-icon name="user" xs class="text-black dark:text-white" />
2<x-bt-icon name="user" sm class="text-black dark:text-white" />
3<x-bt-icon name="user" md class="text-black dark:text-white" />
4<x-bt-icon name="user" lg class="text-black dark:text-white" />
5<x-bt-icon name="user" xl class="text-black dark:text-white" />
6<x-bt-icon name="user" class="w-16 h-16 text-red-500" />

Variants: outline & solid (Heroicons)

For Heroicons, you can use the outline or solid magic attributes to select the style.
The default variant is set in your config, but you can override per icon.
Lucide and FontAwesome currently only have one style each. 

1<x-bt-icon name="user" outline lg class="text-blue-500" />
2<x-bt-icon name="user" solid lg class="text-emerald-500" />

Switching icon sets

By default, the icon set comes from your config (heroicons, lucide, or fontawesome).
You can override the set for a single icon with the set prop. 

1<x-bt-icon name="user" set="lucide" lg class="text-black dark:text-white" />
2<x-bt-icon name="user" set="heroicons" solid lg class="text-purple-500" />
3<x-bt-icon name="fa fa-solid fa-user" set="fontawesome" lg class="text-green-600" />

Default configuration

You can set the default icon set and variant in with ENV variables
Options
for BEARTROPY_UI_ICON_SET: heroicons, lucide, fontawesome.
Options for BEARTROPY_UI_ICON_VARIANT (only for heroicons): outline, solid. 

1BEARTROPY_UI_ICON_SET=heroicons
2BEARTROPY_UI_ICON_VARIANT=outline
Code highlighting provided by Torchlight