OpenSkillIndex← back to search
claude-code

Learn-skills.dev lucide-laravel

Lucide icon library integration for Laravel Blade templates. Use when working with Lucide icons in Laravel applications, Blade components with the x-lucide- prefix, icon styling with Tailwind CSS, dynamic icon rendering in Blade, or any Laravel view work requiring SVG icons. Keywords include lucide icons, blade icons, x-lucide, SVG icons Laravel, blade-lucide-icons, mallardduck/blade-lucide-icons.

install
source · Clone the upstream repo
git clone https://github.com/NeverSight/learn-skills.dev
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/NeverSight/learn-skills.dev "$T" && mkdir -p ~/.claude/skills && cp -r "$T/data/skills-md/1naichii/ai-code-tools/lucide-laravel" ~/.claude/skills/neversight-learn-skills-dev-lucide-laravel && rm -rf "$T"
manifest: data/skills-md/1naichii/ai-code-tools/lucide-laravel/SKILL.md
source content

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 NameBlade 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

ContextSize
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

CategoryCountFileCommon Icons
Accessibility30accessibility.md
accessibility
, 
eye
, 
ear
, 
glasses
, 
sun
, 
moon
Accounts & access133accounts-access.md
user
, 
users
, 
shield
, 
key
, 
lock
, 
log-in
, 
log-out
Animals23animals.md
dog
, 
cat
, 
bird
, 
bug
, 
fish
, 
paw-print
Arrows209arrows.md
arrow-up
, 
arrow-down
, 
chevron-left
, 
chevron-right
Brands21brands.md
github
, 
twitter
, 
facebook
, 
instagram
, 
youtube
Buildings25buildings.md
building
, 
building-2
, 
home
, 
warehouse
, 
store
Charts31charts.md
bar-chart
, 
line-chart
, 
pie-chart
, 
trending-up
, 
trending-down
Coding & development243coding-development.md
code
, 
terminal
, 
git-branch
, 
git-commit
, 
bug
, 
cpu
Communication54communication.md
mail
, 
message-circle
, 
phone
, 
send
, 
bell
, 
rss
Connectivity90connectivity.md
wifi
, 
bluetooth
, 
usb
, 
cast
, 
radio
, 
signal
Cursors33cursors.md
mouse-pointer
, 
hand
, 
move
, 
crosshair
, 
pointer
Design145design.md
palette
, 
paintbrush
, 
eraser
, 
pen-tool
, 
selection
Devices164devices.md
laptop
, 
monitor
, 
smartphone
, 
tablet
, 
keyboard
, 
hard-drive
Emoji28emoji.md
smile
, 
frown
, 
meh
, 
heart
, 
thumbs-up
, 
thumbs-down
File icons162file-icons.md
file
, 
file-text
, 
folder
, 
upload
, 
download
, 
copy
Finance56finance.md
dollar-sign
, 
credit-card
, 
wallet
, 
banknote
, 
coins
, 
piggy-bank
Food & beverage69food-beverage.md
coffee
, 
utensils
, 
pizza
, 
burger
, 
beer
, 
cake
Gaming148gaming.md
gamepad
, 
gamepad-2
, 
trophy
, 
dice
, 
puzzle
, 
sword
Home57home.md
couch
, 
chair
, 
bed
, 
lamp
, 
tv
, 
bathtub
Layout139layout.md
layout
, 
panel-left
, 
panel-right
, 
columns
, 
sidebar
, 
grid
Mail26mail.md
mail
, 
inbox
, 
send
, 
at-sign
, 
mail-open
, 
mail-check
Mathematics74mathematics.md
equal
, 
plus
, 
minus
, 
divide
, 
percent
, 
infinity
Medical42medical.md
heart-pulse
, 
activity
, 
pill
, 
syringe
, 
stethoscope
, 
bone
Multimedia138multimedia.md
play
, 
pause
, 
volume
, 
music
, 
image
, 
video
Nature23nature.md
tree
, 
flower
, 
leaf
, 
sun
, 
cloud
, 
mountain
Navigation, Maps, POIs84navigation-maps-pois.md
map
, 
map-pin
, 
compass
, 
navigation
, 
route
, 
flag
Notification39notification.md
bell
, 
bell-ring
, 
alert-circle
, 
alert-triangle
, 
info
People3people.md
user
, 
users
, 
user-plus
Photography75photography.md
camera
, 
image
, 
aperture
, 
shutter
, 
lens
, 
film
Science32science.md
flask
, 
microscope
, 
atom
, 
beaker
, 
magnet
, 
dna
Seasons5seasons.md
sun
, 
cloud-rain
, 
snowflake
, 
thermometer
Security55security.md
shield
, 
lock
, 
unlock
, 
key
, 
fingerprint
, 
eye-off
Shapes48shapes.md
circle
, 
square
, 
triangle
, 
star
, 
hexagon
, 
diamond
Shopping27shopping.md
shopping-cart
, 
shopping-bag
, 
credit-card
, 
tag
, 
package
Social119social.md
heart
, 
thumbs-up
, 
share
, 
bookmark
, 
user-plus
, 
link
Sports13sports.md
football
, 
basketball
, 
tennis
, 
golf
, 
trophy
, 
medal
Sustainability24sustainability.md
recycle
, 
leaf
, 
tree
, 
sun
, 
wind
, 
droplet
Text formatting246text-formatting.md
bold
, 
italic
, 
underline
, 
align-left
, 
list
, 
quote
Time & calendar58time-calendar.md
calendar
, 
clock
, 
timer
, 
hourglass
, 
watch
, 
alarm
Tools66tools.md
hammer
, 
wrench
, 
screwdriver
, 
saw
, 
drill
, 
measure
Transportation64transportation.md
car
, 
bus
, 
train
, 
plane
, 
bike
, 
ship
Travel67travel.md
suitcase
, 
plane
, 
hotel
, 
map
, 
compass
, 
passport
Weather45weather.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