Weave Code
Blade Icons Laravel Package
blade-ui-kit/blade-icons
Blade Icons lets you drop SVG icons into Laravel Blade views with a simple component or directive, like or @svg('camera', 'w-6 h-6'). It's a lightweight base package with many third-party icon set packages available.
Blade Icons is a Laravel package for using SVG icons directly in Blade views, turning verbose SVG markup into a concise @svg('camera', 'w-6 h-6') directive or an <x-icon-camera /> component. Originally created as "Blade SVG" by Adam Wathan, it has become the base package behind a large ecosystem of third-party icon sets.
- Render icons via the
@svgdirective or<x-icon-*>components - Register multiple icon sets and custom directories
- Built-in caching for efficient rendering
- Customize default classes and attributes
- Compatible with community icon set packages
Frequently asked questions about Blade Icons
- How do I install blade-ui-kit/blade-icons in a Laravel app?
- Run composer require blade-ui-kit/blade-icons; the service provider is auto-discovered, so no manual registration is needed. Optionally publish the config with php artisan vendor:publish --tag=blade-icons and define a set path in config/blade-icons.php pointing at something like resources/svg. Every SVG you drop in that directory becomes available as a Blade component, for example camera.svg becomes x-icon-camera. Remember the package ships the resolver, not the artwork.
- Which Laravel and PHP versions does Blade Icons support?
- The README lists PHP 7.4 and Laravel 8 as floors, but major versions of this package have historically raised those constraints, so verify the current requirements on Packagist for the exact version you pin. Because it is a thin resolution layer over files on disk with no runtime service or database work, upgrade risk is minimal. Check the constraint before locking it into a long-lived project.
- How do I add my own SVG icons to Blade Icons?
- Place your SVG files in a directory such as resources/svg, then register a set in config/blade-icons.php with that path and an optional prefix. Files are resolved by filename, so camera.svg in an unprefixed set renders as x-icon-camera. Keep filenames consistent and lowercase so icon names stay predictable and greppable. Rebuild the icon cache after adding or renaming files.
- How do I use a third-party icon set package like Blade Heroicons with a prefix?
- Composer require the icon set package; its own service provider registers the set and prefix, so you can immediately use something like x-heroicon-o-camera or @svg('heroicon-o-camera'). Prefixes prevent collisions when several sets are installed side by side. Treat each set as a separate dependency to vet and pin, since many are single-author packages with uneven Laravel and PHP constraint hygiene. Also check the artwork license, as several popular sets are attribution-required.
- What is the difference between the x-icon component and the @svg directive?
- Both resolve the same underlying SVG file, so the choice is ergonomic rather than functional. The x-icon-camera component goes through Blade's component attribute bag, which merges class, data-*, ARIA, and Alpine bindings cleanly onto the SVG element. The @svg('camera', 'w-6 h-6') directive is a shorter shorthand for cases where a full component feels heavy. Most teams standardize on the component form.
- How does the icons:cache command work and should I run it in production?
- The icons:cache command precompiles a manifest of your icons so each render does not scan the filesystem to resolve a name. Treat it as a required deploy step rather than an optional optimization, and rebuild it whenever icons are added, renamed, or removed. This is the only piece of operational knowledge that is not obvious from the README. Forgetting it mostly costs resolution speed, not correctness.
- Can I pass Tailwind classes and other attributes to an icon?
- Yes. Attributes placed on the component are merged with the SVG's own attributes through Blade's attribute bag, so class="w-6 h-6", data-* attributes, ARIA labels, and Alpine bindings all flow through without per-icon wrapper markup. This is the main ergonomic win over copy-pasting raw SVG into views. It also means your icons stay consistent with your existing utility-class conventions.
- Can I use dynamic icon names from a database or user input in Blade Icons?
- Only with a whitelist at the boundary. Never interpolate raw user input or unvalidated database values into an icon name, because the renderer resolves names to file paths. Resolve the name against an explicit allowlist, such as a config array or a validated column, before passing it to the component or directive. The same discipline applies to any prefix you let the application choose.
- Is Blade Icons still maintained, and what is the risk of its single maintainer?
- Development is effectively single-maintainer, but the maintainer is a Laravel core team member, the package is MIT-licensed, widely used, and has 100+ community icon set packages built on it. The surface area is small enough to fork or vendor if it were ever abandoned. The blast radius is also limited to the view layer, so the worst-case failure is cosmetic rather than a data or auth problem. Do not treat bus factor as zero, but it is not a blocker.
- Does Blade Icons work with Livewire, Tailwind, and Vue or React?
- It fits Blade, Livewire, and Tailwind applications best, since inline SVG plus class passthrough matches utility-first styling and Alpine bindings. For front-end-only SPAs built in Vue or React, a bundler-based SVG pipeline is usually the more natural fit because there is no Blade render step. Mixing is fine, but keep the icon inventory owned in one place rather than duplicating sets across stacks.
Weaver
How can I help you explore Laravel packages today?