UI Components

Icon

All icons are powered by Blade Hero Icons, which you can use immediately. Simply use the name of any Heroicon.

Cyber Week Mega Offer!

Huge discounts on all Hostinger plans

Use our referral link for an extra 20% off!

# Basic usage

<x-icon name="home" />
<x-icon name="trash" />
<x-icon name="archive-box-x-mark" />
<x-icon name="pencil-square" />
<x-icon name="cog-6-tooth" />
<x-icon name="bars-3" />
<x-icon name="bell-alert" />
<x-icon name="clipboard-document" />
<x-icon name="arrow-left" />
<x-icon name="arrow-right" />
<x-icon name="chat-bubble-left" />
<x-icon name="magnifying-glass" />

# Size variants

<x-icon name="bell" class="size-3" />
<x-icon name="bell" class="size-4" />
<x-icon name="bell" class="size-5" />
<x-icon name="bell" class="size-6" />
<x-icon name="bell" class="size-7" />
<x-icon name="bell" class="size-8" />
<x-icon name="bell" class="size-9" />
<x-icon name="bell" class="size-10" />

# Customize icon

<x-icon name="home" class="text-indigo-500" />
<x-icon name="pencil-square" class="text-amber-500 size-5" />
<x-icon name="trash" class="text-red-500 size-6" />
<x-icon name="clipboard-document" class="text-green-500 size-7" />

Default settings

Change icon default settings according your needs config/tallcraftui.php

return [
    /**
    *
    * type => Allowed: heroicons
    * style => Allowed: outline, solid
    *
    */
   'icons' => [
       'type' => 'heroicons',
       'style' => 'outline',
   ],
];