Laravel Blade

composer require solar-icons/blade

InstallationCopy Anchor Link

Solar Icons Blade uses Blade Icons under the hood. Please refer to the Blade Icons readme for additional functionality such as caching and default attributes. With over 8,000 shipped SVGs, we strongly recommend enabling icon caching.

Static iconsCopy Anchor Link

Icons ship in six styles (linear, bold, broken, outline, bold-duotone, line-duotone) as self-closing Blade components which compile to inline SVG:

<x-solar-linear-heart />
<x-solar-bold-heart />
<x-solar-line-duotone-heart />

Pass classes and inline styles like any Blade component:

<x-solar-linear-heart class="w-6 h-6 text-gray-500" />
<x-solar-linear-heart style="color: #555" />

Size icons with width/height and tune stroke icons with stroke-width:

<x-solar-linear-heart width="48" height="48" stroke-width="2" />

Duotone styles (bold-duotone, line-duotone) expose a second color through CSS variables, resolved by the browser at render time:

<x-solar-line-duotone-heart style="--solar-secondary-color: #2563eb; --solar-secondary-opacity: 0.5" />

Dynamic iconsCopy Anchor Link

One component covers every icon and style. Switch styles server-side or render icon names coming from the database:

<x-solar-icon name="heart" weight="linear" />
<x-solar-icon name="heart" weight="bold-duotone" class="w-6 h-6" />
<x-solar-icon :name="$menuItem->icon" weight="linear" />

weight defaults to linear. Unknown names or weights fail fast with an exception instead of rendering silently broken output.

PHP helperCopy Anchor Link

Blade Icons also exposes a PHP-side helper, useful outside templates (mailables, notifications, packages):

svg('solar-linear-heart', 'w-6 h-6', ['stroke-width' => '2'])->toHtml();

PHP enumCopy Anchor Link

Every canonical icon is available as a typed enum case, useful with Filament and other PHP-driven UIs:

use SolarIcons\Blade\SolarIcon;

svg(SolarIcon::LinearHeart->value)->toHtml();
SolarIcon::LineDuotoneHeart->weight(); // 'line-duotone'

Raw SVG assetsCopy Anchor Link

Publish the raw SVGs to use them as static assets:

php artisan vendor:publish --tag=solar-icons-blade --force

<img src="{{ asset('vendor/solar-icons-blade/linear-heart.svg') }}" width="10" height="10" />

ConfigurationCopy Anchor Link

Publish the config file to set default classes or attributes applied to every icon:

php artisan vendor:publish --tag=solar-icons-blade-config