Icon

Zinc UI provides a simple way to include icons in your project. Icons are a great way to add visual elements to your project. There are 3.9K+ icons available to use.

Search for the exact icon you need over at Heroicons and Lucide .

<x-icon name="o-bolt" /> // Using a dynamic icon component with the `name` attribute
<x-icon.o-bolt />        // Directly calling the specific `o-bolt` icon component

Variant

Use the prefix name to change the variant of the icon.

<x-icon name="o-bolt" /> // Heroicon - Outline variant : prefix o-
<x-icon name="s-bolt" /> // Heroicon - Solid variant : prefix s-
<x-icon name="m-bolt" /> // Heroicon - Mini variant : prefix m-
<x-icon name="c-bolt" /> // Heroicon - Micro variant : prefix c-
<x-icon name="l-zap" />  // Lucide - Outline variant : prefix l-

Use Heroicons over Lucide for better alignment and consistency.

Sizes

Control the size (height/width) of an icon using the


    size-*

Tailwind utility.

<x-icon name="s-bolt" class="size-10 shrink-0" />
<x-icon name="s-bolt" class="size-8 shrink-0" />
<x-icon name="s-bolt" class="size-6 shrink-0" />

Color

You can customize the color of an icon using Tailwind's text color utilities

<x-icon name="s-bolt" class="size-6 shrink-0 text-amber-500 dark:text-amber-300" />

Logo

Zinc UI provide some logos that you can use in your project.

<x-logo name="zinc-ui" />
<x-logo name="laravel" />
<x-logo name="livewire" />
<x-logo name="tailwind" />
<x-logo name="github" />