Skip to main content
IconPickerField ← Back to Table of Contents

​
Summary

Searchable blade-icons picker with lazy SVG rendering, set filters, whitelist/exclude controls, paginated server-side search, and virtual scrolling for large catalogs. Stores the full icon name string (e.g. heroicon-o-star, gravityui-star).
ClassBjanczak\FilamentFlexFields\Filament\Forms\Components\IconPickerField
State typestring|null
FieldTypeicon_picker
Playgroundicon-picker-field slug in Flex Fields playground
The stored value is a plain string, making it compatible with any standard Filament or Blade icon component.

​
Basic usage

​
Standard Icon Picker

use Bjanczak\FilamentFlexFields\Filament\Forms\Components\IconPickerField;

IconPickerField::make('menu_icon')
    ->label('Menu icon')
    ->sets(['heroicons', 'gravity-icons'])
    ->preload()
    ->required();

​
Strict Whitelist

IconPickerField::make('status_icon')
    ->sets(['heroicons'])
    ->icons([
        'heroicon-o-check-circle',
        'heroicon-o-exclamation-triangle',
        'heroicon-o-x-circle',
    ])
    ->gridColumns(4)
    ->size('sm');

​
State & validation

​
Stored value

State is the full blade-icons name stored as a plain string. 
$record->menu_icon; // 'heroicon-o-star'

​
Validation rules (built-in)

Custom rule checks the value against the configured catalog (sets, whitelist, and exclude list).

​
Configuration API

All methods accept Closure unless noted.
MethodTypeDefaultDescription
sets(array|string $sets)SetupallLimit available icon libraries
icons(array $icons)Setup—Whitelist only these full icon names
excludeIcons(array $icons)Setup—Remove icons from the catalog
searchResultsLayout(string $layout)Setupiconsicons, grid, or list
gridColumns(int $columns)Setup8Column count for grid layouts (2–12)
preload(bool $condition)SetupfalseFetch first page on mount
closeOnSelect(bool $condition)SetuptrueClose panel after selection
perPage(int $perPage)Setup64Server page size (max 96)
limitPerSet(int $limit)Setup—Cap icons indexed per set
clearable(bool $condition)SetuptrueShow clear (×) button
variant(string $variant)Setupborderedbordered, secondary, flat, soft, faded
size(string $size)Setup'md'sm, md, lg
placeholder(string $text)SetupdefaultTrigger placeholder

​
Real-world examples

​
CMS Navigation Icon

IconPickerField::make('icon')
    ->label('Navigation Icon')
    ->sets(['heroicons'])
    ->iconsOnly()
    ->gridColumns(10)
    ->preload();

​
Frontend Usage (Blade)

@if (filled($category->icon))
    <x-icon :name="$category->icon" class="h-6 w-6" />
@endif

​
Playground

/admin/flex-fields-playground/icon-picker-field See Playground for setup.
ComponentWhen to use instead
IconColumnRead-only icon display in tables
SelectFieldGeneric selection without icon previews
RatingFieldStar-based rating input

​
CSS classes (reference)

ClassRole
fff-icon-pickerAlpine root inside trigger
fff-icon-picker-fieldField wrapper modifier
fff-icon-picker__previewSelected icon SVG in trigger
fff-icon-picker__panelTeleported dropdown panel
fff-icon-picker__toolbarSearch and set tabs container
fff-icon-picker__resultsScrollable results list
fff-icon-picker__gridGrid cells container
fff-icon-picker__optionIndividual icon cell
fff-icon-picker__skeletonLoading placeholder