How to Add an Font Awesome Icon Picker in Laravel 12 ?
Font Awesome Icon Picker may significantly improve the visual appearance and usefulness of your Laravel applications. Whether you’re creating a dashboard, a CMS, or a custom admin panel, including a **icon picker** helps users to visually select icons instead of memorizing class names.
In this blog, you’ll learn how to integrate an icon picker in a **Laravel 12** application using a simple library Bootstrap-Iconpicker By Victor Valencia Rico
—
Step-by-Step Guide
Step 1: Install Laravel 12 (If not already installed)
composer create-project laravel/laravel laravel-iconpicker
Next command
cd laravel-iconpicker
download below files. extract them in public/assets folder
bootstrap-iconpicker.bundle.min.js
Step 2: Create Route, Controller, and View
Run the following command to generate a controller:
php artisan make:controller IconController
In `routes/web.php`:
use App\Http\Controllers\IconController;
Route::get('/icon-picker', [IconController::class, 'index']);
Route::post('/icon-picker', [IconController::class, 'store'])->name('icon.store');
In `app/Http/Controllers/IconController.php`:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class IconController extends Controller
{
public function index()
{
return view('icon-picker');
}
public function store(Request $request)
{
$icon = $request->icon;
// Store or use the selected icon
return back()->with('success', $icon);
}
}
Step 3: Create Blade View with Icon Picker
Create a file at `resources/views/icon-picker.blade.php`:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 12 Icon Picker Example</title>
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"/>
<link href="{{asset('assets/css/bootstrap-iconpicker.min.css')}}" rel="stylesheet" type="text/css"/>
<style>
.icon{
font-size: 30px;
padding: 10px;
background-color: blue;
color: #fff;
}
</style>
</head>
<body>
<div class="container mt-5">
<h2>Laravel 12 Icon Picker</h2>
@if(session('success'))
<div class="alert alert-success"> <b>Your selected icon is</b> <span class="{{ session('success') }} icon"></span></div>
@endif
<form method="POST" action="{{ route('icon.store') }}">
@csrf
<div class="mb-3">
<label>Select Icon</label>
<div data-align="left" role="iconpicker" name='icon'></div>
</div>
<button type="submit" class="btn btn-primary">Save Icon</button>
</form>
</div>
<!-- jQuery CDN -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Bootstrap CDN -->
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<!-- Bootstrap-Iconpicker Bundle -->
<script src="{{asset('assets/js/bootstrap-iconpicker.bundle.min.js')}}" ></script>
</body>
</html>
Output
Run below command
php artisan serve
Enter “http://127.0.0.1:8000/icon-picker” in browser
You’ll see a form with an icon picker. Visual icon picker with Font Awesome icons. After selection and form submission, the chosen icon is stored (or shown).
—
You Can Extend This
* Save the icon to a database
* Use it in user profile settings or dashboards
* Combine with Laravel Livewire for real-time updates
—
Recommended Libraries
* **FontAwesome Icon Picker** – [GitHub](https://github.com/farbelous/fontawesome-iconpicker)
Conclusion
Including an icon picker in Laravel 12 is simple and adds polish to your forms and UI. Users can visually select icons using FontAwesome and an icon picker plugin, eliminating the need to know class names.
