Weave Code
Heroicons Laravel Package
wireui/heroicons
Heroicons for WireUI brings the full Heroicons set to your Laravel Blade views as ready-to-use components. Render outline and solid icons with simple tags, adjust size and color via classes, and keep your markup clean and consistent.
The Tailwind Heroicons for laravel blade by WireUI
Frequently asked questions about Heroicons
- How do I install wireui/heroicons in a Laravel application?
- Run composer require wireui/heroicons, then verify the Blade component namespace or registration steps in the package documentation. You can usually render icons in templates after installation, but confirm the exact component or directive syntax because the API has evolved across v2.x releases. Most developers can be productive in under an hour; team conventions for naming and sizing take longer.
- Does wireui/heroicons require Tailwind CSS?
- Yes, the package is built around Tailwind Heroicons and expects a Tailwind CSS setup for sizing and color utilities such as w-6, h-6, and text-blue-500. If your application does not already use Tailwind, this package is not a good reason to adopt it. Do not introduce Tailwind solely for icon rendering.
- Does wireui/heroicons work with Livewire and Inertia?
- It works anywhere Blade renders the view layer, including Livewire components and Inertia applications with Blade-rendered shells. It does not address SPA frontends where React or Vue consumes a Laravel API. For those frontends, use the upstream Heroicons npm package or framework-specific packages instead.
- Which Laravel and PHP versions are supported by wireui/heroicons?
- The package is intended for modern Laravel applications, roughly Laravel 9 through 13, running PHP 8.x with Blade. Always check the current composer.json constraints and README before committing, especially before a Laravel major upgrade. The package has no backend runtime coupling, but Composer constraints still determine installability.
- How do I change the size and color of a Heroicons icon in Blade?
- Use Tailwind utility classes for sizing and color, for example w-6 h-6 for dimensions and text-blue-500 for color. The exact way to pass classes depends on the component syntax documented for your installed version. Establish a team sizing scale and naming convention so icon usage stays consistent across templates.
- Why are my Heroicons classes being purged in production?
- Tailwind removes class names it cannot detect statically, so dynamically composed classes can disappear in production builds. Use complete class names in your templates or add the required classes to the safelist. Verify the production CSS build rather than assuming development behavior will match.
- Are wireui/heroicons SVGs inlined or published and cached?
- Confirm this from the package documentation and source for your installed version, because it determines the performance profile. If SVGs are inlined per icon, icon-heavy pages such as dashboards and tables will grow in DOM size and response weight. Measure DOM size and LCP if you render many icons, and consider publishing or vendoring SVGs if you need tighter control.
- How should I handle accessibility for Heroicons in Blade?
- The package does not enforce accessibility rules, so treat it as a team convention. Decorative icons should be hidden from assistive technology, while meaningful icons need an accessible label, title, or adjacent visually hidden text. Document the rule so developers do not ship unlabeled icon-only buttons.
- Can I use wireui/heroicons in a React or Vue single-page application?
- No, this package is for Laravel Blade views, not for SPA components. React and Vue frontends consuming a Laravel API should use the upstream Heroicons npm package or packages such as @heroicons/react. Inertia applications can use it only where Blade renders the shell or view layer.
- Is wireui/heroicons production-ready, and what are the alternatives?
- It is a low-blast-radius frontend asset package with static SVGs and low switching cost, but it has limited ecosystem validation at roughly 43 stars and zero dependents. Treat adoption as a maintenance-transfer decision, not a capability decision. The main alternative is publishing Heroicons SVGs and owning a thin Blade component yourself; for SPAs use the upstream npm packages.
Weaver
How can I help you explore Laravel packages today?