// DOCS ICON PICKER 4.x

Appearance

Size

By default the icon is rendered in filament's large size. You can change it with the size option:

use Filament\Support\Enums\IconSize;

IconColumn::make('icon')
    ->size(IconSize::Medium);

The available sizes are the ones from filament: IconSize::ExtraSmall, IconSize::Small, IconSize::Medium, IconSize::Large, IconSize::ExtraLarge and IconSize::TwoExtraLarge.

You can also pass 'base' to fall back to the size the icon has on its own, without any size class:

IconColumn::make('icon')
    ->size('base');

Color

Icons use the current text color, so they follow your theme. If you want a specific color, use the color option:

IconColumn::make('icon')
    ->color('primary');

Like everywhere in filament, this accepts a closure, which is handy to color the icon based on the record:

IconColumn::make('icon')
    ->color(fn (Category $record) => $record->is_active ? 'success' : 'gray');

Tooltip

IconColumn::make('icon')
    ->tooltip(fn ($state) => $state);

Alignment

use Filament\Support\Enums\Alignment;

IconColumn::make('icon')
    ->alignment(Alignment::Center);
guava/filament-icon-picker 709K installs · 163 stars
// COOKIES

A few cookies keep the site working; others remember preferences or count visits. You choose what runs.

Cookie policy