Using custom icons in FilamentPHP
Sometimes, the standard Heroicon set just isn't enough. Here's how you can quickly and easily add additional vectors to your Laravel FilamentPHP project
Behind the scenes, FilamentPHP uses the Blade Icons package, pre-installed with Heroicons.
This makes managing icons across the project really easy, but often I find that Heroicons just doesn't quite have the icon to describe the particular section I'm working on.
Store your icons
So, lets fix that - I'm going to use a free icon from FontAwesome called shapes - from FontAwesome, you can download the SVG code:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M315.4 15.5C309.7 5.9 299.2 0 288 0s-21.7 5.9-27.4 15.5l-96 160c-5.9 9.9-6.1 22.2-.4 32.2s16.3 16.2 27.8 16.2l192 0c11.5 0 22.2-6.2 27.8-16.2s5.5-22.3-.4-32.2l-96-160zM288 312l0 144c0 22.1 17.9 40 40 40l144 0c22.1 0 40-17.9 40-40l0-144c0-22.1-17.9-40-40-40l-144 0c-22.1 0-40 17.9-40 40zM128 512a128 128 0 1 0 0-256 128 128 0 1 0 0 256z"/></svg>
To make it function better in FilamentPHP, I'll simply add fill="currentColor" right before the viewBox attribute. This means the vector will take on the text colour it's wrapped in, like below:
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M315.4 15.5C309.7 5.9 299.2 0 288 0s-21.7 5.9-27.4 15.5l-96 160c-5.9 9.9-6.1 22.2-.4 32.2s16.3 16.2 27.8 16.2l192 0c11.5 0 22.2-6.2 27.8-16.2s5.5-22.3-.4-32.2l-96-160zM288 312l0 144c0 22.1 17.9 40 40 40l144 0c22.1 0 40-17.9 40-40l0-144c0-22.1-17.9-40-40-40l-144 0c-22.1 0-40 17.9-40 40zM128 512a128 128 0 1 0 0-256 128 128 0 1 0 0 256z"/></svg>
We'll call this icon shapes and store it inside our resources folder under svg. So the resulting file structure will be resources/svg/shapes.svg.
Configure Blade Icons
Now, it's time to configure Blade Icons. Firstly, publish the configuration file -
php artisan vendor:publish --tag=blade-icons
Once that's in your config directory, open it up and comment out the default icon set within the sets array.
Put it to good use!
And we're done! I can now use this within FilamentPHP by referencing icon-[NAME] so in my case it'll be icon-shapes, as below:
protected static ?string $navigationIcon = 'icon-shapes';
If you take a look at Blade Icons repository, you'll see that they support a huge amount of icon sets, and you could pull down all of FontAwesome. However, given that I know I'll only use a subset of these icons, for performance I'd rather pull them down one at a time.
If you enjoyed this article, please consider subscribing!