How to use Blade UI Icons in your Laravel Project

From communicating information to guiding users on how to perform actions on our websites or apps, icons have been a key part of the digital world. And as a developer, there's no doubt you have to use icons as you develop solutions that make life easier for your users.
__

What is Blade Icons?

As a Laravel developer you are probably familiar with Blade as the templating engine for the Laravel framework.

So what is Blade Icons? Blade Icons is a package that allows you to make use of up to 70,000+ SVG icons inside your Blade templates. And in this tutorial, I am going to show you how to add it to your Laravel app and also how to install different icon sets that are supported.

Create a Laravel project

If you already have an existing Laravel project, you can skip to the next heading, if not, you can follow along. In order to create a Laravel project, we need to have PHP and Composer installed, Once you have those installed, run the following command to create a new Laravel project:

composer create-project laravel/laravel insert-your-project-name

That is going to create a fresh Laravel application in a folder named insert-your-project-name, after that is done, change your directory to insert-your-project-name using:

cd insert-your-project-name

Once you're in that directory, open the application in any code editor of your choice, then run the following command to run your application:

php artisan serve

If all the steps are completed successfully you should see a message that contains a link to your application like this in your command line:

Click or copy and paste the localhost URL into the browser of your choice to confirm that your application is running successfully:

Install Blade Icons package

Once you have the Laravel application up and running, you need to install the Blade Icons package in order to be able to use it, and you do so by running the following command using Composer:

composer require blade-ui-kit/blade-icons

This will install the default icon set for you, and also publish the vendor configuration, Next, you need to define the path for the icon, you can do this by creating a folder named svg inside the resources folder, so you'll have resources/svg, as your SVG icons will be placed in that directory.

After that, go to your ./vendor/blade-ui-kit/config/blade-icons.php file and uncomment the default array as seen below:

Install and use icon packages

After the above steps have been completed, head over to Blade Icons' third party icon set packages list on their Github repo and select your preferred one, I'll be using Blade Carbon Icons package by Swapnil Sarwe, run the following command to install the package:

composer require codeat3/blade-carbon-icons

After that is done, you can start using the Blade Carbon Icons full list of icons here in your Blade template as shown below:

<h1>This is an apple: <x-carbon-apple/></h1>

Now, run your app and you should see the below screen:

Or with styling like so:

<x-carbon-apple style="color: green"/>

or with classes:

 <x-carbon-apple class="h-6 w-9"/>

More configuration can be done to the package inside the ./vendor/codeat3/blade-carbon-icons/config/blade-carbon-icons.php file.

Conclusion

And that's it! you have successfully added and used the Blade Icons package in your Laravel application.

I'll greatly appreciate your feedback. 👍