{# app/templates/admin/icons.html #} {% extends "admin/base.html" %} {% block title %}Icons Browser{% endblock %} {# ✅ CRITICAL: Link to Alpine.js component #} {% block alpine_data %}adminIcons(){% endblock %} {% block content %}

Icons Browser

Back to Dashboard

Icon Library

Browse all available icons. Click any icon to copy its name or usage code.

Heroicons
Dark Mode Support
Fully Accessible

Found icon(s)

Show All Categories
Showing ( icons)

No icons found

Try adjusting your search or filter

Selected Icon:

Preview

Usage Code

Common Sizes

w-4 h-4
w-5 h-5
w-6 h-6
w-8 h-8
w-12 h-12

How to Use Icons

In Alpine.js Templates

Use the x-html directive:

<span x-html="$icon('home', 'w-5 h-5')"></span>

Customizing Size & Color

Use Tailwind classes:

<span x-html="$icon('check', 'w-6 h-6 text-green-500')"></span>
{% endblock %} {% block extra_scripts %} {# ✅ CRITICAL: Load JavaScript file #} {% endblock %}