Weave Code
Code Weaver
Helps Laravel developers discover, compare, and choose open-source packages. See popularity, security, maintainers, and scores at a glance to make better decisions.
Feedback
Share your thoughts, report bugs, or suggest improvements.
Subject
Message
Blade Icon Picker

Blade Icon Picker Laravel Package

nickperkins/blade-icon-picker

Standalone Blade icon picker component for Livewire forms. Works with any blade-icons pack (Heroicons, Font Awesome, custom). Includes search, lazy-loaded icon grid, keyboard navigation, responsive layout, and Tailwind-free CSS with customizable variables.

View on GitHub
Deep Wiki
Context7

Standalone icon picker Blade component for Livewire forms. Works with any blade-icons pack.

Frequently asked questions about Blade Icon Picker
Can I use Blade Icon Picker in Laravel without Livewire?
No, this package is specifically designed for Livewire 3 forms. It relies on Livewire’s `wire:model` binding and Alpine.js for dynamic behavior. If you’re not using Livewire, this won’t work as a standalone solution.
What icon packs are supported, and do I need to install them separately?
The package works with any `blade-icons` pack, like Heroicons or Font Awesome. You must install them separately (e.g., `blade-ui-kit/blade-heroicons`) via Composer, as they’re not bundled with the picker. The README recommends starting with Heroicons.
How do I handle dark mode with Blade Icon Picker?
The package doesn’t auto-detect OS-level dark mode. You’ll need to manually implement dark mode support by toggling CSS classes or using a library like `darkmode-js`. The CSS is themable via custom properties, but OS detection requires additional JavaScript.
Will this package slow down my Livewire forms if I use a large icon set like Font Awesome?
Yes, larger icon sets (e.g., Font Awesome) increase the initial JSON payload size, which can impact page load performance. Heroicons (~8KB gzipped) is the recommended default for minimal overhead. Test with your target icon pack to measure performance.
Do I need Tailwind CSS to use Blade Icon Picker?
No, the package includes standalone, Tailwind-free CSS. You can customize colors and spacing via CSS custom properties, but if you’re using Tailwind, you’ll need to manually align the styles with your existing design system.
How do I customize the icon picker’s appearance beyond the default CSS?
The package uses CSS custom properties for theming, so you can override variables like `--icon-picker-bg-color` in your global CSS. For advanced customization, inspect the published CSS file (`resources/css/icon-picker.css`) and extend it as needed.
Is Blade Icon Picker compatible with Laravel 10, 11, or 12?
Yes, the package officially supports Laravel 10, 11, and 12. It requires Livewire 3 and PHP 8.2+, which are all compatible with these Laravel versions. No breaking changes are expected for newer PHP or Laravel releases.
Can I use custom icon sets that aren’t part of the blade-icons ecosystem?
No, the package is built to work exclusively with `blade-icons` packs. If you need custom icons, you’d have to integrate them via a `blade-icons` compatible package or build your own. The package doesn’t support direct SVG or image uploads.
How do I test Blade Icon Picker in my Laravel application?
Test the picker by simulating user interactions: search for icons, navigate with keyboard arrows, and verify the selected icon updates in your Livewire component. Use Laravel’s testing tools to assert the `wire:model` binding and error states (e.g., `@error('icon')`).
Are there alternatives to Blade Icon Picker for Laravel Livewire?
Yes, alternatives include Filament’s `IconPicker` (for Filament admin panels), `laravel-breeze` with custom icon logic, or standalone libraries like `vue-icon-picker` (if using Vue). However, this package is unique for its Livewire-native integration and `blade-icons` compatibility.
Weaver

How can I help you explore Laravel packages today?

Conversation history is not saved when not logged in.
Prompt
Add packages to context
No packages found.
nasirkhan/laravel-sharekit
directorytree/privacy-filter-classifier
directorytree/privacy-filter
datacore/hub-sdk
develia/commons
cuci/prototurk-sdk
cuci/prototurk-sdk-symfony
develia/geo-bundle
dreamzy/livewire-charts
touchestate-sdk/php-sdk
22h/doctrine-garbage-collection-bundle
agtp/agtp-php
agtp/mod-php
splash/sonata-admin
splash/metadata
splash/openapi
splash/scopes
splash/toolkit
testo/output-teamcity
testo/bridge-symfony