PHPackages                             nickperkins/blade-icon-picker - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. nickperkins/blade-icon-picker

ActiveLibrary[Templating & Views](/categories/templating)

nickperkins/blade-icon-picker
=============================

Standalone icon picker Blade component for Livewire forms

v1.0.3(1mo ago)09↓100%MITPHPPHP ^8.2CI passing

Since May 8Pushed 1mo agoCompare

[ Source](https://github.com/nickperkins/blade-icon-picker)[ Packagist](https://packagist.org/packages/nickperkins/blade-icon-picker)[ Docs](https://github.com/nickperkins/blade-icon-picker)[ RSS](/packages/nickperkins-blade-icon-picker/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (4)Dependencies (6)Versions (5)Used By (0)

Blade Icon Picker
=================

[](#blade-icon-picker)

A standalone icon picker Blade component for Livewire forms. Works with any [blade-icons](https://github.com/blade-ui-kit/blade-icons) pack — Heroicons, Font Awesome, or custom sets.

```

```

Installation
------------

[](#installation)

```
composer require nickperkins/blade-icon-picker
composer require blade-ui-kit/blade-heroicons  # recommended default icon pack
```

Publish the assets:

```
php artisan vendor:publish --tag=icon-picker-assets
```

Include the JS and CSS in your layout:

```

    {{-- ... --}}

    {{-- ... --}}

    {{-- Must come AFTER Alpine.js --}}

```

In Livewire 3, the JS auto-registers with Alpine — no manual `Alpine.data()` call needed.

Usage
-----

[](#usage)

### Basic

[](#basic)

```

```

**Important:** Pass both `wire:model` (for write-back) and `:value="$icon"` (for initial/redisplay). This is required because the component is a Blade component, not a Livewire component.

### Custom placeholder

[](#custom-placeholder)

```

```

### Disabled

[](#disabled)

```

```

### Livewire form example

[](#livewire-form-example)

```
use Livewire\Component;

class CreateMenu extends Component
{
    public string $icon = '';

    public function rules(): array
    {
        return ['icon' => ['required', 'string']];
    }

    public function render()
    {
        return view('livewire.create-menu');
    }
}
```

```

    @error('icon')
        {{ $message }}
    @enderror

    Save

```

Features
--------

[](#features)

- **Search:** Substring token matching — type `ar le` to find `Arrow Left`
- **Lazy rendering:** Icons render 30 at a time as you scroll
- **Keyboard navigation:** Arrow keys, Enter, Escape
- **Responsive grid:** 4 columns on mobile → 12 on desktop
- **Any blade-icons pack:** Heroicons, Font Awesome, custom — all auto-discovered
- **Standalone CSS:** No Tailwind dependency; override colors with CSS custom properties

Dark mode
---------

[](#dark-mode)

The component ships dark-mode variables but does **not** auto-detect `prefers-color-scheme` — that’s your app’s job. Activate dark styles by adding the `ip-dark` class to the component or any ancestor, or by using a `[data-theme="dark"]` attribute on a parent element.

```
{{-- Follow a data-theme attribute on  (no extra markup needed) --}}
{{-- In your CSS: [data-theme="dark"] .ip-root { } is already handled --}}

{{-- Or apply ip-dark directly --}}

```

If you want to mirror the OS preference, add it yourself:

```
@media (prefers-color-scheme: dark) {
    .ip-root { /* your app's dark scope */ }
}
```

Theming
-------

[](#theming)

Override the CSS custom properties anywhere in your stylesheet:

```
.icon-picker-root {
    --ip-primary: #dc2626;
    --ip-bg: #fef2f2;
}
```

Dark mode is supported automatically via `prefers-color-scheme`.

No icon packs installed?
------------------------

[](#no-icon-packs-installed)

The component renders a helpful message telling the developer to install `blade-ui-kit/blade-heroicons`.

Requirements
------------

[](#requirements)

- PHP 8.2+
- Laravel 10, 11, or 12
- Livewire 3
- blade-icons 1.0+

Acknowledgments
---------------

[](#acknowledgments)

Inspired by [lukas-frey/filament-icon-picker](https://github.com/lukas-frey/filament-icon-picker), which demonstrated that an icon picker is a valuable UX pattern for Livewire forms.

License
-------

[](#license)

MIT

###  Health Score

41

—

FairBetter than 87% of packages

Maintenance94

Actively maintained with recent releases

Popularity7

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity49

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

4

Last Release

32d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/a4c9ce46d177516d9edccd5d934730ff9b3c26a449b310d16a76f6a03bdfc496?d=identicon)[nickperkins](/maintainers/nickperkins)

---

Top Contributors

[![nickperkins](https://avatars.githubusercontent.com/u/569924?v=4)](https://github.com/nickperkins "nickperkins (8 commits)")

---

Tags

laravelbladeHeroiconslivewireiconicon-pickerblade-icons

###  Code Quality

TestsPest

### Embed Badge

![Health badge](/badges/nickperkins-blade-icon-picker/health.svg)

```
[![Health](https://phpackages.com/badges/nickperkins-blade-icon-picker/health.svg)](https://phpackages.com/packages/nickperkins-blade-icon-picker)
```

###  Alternatives

[blade-ui-kit/blade-heroicons

A package to easily make use of Heroicons in your Laravel Blade views.

64232.7M156](/packages/blade-ui-kit-blade-heroicons)[technikermathe/blade-lucide-icons

A package to easily make use of Lucide icons in your Laravel Blade views.

18379.7k9](/packages/technikermathe-blade-lucide-icons)[robsontenorio/mary

Gorgeous UI components for Livewire powered by daisyUI and Tailwind

1.5k531.0k21](/packages/robsontenorio-mary)[tallstackui/tallstackui

TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.

719160.4k12](/packages/tallstackui-tallstackui)[ublabs/blade-simple-icons

A package to easily make use of Simple Icons in your Laravel Blade views.

1958.8k](/packages/ublabs-blade-simple-icons)[secondnetwork/blade-tabler-icons

A package to easily make use of tabler-icons in your Laravel Blade views.

35594.8k24](/packages/secondnetwork-blade-tabler-icons)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)