secondnetwork/blade-tabler-icons
Blade Tabler Icons lets you drop the full Tabler Icons set into any Laravel Blade view as simple components like x-tabler-alert-circle, with support for classes, inline styles, filled variants, and raw SVG output via Blade Icons.
Install with Composer — there is no service provider to register manually and no install command to run:
composer require secondnetwork/blade-tabler-icons
The package satisfies php artisan about / composer show on PHP 8.0+ and Laravel 9+, and the current release line tracks the upstream Tabler icon set directly (v3.49.x at the time of writing, with automated weekly sync PRs). If your app is on Laravel 11/12/13, check that the constraint allows it — the package added Laravel 12 support in v3.30.1 and 13.x in v3.40.1, so an older lock file may need composer update secondnetwork/blade-tabler-icons.
Your first use case is almost always a button or nav item. Drop the component straight into a Blade view:
<x-tabler-alert-circle class="w-6 h-6 text-gray-500" />
<button class="flex items-center gap-2">
<x-tabler-device-floppy class="w-4 h-4" />
Save
</button>
Where to look first:
resources/svg directory to confirm an icon name exists before you write it into a view. The component name is the kebab-case filename with a tabler- prefix (alert-circle.svg → <x-tabler-alert-circle />).vendor/secondnetwork/blade-tabler-icons/resources/svg/ to see exactly what you're rendering — the outline icons sit at the root and the filled variants are under filled/.@svg, default classes, caching. This package is a thin icon-set registration over blade-ui-kit/blade-icons, so most of your questions are answered there.First useful thing to do after install: publish the config and set a project-wide default class so you don't repeat sizing classes on every icon.
php artisan vendor:publish --tag=blade-tabler-icons-config
// config/blade-tabler-icons.php
'class' => 'w-5 h-5',
That single line pays for itself the first time a designer changes the icon size across the app.
Pick one invocation style and stick to it. You have three, and mixing them makes grepping harder:
{{-- 1. Component (most common) --}}
<x-tabler-alert-circle class="w-6 h-6" />
{{-- 2. @svg directive from Blade Icons --}}
@svg('tabler-alert-circle', 'w-6 h-6')
{{-- 3. Raw asset after publishing --}}
<img src="{{ asset('vendor/blade-tabler-icons/alert-circle.svg') }}" width="10" height="10" />
The component form is the right default: it compiles to inline SVG, so currentColor works and you can tint icons with Tailwind text colors. The <img> form cannot inherit currentColor — reserve it for email templates, PDF rendering, or when you're piping SVGs through a CDN.
Filled variants are a separate namespace, with two spellings. Both of these resolve to the same filled file:
<x-tabler-alert-circle-filled />
<x-tabler-alert-circle-f />
Prefer the -filled long form in application code. The -f alias is shorter but collides conceptually with any real icon name ending in -f, and it reads poorly in review diffs.
Wrap icons in your own component once the app grows. Icon markup repeated 400 times is where consistency dies. A thin wrapper gives you a single place for sizing, accessibility, and a safe fallback for names that get renamed upstream:
{{-- resources/views/components/icon.blade.php --}}
@props(['name', 'size' => 'w-5 h-5'])
<x-dynamic-component
:component="'tabler-' . $name"
{{ $attributes->merge(['class' => $size]) }}
aria-hidden="true"
/>
<x-icon name="alert-circle" class="text-red-500" />
This also gives you a seam to swap icon packs later without touching every view.
Compose with buttons and links, not the other way round. Keep the icon a child of the interactive element rather than putting the icon on the button component:
<x-tabler-trash class="w-4 h-4" />
inside a <button>, with aria-hidden="true" on the icon and an accessible label on the button. Screen readers should announce "Delete", not "trash".
Use inline styles for stroke weight, classes for everything else. Tabler is a stroke-based set with a default stroke-width of 2. When a design calls for lighter icons, that goes in style, since there is no stroke-width utility out of the box:
<x-tabler-settings style="stroke-width: 1.25" class="w-6 h-6" />
If your whole app wants a lighter look, set it in the published config's default attributes instead of repeating it.
Turn on icon caching before you ship. The README explicitly recommends it, and it matters: without it, Blade Icons resolves the SVG path on every render. Follow the Blade Icons caching docs, which in practice means caching to disk in production and adding the cache commands to your deploy script:
php artisan icons:cache
For a typical app with a handful of icons in a layout and a nav, this is a small but free win. Clear it (php artisan icons:clear) whenever you bump the package, since new icons won't be in the stale cache.
Treat icon releases like dependency updates, not content updates. This package publishes a new version every time Tabler ships icons — sometimes weekly. Your workflow should be: pin the version in composer.json (or at least review the diff), read the release notes for renamed icons, and only then run composer update. See the gotcha below for why renames are the whole risk surface.
Publish raw SVGs only if you actually need a request-time asset. php artisan vendor:publish --tag=blade-tabler-icons --force dumps thousands of files into public/vendor/blade-tabler-icons/. That's a large addition to your repo (or a build artifact your deploy must regenerate). If you go this route, add the directory to .gitignore and run the publish as part of your build, not as one-off local dev.
Icon renames will silently break your views. This is the single biggest day-to-day risk. Upstream Tabler periodically corrects spellings, and the package passes those through verbatim. Release v3.45.0 renamed mood-confuzed → mood-confused, foodsteps → footsteps, ikosaedr → icosahedron, sport-billard → sport-billiard, brand-adobe-after-effect → brand-adobe-after-effects, brand-kako-talk → brand-kakao-talk, currency-rubel → currency-ruble, physotherapist → physiotherapist, and gender-trasvesti → gender-travesti. A missing icon does not throw — Blade renders nothing or a component-not-found error depending on your Blade Icons config, so a silent gap in the UI is the likely symptom. Mitigations:
A typo'd icon name can fail in two different ways. With strict component resolution you get an InvalidArgumentException / ComponentNotFoundException at render time — loud, good. With lenient resolution you get empty output — quiet, bad. If an icon "just isn't showing up", the first thing to check is not CSS but whether the file exists: ls vendor/secondnetwork/blade-tabler-icons/resources/svg/ | grep your-icon. Also try the icon directly in a bare Blade view to rule out a parent display:none or zero-size container.
Sizing is not automatic. The icons ship at 24×24 with no width/height classes. Drop <x-tabler-x /> into a flex container with no sizing and you'll get a full-size 24px icon that may look enormous next to 14px text, or get squashed if a parent sets width: 100%. Always pair with w-*/h-* (or the config default). Passing only class="w-6" without a height leaves the SVG's intrinsic 24px height and you get a distorted rectangle.
Publishing the config and publishing the SVGs are different tags. --tag=blade-tabler-icons-config gives you the PHP config. --tag=blade-tabler-icons dumps the SVG files. They differ by one word and the wrong one costs you several minutes of confusion. The --force flag on the SVG publish overwrites without prompting — fine in a fresh container, dangerous locally if you've hand-edited anything (which you shouldn't, since it's vendor content).
Don't hand-edit published SVGs. They're regenerated by the publish command and lost. If you need a one-off icon that Tabler doesn't have, put it in resources/svg/ of your own app and register a separate icon set with Blade Icons, rather than patching the vendor copy.
Config-published defaults interact with per-usage classes. When you set 'class' => 'w-5 h-5' in the config, that class is merged into every icon. A component that passes class="w-10 h-10" will then have both size utilities in the class attribute, and CSS order (not attribute order) decides the winner — usually the one Tailwind emitted later. That's a classic "my size override doesn't work" bug. Either leave the config class empty and be explicit everywhere, or use your wrapper component with $attributes->merge() so intent is documented in one place.
@svg needs its argument as a string with the tabler- prefix. @svg('alert-circle') is not the same as @svg('tabler-alert-circle'), and the error message for the former is not always obvious. The second argument is the class string, so @svg('tabler-x', 'w-6 h-6 text-gray-500') is the equivalent of the class attribute.
Accessibility defaults are absent. Every icon rendered by this package is decorative by default and will be announced if it lands somewhere a screen reader reads. Add aria-hidden="true" for decorative icons, and for standalone meaningful icons use role="img" plus <title> — you can wrap this in your own component using Blade Icons' ability to pass extra attributes through.
Add a render smoke test early. One test that hits your main layout and dashboard and asserts a 200, plus a single assertSee('<svg', false), catches the rename and component-resolution failure modes above in CI. If you use the @svg directive, note it's a Blade compile-time construct; testing via $this->blade() or a full request cycle is more reliable than asserting on component classes.
Version churn is high and mostly noise — read selectively. Most releases are "automated change Icons Release vX.Y.Z" with a commit hash and nothing else, which tells you nothing about renames. When a release does include a changelog (v3.44.0 and v3.45.0 did), it's worth the thirty seconds. When it doesn't, compare the resources/svg listing between tags if you're suspicious.
Extension points are all upstream. This package adds no custom API beyond the icon set registration. Every knob you'd want — default classes, default attributes, path overrides, the @svg directive, caching — belongs to blade-ui-kit/blade-icons. Read that README once properly rather than searching this package's issues; it will save you a lot of time.
Note the maintenance signal. The repo has a handful of stars and zero dependents, and the register method was streamlined as recently as v3.29.1. That's not a reason to avoid it — the underlying icon set is well-known and the package is a thin registration layer, so the blast radius of a problem is small and replaceable — but don't build bespoke abstractions on top of it. The wrapper component suggested above keeps your app one file away from switching icon packs.
How can I help you explore Laravel packages today?