Icon

<x-bt-icon />

A universal icon component that renders icons from Heroicons (default), Lucide, FontAwesome, or Beartropy SVGs. Supports size presets, solid/outline variants, and full CSS customization.
Customize via presets →

Basic Usage

Pass an icon name to render using the default icon set and variant.

1<x-bt-icon name="home" class="w-6 h-6 text-gray-700 dark:text-gray-300" />
2<x-bt-icon name="bell" class="w-6 h-6 text-gray-700 dark:text-gray-300" />
3<x-bt-icon name="envelope" class="w-6 h-6 text-gray-700 dark:text-gray-300" />

Sizes

Use magic attributes xs, sm, md (default), lg, xl, or custom Tailwind classes.

1<x-bt-icon name="star" xs class="text-gray-700 dark:text-gray-300" />
2<x-bt-icon name="star" sm class="text-gray-700 dark:text-gray-300" />
3<x-bt-icon name="star" md class="text-gray-700 dark:text-gray-300" />
4<x-bt-icon name="star" lg class="text-gray-700 dark:text-gray-300" />
5<x-bt-icon name="star" xl class="text-gray-700 dark:text-gray-300" />
6<x-bt-icon name="star" class="w-10 h-10 text-orange-500" />

Variants

Heroicons support outline (default) and solid variants via magic attributes or the variant prop.

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

Heroicon prefix notation

You can also use the Heroicon prefix syntax: heroicon-o-heart (outline) or heroicon-s-heart (solid).

Colors

Apply colors via Tailwind text classes. The icon component has no color presets.

1<x-bt-icon name="heart" lg class="text-red-500" />
2<x-bt-icon name="check-circle" lg class="text-green-500" />
3<x-bt-icon name="exclamation-triangle" lg class="text-yellow-500" />
4<x-bt-icon name="information-circle" lg class="text-blue-500" />
5<x-bt-icon name="bolt" lg class="text-purple-500" />

Icon Sets

Override the default set per icon with the set prop: heroicons, lucide, fontawesome, or beartropy.

1<x-bt-icon name="home" set="heroicons" lg class="text-gray-700 dark:text-gray-300" />
2<x-bt-icon name="home" set="lucide" lg class="text-gray-700 dark:text-gray-300" />
3<x-bt-icon name="search" set="beartropy" class="w-6 h-6 text-gray-700 dark:text-gray-300" />

Beartropy icon sizing

Beartropy SVG icons require explicit Tailwind size classes (e.g. class="w-6 h-6") rather than magic size attributes.

Beartropy Icons

The built-in Beartropy icon set includes 15 custom SVG icons.

check

x-mark

edit

trash

eye

eye-slash

calendar

clock

clipboard

upload

spinner

paper-airplane-right

floppy-disk

sync

 1<div class="grid grid-cols-5 gap-6">
 2    <div class="flex flex-col items-center gap-2">
 3        <x-bt-icon name="search" set="beartropy" class="w-6 h-6 text-gray-700 dark:text-gray-300" />
 4        <span class="text-xs text-gray-500">search</span>
 5    </div>
 6    <div class="flex flex-col items-center gap-2">
 7        <x-bt-icon name="check" set="beartropy" class="w-6 h-6 text-gray-700 dark:text-gray-300" />
 8        <span class="text-xs text-gray-500">check</span>
 9    </div>
10    <div class="flex flex-col items-center gap-2">
11        <x-bt-icon name="x-mark" set="beartropy" class="w-6 h-6 text-gray-700 dark:text-gray-300" />
12        <span class="text-xs text-gray-500">x-mark</span>
13    </div>
14    <div class="flex flex-col items-center gap-2">
15        <x-bt-icon name="edit" set="beartropy" class="w-6 h-6 text-gray-700 dark:text-gray-300" />
16        <span class="text-xs text-gray-500">edit</span>
17    </div>
18    <div class="flex flex-col items-center gap-2">
19        <x-bt-icon name="trash" set="beartropy" class="w-6 h-6 text-gray-700 dark:text-gray-300" />
20        <span class="text-xs text-gray-500">trash</span>
21    </div>
22    <div class="flex flex-col items-center gap-2">
23        <x-bt-icon name="eye" set="beartropy" class="w-6 h-6 text-gray-700 dark:text-gray-300" />
24        <span class="text-xs text-gray-500">eye</span>
25    </div>
26    <div class="flex flex-col items-center gap-2">
27        <x-bt-icon name="eye-slash" set="beartropy" class="w-6 h-6 text-gray-700 dark:text-gray-300" />
28        <span class="text-xs text-gray-500">eye-slash</span>
29    </div>
30    <div class="flex flex-col items-center gap-2">
31        <x-bt-icon name="calendar" set="beartropy" class="w-6 h-6 text-gray-700 dark:text-gray-300" />
32        <span class="text-xs text-gray-500">calendar</span>
33    </div>
34    <div class="flex flex-col items-center gap-2">
35        <x-bt-icon name="clock" set="beartropy" class="w-6 h-6 text-gray-700 dark:text-gray-300" />
36        <span class="text-xs text-gray-500">clock</span>
37    </div>
38    <div class="flex flex-col items-center gap-2">
39        <x-bt-icon name="clipboard" set="beartropy" class="w-6 h-6 text-gray-700 dark:text-gray-300" />
40        <span class="text-xs text-gray-500">clipboard</span>
41    </div>
42    <div class="flex flex-col items-center gap-2">
43        <x-bt-icon name="upload" set="beartropy" class="w-6 h-6 text-gray-700 dark:text-gray-300" />
44        <span class="text-xs text-gray-500">upload</span>
45    </div>
46    <div class="flex flex-col items-center gap-2">
47        <x-bt-icon name="spinner" set="beartropy" class="w-6 h-6 text-gray-700 dark:text-gray-300" />
48        <span class="text-xs text-gray-500">spinner</span>
49    </div>
50    <div class="flex flex-col items-center gap-2">
51        <x-bt-icon name="paper-airplane-right" set="beartropy" class="w-6 h-6 text-gray-700 dark:text-gray-300" />
52        <span class="text-xs text-gray-500">paper-airplane-right</span>
53    </div>
54    <div class="flex flex-col items-center gap-2">
55        <x-bt-icon name="floppy-disk" set="beartropy" class="w-6 h-6 text-gray-700 dark:text-gray-300" />
56        <span class="text-xs text-gray-500">floppy-disk</span>
57    </div>
58    <div class="flex flex-col items-center gap-2">
59        <x-bt-icon name="sync" set="beartropy" class="w-6 h-6 text-gray-700 dark:text-gray-300" />
60        <span class="text-xs text-gray-500">sync</span>
61    </div>
62</div>

FontAwesome

Pass the full FontAwesome class string as the name with set="fontawesome".

1<x-bt-icon name="fa-solid fa-house" set="fontawesome" lg class="text-gray-700 dark:text-gray-300" />
2<x-bt-icon name="fa-solid fa-gear" set="fontawesome" lg class="text-gray-700 dark:text-gray-300" />

FontAwesome CDN required

To use FontAwesome icons, you must include the FontAwesome CSS in your application via CDN or NPM.

Configuration

Default icon set and variant

Set the default icon set and variant in your environment or config/beartropyui.php.

1BEARTROPY_UI_ICON_SET=heroicons
2BEARTROPY_UI_ICON_VARIANT=outline

Real-World Example

Icons used inside a navigation menu.

 1<nav class="space-y-1">
 2    <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">
 3        <x-bt-icon name="home" class="w-5 h-5" />
 4        Dashboard
 5    </a>
 6    <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">
 7        <x-bt-icon name="users" class="w-5 h-5" />
 8        Team
 9    </a>
10    <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">
11        <x-bt-icon name="cog-6-tooth" class="w-5 h-5" />
12        Settings
13    </a>
14</nav>

Prop	Type	Default	Description
`name` Required	`string`		Icon name (e.g. `home`, `heroicon-s-home`, `fa-solid fa-house`).
`size`	`string\|null`	`null`	Size preset: `xs`, `sm`, `md` (default), `lg`, `xl`. Also available as magic attributes.
`class`	`string`	`''`	Additional CSS classes for custom sizing and colors (e.g. `w-6 h-6 text-red-500`).
`solid`	`bool`	`false`	Force the solid variant (Heroicons only).
`outline`	`bool`	`false`	Force the outline variant (Heroicons only).
`set`	`string\|null`	`config default`	Icon set override: `heroicons`, `lucide`, `fontawesome`, or `beartropy`.
`variant`	`string\|null`	`config default`	Variant override: `solid` or `outline`. The `solid`/`outline` boolean props take precedence.

Code highlighting provided by Torchlight

Current version: 1.0.7