PHPackages guava/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. guava/filament-icon-picker ActiveLibrary[Utility & Helpers](/categories/utility) guava/filament-icon-picker ========================== A filament plugin that adds an icon picker field. 4.0.0(3mo ago)161531.9k↓13.6%41[9 issues](https://github.com/lukas-frey/filament-icon-picker/issues)[10 PRs](https://github.com/lukas-frey/filament-icon-picker/pulls)18MITPHPPHP ^8.2CI passing Since Oct 7Pushed 1mo ago3 watchersCompare [ Source](https://github.com/lukas-frey/filament-icon-picker)[ Packagist](https://packagist.org/packages/guava/filament-icon-picker)[ Docs](https://github.com/GuavaCZ/filament-icon-picker)[ GitHub Sponsors](https://github.com/GuavaCZ)[ RSS](/packages/guava-filament-icon-picker/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (13)Versions (38)Used By (18) Icon Picker for your filament panels ==================================== [](#icon-picker-for-your-filament-panels) [![Latest Version on Packagist](https://camo.githubusercontent.com/b5a1a7efd7c183ca04fa68c8921667563f309fc1df791836fa561e31bba707f6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f67756176612f66696c616d656e742d69636f6e2d7069636b65722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/guava/filament-icon-picker)[![Total Downloads](https://camo.githubusercontent.com/5d15b5a130378b16d6627c2fc5da05320e3374b9d83fc0dfdd40192e1bd7c719/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f67756176612f66696c616d656e742d69636f6e2d7069636b65722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/guava/filament-icon-picker) This plugin adds a new icon picker form field and a corresponding table column. You can use it to select from any blade-icons kit that you have installed. By default, heroicons are supported since it is shipped with Filament. This can be useful for when you want to customize icons rendered on your frontend, if you want your users to be able to customize navigation icons, add small icons to their models for easy recognition and similar. Version compatibility --------------------- [](#version-compatibility) Filament versionPlugin version2.x1.x3.x2.x4.x3.x5.x4.xInstallation ------------ [](#installation) You can install the package via composer: ``` composer require guava/filament-icon-picker" ``` Make sure to publish the package assets using: ``` php artisan filament:assets ``` For certain layouts, you might need to update the `payloads.max_calls` setting in your livewire.php config. Finally, make sure you have a **custom filament theme** (read [here](https://filamentphp.com/docs/4.x/styling/overview#creating-a-custom-theme) how to create one) and add the following to your **theme.css** file: This ensures that the CSS is properly built: ``` @source '../../../../vendor/guava/filament-icon-picker/resources/**/*'; ``` For older filament versions, please check the branch of the respective version. Usage ----- [](#usage) ### Usage in Schemas: [](#usage-in-schemas) Add the icon picker to any form schema in your filament panel or livewire component that supports filament forms: ``` use Guava\IconPicker\Forms\Components\IconPicker; IconPicker::make('icon'); ``` ### Usage in Tables: [](#usage-in-tables) To display the stored icon in your filamen tables, use our IconColumn class: ``` // Make sure this is the correct import, not the filament one use Guava\IconPicker\Tables\Columns\IconColumn; $table ->columns([ IconColumn::make('icon'), ]) // ... ; ``` ### Usage on the frontend: [](#usage-on-the-frontend) We store the full icon name in the database. This means to use the icon on the frontend, simply treat is as any other static icon. For example, assuming we saved the icon on our `$category` model under `$icon`, you can render it in your blade view using: ``` ``` More information on rendering the icon on the [blade-icons github](https://github.com/blade-ui-kit/blade-icons#default-component). Customization ------------- [](#customization) ### Search Results View [](#search-results-view) Out of the box, we provide three different search result views that you can choose from. #### Grid View [](#grid-view) This is the default view used. Icons will be shown in a grid with their name underneath the icon. ``` IconPicker::make('icon') ->gridSearchResults(); ``` [![Screenshot 2025-08-19 at 14 12 10](https://private-user-images.githubusercontent.com/10926334/479537351-78965823-03b7-48b4-9347-58e1ba693530.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUyNzkyNTYsIm5iZiI6MTc3NTI3ODk1NiwicGF0aCI6Ii8xMDkyNjMzNC80Nzk1MzczNTEtNzg5NjU4MjMtMDNiNy00OGI0LTkzNDctNThlMWJhNjkzNTMwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDA0VDA1MDIzNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTgwNWZkODA2OWQ3YzliMWViM2JhNmZmNTQ4ZmZkNDhkYWE0YTc3YTM2NWZhODQ1YjdmZDI2YzdhNTJmZTYwMjAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.NToNHAiiNKBGkbslFj97Wmc6Ve2mMViB6jEJlSAB7Ew)](https://private-user-images.githubusercontent.com/10926334/479537351-78965823-03b7-48b4-9347-58e1ba693530.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUyNzkyNTYsIm5iZiI6MTc3NTI3ODk1NiwicGF0aCI6Ii8xMDkyNjMzNC80Nzk1MzczNTEtNzg5NjU4MjMtMDNiNy00OGI0LTkzNDctNThlMWJhNjkzNTMwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDA0VDA1MDIzNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTgwNWZkODA2OWQ3YzliMWViM2JhNmZmNTQ4ZmZkNDhkYWE0YTc3YTM2NWZhODQ1YjdmZDI2YzdhNTJmZTYwMjAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.NToNHAiiNKBGkbslFj97Wmc6Ve2mMViB6jEJlSAB7Ew)#### List View [](#list-view) Icons will be rendered in a list together with the icon's name. ``` IconPicker::make('icon') ->listSearchResults(); ``` [![Screenshot 2025-08-19 at 14 12 27](https://private-user-images.githubusercontent.com/10926334/479537485-1ff12789-91fd-4587-aec5-c40bbb089a4f.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUyNzkyNTYsIm5iZiI6MTc3NTI3ODk1NiwicGF0aCI6Ii8xMDkyNjMzNC80Nzk1Mzc0ODUtMWZmMTI3ODktOTFmZC00NTg3LWFlYzUtYzQwYmJiMDg5YTRmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDA0VDA1MDIzNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThjODg4Y2M0NGE2OGRhN2RkMmNlZDJlMDRmY2E5NGU0OThhOTRmYThiMmYzOTQxMWRhMWM5NDRmNDY3NDFiOWEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.1ri-bCoBWJ4T_mzFucAmdH_k7r8cd9hSGk1yZWz-6tY)](https://private-user-images.githubusercontent.com/10926334/479537485-1ff12789-91fd-4587-aec5-c40bbb089a4f.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUyNzkyNTYsIm5iZiI6MTc3NTI3ODk1NiwicGF0aCI6Ii8xMDkyNjMzNC80Nzk1Mzc0ODUtMWZmMTI3ODktOTFmZC00NTg3LWFlYzUtYzQwYmJiMDg5YTRmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDA0VDA1MDIzNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThjODg4Y2M0NGE2OGRhN2RkMmNlZDJlMDRmY2E5NGU0OThhOTRmYThiMmYzOTQxMWRhMWM5NDRmNDY3NDFiOWEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.1ri-bCoBWJ4T_mzFucAmdH_k7r8cd9hSGk1yZWz-6tY)#### Icons View [](#icons-view) Icons will be rendered in a small grid with only the icons visible, optionally configurable to show a tooltip with the icon name. ``` IconPicker::make('icon') ->iconsSearchResults() // With tooltip ->iconsSearchResults(false); // Without tooltip ``` [![Screenshot 2025-08-19 at 14 12 48](https://private-user-images.githubusercontent.com/10926334/479537543-42a4a50c-3495-4b7f-a9ed-94e3e8b23867.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUyNzkyNTYsIm5iZiI6MTc3NTI3ODk1NiwicGF0aCI6Ii8xMDkyNjMzNC80Nzk1Mzc1NDMtNDJhNGE1MGMtMzQ5NS00YjdmLWE5ZWQtOTRlM2U4YjIzODY3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDA0VDA1MDIzNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWViYzJiYzJlNDBhNWIzZTVhNGM0YmFkMGI0MDk1YTBhZjIzNTQ1YTFhZDAxNDQ0OTJmYmI0ZjMzM2JmODllMjYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.l8hBbe8lq9lSl7PBOvqWRmn8lZSr3ThhbzKLg__H7eU)](https://private-user-images.githubusercontent.com/10926334/479537543-42a4a50c-3495-4b7f-a9ed-94e3e8b23867.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUyNzkyNTYsIm5iZiI6MTc3NTI3ODk1NiwicGF0aCI6Ii8xMDkyNjMzNC80Nzk1Mzc1NDMtNDJhNGE1MGMtMzQ5NS00YjdmLWE5ZWQtOTRlM2U4YjIzODY3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDA0VDA1MDIzNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWViYzJiYzJlNDBhNWIzZTVhNGM0YmFkMGI0MDk1YTBhZjIzNTQ1YTFhZDAxNDQ0OTJmYmI0ZjMzM2JmODllMjYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.l8hBbe8lq9lSl7PBOvqWRmn8lZSr3ThhbzKLg__H7eU)### Dropdown [](#dropdown) By default, the icon picker will open a dropdown, where you can search and select the icon. (Very similar to a regular `Select` field in filament). If you prefer, you can disable the dropdown and then the search and results will be rendered directly beneath the field. ``` IconPicker::make('icon') ->dropdown(false); ``` ### Limit sets [](#limit-sets) By default, all available icon sets in the system will be available in the icon picker. If you want, you can limit the sets to only the sets you want, by providing an array of set names: ``` IconPicker::make('icon') ->sets(['heroicons']); ``` Testing ------- [](#testing) ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [Lukas Frey](https://github.com/lukas-frey) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 64 — FairBetter than 99% of packages Maintenance83 Actively maintained with recent releases Popularity56 Moderate usage in the ecosystem Community34 Small or concentrated contributor base Maturity71 Established project with proven stability Bus Factor1 Top contributor holds 79.3% 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 ~40 days Total 31 Last Release 114d ago Major Versions 1.x-dev → 2.0.02023-07-21 2.3.1 → 3.0.0-beta.12025-08-19 3.1.0 → 4.0.02026-01-24 PHP version history (3 changes)1.0.0PHP ^8.1 1.3.0PHP ^8.0 3.0.0-beta.1PHP ^8.2 ### Community Maintainers ![](https://www.gravatar.com/avatar/42d872f5f47cd71cfd46c8fbd6ec77a6bfb46d6d9499b5e1f843eb407c07f737?d=identicon)[Skrypt](/maintainers/Skrypt) --- Top Contributors [![lukas-frey](https://avatars.githubusercontent.com/u/10926334?v=4)](https://github.com/lukas-frey "lukas-frey (96 commits)")[![Voltra](https://avatars.githubusercontent.com/u/25990549?v=4)](https://github.com/Voltra "Voltra (10 commits)")[![atmonshi](https://avatars.githubusercontent.com/u/1952412?v=4)](https://github.com/atmonshi "atmonshi (4 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (2 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)")[![jeffersongoncalves](https://avatars.githubusercontent.com/u/411493?v=4)](https://github.com/jeffersongoncalves "jeffersongoncalves (2 commits)")[![chengkangzai](https://avatars.githubusercontent.com/u/43839286?v=4)](https://github.com/chengkangzai "chengkangzai (2 commits)")[![bumbummen99](https://avatars.githubusercontent.com/u/4533331?v=4)](https://github.com/bumbummen99 "bumbummen99 (1 commits)")[![ezitisitis](https://avatars.githubusercontent.com/u/6075434?v=4)](https://github.com/ezitisitis "ezitisitis (1 commits)")[![curder](https://avatars.githubusercontent.com/u/8327004?v=4)](https://github.com/curder "curder (1 commits)") --- Tags laravelGuavafilament-icon-picker ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/guava-filament-icon-picker/health.svg) ``` [![Health](https://phpackages.com/badges/guava-filament-icon-picker/health.svg)](https://phpackages.com/packages/guava-filament-icon-picker) ``` ### Alternatives [guava/calendar Adds support for vkurko/calendar to Filament PHP. 298241.0k3](/packages/guava-calendar)[bezhansalleh/filament-google-analytics Google Analytics integration for FilamentPHP 205144.8k5](/packages/bezhansalleh-filament-google-analytics)[guava/filament-clusters Filament clusters allow you to cluster multiple fields into one visually. 15881.9k1](/packages/guava-filament-clusters)[jibaymcs/filament-tour Bring the power of DriverJs to your Filament panels and start a tour ! 12247.8k](/packages/jibaymcs-filament-tour)[marcelweidum/filament-expiration-notice Customize the livewire expiration notice 9169.0k4](/packages/marcelweidum-filament-expiration-notice)[hydrat/filament-table-layout-toggle Filament plugin adding a toggle button to tables, allowing user to switch between Grid and Table layouts. 6292.3k1](/packages/hydrat-filament-table-layout-toggle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)