aytackayin/filament-select-icon

A custom Filament form component that provides a beautiful, grid-based icon picker with a built-in search functionality and custom tooltips.

1.0.9 2026-06-07 09:46 UTC

Requires

• php: ^8.1
• filament/filament: ^3.0|^4.0
• spatie/laravel-package-tools: ^1.15

MIT

• Aytaç Kayın

• laravel
• filament
• aytackayin
• select-icon

README

A custom Filament form component that provides a beautiful, grid-based icon picker with a built-in search functionality and custom tooltips.

Features

• 🚀 Grid Layout: Displays icons in a clean, responsive grid.
• 🔍 Searchable: Built-in search functionality to quickly find icons.
• 🎨 Custom Tooltips: Modern, rounded, and shadowed tooltips that appear on hover.
• 🌓 Dark Mode Support: Fully compatible with Filament's light and dark themes.
• ⚙️ Configurable: Easily customize the list of available icons via a config file.
• 📦 No External Dependencies: Self-contained CSS and Alpine.js logic.
• ✨ Custom SVG Icons: Add, edit, and remove your own custom SVG icons directly from the picker modal (v1.0.8+).
• 🗂 Modal-Based Picker: Uses Filament's native modal component with tabbed interface for library and custom icons.
• 🔑 Clear Button: Quickly clear the selected icon with a dedicated clear button.
• 🌍 Multi-Language: Ships with English and Turkish translations out of the box.

Installation

You can install the package via composer:

composer require aytackayin/filament-select-icon

Configuration

By default, the plugin automatically discovers all Outlined Heroicons provided by Filament. No configuration is required.

However, if you want to limit the icons or add custom ones, you can publish the config file:

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

This is the contents of the published config file:

<?php

return [
    'icons' => [
        // 'Label' => 'heroicon-name',
        // If left empty, all Outlined Heroicons are discovered automatically.
    ],

    // Enable/disable custom SVG icon uploads from the picker modal.
    'enable_custom_icons' => true,

    // Storage path for custom icons (relative to storage_path(), or absolute).
    'custom_icons_path' => 'app/filament-select-icon/custom-icons.json',

    // Modal configuration.
    'modal' => [
        'width' => '4xl',
        'slide_over' => false,
    ],

    // Max SVG content size in bytes.
    'max_svg_size' => 20000,
];

Custom SVG Icons (v1.0.8+)

When enable_custom_icons is true, users can add their own SVG icons directly from the picker modal:

1. Click the Add New tab in the picker.
2. Fill in a unique key, display label, and paste/upload the SVG markup.
3. Custom icons are stored in storage/app/filament-select-icon/custom-icons.json.
4. Custom icons can be edited or removed inline from the grid.

Usage

Simply use the SelectIcon component in your Filament form schema:

use AytacKayin\FilamentSelectIcon\Forms\Components\SelectIcon;

public function form(Form $form): Form
{
    return $form
        ->schema([
            SelectIcon::make('icon')
                ->label('Select an Icon'),
        ]);
}

Customization

Disable Custom Icons

// In config/select-icon.php
'enable_custom_icons' => false,

Or per-field:

SelectIcon::make('icon')
    ->customIcons(false),

Credits

Developed by Aytaç Kayın.

License

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