Weave Code
Blade Heroicons Laravel Package
blade-ui-kit/blade-heroicons
Use Heroicons in Laravel Blade via simple SVG components. Supports passing classes/attributes, configuration through Blade Icons (defaults, caching), and works with PHP 8+ and Laravel 9+. Browse icons in the bundled SVGs or on heroicons.com.
Blade Heroicons brings the Heroicons SVG set to Laravel as simple Blade components, powered by Blade Icons. Drop icons into your views with expressive component tags and optionally configure defaults for classes and attributes.
Use icons like <x-heroicon-o-arrow-left />, style them via classes or inline attributes, and rely on Blade Icons’ tooling for performance and customization.
- Self-closing Blade components compile directly to SVG
- Supports outline/solid icon variants via naming conventions
- Pass classes/attributes (e.g., size, color, accessibility props)
- Optional config publishing for default classes/attributes
- Compatible with Blade Icons caching for faster renders
Frequently asked questions about Blade Heroicons
- How do I install Blade Heroicons in my Laravel project?
- Run `composer require blade-ui-kit/blade-heroicons` in your project directory. No additional setup is required for basic usage—just start using icons like `<x-heroicon-o-arrow-left />` in your Blade views.
- Which Laravel and PHP versions does Blade Heroicons support?
- The package requires **Laravel 9.0 or higher** and **PHP 8.0 or higher**. It’s fully compatible with modern Laravel applications and adheres to PHP 8+ syntax.
- Can I use Heroicons outside of Blade templates (e.g., in JavaScript or CSS)?
- Yes. Publish the raw SVG assets with `php artisan vendor:publish --tag=blade-heroicons --force` to access the original Heroicons SVGs in your project’s `resources/svg` directory for non-Blade use cases.
- How do I customize default classes or attributes for all icons globally?
- Publish the config file using `php artisan vendor:publish --tag=blade-heroicons-config`. This generates a `config/blade-heroicons.php` file where you can define defaults like `default_classes` or `default_attributes` for all icons.
- Does Blade Heroicons support Heroicons’ outline and solid variants?
- Yes. Use the naming convention in the component tag: `<x-heroicon-o-arrow-left />` for outline variants and `<x-heroicon-s-arrow-left />` for solid variants. The package automatically maps these to the correct SVGs.
- How can I improve performance when using many Heroicons in my app?
- Enable Blade Icons caching by following the [Blade Icons caching guide](https://github.com/driesvints/blade-icons#caching). This compiles icons to static files, reducing render time for dynamic Blade views.
- Will Blade Heroicons work with Inertia.js and React/Vue components?
- Blade Heroicons is Blade-specific, but you can still use the raw SVGs (published via `vendor:publish`) in your React/Vue components. For dynamic icons, consider passing the SVG markup directly or using a separate icon library for frontend frameworks.
- Are there any breaking changes when updating Blade Heroicons?
- Check the [upgrade guide](UPGRADE.md) in the repository for version-specific changes. Major updates (e.g., Heroicons v2 → v3) may require migration, but the package maintains a detailed changelog to highlight breaking changes.
- Can I use Blade Heroicons with Livewire or Alpine.js?
- Yes, Blade Heroicons works seamlessly with Livewire or Alpine.js since it renders icons as standard Blade components. Just include the components in your Livewire/Alpine templates as you would in regular Blade views.
- What if I need a Heroicon variant not included by default (e.g., mini or micro)?
- Blade Heroicons supports all Heroicons variants (outline, solid, mini, micro). Use the correct naming convention in your component tag, such as `<x-heroicon-m-arrow-left />` for mini variants. All available icons are listed in the [Heroicons documentation](https://heroicons.com/).
Weaver
How can I help you explore Laravel packages today?