Skip to main content
The flux:icon command imports icons from the Lucide icon library, converting them into Flux-compatible Blade components. This is useful when you need icons that aren’t included in the default Heroicons set.

​
Usage

php artisan flux:icon
You can also specify icon names as arguments to import them directly: 
php artisan flux:icon {icons?*}

​
Arguments

​
icons
array
One or more icon names to import from Lucide. Icon names should match those found on lucide.dev/icons.
php artisan flux:icon arrow-left arrow-right home

​
How It Works

1

Icon name input

If you don’t provide icon names as arguments, the command prompts you to enter an icon name. You can browse available icons at lucide.dev/icons.
2

Fetch from Lucide

The command fetches the SVG source from Lucide’s GitHub repository:
https://raw.githubusercontent.com/lucide-icons/lucide/main/icons/{icon}.svg
3

Generate Blade component

The SVG is wrapped in a Flux-compatible Blade template with:
  • Proper variant support (outline, mini, micro)
  • Dynamic stroke width based on variant
  • Flux CSS classes and attributes
  • Credit comment to Lucide
4

Save to resources

The icon is saved to:
resources/views/flux/icon/{icon-name}.blade.php

​
Generated Icon Structure

Each imported icon is converted to a Blade component with the following structure: 
@blaze(fold: true)

{{-- Credit: Lucide (https://lucide.dev) --}}

@props([
    'variant' => 'outline',
])

@php
if ($variant === 'solid') {
    throw new \Exception('The "solid" variant is not supported in Lucide.');
}

$classes = Flux::classes('shrink-0')
    ->add(match($variant) {
        'outline' => '[:where(&)]:size-6',
        'solid' => '[:where(&)]:size-6',
        'mini' => '[:where(&)]:size-5',
        'micro' => '[:where(&)]:size-4',
    });

$strokeWidth = match ($variant) {
    'outline' => 2,
    'mini' => 2.25,
    'micro' => 2.5,
};
@endphp

<svg
    {{ $attributes->class($classes) }}
    data-flux-icon
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="{{ $strokeWidth }}"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
    data-slot="icon"
>
    <!-- Icon paths here -->
</svg>

​
Examples

​
Interactive import

php artisan flux:icon

┌────────────────────────────────────────────────────────────┐
│ Need an icon not included in Heroicons?                   │
└────────────────────────────────────────────────────────────┘

  ℹ Search for the perfect icon at: https://lucide.dev/icons

┌ Which icon would you like to import from Lucide? ──────────┐
│ arrow-left                                                  │
└─────────────────────────────────────────────────────────────┘
  e.g. arrow-left

  ⠋ Fetching icon...

  ✓ Published icon: /path/to/resources/views/flux/icon/arrow-left.blade.php

┌ Would you like to import another icon? ─────────────────────┐
│ ● Yes / ○ No                                                │
└─────────────────────────────────────────────────────────────┘

​
Direct import with arguments

php artisan flux:icon arrow-left arrow-right home

  ⠋ Fetching icon...
  ✓ Published icon: /path/to/resources/views/flux/icon/arrow-left.blade.php
  
  ⠋ Fetching icon...
  ✓ Published icon: /path/to/resources/views/flux/icon/arrow-right.blade.php
  
  ⠋ Fetching icon...
  ✓ Published icon: /path/to/resources/views/flux/icon/home.blade.php

​
Import multiple icons interactively

php artisan flux:icon

# Import first icon
┌ Which icon would you like to import from Lucide? ──────────┐
│ calendar                                                    │
└─────────────────────────────────────────────────────────────┘

  ✓ Published icon: /path/to/resources/views/flux/icon/calendar.blade.php

┌ Would you like to import another icon? ─────────────────────┐
│ ● Yes / ○ No                                                │
└─────────────────────────────────────────────────────────────┘

# Import second icon
┌ Which icon would you like to import from Lucide? ──────────┐
│ mail                                                        │
└─────────────────────────────────────────────────────────────┘

  ✓ Published icon: /path/to/resources/views/flux/icon/mail.blade.php

┌ Would you like to import another icon? ─────────────────────┐
│ ○ Yes / ● No                                                │
└─────────────────────────────────────────────────────────────┘

​
Using Imported Icons

Once imported, use the icons in your Blade templates like any other Flux icon: 
<flux:icon.arrow-left />

<flux:icon.arrow-left variant="mini" />

<flux:icon.arrow-left variant="micro" class="text-blue-500" />

​
Icon Variants

Lucide icons support the following variants:
  • outline (default) - 24×24px, stroke width 2
  • mini - 20×20px, stroke width 2.25
  • micro - 16×16px, stroke width 2.5
The solid variant is not supported for Lucide icons and will throw an exception if used.

​
Finding Icons

Browse the complete Lucide icon library at lucide.dev/icons. Use the exact icon name from the URL or icon title:
  • Icon: “Arrow Left” → Use: arrow-left
  • Icon: “Check Circle” → Use: check-circle
  • Icon: “Settings” → Use: settings

​
Troubleshooting

​
Icon not found

php artisan flux:icon invalid-icon-name

  ✗ Failed to fetch icon: invalid-icon-name
Make sure:
  • The icon name exactly matches the name on lucide.dev
  • Use lowercase with hyphens (e.g., arrow-left, not ArrowLeft)
  • Check for typos in the icon name

​
Network errors

If you encounter network errors, ensure:
  • You have an active internet connection
  • GitHub is accessible from your server
  • There are no firewall rules blocking the request
Imported icons are fetched directly from Lucide’s GitHub repository and converted to work seamlessly with Flux’s icon system.

Build docs developers (and LLMs) love

Get started for freeTalk to us