Blade Iconsax Laravel Package

Getting Started

composer require saade/blade-iconsax

Laravel’s package discovery registers the service provider automatically — no config/app.php edit needed on 5.5+. If you’re on an older app, add Saade\BladeIconsax\BladeIconsaxServiceProvider::class to your providers array.

Drop an icon into any Blade view:

<x-iconsax-home />
<x-iconsax-user class="w-5 h-5 text-gray-500" />

First place to look: the package’s resources/ or src/ directory to confirm the component prefix (iconsax-) and the exact icon slug list (Iconsax ships names like home-2, user-tick, arrow-right-3, which map to <x-iconsax-home-2 />, <x-iconsax-arrow-right-3 />).

First real use case: replace heroicons/zondicons in your layouts/navigation.blade.php — drop <x-iconsax-* /> into your sidebar/nav items and pass Tailwind classes via the class attribute. Because icons are inline SVG, text-* and fill-* utilities apply directly.

Implementation Patterns

Attribute passthrough. Components forward $attributes onto the <svg> tag, so sizing/coloring is standard Tailwind:

<x-iconsax-search class="h-4 w-4 text-indigo-600" stroke-width="2" />

Nav loops. Combine with your route/menu data:

@foreach (config('nav.items') as $item)
    <a href="{{ $item['url'] }}" class="flex items-center gap-2">
        <x-dynamic-component :component="'iconsax-'.$item['icon']" class="w-5 h-5" />
        {{ $item['label'] }}
    </a>
@endforeach

<x-dynamic-component> is the main pattern for data-driven icons — avoid hardcoding when the icon name comes from the DB or config.

Button/link composition. Wrap the icon in a component instead of repeating classes:

<!-- resources/views/components/icon-button.blade.php -->
<button {{ $attributes->merge(['class' => 'inline-flex items-center gap-2 rounded-md px-3 py-2']) }}>
    <x-dynamic-component :component="$icon" class="w-4 h-4" />
    {{ $slot }}
</button>

<x-icon-button icon="iconsax-plus">New</x-icon-button>

Style variants (Linear / Bold / Bulk / TwoTone / Broken). Iconsax is distributed as multiple styles. Check whether the package exposes these as separate prefixes (e.g. <x-iconsax-linear-home /> vs <x-iconsax-bulk-home />) or as a variant prop. Once confirmed, bake the choice into your wrapper components so views stay readable. A common convention: linear for nav/inline, bulk for empty states and dashboards, two-tone for marketing.

Overriding icons / publishing. If the package supports vendor:publish, publish the config and/or SVGs and edit them directly:

php artisan vendor:publish --tag=blade-iconsax-config
php artisan vendor:publish --tag=blade-iconsax-icons

Use this when you need a brand-specific glyph or to strip hardcoded fill="#292D32" values that fight your Tailwind theme.

Livewire / Inertia. The components are plain Blade, so they work inside Livewire components unchanged; just be aware that re-rendering a Livewire component re-emits the whole inline SVG, so avoid putting large icon lists inside frequently-updating components.

Gotchas and Tips

• Stroke vs fill styles clash with color utilities. Linear icons are drawn with stroke="currentColor" — text-* works. Bold/Bulk icons have baked-in fill attributes; a fill-* class on the wrapper won’t override the inline fill="#..." on the path. Publish and strip the hardcoded fills if you want theming to work.
• Default sizing. Most wrappers emit width="24" height="24". A class="w-5 h-5" will not shrink it unless the SVG also has viewBox (it should) and either no fixed dimensions or you add [&>svg]:w-5 / use width/height attributes directly: <x-iconsax-home width="20" height="20" />.
• $attributes merge ordering. Anything you pass (class, stroke-width, data-*) is string-concatenated by Component::merge — duplicate utility classes (e.g. w-5 in the component and w-6 at call site) resolve by CSS specificity, not Blade order. Keep sizes at call sites only.
• Name slugification. Iconsax names with numbers and suffixes (arrow-right-3, home-2, user-tick) must be kebab-cased and prefixed exactly as registered. Typos render nothing (or throw, depending on config) — no console warning. If an icon is blank, php artisan view:clear first, then verify the slug exists in the package’s icon list.
• View cache staleness. After publishing icons or upgrading the package, run php artisan view:clear; compiled Blade can hold stale component references and mask the new icon paths.
• Bloat. Every icon inlines a full SVG. A page with 40+ icons adds tens of KB to the HTML response. For dense tables, either paginate or move to an SVG sprite build step (svgo + <use>), which the package does not do for you.
• Accessibility. Decorative icons should be aria-hidden="true"; standalone/icon-only buttons need an aria-label on the button. The package doesn’t add either — pass them through: <x-iconsax-trash aria-hidden="true" />.
• Caching / performance. Icons are resolved at render time via the blade-icons registry. If you hit a hot path, php artisan optimize (config + view cache) helps; for extreme cases, memoize compiled SVG strings in a service or use the sprite approach above.
• Extension point. Most blade-icon packages expose a BladeIcons::registerIcon()-style API for custom paths. If you need to add your own glyphs alongside Iconsax, register a separate set (e.g. app-) rather than dumping files into the vendor folder — upgrades will overwrite vendor icons.
• License hygiene. The package is MIT, but the Iconsax icon assets themselves carry their own license — check the upstream Iconsax terms before redistributing the SVGs in a public repo or SaaS bundle.