Alpesh Nakrani

Filament color picker and icon picker fields: a practical guide

By Alpesh Nakrani

Learn how to use Filament color picker and icon picker fields in your Laravel admin panel. Step-by-step guide with real code examples and Laracopilot tips.

Filament color picker and icon picker fields: a practical guide

Most developers discover Filament’s color picker and icon picker fields by accident, somewhere deep in a project where the client wants a “theme color” option or an icon selector for their dashboard menu. Then they spend two hours reading the docs, another hour debugging why the saved value won’t display in their table column, and a third hour figuring out why icon picker isn’t working without the right package installed.

I’ve been through this. At Laracopilot, we generate Filament v3 resources from natural language prompts, which means we’ve had to get these field types exactly right so the generated code actually works. This guide is what I wish existed when I started.

By the end of this article, you’ll know exactly how to implement both field types, handle their saved values correctly in table columns, and avoid the three most common mistakes that cause silent failures.

What filament color picker and icon picker fields actually do

The color picker field lets users select a color value from a visual picker. Filament saves the result as a hex string (e.g., #3b82f6) or as an RGB/HSL string depending on your configuration. It uses the browser’s native color input by default but supports a richer picker via the ColorPicker class.

The icon picker field lets users choose from a library of icons, typically from Heroicons or Blade UI Kit, and saves the icon name as a string (e.g., heroicon-o-star). It is not bundled with Filament core. You need the filament-icon-picker community package from guava-systems.

Understanding this distinction upfront saves you an hour of debugging.

Setting up color picker fields in Filament v3

Basic implementation

The ColorPicker field is part of Filament’s core form fields package. No additional installation required.

use Filament\Forms\Components\ColorPicker;

ColorPicker::make('brand_color')
->label('Brand color')
->required(),

This renders a standard HTML color input. The value saved to your database is a hex string like #1a2b3c. Make sure your database column is a string type, not an integer.

// Migration
$table->string('brand_color')->nullable();

Supported color formats

Filament’s ColorPicker supports three formats:

ColorPicker::make('brand_color')
->rgba(), // Saves as rgba(255, 255, 255, 1)

ColorPicker::make('brand_color')
->hsl(), // Saves as hsl(240, 100%, 50%)

ColorPicker::make('brand_color')
->rgb(), // Saves as rgb(59, 130, 246)

The default (no format method) saves as hex. Stick with hex unless you have a specific reason to use another format. Most CSS properties accept hex directly, and it’s the easiest to validate and display.

Displaying the saved color in a table column

Here’s where many developers get stuck. You’ve saved the color, but how do you show it in your Filament table?

use Filament\Tables\Columns\ColorColumn;

ColorColumn::make('brand_color')
->label('Brand color')
->copyable()
->copyMessage('Color code copied')
->tooltip(fn ($record) => $record->brand_color),

The ColorColumn renders a small color swatch. The copyable() method lets users copy the hex value by clicking the swatch, which is a nice UX touch for design-oriented admin panels.

Validation for color picker fields

Filament’s ColorPicker doesn’t validate the format automatically. Add a Rule to enforce it:

use Illuminate\Validation\Rules\Color;

ColorPicker::make('brand_color')
->rules(['nullable', new Color()])
->nullable(),

The Color validation rule (added in Laravel 10) validates hex, RGB, RGBA, HSL, and HSLA formats. If you’re on Laravel 9, validate with a regex:

->rules(['nullable', 'regex:/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/']),

Mini-story: why format consistency saved a client project

In February 2026, Priya, a Laravel freelancer, came to me after a client reported that their admin panel’s color picker “broke” after a database migration. The original migration had saved colors as hex. A junior developer on the project had added ->rgba() to the ColorPicker field three weeks later, without updating the column type or the existing data. The table’s ColorColumn was receiving rgba(...) strings but trying to parse them as hex. Everything rendered as gray.

The fix was a single database migration to update the existing rows and remove the ->rgba() call. Twenty minutes of work. But the real lesson: pick one format and document it. At Laracopilot, when we generate Filament resources with a color picker field, we always default to hex and add a comment in the generated code explaining the format choice.

Setting up icon picker fields in Filament v3

Installation

The icon picker field requires the Guava Systems package:

composer require guava/filament-icon-picker

Then publish the assets:

php artisan filament:assets

Basic implementation

use Guava\FilamentIconPicker\Forms\IconPicker;

IconPicker::make('menu_icon')
->label('Menu icon')
->sets(['heroicons-outline', 'heroicons-solid'])
->columns(3)
->searchable(),

The sets() method controls which icon libraries are available. The package supports:

  • heroicons-outline
  • heroicons-solid
  • heroicons-mini
  • fontawesome-solid (requires FontAwesome)
  • blade-ui-kit (requires Blade UI Kit Icons)

The value saved to your database is the full icon identifier, like heroicon-o-star or heroicon-s-cog-6-tooth.

Displaying the saved icon in a table column

use Filament\Tables\Columns\IconColumn;

IconColumn::make('menu_icon')
->label('Icon')
->icon(fn ($record) => $record->menu_icon)
->color('primary'),

Or in an infolist:

use Filament\Infolists\Components\IconEntry;

IconEntry::make('menu_icon')
->label('Menu icon')
->icon(fn ($state) => $state),

Note that IconColumn works with Filament’s built-in Heroicons. If you’re using FontAwesome or a custom icon set, you’ll need to register a custom icon provider.

Mini-story: building a dynamic navigation builder with icon picker

In January 2026, I helped Marcus, a founder building a white-label SaaS for property management companies, implement a navigation builder where each client could customize their sidebar menu. Every menu item needed a name, a route, and an icon.

Marcus had tried to build this with a simple text input for the icon field. His clients were copying icon names from the Heroicons website and pasting them in, then wondering why some icons worked and others didn’t (because they were pasting display names instead of Blade component names).

The icon picker field solved this immediately. Instead of Calendar Days, they now selected from the visual picker and the correct identifier heroicon-o-calendar-days was saved automatically. Client support tickets about “broken icons” dropped to zero.

The key implementation detail: Marcus stored the icon name in a JSON column alongside the route and label for each menu item. The Filament IconPicker field worked perfectly within a Repeater component for this:

Repeater::make('menu_items')
->schema([
 TextInput::make('label')->required(),
 TextInput::make('route')->required(),
 IconPicker::make('icon')
 ->sets(['heroicons-outline'])
 ->required(),
 ])
->columns(3),

Combining color picker and icon picker in one resource

A common use case: a “Category” model where each category has a display color and an icon for visual differentiation in the UI.

// In your Filament Resource form
public static function form(Form $form): Form
{
 return $form
 ->schema([
 TextInput::make('name')
 ->required()
 ->maxLength(100),

 Textarea::make('description')
 ->nullable(),

 ColorPicker::make('color')
 ->label('Display color')
 ->required(),

 IconPicker::make('icon')
 ->label('Category icon')
 ->sets(['heroicons-outline'])
 ->searchable()
 ->columns(4)
 ->required(),
 ]);
}

And in the table:

public static function table(Table $table): Table
{
 return $table
 ->columns([
 TextColumn::make('name'),

 ColorColumn::make('color')
 ->label('Color')
 ->copyable(),

 IconColumn::make('icon')
 ->label('Icon')
 ->icon(fn ($record) => $record->icon),

 TextColumn::make('created_at')
 ->dateTime()
 ->sortable(),
 ]);
}

This pattern works well for tagging systems, category managers, status configurations, and any scenario where visual identification matters.

Laracopilot generates these fields automatically

If you’d rather not write this boilerplate manually, Laracopilot generates complete Filament v3 resources from a natural language prompt. Tell it you need a Category model with a color and icon field, and it outputs the migration, model, Filament resource, and Pest tests, all connected correctly.

When we built the color and icon picker support into Laracopilot, we made sure the generated code follows the patterns above: hex format for colors by default, heroicons-outline as the default icon set, and both ColorColumn and IconColumn wired up correctly in the table view.

If you’re starting a new Laravel project or scaffolding a new resource, try Laracopilot free and skip the boilerplate.

Common mistakes with filament color picker icon picker fields

Mistake 1: wrong column type in migration

Color picker values are strings. If you create a integer or enum column, the field will appear to save but the value will be corrupted or empty.

// Wrong
$table->integer('brand_color');

// Correct
$table->string('brand_color')->nullable();

Mistake 2: forgetting to cast the icon field

If you use the icon value in Blade templates or need to compare it programmatically, add a cast to your Eloquent model:

protected $casts = [
 'icon' => 'string',
 'color' => 'string',
];

This isn’t strictly necessary, but it makes your intent explicit and prevents issues if you switch database drivers.

Mistake 3: not installing filament assets after adding icon picker

After running composer require guava/filament-icon-picker, you must run:

php artisan filament:assets

Without this step, the icon picker JavaScript won’t load, and the field will render as a blank text input. This catches developers who are used to Filament’s core fields (which don’t require this step).

Mini-story: the icon picker field that wasn’t there

In December 2025, a Laravel developer named James posted in the Filament Discord. He had added the Guava icon picker package, implemented it in his resource, and deployed to production. The field showed up on his local machine but was completely blank on the server.

The diagnosis took 45 minutes across three people. James had run filament:assets locally but his CI/CD pipeline didn’t include that command. The JavaScript that renders the icon picker was never copied to the public directory on the server.

The fix: add php artisan filament:assets to the deployment script after composer install. The broader lesson: Filament’s community packages sometimes require asset publishing steps that Filament’s own packages don’t. Always check the package README for post-install commands, especially before deploying.

Advanced: using color picker for CSS custom properties

If your application supports per-tenant theming, you can use the saved color value to generate CSS custom properties dynamically:

// In a middleware or layout component
$brandColor = auth()->user()->company->brand_color ?? '#3b82f6';

Then in your Blade layout:

<style>
 :root {
 --brand-color: {{ $brandColor }};
 --brand-color-light: {{ $brandColor }}33;
 }
</style>

The 33 suffix adds 20% opacity to the hex value, creating a lighter variant for backgrounds. This pattern powers theming in several SaaS products I’ve built, including the multi-tenant admin we shipped at ViitorCloud for a US healthcare client in 2025.

For a production implementation, cache the CSS output per tenant to avoid recalculating on every request.

If you’re building out a Filament admin panel, these articles go deeper on the pieces around color and icon fields:

The bottom line on filament color picker and icon picker fields

Filament’s color picker field works out of the box, saves as hex by default, and pairs with ColorColumn for table display. The icon picker requires the Guava community package, a filament:assets run after install, and the IconColumn or IconEntry for display.

Both fields become substantially more useful when combined: a model with both a color and icon field creates powerful visual hierarchy in your admin panel that clients appreciate immediately.

If you want to skip the implementation work, try Laracopilot free and generate your Filament resource, color picker, icon picker, and all, in under eight minutes.

Alpesh Nakrani is VP of Growth at Laracopilot, the Laravel-native AI app builder. He writes about Laravel, Filament, and AI-powered development at alpeshnakrani.com.