ryangjchandler/blade-tabler-icons
A Laravel package that provides Blade components for the Tabler Icons set. Render any icon with a simple tag like , with support for icon styles and attributes, so you can drop crisp SVG icons into your Blade views without extra setup.
Install (the package pulls in blade-ui-kit/blade-icons as a dependency):
composer require ryangjchandler/blade-tabler-icons
There is nothing to publish — the SVGs ship in the package under resources/svg, and the service provider registers them as a Blade Icons set with the tabler prefix. Drop it in and render an icon:
<x-tabler-home class="w-6 h-6" />
<x-tabler-alert-triangle class="w-5 h-5 text-amber-500" />
Find the icon names by browsing the vendor directory — the filename minus .svg is the component suffix (alert-triangle.svg → <x-tabler-alert-triangle />):
ls vendor/ryangjchandler/blade-tabler-icons/resources/svg | head -50
Cross-reference the visual names on tabler.io/icons. The @svg('tabler-home') directive is also available via Blade Icons if you prefer the directive style.
First practical use case — a sidebar nav where every link carries an icon:
@foreach ([
['route' => 'dashboard', 'icon' => 'layout-dashboard', 'label' => 'Dashboard'],
['route' => 'projects', 'icon' => 'folder', 'label' => 'Projects'],
['route' => 'settings', 'icon' => 'settings', 'label' => 'Settings'],
] as $item)
<a href="{{ route($item['route']) }}" class="flex items-center gap-2">
<x-dynamic-component :component="'tabler-'.$item['icon']" class="w-5 h-5" />
<span>{{ $item['label'] }}</span>
</a>
@endforeach
Note the package is archived — the last release was March 2024. It will keep working, but the bundled SVGs are frozen at that snapshot. For a greenfield project, plan an exit strategy (see Gotchas).
Attributes pass through to the <svg> root. class, width, height, stroke-width, aria-*, and any x-bind:* from Alpine land on the SVG element, so you can size and theme with Tailwind without touching config:
<x-tabler-check class="w-4 h-4 text-emerald-600" stroke-width="2.5" />
Wrap it once. Rather than sprinkling sizing across hundreds of call sites, build a thin app-level component so a design-system change is one file:
{{-- resources/views/components/ui/icon.blade.php --}}
@props(['name', 'size' => 'md'])
@php
$sizeClass = match ($size) {
'sm' => 'w-4 h-4',
'lg' => 'w-6 h-6',
default => 'w-5 h-5',
};
@endphp
<x-dynamic-component
:component="'tabler-'.$name"
{{ $attributes->merge(['class' => $sizeClass.' shrink-0']) }}
aria-hidden="true"
/>
Then <x-ui.icon name="user" size="sm" class="text-gray-400" /> everywhere. This also gives you one place to swap the underlying implementation later.
Dynamic names from data. x-dynamic-component handles the naming for you, which is handy for menu definitions stored in config or the database:
<x-dynamic-component :component="'tabler-'.$menu->icon" class="w-5 h-5" />
Validate the value against a whitelist when it comes from user input — an unknown component name throws rather than rendering nothing.
Directive / helper form. For strings assembled in PHP — mailables, PDF templates, notifications, Markdown-rendered content — use the Blade Icons helpers instead of a component:
use function BladeUI\Icons\svg;
$html = svg('tabler-mail', 'w-5 h-5')->toHtml();
This is also the only clean way to embed icons inside a Blade::render() string or a queued notification's Blade view where components feel heavy.
Production caching. Blade Icons supports pre-rendering the SVG set to a cache file, which avoids disk reads per render:
php artisan icons:cache
Wire this into your deploy script (after config:cache, before view:cache) and make sure icons:clear runs on rollback.
Buttons and links. Because attributes flow through, the icon composes cleanly with @class and disabled states:
<button {{ $attributes->merge(['class' => 'inline-flex items-center gap-2 ...']) }}>
<x-tabler-plus class="w-4 h-4" />
{{ $slot }}
</button>
Configure defaults globally. Publish the Blade Icons config if you want a default class applied to every icon across the app (useful for a global w-5 h-5 align-text-bottom):
php artisan vendor:publish --tag=blade-icons
composer.json ("ryangjchandler/blade-tabler-icons": "1.*") so a future composer update can't surprise you, and budget time to vendor the SVGs into resources/svg/icons/tabler/ and register your own set with blade-icons — that is a 20-minute migration and removes the dependency.tabler prefix rather than blocking on a new release.x-tabler-foo for a missing foo.svg raises an SvgNotFound exception. This is good for catching typos in dev but will 500 a page in production; guard names that come from data.fill. Tabler outline icons are stroke-based. Setting fill="currentColor" on them will produce blobs; use stroke-width and let currentColor inherit from the parent's text color.class merges rather than replaces. Blade Icons appends your class to whatever the SVG already has. If you're fighting a hard-coded size, pass width/height attributes explicitly or override with Tailwind's ! important modifier as a last resort.php artisan icons:clear && php artisan view:clear. If icons render as literal text after a deploy, you almost certainly cached icons before the new files landed.aria-hidden="true" on the wrapper (as in the x-ui.icon example) and put the accessible name on the button/link. For standalone meaningful icons, pass role="img" plus <title> — the SVG title has to be inside the component, which is another argument for wrapping it.assertSee brittle. Prefer asserting on aria-label, the surrounding button, or use assertSeeHtml('<svg') sparingly. Snapshot tests on icon markup will break on every package bump.x-tabler-* vs x-heroicon-* — so you never have to hunt which set a component came from.<svg><symbol> sprite and <use> references rather than abandoning the package.resources/svg directory into your app, register it as a blade-icons set named tabler, and you keep identical <x-tabler-* /> call sites while gaining the ability to add icons yourself.How can I help you explore Laravel packages today?