1naichii/lucide-laravel

Lucide Laravel

Laravel Blade integration for the Lucide icon library - 1,666+ beautiful, consistent SVG icons.

Installation

composer require mallardduck/blade-lucide-icons

Clear view cache if icons don't appear:

php artisan view:clear

Quick Start

Basic Usage

Icons use the x-lucide- prefix with kebab-case naming:

<x-lucide-activity />
<x-lucide-heart />
<x-lucide-shopping-cart />
<x-lucide-circle-check />

Naming Convention

Convert PascalCase icon names to kebab-case:

| Icon Name | Blade Component | |-----------|----------------| | Activity | <x-lucide-activity /> | | ShoppingCart | <x-lucide-shopping-cart /> | | CircleCheck | <x-lucide-circle-check /> | | ArrowRight | <x-lucide-arrow-right /> |

Styling

Tailwind CSS

<!-- Size and color -->
<x-lucide-album class="w-6 h-6 text-gray-500"/>

<!-- Responsive sizing -->
<x-lucide-heart class="w-4 h-4 md:w-6 md:h-6 text-red-500"/>

<!-- Hover effects -->
<x-lucide-star class="w-5 h-5 text-yellow-400 hover:text-yellow-500 cursor-pointer"/>

<!-- Transitions -->
<x-lucide-bell class="w-6 h-6 text-gray-700 hover:text-gray-900 transition-colors duration-200"/>

Inline Styles

<x-lucide-anchor style="color: #555"/>
<x-lucide-heart style="color: #ff0000; width: 48px; height: 48px;"/>
<x-lucide-activity style="color: var(--primary-color); stroke-width: 1.5;"/>

Common Patterns

Navigation Menus

<nav>
    <div class="flex items-center gap-6">
        <a href="/dashboard" class="flex items-center gap-2">
            <x-lucide-layout-dashboard class="w-5 h-5"/>
            <span>Dashboard</span>
        </a>
        <a href="/products" class="flex items-center gap-2">
            <x-lucide-package class="w-5 h-5"/>
            <span>Products</span>
        </a>
        <a href="/settings" class="flex items-center gap-2">
            <x-lucide-settings class="w-5 h-5"/>
            <span>Settings</span>
        </a>
    </div>
</nav>

Form Inputs

<div class="relative">
    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
        <x-lucide-search class="w-5 h-5 text-gray-400"/>
    </div>
    <input type="text" class="pl-10 w-full border rounded-lg" placeholder="Search..."/>
</div>

Alerts

<!-- Success -->
<div class="flex items-start gap-3 p-4 bg-green-50 border-l-4 border-green-500 rounded">
    <x-lucide-check-circle class="w-6 h-6 text-green-600 flex-shrink-0"/>
    <div>
        <h4 class="font-semibold text-green-800">Success!</h4>
        <p class="text-green-700">Your changes have been saved.</p>
    </div>
</div>

<!-- Error -->
<div class="flex items-start gap-3 p-4 bg-red-50 border-l-4 border-red-500 rounded">
    <x-lucide-alert-circle class="w-6 h-6 text-red-600 flex-shrink-0"/>
    <div>
        <h4 class="font-semibold text-red-800">Error</h4>
        <p class="text-red-700">Something went wrong.</p>
    </div>
</div>

<!-- Info -->
<div class="flex items-start gap-3 p-4 bg-blue-50 border-l-4 border-blue-500 rounded">
    <x-lucide-info class="w-6 h-6 text-blue-600 flex-shrink-0"/>
    <p class="text-blue-700">Please review your changes before submitting.</p>
</div>

Action Buttons

<!-- Icon-only button with aria-label -->
<button class="p-2 hover:bg-gray-100 rounded" aria-label="Delete">
    <x-lucide-trash class="w-5 h-5 text-red-600"/>
</button>

<!-- Button with icon and text -->
<button class="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
    <x-lucide-save class="w-5 h-5"/>
    <span>Save</span>
</button>

<!-- Primary action -->
<button class="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg">
    <x-lucide-plus class="w-5 h-5"/>
    <span>Add New</span>
</button>

With Livewire

<!-- Loading states -->
<button wire:click="refresh" class="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg">
    <x-lucide-refresh-cw class="w-5 h-5" wire:loading.class="animate-spin"/>
    <span wire:loading.remove>Refresh Data</span>
    <span wire:loading>Loading...</span>
</button>

<!-- Toggle icon based on state -->
<div class="flex items-center gap-2">
    @if($isFavorited)
        <x-lucide-heart class="w-5 h-5 text-red-500 fill-current" wire:click="unfavorite"/>
    @else
        <x-lucide-heart class="w-5 h-5 text-gray-400" wire:click="favorite"/>
    @endif
</div>

Dynamic Icons

Use <x-dynamic-component> for dynamic icon names:

@php
    $iconName = 'heart';
    $iconComponent = 'lucide-' . $iconName;
@endphp

<x-dynamic-component :component="$iconComponent" class="w-6 h-6" />

Common use case - icon from database:

<x-dynamic-component
    :component="'lucide-' . $menu->icon"
    class="w-5 h-5"
/>

Best Practices

Consistent Sizing

| Context | Size | |---------|------| | Navigation | w-5 h-5 | | Button (small) | w-4 h-4 | | Button (medium) | w-5 h-5 | | Feature icons | w-12 h-12 | | Hero icons | w-16 h-16 |

Semantic Icon Usage

Choose icons that clearly represent their action:

<x-lucide-trash />        <!-- Delete -->
<x-lucide-edit />         <!-- Edit -->
<x-lucide-download />     <!-- Download -->
<x-lucide-upload />       <!-- Upload -->
<x-lucide-copy />         <!-- Copy -->
<x-lucide-share />        <!-- Share -->
<x-lucide-settings />     <!-- Settings -->
<x-lucide-user />         <!-- User/Profile -->
<x-lucide-home />         <!-- Home -->

Color Semantics

<!-- Primary actions -->
<x-lucide-save class="w-5 h-5 text-blue-600"/>

<!-- Success states -->
<x-lucide-check class="w-5 h-5 text-green-600"/>
<x-lucide-check-circle class="w-5 h-5 text-green-600"/>

<!-- Danger/warning -->
<x-lucide-trash class="w-5 h-5 text-red-600"/>
<x-lucide-alert-triangle class="w-5 h-5 text-yellow-600"/>

<!-- Neutral/secondary -->
<x-lucide-info class="w-5 h-5 text-gray-600"/>

Accessibility

<!-- Icon-only button - always include aria-label -->
<button aria-label="Close dialog">
    <x-lucide-x class="w-6 h-6"/>
</button>

<!-- Decorative icon - hide from screen readers -->
<x-lucide-star class="w-5 h-5" aria-hidden="true"/>

<!-- Icon with visible text - accessible by default -->
<button class="flex items-center gap-2">
    <x-lucide-download class="w-5 h-5"/>
    <span>Download</span>
</button>

Icon Reference

Total Icons: 1,666 across 43 categories

Quick Reference

| Category | Count | File | Common Icons | |----------|-------|------|--------------| | Accessibility | 30 | accessibility.md | accessibility, eye, ear, glasses, sun, moon | | Accounts & access | 133 | accounts-access.md | user, users, shield, key, lock, log-in, log-out | | Animals | 23 | animals.md | dog, cat, bird, bug, fish, paw-print | | Arrows | 209 | arrows.md | arrow-up, arrow-down, chevron-left, chevron-right | | Brands | 21 | brands.md | github, twitter, facebook, instagram, youtube | | Buildings | 25 | buildings.md | building, building-2, home, warehouse, store | | Charts | 31 | charts.md | bar-chart, line-chart, pie-chart, trending-up, trending-down | | Coding & development | 243 | coding-development.md | code, terminal, git-branch, git-commit, bug, cpu | | Communication | 54 | communication.md | mail, message-circle, phone, send, bell, rss | | Connectivity | 90 | connectivity.md | wifi, bluetooth, usb, cast, radio, signal | | Cursors | 33 | cursors.md | mouse-pointer, hand, move, crosshair, pointer | | Design | 145 | design.md | palette, paintbrush, eraser, pen-tool, selection | | Devices | 164 | devices.md | laptop, monitor, smartphone, tablet, keyboard, hard-drive | | Emoji | 28 | emoji.md | smile, frown, meh, heart, thumbs-up, thumbs-down | | File icons | 162 | file-icons.md | file, file-text, folder, upload, download, copy | | Finance | 56 | finance.md | dollar-sign, credit-card, wallet, banknote, coins, piggy-bank | | Food & beverage | 69 | food-beverage.md | coffee, utensils, pizza, burger, beer, cake | | Gaming | 148 | gaming.md | gamepad, gamepad-2, trophy, dice, puzzle, sword | | Home | 57 | home.md | couch, chair, bed, lamp, tv, bathtub | | Layout | 139 | layout.md | layout, panel-left, panel-right, columns, sidebar, grid | | Mail | 26 | mail.md | mail, inbox, send, at-sign, mail-open, mail-check | | Mathematics | 74 | mathematics.md | equal, plus, minus, divide, percent, infinity | | Medical | 42 | medical.md | heart-pulse, activity, pill, syringe, stethoscope, bone | | Multimedia | 138 | multimedia.md | play, pause, volume, music, image, video | | Nature | 23 | nature.md | tree, flower, leaf, sun, cloud, mountain | | Navigation, Maps, POIs | 84 | navigation-maps-pois.md | map, map-pin, compass, navigation, route, flag | | Notification | 39 | notification.md | bell, bell-ring, alert-circle, alert-triangle, info | | People | 3 | people.md | user, users, user-plus | | Photography | 75 | photography.md | camera, image, aperture, shutter, lens, film | | Science | 32 | science.md | flask, microscope, atom, beaker, magnet, dna | | Seasons | 5 | seasons.md | sun, cloud-rain, snowflake, thermometer | | Security | 55 | security.md | shield, lock, unlock, key, fingerprint, eye-off | | Shapes | 48 | shapes.md | circle, square, triangle, star, hexagon, diamond | | Shopping | 27 | shopping.md | shopping-cart, shopping-bag, credit-card, tag, package | | Social | 119 | social.md | heart, thumbs-up, share, bookmark, user-plus, link | | Sports | 13 | sports.md | football, basketball, tennis, golf, trophy, medal | | Sustainability | 24 | sustainability.md | recycle, leaf, tree, sun, wind, droplet | | Text formatting | 246 | text-formatting.md | bold, italic, underline, align-left, list, quote | | Time & calendar | 58 | time-calendar.md | calendar, clock, timer, hourglass, watch, alarm | | Tools | 66 | tools.md | hammer, wrench, screwdriver, saw, drill, measure | | Transportation | 64 | transportation.md | car, bus, train, plane, bike, ship | | Travel | 67 | travel.md | suitcase, plane, hotel, map, compass, passport | | Weather | 45 | weather.md | sun, cloud, cloud-rain, snowflake, lightning, wind |

Finding Icons

1. Browse by category: Read the category reference files for complete icon lists
2. Search visually: Visit lucide.dev/icons
3. Use autocomplete: IDEs with Blade autocomplete can suggest available icons

Category File Format

Each category file contains:

• Icon count and description
• Complete table of icons with Blade component syntax
• Related categories for each icon
• Usage examples specific to that category

Troubleshooting

Icons not displaying:

php artisan view:clear

Styling not applied:

• Ensure Tailwind processes Blade files
• Check icon names use kebab-case

Publish raw SVGs (optional):

php artisan vendor:publish --tag=blade-lucide-icons --force