Icon column

#Introduction

Icon columns render an icon representing the state of the column:

use Filament\Tables\Columns\IconColumn;
use Filament\Support\Icons\Heroicon;

IconColumn::make('status')
    ->icon(fn (string $state): string => match ($state) {
        'draft' => Heroicon::OutlinedPencil,
        'reviewing' => Heroicon::OutlinedClock,
        'published' => Heroicon::OutlinedCheckCircle,
    })

The icon() method can inject various utilities into the function as parameters.

Learn more about utility injection.

Utility	Type	Parameter	Description
Column	Filament\Tables\Columns\Column	$column	The current column instance.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current table row.
Row loop	stdClass	$rowLoop	The row loop object for the current table row.
State	mixed	$state	The current value of the column, based on the current table row.
Table	Filament\Tables\Table	$table	The current table instance.

#Customizing the color

You may change the color of the icon, using the color() method:

use Filament\Tables\Columns\IconColumn;

IconColumn::make('status')
    ->color('success')

By passing a function to color(), you can customize the color based on the state of the column:

use Filament\Tables\Columns\IconColumn;

IconColumn::make('status')
    ->color(fn (string $state): string => match ($state) {
        'draft' => 'info',
        'reviewing' => 'warning',
        'published' => 'success',
        default => 'gray',
    })

The color() method can inject various utilities into the function as parameters.

Learn more about utility injection.

Utility	Type	Parameter	Description
Column	Filament\Tables\Columns\Column	$column	The current column instance.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current table row.
Row loop	stdClass	$rowLoop	The row loop object for the current table row.
State	mixed	$state	The current value of the column, based on the current table row.
Table	Filament\Tables\Table	$table	The current table instance.

#Customizing the size

The default icon size is IconSize::Large, but you may customize the size to be either IconSize::ExtraSmall, IconSize::Small, IconSize::Medium, IconSize::ExtraLarge or IconSize::TwoExtraLarge:

use Filament\Tables\Columns\IconColumn;
use Filament\Support\Enums\IconSize;

IconColumn::make('status')
    ->size(IconSize::Medium)

As well as allowing a static value, the size() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.

Learn more about utility injection.

Utility	Type	Parameter	Description
Column	Filament\Tables\Columns\Column	$column	The current column instance.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current table row.
Row loop	stdClass	$rowLoop	The row loop object for the current table row.
State	mixed	$state	The current value of the column, based on the current table row.
Table	Filament\Tables\Table	$table	The current table instance.

#Handling booleans

Icon columns can display a check or “X” icon based on the state of the column, either true or false, using the boolean() method:

use Filament\Tables\Columns\IconColumn;

IconColumn::make('is_featured')
    ->boolean()

If this attribute in the model class is already cast as a bool or boolean, Filament is able to detect this, and you do not need to use boolean() manually.

Optionally, you may pass a boolean value to control if the icon should be boolean or not:

use Filament\Tables\Columns\IconColumn;

IconColumn::make('is_featured')
    ->boolean(FeatureFlag::active())

As well as allowing a static value, the boolean() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.

Learn more about utility injection.

Utility	Type	Parameter	Description
Column	Filament\Tables\Columns\Column	$column	The current column instance.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current table row.
Row loop	stdClass	$rowLoop	The row loop object for the current table row.
State	mixed	$state	The current value of the column, based on the current table row.
Table	Filament\Tables\Table	$table	The current table instance.

#Customizing the boolean icons

You may customize the icon representing each state:

use Filament\Tables\Columns\IconColumn;
use Filament\Support\Icons\Heroicon;

IconColumn::make('is_featured')
    ->boolean()
    ->trueIcon(Heroicon::OutlinedCheckBadge)
    ->falseIcon(Heroicon::OutlinedXMark)

As well as allowing static values, the trueIcon() and falseIcon() methods also accept functions to dynamically calculate them. You can inject various utilities into the functions as parameters.

Learn more about utility injection.

Utility	Type	Parameter	Description
Column	Filament\Tables\Columns\Column	$column	The current column instance.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current table row.
Row loop	stdClass	$rowLoop	The row loop object for the current table row.
State	mixed	$state	The current value of the column, based on the current table row.
Table	Filament\Tables\Table	$table	The current table instance.

#Customizing the boolean colors

You may customize the icon color representing each state:

use Filament\Tables\Columns\IconColumn;

IconColumn::make('is_featured')
    ->boolean()
    ->trueColor('info')
    ->falseColor('warning')

As well as allowing static values, the trueColor() and falseColor() methods also accept functions to dynamically calculate them. You can inject various utilities into the functions as parameters.

Learn more about utility injection.

Utility	Type	Parameter	Description
Column	Filament\Tables\Columns\Column	$column	The current column instance.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current table row.
Row loop	stdClass	$rowLoop	The row loop object for the current table row.
State	mixed	$state	The current value of the column, based on the current table row.
Table	Filament\Tables\Table	$table	The current table instance.

#Wrapping multiple icons

When displaying multiple icons, they can be set to wrap if they can’t fit on one line, using wrap():

use Filament\Tables\Columns\IconColumn;

IconColumn::make('icon')
    ->wrap()

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion