| Install | |
|---|---|
composer require wallacemartinss/filament-icon-picker |
|
| Latest Version: | v2.0.0 |
| PHP: | ^8.2 |
A beautiful, modern icon picker component for Filament v5, powered by blade-ui-kit/blade-icons.
![]()
![]() |
composer require wallacemartinss/filament-icon-picker
You need at least one icon package to use the Icon Picker. Use the interactive installer:
php artisan filament-icon-picker:install-icons
This will show you an interactive menu to select which icon packages to install:
🎨 Filament Icon Picker - Install Icons
? Select icon packages to install:
● Heroicons - Heroicons by Tailwind CSS (~1,300 icons)
○ Fontawesome - Font Awesome (Solid, Regular, Brands) (~2,800 icons)
○ Phosphor - Phosphor Icons (~9,000 icons)
○ Material - Google Material Design (~10,000 icons)
○ Tabler - Tabler Icons (~4,400 icons)
○ Lucide - Lucide Icons (~1,400 icons)
Other options:
# List available packages and their status
php artisan filament-icon-picker:install-icons --list
# Install all icon packages at once
php artisan filament-icon-picker:install-icons --all
Or install manually via Composer:
# Heroicons (recommended)
composer require blade-ui-kit/blade-heroicons
# Font Awesome (2800+ icons)
composer require owenvoke/blade-fontawesome
# Phosphor Icons (9000+ icons)
composer require codeat3/blade-phosphor-icons
# Google Material Design Icons (10000+ icons)
composer require codeat3/blade-google-material-design-icons
# Tabler Icons (4400+ icons)
composer require blade-ui-kit/blade-tabler-icons
# Lucide Icons (1400+ icons)
composer require mallardduck/blade-lucide-icons
See all available icon packages at Blade Icons.
Add the plugin's views to your theme CSS file so Tailwind can scan them:
/* resources/css/filament/admin/theme.css */
@source '../../../../vendor/wallacemartinss/filament-icon-picker/resources/views/**/*';
npm run build
php artisan vendor:publish --tag="filament-icon-picker-config"
php artisan optimize:clear
php artisan icons:cache
When you install icon packages using php artisan filament-icon-picker:install-icons, PHP Enums are automatically generated for type-safe icon usage:
use Wallacemartinss\FilamentIconPicker\Enums\Heroicons;
use Wallacemartinss\FilamentIconPicker\Enums\GoogleMaterialDesignIcons;
use Wallacemartinss\FilamentIconPicker\Enums\PhosphorIcons;
// In navigation icon (with full autocomplete!):
protected static string|BackedEnum|null $navigationIcon = GoogleMaterialDesignIcons::AccountCircle;
// In actions:
Action::make('star')->icon(Heroicons::OutlinedStar)
// In pages:
public static function getNavigationIcon(): ?string
{
return PhosphorIcons::WhatsappLogoDuotone->value;
}
You can also regenerate enums manually:
php artisan filament-icon-picker:generate-enums --all
For dynamic icon usage without generating enums, use the Icon helper:
use Wallacemartinss\FilamentIconPicker\Enums\Icon;
// Navigation icon:
public static function getNavigationIcon(): ?string
{
return Icon::material('account-circle');
}
// With variants:
Icon::heroicon('users', 'outlined') // heroicon-o-users
Icon::heroicon('users', 'solid') // heroicon-s-users
Icon::phosphor('whatsapp-logo', 'duotone') // phosphor-whatsapp-logo-duotone
Icon::fontawesome('heart', 'solid') // fas-heart
Icon::fontawesome('github', 'brands') // fab-github
use Wallacemartinss\FilamentIconPicker\Forms\Components\IconPickerField;
public static function form(Form $form): Form
{
return $form
->schema([
IconPickerField::make('icon')
->label('Select an Icon')
->searchable()
->required(),
]);
}
IconPickerField::make('icon')
->allowedSets(['heroicons', 'fontawesome-solid', 'phosphor-icons'])
IconPickerField::make('icon')
->modalSize('5xl') // sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl
IconPickerField::make('icon')
->placeholder('Choose an icon...')
IconPickerField::make('icon')
->showSetFilter(false)
use Wallacemartinss\FilamentIconPicker\Tables\Columns\IconPickerColumn;
public static function table(Table $table): Table
{
return $table
->columns([
IconPickerColumn::make('icon')
->label('Icon'),
]);
}
IconPickerColumn::make('icon')
->size('lg') // xs, sm, md, lg, xl, 2xl
// Or use shortcut methods:
IconPickerColumn::make('icon')->extraSmall() // xs
IconPickerColumn::make('icon')->small() // sm
IconPickerColumn::make('icon')->medium() // md (default)
IconPickerColumn::make('icon')->large() // lg
IconPickerColumn::make('icon')->extraLarge() // xl
IconPickerColumn::make('icon')
->color('success') // primary, secondary, success, warning, danger, info
// Or use shortcut methods:
IconPickerColumn::make('icon')->primary()
IconPickerColumn::make('icon')->success()
IconPickerColumn::make('icon')->warning()
IconPickerColumn::make('icon')->danger()
IconPickerColumn::make('icon')->info()
// Or use CSS color values:
IconPickerColumn::make('icon')->color('#ff5500')
IconPickerColumn::make('icon')->color('rgb(255, 85, 0)')
IconPickerColumn::make('icon')->color('purple')
// Or use custom Tailwind classes:
IconPickerColumn::make('icon')->color('text-purple-500')
IconPickerColumn::make('icon')
->color(fn ($record) => match($record->status) {
'active' => 'success',
'pending' => 'warning',
'inactive' => 'danger',
default => 'gray',
})
IconPickerColumn::make('icon')
->animation('spin') // spin, pulse
// Or use shortcut methods:
IconPickerColumn::make('icon')->spin() // Rotation animation
IconPickerColumn::make('icon')->pulse() // Pulsing/fading animation
// With custom speed (CSS duration format):
IconPickerColumn::make('icon')->spin('0.5s') // Fast spin
IconPickerColumn::make('icon')->spin('3s') // Slow spin
IconPickerColumn::make('icon')->pulse('0.5s') // Fast pulse
IconPickerColumn::make('icon')->pulse('4s') // Slow pulse
// Or set speed separately:
IconPickerColumn::make('icon')
->spin()
->animationSpeed('0.3s')
IconPickerColumn::make('icon')
->showLabel() // Shows the icon name next to the icon
Use the icon() method to display a fixed icon without requiring a database column:
// Static icon
IconPickerColumn::make('type_indicator')
->icon('heroicon-o-star')
->warning()
->large()
// Dynamic icon based on record
IconPickerColumn::make('status_indicator')
->icon(fn ($record) => $record->is_premium ? 'heroicon-s-star' : 'heroicon-o-user')
->color(fn ($record) => $record->is_premium ? 'warning' : 'gray')
->animation(fn ($record) => $record->is_featured ? 'pulse' : null)
IconPickerColumn::make('icon')
->large()
->success()
->spin()
->showLabel()
// Dynamic example with all features:
IconPickerColumn::make('status_icon')
->color(fn ($record) => $record->is_active ? 'success' : 'danger')
->animation(fn ($record) => $record->is_processing ? 'spin' : null)
->size('lg')
use Wallacemartinss\FilamentIconPicker\Infolists\Components\IconPickerEntry;
public static function infolist(Infolist $infolist): Infolist
{
return $infolist
->schema([
IconPickerEntry::make('icon')
->label('Icon'),
]);
}
IconPickerEntry::make('icon')
->size('xl')
->color('primary')
// Or use shortcut methods:
IconPickerEntry::make('icon')
->extraLarge()
->danger()
IconPickerEntry::make('icon')
->color(fn ($record) => match($record->status) {
'active' => 'success',
'pending' => 'warning',
'inactive' => 'danger',
default => 'gray',
})
IconPickerEntry::make('icon')
->spin() // Rotation animation
->pulse() // Pulsing/fading animation
// With custom speed (CSS duration format):
IconPickerEntry::make('icon')->spin('0.5s') // Fast spin
IconPickerEntry::make('icon')->spin('3s') // Slow spin
IconPickerEntry::make('icon')->pulse('0.5s') // Fast pulse
IconPickerEntry::make('icon')->pulse('4s') // Slow pulse
// Or set speed separately:
IconPickerEntry::make('icon')
->pulse()
->animationSpeed('1s')
IconPickerEntry::make('icon')
->showIconName(false) // Hides the icon name, shows only the icon
Use the icon() method to display a fixed icon without requiring a database column:
// Static icon
IconPickerEntry::make('badge_icon')
->icon('heroicon-o-badge-check')
->success()
->large()
->showIconName(false)
// Dynamic icon based on record
IconPickerEntry::make('user_type')
->icon(fn ($record) => $record->is_admin ? 'heroicon-s-shield-check' : 'heroicon-o-user')
->color(fn ($record) => $record->is_admin ? 'danger' : 'primary')
IconPickerEntry::make('status_icon')
->extraLarge()
->color(fn ($record) => $record->is_active ? 'success' : 'danger')
->animation(fn ($record) => $record->is_loading ? 'spin' : null)
->showIconName(false)
After generating enums with php artisan filament-icon-picker:generate-enums, you can use them anywhere in Filament:
use Wallacemartinss\FilamentIconPicker\Enums\Heroicons;
use Wallacemartinss\FilamentIconPicker\Enums\GoogleMaterialDesignIcons;
class UserResource extends Resource
{
protected static string|BackedEnum|null $navigationIcon = GoogleMaterialDesignIcons::AccountCircle;
}
use Wallacemartinss\FilamentIconPicker\Enums\PhosphorIcons;
use Wallacemartinss\FilamentIconPicker\Enums\Icon;
// Using generated enum:
public static function getNavigationIcon(): ?string
{
return PhosphorIcons::WhatsappLogoDuotone->value;
}
// Or using Icon helper (no generation needed):
public static function getNavigationIcon(): ?string
{
return Icon::phosphor('whatsapp-logo', 'duotone');
}
use Wallacemartinss\FilamentIconPicker\Enums\Heroicons;
Action::make('edit')
->icon(Heroicons::OutlinedPencil)
Action::make('delete')
->icon(Heroicons::OutlinedTrash)
Each generated enum includes helpful methods:
use Wallacemartinss\FilamentIconPicker\Enums\Heroicons;
// Get icon value
Heroicons::OutlinedStar->value; // 'heroicon-o-star'
// Get all options (useful for selects)
Heroicons::options(); // ['OutlinedStar' => 'heroicon-o-star', ...]
// Search icons
Heroicons::search('star'); // Returns matching cases
// Works with Filament's ScalableIcon interface
Heroicons::OutlinedStar->getIconForSize(IconSize::Medium);
The config file allows you to customize the picker behavior:
// config/filament-icon-picker.php
return [
/*
|--------------------------------------------------------------------------
| Allowed Icon Sets
|--------------------------------------------------------------------------
|
| Define which icon sets should be available in the picker.
| Leave empty array [] to allow all installed blade-icon sets.
|
| Important: Use the exact set name, not the package name!
| Examples:
| - 'heroicons' (from blade-heroicons)
| - 'fontawesome-solid', 'fontawesome-regular', 'fontawesome-brands' (from blade-fontawesome)
| - 'phosphor-icons' (from blade-phosphor-icons)
| - 'google-material-design-icons' (from blade-google-material-design-icons)
|
*/
'allowed_sets' => [],
/*
|--------------------------------------------------------------------------
| Icons Per Page
|--------------------------------------------------------------------------
|
| Number of icons to load initially and on each scroll batch.
| Increase for faster browsing, decrease for better performance.
|
*/
'icons_per_page' => 100,
/*
|--------------------------------------------------------------------------
| Column Layout
|--------------------------------------------------------------------------
|
| Number of columns in the icon grid for different screen sizes.
|
*/
'columns' => [
'default' => 5,
'sm' => 7,
'md' => 9,
'lg' => 10,
],
/*
|--------------------------------------------------------------------------
| Modal Size
|--------------------------------------------------------------------------
|
| The size of the icon picker modal.
| Options: 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'
|
*/
'modal_size' => '4xl',
/*
|--------------------------------------------------------------------------
| Cache Icons
|--------------------------------------------------------------------------
|
| Whether to cache the icon list for better performance.
| Set to false during development if you're adding new icons frequently.
|
*/
'cache_icons' => true,
/*
|--------------------------------------------------------------------------
| Cache Duration
|--------------------------------------------------------------------------
|
| How long to cache the icon list (in seconds).
| Default: 86400 (24 hours)
|
*/
'cache_duration' => 86400,
];
To find the correct set names for your installed packages, run:
php artisan tinker
Then:
use Wallacemartinss\FilamentIconPicker\IconSetManager;
$manager = new IconSetManager();
print_r($manager->getSetNames());
This will output all available set names like:
Array
(
[0] => heroicons
[1] => fontawesome-solid
[2] => fontawesome-regular
[3] => fontawesome-brands
[4] => phosphor-icons
[5] => google-material-design-icons
)
php artisan optimize:clear@source directive to your theme CSSnpm run buildphp artisan view:clearCtrl+Shift+RTo run the package tests:
cd packages/wallacemartinss/filament-icon-picker
./vendor/bin/phpunit
Or with testdox output:
./vendor/bin/phpunit --testdox
Please see CHANGELOG for more information on what has changed recently.
Please see CONTRIBUTING for details.
Please review our security policy on how to report security vulnerabilities.
The MIT License (MIT). Please see License File for more information.