How to use Blade UI Icons in your Laravel Project
Tags: laravel, php, beginners, tutorial
Published: 2022-01-22 15:59:47

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](https://laravel.com/) developer you are probably familiar with [Blade](https://laravel.com/docs/8.x/blade) as the templating engine for the Laravel framework.

So what is Blade Icons? [Blade Icons](https://blade-ui-kit.com/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](https://www.wampserver.com) and [Composer](https://getcomposer.org) 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:

![artisan serve result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/au7h42q7f3kceny4k81s.png) 

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

![base website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wt1bkd9rp65jv5w9svg6.png)
 

## 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:

![blade icon config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8azzsiockz31evjy68x3.png)

## 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](https://github.com/blade-ui-kit/blade-icons#icon-packages) and select your preferred one, I'll be using [Blade Carbon Icons](https://github.com/codeat3/blade-carbon-icons) package by [Swapnil Sarwe](https://github.com/codeat3), 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] (https://github.com/codeat3/blade-carbon-icons/tree/main/resources/svg) 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:

![end result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9seaw9tgb90gysz1sm0.png)


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. 👍