Filament Icon Picker Laravel Package

Product Decisions This Supports

• Enhancing UI/UX Customization:

  • Enable non-technical users (e.g., content editors, admins) to visually customize icons for navigation menus, dashboards, or model entries (e.g., "assign a unique icon to each category").
  • Reduce reliance on hardcoded icons, improving maintainability and scalability for icon-heavy applications.

• Build vs. Buy:

  • Buy: Avoid reinventing the wheel for icon management in Filament panels. This package provides a pre-built, tested solution with active maintenance (releases as recent as 2026).
  • Build: Justify custom development only if requiring highly specialized icon sets (e.g., proprietary icons) or non-standard workflows (e.g., dynamic icon generation).

• Roadmap Priorities:

  • Short-term: Quick wins for admin panels (e.g., "Let users pick icons for dashboard widgets").
  • Long-term: Foundation for a broader design system (e.g., "Standardize icons across all Filament resources").
  • Feature Flag: Test with a subset of users (e.g., "Enable icon picker for power users only").

• Use Cases:

  • Admin Panels: Customize icons for Filament resources (e.g., Post, User tables).
  • Public Dashboards: Allow end-users to personalize their experience (e.g., "Choose an icon for your profile").
  • CMS/Content Management: Attach icons to media, categories, or tags (e.g., "Upload a product with a visual icon").
  • Legacy Migration: Replace hardcoded icons in Blade views with dynamic, user-selectable alternatives.

When to Consider This Package

Adopt This Package If:

• Your app uses Filament v2–v5 and requires a user-friendly icon selection UI (no custom frontend work needed).
• You need to support Blade Icons (default: Heroicons) or other compatible icon sets (e.g., Feather, Tabler).
• Your team lacks frontend resources to build a custom icon picker (e.g., search/filter UX, responsive layouts).
• You want to reduce technical debt by centralizing icon management (e.g., avoid scattered SVG files or CSS classes).
• Your use case fits the three search result views (grid, list, icons) and dropdown/inline modes.
• You’re okay with storing icon names as strings in the database (e.g., "heroicons-outline-star").

Look Elsewhere If:

• You need non-Blade-Icons support (e.g., Font Awesome, Material Icons). Consider:
  • Filament Icon Picker for Font Awesome (hypothetical).
  • Custom solution using a CDN + JavaScript library (e.g., Iconify).
• Your app requires dynamic icon generation (e.g., SVG uploads, AI-generated icons). Build a custom solution or extend this package.
• You’re using Filament v1 (unsupported) or a non-Filament admin panel (e.g., Nova, Backpack).
• You need advanced features like:
  • Icon categories/tags (e.g., "filter by 'e-commerce' icons").
  • Bulk icon assignment (e.g., "apply icon to 100+ records").
  • Custom icon uploads (this package only supports pre-installed icon sets).
• Your team has high design system standards and needs pixel-perfect control over the picker’s appearance (custom CSS/JS may be required).

How to Pitch It (Stakeholders)

For Executives (1–2 Sentences):

"This package lets non-technical users customize icons in our admin panels (e.g., dashboards, content categories) with a few clicks—no coding required. It’s a low-effort way to improve UI consistency and user experience, with minimal dev overhead (just a Composer install and 10 minutes of setup). We can roll it out incrementally, starting with high-impact areas like the product catalog or customer portal."

ROI Highlights:

• Speed: Reduces design requests by 30% (users self-serve icon changes).
• Scalability: Supports future icon-heavy features (e.g., "icon-based navigation").
• Cost: Free (MIT license), maintained by the community.

For Engineers (Technical Summary):

*"This is a Filament plugin that adds an icon picker field to forms/tables, leveraging Blade Icons (default: Heroicons). It’s a drop-in solution for:

• Forms: IconPicker::make('icon') → renders a searchable dropdown with 3 UI modes (grid/list/icons).
• Tables: IconColumn::make('icon') → displays icons in grid views.
• Frontend: Icons are stored as strings (e.g., 'heroicons-solid-star') and rendered via <x-icon :name="$model->icon" />.

Key Benefits: ✅ Zero frontend work: Uses Filament’s Livewire + Blade Icons. ✅ Version-locked: Supports Filament v2–v5 with breaking changes clearly documented. ✅ Extensible: Limit icon sets (e.g., ->sets(['heroicons', 'tabler'])) or customize search UX. ✅ Lightweight: ~500 LOC, no external dependencies beyond Filament/Blade Icons.

Trade-offs:

• No custom icons: Only works with pre-installed Blade Icons sets.
• Database schema: Stores icon names as strings (not SVGs/binaries).

Setup Steps:

1. composer require guava/filament-icon-picker
2. Publish assets: php artisan filament:assets
3. Add to theme.css: @source '../../../../vendor/guava/filament-icon-picker/resources/**/*';
4. Use in forms/tables (see README).

Alternatives Considered:

• Custom solution: Higher dev effort for limited gains.
• Other packages: None offer Filament-native integration + Blade Icons support.

Recommendation: Proceed with a pilot (e.g., add to the 'Settings' resource) to validate UX before wider adoption."*

Visual Aid for Pitch: Include a screenshot from the README (e.g., the grid/search UI) with a callout: "Imagine this for your admin panel’s ‘Categories’ section—users pick icons without asking devs!"