Download the PHP package wallacemartinss/filament-icon-picker without Composer

Filament Icon Picker

A beautiful, modern icon picker component for Filament v5, powered by blade-ui-kit/blade-icons.

Screenshots

Features

• 🎨 Beautiful Modal Interface - Modern, responsive grid layout with smooth animations
• 🔍 Smart Search - Real-time filtering by icon name
• 📦 Multiple Icon Sets - Support for all blade-icons packages (Heroicons, FontAwesome, Phosphor, Material, etc.)
• 🎯 Set Filtering - Filter icons by their provider using dropdown
• ⚡ Infinite Scroll - Performance-optimized with lazy loading
• 🖼️ Preview - Shows selected icon in the field
• 📋 Form Field - Use in Filament forms
• 📊 Table Column - Display icons in tables
• 📝 Infolist Entry - Show icons in infolists (read-only)
• ⚙️ Configurable - Customize modal size, columns, and available icon sets

Requirements

• PHP 8.2+
• Laravel 12+
• Filament 5.0+
• blade-ui-kit/blade-icons 1.0+

Installation

Step 1: Install the package via Composer

Step 2: Install icon packages (Interactive)

You need at least one icon package to use the Icon Picker. Use the interactive installer:

This will show you an interactive menu to select which icon packages to install:

Other options:

Or install manually via Composer:

See all available icon packages at Blade Icons.

Step 3: Add package views to your Tailwind CSS configuration

Add the plugin's views to your theme CSS file so Tailwind can scan them:

Step 4: Build your assets

Step 5: (Optional) Publish the config file

Step 6: Clear caches

Step 7: (Optional) Cache icons for better performance

Icon Enums (Auto-generated)

When you install icon packages using php artisan filament-icon-picker:install-icons, PHP Enums are automatically generated for type-safe icon usage:

You can also regenerate enums manually:

Icon Helper (No Generation Needed)

For dynamic icon usage without generating enums, use the Icon helper:

Usage

Form Field

Restricting Icon Sets

Custom Modal Size

With Placeholder

Hide Set Filter

Table Column

With Size

With Color

Dynamic Color (Based on Record)

With Animation

Show Icon Name

Fixed Icon (Without Database)

Use the icon() method to display a fixed icon without requiring a database column:

Combining Options

Infolist Entry

With Size and Color

Dynamic Color (Based on Record)

With Animation

Hide Icon Name

Fixed Icon (Without Database)

Use the icon() method to display a fixed icon without requiring a database column:

Combining All Features

Using Icon Enums

After generating enums with php artisan filament-icon-picker:generate-enums, you can use them anywhere in Filament:

Navigation Icons

Dynamic Navigation Icon

Actions

Enum Methods

Each generated enum includes helpful methods:

Configuration

The config file allows you to customize the picker behavior:

Finding Icon Set Names

To find the correct set names for your installed packages, run:

Then:

This will output all available set names like:

Troubleshooting

Icons not showing in the modal

1. Make sure you have at least one blade-icons package installed
2. Check that the set names in your config are correct (run the tinker command above)
3. Clear caches: php artisan optimize:clear

Modal styling looks broken

1. Make sure you added the @source directive to your theme CSS
2. Rebuild assets: npm run build
3. Clear view cache: php artisan view:clear

Infinite scroll not working

1. Clear browser cache with Ctrl+Shift+R
2. Check browser console for JavaScript errors

Testing

To run the package tests:

Or with testdox output:

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Wallace Martins
• All Contributors

License

The MIT License (MIT). Please see License File for more information.