Using custom icons in FilamentPHP

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!