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.0(4mo ago)467.1k↑17.3%5[1 PRs](https://github.com/wallacemartinss/filament-icon-picker/pulls)9MITPHPPHP ^8.2

Since Dec 6Pushed 4mo 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 1mo ago

READMEChangelogDependencies (6)Versions (18)Used By (9)

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

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

51

—

FairBetter than 96% of packages

Maintenance78

Regular maintenance activity

Popularity38

Limited adoption so far

Community21

Small or concentrated contributor base

Maturity56

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 92.6% 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 ~3 days

Recently: every ~10 days

Total

18

Last Release

120d ago

Major Versions

1.x-dev → v2.0.02026-01-19

### Community

Maintainers

![](https://www.gravatar.com/avatar/7c4ef517e623796f36a3912ade0c0db618939111f7be42f8de0d79bcc833ad57?d=identicon)[wallacemartinss](/maintainers/wallacemartinss)

---

Top Contributors

[![wallacemartinss](https://avatars.githubusercontent.com/u/56648941?v=4)](https://github.com/wallacemartinss "wallacemartinss (25 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

[schmeits/filament-character-counter

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

33184.7k6](/packages/schmeits-filament-character-counter)[bezhansalleh/filament-google-analytics

Google Analytics integration for FilamentPHP

205144.8k5](/packages/bezhansalleh-filament-google-analytics)[jibaymcs/filament-tour

Bring the power of DriverJs to your Filament panels and start a tour !

12247.8k](/packages/jibaymcs-filament-tour)[agencetwogether/hookshelper

Simple plugin to toggle display hooks available in current page.

2312.7k](/packages/agencetwogether-hookshelper)[howdu/filament-record-switcher

Resource level navigation with search

1512.5k](/packages/howdu-filament-record-switcher)[wsmallnews/filament-nestedset

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

163.0k8](/packages/wsmallnews-filament-nestedset)

PHPackages © 2026

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