PHPackages                             wallacemartinss/filament-icon-picker - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. wallacemartinss/filament-icon-picker

ActiveLibrary[Utility & Helpers](/categories/utility)

wallacemartinss/filament-icon-picker
====================================

A beautiful icon picker component for Filament v5 using blade-ui-kit/blade-icons

v2.0.2(1mo ago)4723.9k↑33.6%9[2 PRs](https://github.com/wallacemartinss/filament-icon-picker/pulls)10MITPHPPHP ^8.2

Since Dec 6Pushed 1mo agoCompare

[ Source](https://github.com/wallacemartinss/filament-icon-picker)[ Packagist](https://packagist.org/packages/wallacemartinss/filament-icon-picker)[ Docs](https://github.com/wallacemartinss/filament-icon-picker)[ RSS](/packages/wallacemartinss-filament-icon-picker/feed)WikiDiscussions 2.x Synced 3d ago

READMEChangelogDependencies (12)Versions (22)Used By (10)

Filament Icon Picker
====================

[](#filament-icon-picker)

[![Latest Version on Packagist](https://camo.githubusercontent.com/1b53283e653304d11d6534dc578f401d78cd555d10996ef94801ffa146e59564/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f77616c6c6163656d617274696e73732f66696c616d656e742d69636f6e2d7069636b65722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/wallacemartinss/filament-icon-picker)[![Total Downloads](https://camo.githubusercontent.com/be401790dac312214defdf08b1ef813468532874fb4dfdfdc682e62d732b3b0f/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f77616c6c6163656d617274696e73732f66696c616d656e742d69636f6e2d7069636b65722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/wallacemartinss/filament-icon-picker)

A beautiful, modern icon picker component for Filament v5, powered by [blade-ui-kit/blade-icons](https://github.com/blade-ui-kit/blade-icons).

[![Filament Icon Picker](docs/images/principal.png)](docs/images/principal.png)

Screenshots
-----------

[](#screenshots)

📸 Click to view screenshots[![Screenshot 2](docs/images/screenshot-02.png)](docs/images/screenshot-02.png)[![Screenshot 3](docs/images/screenshot-03.png)](docs/images/screenshot-03.png)Features
--------

[](#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
------------

[](#requirements)

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

Installation
------------

[](#installation)

### Step 1: Install the package via Composer

[](#step-1-install-the-package-via-composer)

```
composer require wallacemartinss/filament-icon-picker
```

### Step 2: Install icon packages (Interactive)

[](#step-2-install-icon-packages-interactive)

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

# Hugeicons Free (5800+ icons)
composer require afatmustafa/blade-hugeicons
```

See all available icon packages at [Blade Icons](https://blade-ui-kit.com/blade-icons#icon-packages).

### Step 3: Add package views to your Tailwind CSS configuration

[](#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:

```
/* resources/css/filament/admin/theme.css */

@source '../../../../vendor/wallacemartinss/filament-icon-picker/resources/views/**/*';
```

### Step 4: Build your assets

[](#step-4-build-your-assets)

```
npm run build
```

### Step 5: (Optional) Publish the config file

[](#step-5-optional-publish-the-config-file)

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

### Step 6: Clear caches

[](#step-6-clear-caches)

```
php artisan optimize:clear
```

### Step 7: (Optional) Cache icons for better performance

[](#step-7-optional-cache-icons-for-better-performance)

```
php artisan icons:cache
```

### Icon Enums (Auto-generated)

[](#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:

```
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
```

#### Icon Helper (No Generation Needed)

[](#icon-helper-no-generation-needed)

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
```

Usage
-----

[](#usage)

### Form Field

[](#form-field)

```
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(),
        ]);
}
```

#### Restricting Icon Sets

[](#restricting-icon-sets)

```
IconPickerField::make('icon')
    ->allowedSets(['heroicons', 'fontawesome-solid', 'phosphor-icons'])
```

#### Custom Modal Size

[](#custom-modal-size)

```
IconPickerField::make('icon')
    ->modalSize('5xl') // sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl
```

#### With Placeholder

[](#with-placeholder)

```
IconPickerField::make('icon')
    ->placeholder('Choose an icon...')
```

#### Hide Set Filter

[](#hide-set-filter)

```
IconPickerField::make('icon')
    ->showSetFilter(false)
```

### Table Column

[](#table-column)

```
use Wallacemartinss\FilamentIconPicker\Tables\Columns\IconPickerColumn;

public static function table(Table $table): Table
{
    return $table
        ->columns([
            IconPickerColumn::make('icon')
                ->label('Icon'),
        ]);
}
```

#### With Size

[](#with-size)

```
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
```

#### With Color

[](#with-color)

```
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')
```

#### Dynamic Color (Based on Record)

[](#dynamic-color-based-on-record)

```
IconPickerColumn::make('icon')
    ->color(fn ($record) => match($record->status) {
        'active' => 'success',
        'pending' => 'warning',
        'inactive' => 'danger',
        default => 'gray',
    })
```

#### With Animation

[](#with-animation)

```
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')
```

#### Show Icon Name

[](#show-icon-name)

```
IconPickerColumn::make('icon')
    ->showLabel() // Shows the icon name next to the icon
```

#### Fixed Icon (Without Database)

[](#fixed-icon-without-database)

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)
```

#### Combining Options

[](#combining-options)

```
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')
```

### Infolist Entry

[](#infolist-entry)

```
use Wallacemartinss\FilamentIconPicker\Infolists\Components\IconPickerEntry;

public static function infolist(Infolist $infolist): Infolist
{
    return $infolist
        ->schema([
            IconPickerEntry::make('icon')
                ->label('Icon'),
        ]);
}
```

#### With Size and Color

[](#with-size-and-color)

```
IconPickerEntry::make('icon')
    ->size('xl')
    ->color('primary')

// Or use shortcut methods:
IconPickerEntry::make('icon')
    ->extraLarge()
    ->danger()
```

#### Dynamic Color (Based on Record)

[](#dynamic-color-based-on-record-1)

```
IconPickerEntry::make('icon')
    ->color(fn ($record) => match($record->status) {
        'active' => 'success',
        'pending' => 'warning',
        'inactive' => 'danger',
        default => 'gray',
    })
```

#### With Animation

[](#with-animation-1)

```
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')
```

#### Hide Icon Name

[](#hide-icon-name)

```
IconPickerEntry::make('icon')
    ->showIconName(false) // Hides the icon name, shows only the icon
```

#### Fixed Icon (Without Database)

[](#fixed-icon-without-database-1)

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')
```

#### Combining All Features

[](#combining-all-features)

```
IconPickerEntry::make('status_icon')
    ->extraLarge()
    ->color(fn ($record) => $record->is_active ? 'success' : 'danger')
    ->animation(fn ($record) => $record->is_loading ? 'spin' : null)
    ->showIconName(false)
```

### Using Icon Enums

[](#using-icon-enums)

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

#### Navigation Icons

[](#navigation-icons)

```
use Wallacemartinss\FilamentIconPicker\Enums\Heroicons;
use Wallacemartinss\FilamentIconPicker\Enums\GoogleMaterialDesignIcons;

class UserResource extends Resource
{
    protected static string|BackedEnum|null $navigationIcon = GoogleMaterialDesignIcons::AccountCircle;
}
```

#### Dynamic Navigation Icon

[](#dynamic-navigation-icon)

```
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');
}
```

#### Actions

[](#actions)

```
use Wallacemartinss\FilamentIconPicker\Enums\Heroicons;

Action::make('edit')
    ->icon(Heroicons::OutlinedPencil)

Action::make('delete')
    ->icon(Heroicons::OutlinedTrash)
```

#### Enum Methods

[](#enum-methods)

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);
```

Configuration
-------------

[](#configuration)

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,
];
```

Finding Icon Set Names
----------------------

[](#finding-icon-set-names)

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
)

```

Troubleshooting
---------------

[](#troubleshooting)

### Icons not showing in the modal

[](#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

[](#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

[](#infinite-scroll-not-working)

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

Testing
-------

[](#testing)

To run the package tests:

```
cd packages/wallacemartinss/filament-icon-picker
./vendor/bin/phpunit
```

Or with testdox output:

```
./vendor/bin/phpunit --testdox
```

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review [our security policy](../../security/policy) on how to report security vulnerabilities.

Credits
-------

[](#credits)

- [Wallace Martins](https://github.com/wallacemartinss)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

56

—

FairBetter than 97% of packages

Maintenance89

Actively maintained with recent releases

Popularity42

Moderate usage in the ecosystem

Community24

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 93.1% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~7 days

Recently: every ~0 days

Total

22

Last Release

53d ago

Major Versions

v1.4.4 → v2.0.02026-01-19

v1.4.5 → v2.0.22026-05-11

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/56648941?v=4)[Wallace Martins da Silva](/maintainers/wallacemartinss)[@wallacemartinss](https://github.com/wallacemartinss)

---

Top Contributors

[![wallacemartinss](https://avatars.githubusercontent.com/u/56648941?v=4)](https://github.com/wallacemartinss "wallacemartinss (27 commits)")[![jeffersongoncalves](https://avatars.githubusercontent.com/u/411493?v=4)](https://github.com/jeffersongoncalves "jeffersongoncalves (2 commits)")

---

Tags

laravelHeroiconsFontAwesomefilamentfilament-pluginicon-pickerblade-iconsPhosphormaterial-icons

###  Code Quality

TestsPHPUnit

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/wallacemartinss-filament-icon-picker/health.svg)

```
[![Health](https://phpackages.com/badges/wallacemartinss-filament-icon-picker/health.svg)](https://phpackages.com/packages/wallacemartinss-filament-icon-picker)
```

###  Alternatives

[ysfkaya/filament-phone-input

A phone input component for Laravel Filament

3161.3M25](/packages/ysfkaya-filament-phone-input)[rawilk/profile-filament-plugin

Profile & MFA starter kit for filament.

3914.6k](/packages/rawilk-profile-filament-plugin)[croustibat/filament-jobs-monitor

Background Jobs monitoring like Horizon for all drivers for FilamentPHP

274326.6k8](/packages/croustibat-filament-jobs-monitor)[stephenjude/filament-feature-flags

Filament implementation of feature flags and segmentation with Laravel Pennant.

122177.8k1](/packages/stephenjude-filament-feature-flags)[schmeits/filament-character-counter

This is a Filament character counter TextField and Textarea form field for Filament v4 and v5

34226.4k13](/packages/schmeits-filament-character-counter)[wsmallnews/filament-nestedset

Filament nestedset tree builder powered by kalnoy/nestedset with Filament v4 and v5 support

197.8k19](/packages/wsmallnews-filament-nestedset)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)