Icon

Renders Heroicons by name. Supports outline, solid, mini, and micro variants.

Basic usage

<x-boson::icon name="star" variant="solid" class="text-yellow-500" />
<x-boson::icon name="heart" variant="solid" class="text-red-500" />
<x-boson::icon name="check-circle" variant="solid" class="text-green-500" />
<x-boson::icon name="bell" variant="solid" class="text-blue-500" />
<x-boson::icon name="envelope" variant="solid" class="text-purple-500" />

Variants

<x-boson::icon name="star" variant="micro" />  {{-- 16px --}}
<x-boson::icon name="star" variant="mini" />   {{-- 20px --}}
<x-boson::icon name="star" variant="outline" /> {{-- 24px --}}
<x-boson::icon name="star" variant="solid" />   {{-- 24px --}}

Custom color

<x-boson::icon name="fire" variant="solid" class="text-orange-500" />
<x-boson::icon name="bolt" variant="solid" class="text-amber-400" />
<x-boson::icon name="shield-check" variant="solid" class="text-emerald-500" />
<x-boson::icon name="globe-alt" variant="solid" class="text-cyan-500" />
<x-boson::icon name="sparkles" variant="solid" class="text-violet-500" />

Custom size

<x-boson::icon name="heart" variant="solid" class="size-4 text-red-500" />
<x-boson::icon name="heart" variant="solid" class="size-6 text-red-500" />
<x-boson::icon name="heart" variant="solid" class="size-8 text-red-500" />
<x-boson::icon name="heart" variant="solid" class="size-10 text-red-500" />
<x-boson::icon name="heart" variant="solid" class="size-12 text-red-500" />

Inside buttons

<x-boson::button icon="plus">Create</x-boson::button>
<x-boson::button icon="arrow-down-tray" variant="ghost">Download</x-boson::button>
<x-boson::button icon="trash" variant="danger">Delete</x-boson::button>

Props