Icon column

Columns

Icon columns render a Blade icon component representing their contents:

use Filament\Tables\Columns\IconColumn;
 
IconColumn::make('is_featured')
->options([
'heroicon-o-x-circle',
'heroicon-o-pencil' => 'draft',
'heroicon-o-clock' => 'reviewing',
'heroicon-o-check-circle' => 'published',
])

You may also pass a callback to activate an option, accepting the cell's $state:

use Filament\Tables\Columns\IconColumn;
 
IconColumn::make('is_featured')
->options([
'heroicon-o-x-circle',
'heroicon-o-pencil' => fn ($state): bool => $state === 'draft',
'heroicon-o-clock' => fn ($state): bool => $state === 'reviewing',
'heroicon-o-check-circle' => fn ($state): bool => $state === 'published',
])

Customizing the color

Icon columns may also have a set of icon colors, using the same syntax. They may be either primary, secondary, success, warning or danger:

use Filament\Tables\Columns\IconColumn;
 
IconColumn::make('is_featured')
->options([
'heroicon-o-x-circle',
'heroicon-o-pencil' => 'draft',
'heroicon-o-clock' => 'reviewing',
'heroicon-o-check-circle' => 'published',
])
->colors([
'secondary',
'danger' => 'draft',
'warning' => 'reviewing',
'success' => 'published',
])

Customizing the size

The default icon size is lg, but you may customize the size to be either xs, sm, md, lg or xl:

use Filament\Tables\Columns\IconColumn;
 
IconColumn::make('is_featured')
->options([
'heroicon-s-x-circle',
'heroicon-s-pencil' => 'draft',
'heroicon-s-clock' => 'reviewing',
'heroicon-s-check-circle' => 'published',
])
->size('md')

Handling booleans

Icon columns can display a check or cross icon based on the contents of the database column, either true or false, using the boolean() method:

use Filament\Tables\Columns\IconColumn;
 
IconColumn::make('is_featured')
->boolean()

Customizing the boolean icons

You may customize the icon representing each state. Icons are the name of a Blade component present. By default, Heroicons v1 are installed:

use Filament\Tables\Columns\IconColumn;
 
IconColumn::make('is_featured')
->boolean()
->trueIcon('heroicon-o-badge-check')
->falseIcon('heroicon-o-x-circle')

Customizing the boolean colors

You may customize the icon color representing each state. These may be either primary, secondary, success, warning or danger:

use Filament\Tables\Columns\IconColumn;
 
IconColumn::make('is_featured')
->boolean()
->trueColor('primary')
->falseColor('warning')
Edit on GitHub

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

Enjoying Filament?

We are open source at heart. To allow us to build new features, fix bugs, and run the community, we require your financial support.

Sponsor Filament on GitHub