← Back to Plugins
  • Icon Picker
  • Icon Picker

Icon Picker

Plugin information

by Lukas Frey • 27 stars

Field Admin panel Column Form builder Table builder

Adds a form field that let's you choose an icon from a list of installed blade icon packages. More info and a video showcase on GitHub.


#icon-picker on Discord






Filament Icon Picker

This plugin adds a new icon picker form field and a corresponding table column. You can use it to select from any blade-icons kit that you have installed. By default, heroicons are supported since it is shipped with Filament.

This can be useful for when you want to customize icons rendered on your frontend, if you want your users to be able to customize navigation icons, add small icons to their models for easy recognition and similar.


You can install the package via composer:

composer require guava/filament-icon-picker

You can publish the config file with:

php artisan vendor:publish --tag="filament-icon-picker-config")

This is the contents of the published config file:

return [
'sets' => null,
'columns' => 1,
'layout' => \Guava\FilamentIconPicker\Layout::FLOATING,


Basic Usage

Usage in Admin Panel:

use Guava\FilamentIconPicker\Forms\IconPicker;
public static function form(Form $form): Form
return $form->schema([

Usage in Livewire Component:

use Guava\FilamentIconPicker\Forms\IconPicker;
protected function getFormSchema(): array
return [

Usage in Tables:

// Make sure this is the correct import, not the filament one
use Guava\FilamentIconPicker\Tables\IconColumn;
public static function table(Table $table): Table
return $table
// ...



By default, a single-column icon picker will be displayed. You can customize the amount of columns via the icon-picker.columns configuration or using the ->columns() option like this:

// Display 3 columns from lg and above
// More detailed customization
// This will display 1 column from xs to md, 3 columns from lg to xl and 5 columns from 2xl and above
'default' => 1,
'lg' => 3,
'2xl' => 5,
1 Column 3 Columns
image image


By default, the plugin will use all available blade icon sets installed. If you want to use only specific icon sets, you can change the default via the icon-picker.sets configuration or on a case-by-case basis:

// Search both herocions and fontawesome icons
->sets(['heroicons', 'fontawesome-solid']);

Allow/Disallow icons

For detailed control over the icons, there are two options available to allow and disallow certain icons.

// Allow ONLY heroicon-o-user and heroicon-o-users
// Allow ALL fontawesome icons, EXCEPT fas-user
->allowIcons(['heroicon-o-user', 'heroicon-o-users'])


The icon picker comes with two layouts. The default, Layout::FLOATING is the standard layout used in Filament Selects. The search results will appear in a pop over window.

The Layout::ON_TOP will render the search results always on the page.

->layout(Layout::FLOATING) // default

Custom Item Template

Out of the box, the search results render a preview of the icon and their identifier. You are free to customize this using the ->itemTemplate() option:

// Render your.blade.template instead of the default template.
// Make sure to pass the $icon as parameter to be able to render it in your view.
->itemTemplate(fn($icon) => view('your.blade.template', ['icon' => $icon]));