Blade Feather Icons

A Laravel package to easily use Feather Icons in your Blade views as inline SVG components.

For a full list of available icons, see the SVG directory or preview them at feathericons.com.

✨ Features

• 🎨 287+ Beautiful Icons - Simple, consistent, open-source icons
• 🚀 Zero Dependencies - No JavaScript required, pure inline SVG
• 💎 Laravel Integration - Native Blade component syntax
• 🎯 Full Control - Add classes, styles, and attributes easily
• ⚡ Performance - Cached and optimized SVG rendering
• 🔧 Customizable - Tailwind CSS and any CSS framework compatible
• 🔄 NPM Sync Command - Keep icons updated from official Feather Icons releases

📋 Requirements

• PHP: 8.4 or higher
• Laravel: 12.0 or higher
• blade-ui-kit/blade-icons: ^1.0

📦 Installation

Install the package via Composer:

composer require brunocfalcao/blade-feather-icons

The package will automatically register itself via Laravel's package auto-discovery.

🚀 Usage

Basic Usage

Icons can be used as self-closing Blade components:

<x-feathericon-heart />
<x-feathericon-alert-triangle />
<x-feathericon-activity />

Adding Classes

Perfect for Tailwind CSS or any CSS framework:

<x-feathericon-heart class="w-6 h-6 text-red-500" />
<x-feathericon-mail class="h-4 w-4 text-gray-600" />

Adding Inline Styles

<x-feathericon-star style="color: #FFD700; width: 32px; height: 32px;" />

Adding Multiple Attributes

<x-feathericon-check-circle
    class="w-5 h-5 text-green-500"
    aria-hidden="true"
    data-icon="success"
/>

Using with Alpine.js

<button @click="liked = !liked">
    <x-feathericon-heart
        class="w-5 h-5"
        ::class="liked ? 'text-red-500 fill-current' : 'text-gray-400'"
    />
</button>

Common Examples

{{-- Navigation --}}
<nav>
    <a href="/dashboard">
        <x-feathericon-home class="w-5 h-5" />
        Dashboard
    </a>
    <a href="/settings">
        <x-feathericon-settings class="w-5 h-5" />
        Settings
    </a>
</nav>

{{-- Buttons --}}
<button class="btn">
    <x-feathericon-download class="w-4 h-4 mr-2" />
    Download
</button>

{{-- Alerts --}}
<div class="alert alert-warning">
    <x-feathericon-alert-triangle class="w-5 h-5" />
    <span>Warning message here</span>
</div>

{{-- Loading States --}}
<x-feathericon-loader class="w-6 h-6 animate-spin text-blue-500" />

🎨 Available Icons

All 287 Feather icons are available. Common icons include:

Interface: home, menu, x, check, chevron-down, chevron-up, arrow-right, arrow-left, more-vertical, more-horizontal

Media: play, pause, volume, volume-x, music, video, image, camera, film

Communication: mail, message-circle, phone, at-sign, bell, send

Files: file, folder, download, upload, save, trash, edit, copy

Social: heart, star, thumbs-up, share, bookmark

E-commerce: shopping-cart, credit-card, dollar-sign, tag

Status: check-circle, x-circle, alert-circle, alert-triangle, info, help-circle

System: settings, user, lock, unlock, eye, eye-off, search, filter

View all icons →

🔧 Publishing Assets (Optional)

If you need the raw SVG files as static assets:

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

This will publish the icons to public/vendor/feather-icons/.

Then use them in your views:

<img src="{{ asset('vendor/feather-icons/heart.svg') }}" width="24" height="24" alt="Heart" />

Note: This is rarely needed. Using Blade components (default) is recommended for better performance and control.

🔄 Syncing Icons from NPM

Want to keep your icons up-to-date with the latest Feather Icons releases? You can sync SVG files directly from the npm package.

Prerequisites

First, install the official Feather Icons npm package in your project:

npm install feather-icons --save-dev

Sync Command

Run the sync command to update your package's SVG files:

php artisan feathericons:sync

This will:

• ✅ Copy all icons from node_modules/feather-icons/dist/icons to the package
• ✅ Detect new, updated, and unchanged icons
• ✅ Display a detailed progress report

Dry Run

Preview changes without actually copying files:

php artisan feathericons:sync --dry-run

Example output:

Syncing Feather Icons...
████████████████████████████ 100%

Total icons .......... 287
Would be added ....... 5
Would be updated ..... 12
Unchanged ............ 270

Run without --dry-run to apply these changes.

Custom NPM Path

If your node_modules is in a non-standard location:

php artisan feathericons:sync --npm-path=/custom/path/to/project

When to Sync

• 📦 After updating the feather-icons npm package
• 🆕 When new icons are released by Feather Icons
• 🔧 If you manually modified icons and want to revert to originals

Note: This is a unique feature not available in other Blade icon packages! It gives you full control over your icon versions.

🧪 Testing

The package includes comprehensive Pest tests:

composer test

Run tests with coverage:

composer test-coverage

📚 Advanced Usage

Using the Helper Function

You can also use the svg() helper function:

{!! svg('feathericon-heart', 'w-6 h-6 text-red-500') !!}

With multiple attributes:

{!! svg('feathericon-star', ['class' => 'w-6 h-6', 'style' => 'color: gold']) !!}

Custom Prefix

If you want to change the default feathericon- prefix, you can extend the service provider in your own application.

Blade Icons Features

This package is built on top of Blade Icons. You can use all Blade Icons features:

• Default classes
• Icon sets
• Custom attributes

🐛 Troubleshooting

Icons not showing?

1. Make sure you've installed the package: composer require brunocfalcao/blade-feather-icons
2. Clear Laravel's cache: php artisan view:clear && php artisan cache:clear
3. Check your icon name matches the filename in resources/svg/

Wrong icon name?

Icon names use kebab-case. For example:

• alert-triangle.svg → <x-feathericon-alert-triangle />
• arrow-up-right.svg → <x-feathericon-arrow-up-right />

Using with Livewire?

Blade Feather Icons works perfectly with Livewire. Just use the components as normal:

<div>
    @if($isActive)
        <x-feathericon-check-circle class="w-5 h-5 text-green-500" />
    @else
        <x-feathericon-x-circle class="w-5 h-5 text-red-500" />
    @endif
</div>

📝 Changelog

Please see CHANGELOG for recent changes.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

👨‍💻 Maintainers

Blade Feather Icons is developed and maintained by Bruno Falcao.

Blade Icons is developed and maintained by Dries Vints.

Feather Icons is created by Cole Bemis.

📄 License

Blade Feather Icons is open-sourced software licensed under the MIT license.

Feather Icons is also licensed under the MIT license.

🌟 Related Packages

• Blade Icons - The foundation for this package
• Blade Heroicons - Heroicons for Laravel
• Blade Font Awesome - Font Awesome for Laravel

---

Love this package? Give it a ⭐️ on GitHub and follow @brunocfalcao on Twitter!