DEV Community

Cover image for How to use Simple Icons on Laravel Blade
Ub Labs profile image Adrián UB
Adrián UB for Ub Labs

Posted on • Updated on

How to use Simple Icons on Laravel Blade

#laravel #svg #blade

Blade Simple Icons

A package to easily make use of Simple Icons in your Laravel Blade views.

Requirements

  • PHP 7.4 or higher
  • Laravel 8.0 or higher

Installation

You can install the package via composer:

composer require ublabs/blade-simple-icons
Enter fullscreen mode Exit fullscreen mode

Usage

Icons can be used as self-closing Blade components which will be compiled to SVG icons:

<x-simpleicon-laravel />
Enter fullscreen mode Exit fullscreen mode

You can also pass classes to your icon components:

<x-simpleicon-laravel class="w-6 h-6 text-red-500"/>
Enter fullscreen mode Exit fullscreen mode

And even use inline styles:

<x-simpleicon-laravel style="color: #FF2D20"/>
Enter fullscreen mode Exit fullscreen mode

Raw SVG Icons

If you want to use the raw SVG icons as assets, you can publish them using:

php artisan vendor:publish --tag=blade-simple-icons --force
Enter fullscreen mode Exit fullscreen mode

Then use them in your views like:

<img src="{{ asset('vendor/blade-simple-icons/laravel.svg') }}" width="10" height="10"/>
Enter fullscreen mode Exit fullscreen mode

GitHub logo ublabs / blade-simple-icons

A package to easily make use of Simple Icons in your Laravel Blade views.

Blade Simple Icons

Tests Latest Stable Version Total Downloads

A package to easily make use of Simple Icons in your Laravel Blade views.

For a full list of available icons see the SVG directory.

Requirements

  • PHP 7.4 or higher
  • Laravel 8.0 or higher

Installation

You can install the package via composer:

composer require ublabs/blade-simple-icons
Enter fullscreen mode Exit fullscreen mode

Usage

Icons can be used as self-closing Blade components which will be compiled to SVG icons:

<x-simpleicon-laravel />
Enter fullscreen mode Exit fullscreen mode

You can also pass classes to your icon components:

<x-simpleicon-laravel class="w-6 h-6 text-red-500"/>
Enter fullscreen mode Exit fullscreen mode

And even use inline styles:

<x-simpleicon-laravel style="color: #FF2D20"/>
Enter fullscreen mode Exit fullscreen mode

Raw SVG Icons

If you want to use the raw SVG icons as assets, you can publish them using:

php artisan vendor:publish --tag=blade-simple-icons --force
Enter fullscreen mode Exit fullscreen mode

Then use them in your views like:

<img src="{{ asset('vendor/blade-simple-icons/laravel.svg') }}" width=
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

Top comments (0)

Read next

thavarshan profile image

Effortless Secret Management for Laravel & JS Projects with Secrets Loader

Jerome Thayananthajothy -

devjm profile image

How to override laravel nova components

Jenry Mazariegos -

eduarguz profile image

Tips for testing queued jobs in Laravel

Eduardo Guzmán -

gitter4coding profile image

Is PHP still worth learning in 2025?

gitter4coding -