From 40a8392f0fbefe710a58446fbc183a7df324e441 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sat, 6 Dec 2025 08:34:27 -0500
Subject: [PATCH] refactor: replace Remix Icons with Heroicons for server icon
 customization

- Added blade-ui-kit/blade-heroicons to composer.json
- Replaced all ri-* icons with heroicon-o-* equivalents
- Updated icon names to use simple names (e.g., 'server' instead of 'ri-server-line')
- Updated icon button display switch statement
- Updated modal icon grid with Heroicons
- 80+ icons available for server customization
---
 composer.json                                 |   1 +
 .../Proxmox/views/components/layout.blade.php | 462 +++++++-----------
 2 files changed, 187 insertions(+), 276 deletions(-)

diff --git a/composer.json b/composer.json
index 49ae69f59..b044d59ac 100644
--- a/composer.json
+++ b/composer.json
@@ -27,6 +27,7 @@
         "ext-zip": "*",
         "akaunting/laravel-apexcharts": "^3.2",
         "andreiio/blade-remix-icon": "^3.6.0",
+        "blade-ui-kit/blade-heroicons": "^2.6",
         "barryvdh/laravel-dompdf": "^3.0",
         "endroid/qr-code": "^5.0",
         "filament/filament": "^3.2",
diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index 3b0b5d56d..c4ff9521e 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -50,131 +50,92 @@
                                 $iconStyle = $server->user_set_icon_color ? 'color: ' . $server->user_set_icon_color : '';
                             @endphp
                             @switch($server->user_set_icon)
-                                @case('ri-server-line')<x-ri-server-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-computer-line')<x-ri-computer-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-mac-line')<x-ri-mac-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-macbook-line')<x-ri-macbook-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-device-line')<x-ri-device-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-hard-drive-2-line')<x-ri-hard-drive-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-hard-drive-line')<x-ri-hard-drive-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-hard-drive-3-line')<x-ri-hard-drive-3-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-database-2-line')<x-ri-database-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-database-line')<x-ri-database-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-cloud-line')<x-ri-cloud-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-cloud-fill')<x-ri-cloud-fill class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-cloudy-line')<x-ri-cloudy-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-cloudy-2-line')<x-ri-cloudy-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-terminal-box-line')<x-ri-terminal-box-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-terminal-line')<x-ri-terminal-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-code-box-line')<x-ri-code-box-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-code-line')<x-ri-code-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-code-s-slash-line')<x-ri-code-s-slash-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-cpu-line')<x-ri-cpu-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-chip-line')<x-ri-chip-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-memory-stick-line')<x-ri-memory-stick-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-ram-line')<x-ri-ram-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-ram-2-line')<x-ri-ram-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-global-line')<x-ri-global-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-earth-line')<x-ri-earth-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-planet-line')<x-ri-planet-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-router-line')<x-ri-router-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-wifi-line')<x-ri-wifi-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-signal-tower-line')<x-ri-signal-tower-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-base-station-line')<x-ri-base-station-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-shield-line')<x-ri-shield-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-shield-check-line')<x-ri-shield-check-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-shield-star-line')<x-ri-shield-star-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-lock-line')<x-ri-lock-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-lock-2-line')<x-ri-lock-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-rocket-line')<x-ri-rocket-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-rocket-2-line')<x-ri-rocket-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-spaceship-line')<x-ri-spaceship-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-plane-line')<x-ri-plane-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-game-line')<x-ri-game-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-gamepad-line')<x-ri-gamepad-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-steam-line')<x-ri-steam-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-playstation-line')<x-ri-playstation-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-xbox-line')<x-ri-xbox-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-windows-line')<x-ri-windows-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-ubuntu-line')<x-ri-ubuntu-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-centos-line')<x-ri-centos-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-linux-line')<x-ri-linux-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-apple-line')<x-ri-apple-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-bug-line')<x-ri-bug-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-bug-2-line')<x-ri-bug-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-robot-line')<x-ri-robot-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-robot-2-line')<x-ri-robot-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-home-line')<x-ri-home-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-home-2-line')<x-ri-home-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-building-line')<x-ri-building-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-building-2-line')<x-ri-building-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-store-line')<x-ri-store-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-flask-line')<x-ri-flask-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-test-tube-line')<x-ri-test-tube-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-microscope-line')<x-ri-microscope-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-fire-line')<x-ri-fire-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-fire-fill')<x-ri-fire-fill class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-blaze-line')<x-ri-blaze-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-sparkling-line')<x-ri-sparkling-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-star-line')<x-ri-star-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-star-fill')<x-ri-star-fill class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-vip-crown-line')<x-ri-vip-crown-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-vip-diamond-line')<x-ri-vip-diamond-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-heart-line')<x-ri-heart-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-heart-fill')<x-ri-heart-fill class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-heart-2-line')<x-ri-heart-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-heart-3-line')<x-ri-heart-3-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-lightning-line')<x-ri-lightning-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-thunderstorms-line')<x-ri-thunderstorms-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-flashlight-line')<x-ri-flashlight-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-box-3-line')<x-ri-box-3-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-archive-line')<x-ri-archive-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-inbox-line')<x-ri-inbox-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-inbox-2-line')<x-ri-inbox-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-folder-line')<x-ri-folder-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-folder-2-line')<x-ri-folder-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-folder-shield-line')<x-ri-folder-shield-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-folder-lock-line')<x-ri-folder-lock-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-settings-line')<x-ri-settings-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-settings-2-line')<x-ri-settings-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-settings-3-line')<x-ri-settings-3-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-equalizer-line')<x-ri-equalizer-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-dashboard-line')<x-ri-dashboard-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-pie-chart-line')<x-ri-pie-chart-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-bar-chart-line')<x-ri-bar-chart-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-line-chart-line')<x-ri-line-chart-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-money-dollar-circle-line')<x-ri-money-dollar-circle-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-money-euro-circle-line')<x-ri-money-euro-circle-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-bank-line')<x-ri-bank-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-safe-line')<x-ri-safe-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-user-line')<x-ri-user-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-user-3-line')<x-ri-user-3-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-team-line')<x-ri-team-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-group-line')<x-ri-group-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-mail-line')<x-ri-mail-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-mail-open-line')<x-ri-mail-open-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-chat-1-line')<x-ri-chat-1-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-message-2-line')<x-ri-message-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-camera-line')<x-ri-camera-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-camera-2-line')<x-ri-camera-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-vidicon-line')<x-ri-vidicon-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-film-line')<x-ri-film-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-music-line')<x-ri-music-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-music-2-line')<x-ri-music-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-headphone-line')<x-ri-headphone-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-speaker-line')<x-ri-speaker-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-book-line')<x-ri-book-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-book-2-line')<x-ri-book-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-book-open-line')<x-ri-book-open-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-file-text-line')<x-ri-file-text-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-sun-line')<x-ri-sun-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-moon-line')<x-ri-moon-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-contrast-2-line')<x-ri-contrast-2-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @case('ri-palette-line')<x-ri-palette-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
-                                @default<x-ri-server-line class="size-5 text-base/60 transition-transform group-hover:scale-110" />
+                                @case('server')<x-heroicon-o-server class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('server-stack')<x-heroicon-o-server-stack class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('computer-desktop')<x-heroicon-o-computer-desktop class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('cpu-chip')<x-heroicon-o-cpu-chip class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('circle-stack')<x-heroicon-o-circle-stack class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('cloud')<x-heroicon-o-cloud class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('command-line')<x-heroicon-o-command-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('code-bracket')<x-heroicon-o-code-bracket class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('code-bracket-square')<x-heroicon-o-code-bracket-square class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('globe-alt')<x-heroicon-o-globe-alt class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('globe-americas')<x-heroicon-o-globe-americas class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('globe-europe-africa')<x-heroicon-o-globe-europe-africa class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('globe-asia-australia')<x-heroicon-o-globe-asia-australia class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('wifi')<x-heroicon-o-wifi class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('signal')<x-heroicon-o-signal class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('shield-check')<x-heroicon-o-shield-check class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('shield-exclamation')<x-heroicon-o-shield-exclamation class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('lock-closed')<x-heroicon-o-lock-closed class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('lock-open')<x-heroicon-o-lock-open class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('key')<x-heroicon-o-key class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('rocket-launch')<x-heroicon-o-rocket-launch class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('paper-airplane')<x-heroicon-o-paper-airplane class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('bolt')<x-heroicon-o-bolt class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('fire')<x-heroicon-o-fire class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('sparkles')<x-heroicon-o-sparkles class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('star')<x-heroicon-o-star class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('heart')<x-heroicon-o-heart class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('home')<x-heroicon-o-home class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('home-modern')<x-heroicon-o-home-modern class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('building-office')<x-heroicon-o-building-office class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('building-office-2')<x-heroicon-o-building-office-2 class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('building-storefront')<x-heroicon-o-building-storefront class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('cube')<x-heroicon-o-cube class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('cube-transparent')<x-heroicon-o-cube-transparent class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('archive-box')<x-heroicon-o-archive-box class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('inbox')<x-heroicon-o-inbox class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('inbox-stack')<x-heroicon-o-inbox-stack class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('folder')<x-heroicon-o-folder class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('folder-open')<x-heroicon-o-folder-open class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('cog-6-tooth')<x-heroicon-o-cog-6-tooth class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('cog-8-tooth')<x-heroicon-o-cog-8-tooth class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('wrench-screwdriver')<x-heroicon-o-wrench-screwdriver class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('wrench')<x-heroicon-o-wrench class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('beaker')<x-heroicon-o-beaker class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('bug-ant')<x-heroicon-o-bug-ant class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('puzzle-piece')<x-heroicon-o-puzzle-piece class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('chart-bar')<x-heroicon-o-chart-bar class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('chart-pie')<x-heroicon-o-chart-pie class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('presentation-chart-line')<x-heroicon-o-presentation-chart-line class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('currency-dollar')<x-heroicon-o-currency-dollar class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('currency-euro')<x-heroicon-o-currency-euro class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('banknotes')<x-heroicon-o-banknotes class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('credit-card')<x-heroicon-o-credit-card class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('user')<x-heroicon-o-user class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('user-circle')<x-heroicon-o-user-circle class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('user-group')<x-heroicon-o-user-group class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('users')<x-heroicon-o-users class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('envelope')<x-heroicon-o-envelope class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('envelope-open')<x-heroicon-o-envelope-open class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('chat-bubble-left')<x-heroicon-o-chat-bubble-left class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('chat-bubble-left-right')<x-heroicon-o-chat-bubble-left-right class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('camera')<x-heroicon-o-camera class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('video-camera')<x-heroicon-o-video-camera class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('film')<x-heroicon-o-film class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('musical-note')<x-heroicon-o-musical-note class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('book-open')<x-heroicon-o-book-open class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('document-text')<x-heroicon-o-document-text class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('sun')<x-heroicon-o-sun class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('moon')<x-heroicon-o-moon class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('swatch')<x-heroicon-o-swatch class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('paint-brush')<x-heroicon-o-paint-brush class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('trophy')<x-heroicon-o-trophy class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('academic-cap')<x-heroicon-o-academic-cap class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('light-bulb')<x-heroicon-o-light-bulb class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('finger-print')<x-heroicon-o-finger-print class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('eye')<x-heroicon-o-eye class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('map')<x-heroicon-o-map class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('map-pin')<x-heroicon-o-map-pin class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('clock')<x-heroicon-o-clock class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('calendar')<x-heroicon-o-calendar class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('gift')<x-heroicon-o-gift class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @case('cake')<x-heroicon-o-cake class="size-5 transition-transform group-hover:scale-110" style="{{ $iconStyle }}" />@break
+                                @default<x-heroicon-o-server class="size-5 text-base/60 transition-transform group-hover:scale-110" />
                             @endswitch
                         @else
-                            <x-ri-server-line class="size-5 text-base/60 transition-transform group-hover:scale-110" />
+                            <x-heroicon-o-server class="size-5 text-base/60 transition-transform group-hover:scale-110" />
                         @endif
                     </button>
                     <span class="text-2xl font-bold">
@@ -1045,35 +1006,22 @@
             selectedColor: @entangle('selectedIconColor'),
             searchQuery: '',
             icons: [
-                'ri-server-line', 'ri-computer-line', 'ri-mac-line', 'ri-macbook-line', 'ri-device-line',
-                'ri-hard-drive-2-line', 'ri-hard-drive-line', 'ri-hard-drive-3-line', 'ri-database-2-line', 'ri-database-line',
-                'ri-cloud-line', 'ri-cloud-fill', 'ri-cloudy-line', 'ri-cloudy-2-line',
-                'ri-terminal-box-line', 'ri-terminal-line', 'ri-code-box-line', 'ri-code-line', 'ri-code-s-slash-line',
-                'ri-cpu-line', 'ri-chip-line', 'ri-memory-stick-line', 'ri-ram-line', 'ri-ram-2-line',
-                'ri-global-line', 'ri-earth-line', 'ri-planet-line',
-                'ri-router-line', 'ri-wifi-line', 'ri-signal-tower-line', 'ri-base-station-line',
-                'ri-shield-line', 'ri-shield-check-line', 'ri-shield-star-line', 'ri-lock-line', 'ri-lock-2-line',
-                'ri-rocket-line', 'ri-rocket-2-line', 'ri-spaceship-line', 'ri-plane-line',
-                'ri-game-line', 'ri-gamepad-line', 'ri-steam-line', 'ri-playstation-line', 'ri-xbox-line',
-                'ri-windows-line', 'ri-ubuntu-line', 'ri-centos-line', 'ri-linux-line', 'ri-apple-line',
-                'ri-bug-line', 'ri-bug-2-line', 'ri-robot-line', 'ri-robot-2-line',
-                'ri-home-line', 'ri-home-2-line', 'ri-building-line', 'ri-building-2-line', 'ri-store-line',
-                'ri-flask-line', 'ri-test-tube-line', 'ri-microscope-line',
-                'ri-fire-line', 'ri-fire-fill', 'ri-blaze-line', 'ri-sparkling-line',
-                'ri-star-line', 'ri-star-fill', 'ri-vip-crown-line', 'ri-vip-diamond-line',
-                'ri-heart-line', 'ri-heart-fill', 'ri-heart-2-line', 'ri-heart-3-line',
-                'ri-lightning-line', 'ri-thunderstorms-line', 'ri-flashlight-line',
-                'ri-box-3-line', 'ri-archive-line', 'ri-inbox-line', 'ri-inbox-2-line',
-                'ri-folder-line', 'ri-folder-2-line', 'ri-folder-shield-line', 'ri-folder-lock-line',
-                'ri-settings-line', 'ri-settings-2-line', 'ri-settings-3-line', 'ri-equalizer-line',
-                'ri-dashboard-line', 'ri-pie-chart-line', 'ri-bar-chart-line', 'ri-line-chart-line',
-                'ri-money-dollar-circle-line', 'ri-money-euro-circle-line', 'ri-bank-line', 'ri-safe-line',
-                'ri-user-line', 'ri-user-3-line', 'ri-team-line', 'ri-group-line',
-                'ri-mail-line', 'ri-mail-open-line', 'ri-chat-1-line', 'ri-message-2-line',
-                'ri-camera-line', 'ri-camera-2-line', 'ri-vidicon-line', 'ri-film-line',
-                'ri-music-line', 'ri-music-2-line', 'ri-headphone-line', 'ri-speaker-line',
-                'ri-book-line', 'ri-book-2-line', 'ri-book-open-line', 'ri-file-text-line',
-                'ri-sun-line', 'ri-moon-line', 'ri-contrast-2-line', 'ri-palette-line'
+                'server', 'server-stack', 'computer-desktop', 'cpu-chip', 'circle-stack',
+                'cloud', 'command-line', 'code-bracket', 'code-bracket-square',
+                'globe-alt', 'globe-americas', 'globe-europe-africa', 'globe-asia-australia',
+                'wifi', 'signal', 'shield-check', 'shield-exclamation', 'lock-closed', 'lock-open', 'key',
+                'rocket-launch', 'paper-airplane', 'bolt', 'fire', 'sparkles', 'star', 'heart',
+                'home', 'home-modern', 'building-office', 'building-office-2', 'building-storefront',
+                'cube', 'cube-transparent', 'archive-box', 'inbox', 'inbox-stack', 'folder', 'folder-open',
+                'cog-6-tooth', 'cog-8-tooth', 'wrench-screwdriver', 'wrench', 'beaker', 'bug-ant', 'puzzle-piece',
+                'chart-bar', 'chart-pie', 'presentation-chart-line',
+                'currency-dollar', 'currency-euro', 'banknotes', 'credit-card',
+                'user', 'user-circle', 'user-group', 'users',
+                'envelope', 'envelope-open', 'chat-bubble-left', 'chat-bubble-left-right',
+                'camera', 'video-camera', 'film', 'musical-note',
+                'book-open', 'document-text', 'sun', 'moon', 'swatch', 'paint-brush',
+                'trophy', 'academic-cap', 'light-bulb', 'finger-print', 'eye',
+                'map', 'map-pin', 'clock', 'calendar', 'gift', 'cake'
             ],
             colors: [
                 '', '#ef4444', '#f97316', '#f59e0b', '#eab308', '#84cc16', '#22c55e', '#10b981',
@@ -1115,7 +1063,7 @@
                         <div class="flex items-center justify-between mb-4">
                             <h3 class="text-lg font-semibold">Customize Server Icon</h3>
                             <button @click="$wire.closeIconModal()" class="text-base/50 hover:text-base transition-colors">
-                                <x-ri-close-line class="size-5" />
+                                <x-heroicon-o-x-mark class="size-5" />
                             </button>
                         </div>
                         <!-- Search -->
@@ -1136,7 +1084,7 @@
                                           :style="selectedColor ? 'color: ' + selectedColor : ''"></span>
                                 </template>
                                 <template x-if="!selectedIcon">
-                                    <x-ri-server-line class="size-8 text-base/40" />
+                                    <x-heroicon-o-server class="size-8 text-base/40" />
                                 </template>
                             </div>
                             <div>
@@ -1167,128 +1115,90 @@
                             <template x-for="icon in filteredIcons" :key="icon">
                                 <button @click="selectedIcon = icon"
                                         class="aspect-square rounded-lg border flex items-center justify-center transition-all duration-150 hover:bg-background hover:border-primary/50"
-                                        :class="selectedIcon === icon ? 'bg-primary/10 border-primary ring-2 ring-primary/30' : 'border-neutral'">
-                                    <template x-if="icon === 'ri-server-line'"><x-ri-server-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-computer-line'"><x-ri-computer-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-mac-line'"><x-ri-mac-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-macbook-line'"><x-ri-macbook-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-device-line'"><x-ri-device-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-hard-drive-2-line'"><x-ri-hard-drive-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-hard-drive-line'"><x-ri-hard-drive-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-hard-drive-3-line'"><x-ri-hard-drive-3-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-database-2-line'"><x-ri-database-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-database-line'"><x-ri-database-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-cloud-line'"><x-ri-cloud-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-cloud-fill'"><x-ri-cloud-fill class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-cloudy-line'"><x-ri-cloudy-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-cloudy-2-line'"><x-ri-cloudy-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-terminal-box-line'"><x-ri-terminal-box-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-terminal-line'"><x-ri-terminal-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-code-box-line'"><x-ri-code-box-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-code-line'"><x-ri-code-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-code-s-slash-line'"><x-ri-code-s-slash-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-cpu-line'"><x-ri-cpu-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-chip-line'"><x-ri-chip-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-memory-stick-line'"><x-ri-memory-stick-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-ram-line'"><x-ri-ram-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-ram-2-line'"><x-ri-ram-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-global-line'"><x-ri-global-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-earth-line'"><x-ri-earth-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-planet-line'"><x-ri-planet-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-router-line'"><x-ri-router-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-wifi-line'"><x-ri-wifi-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-signal-tower-line'"><x-ri-signal-tower-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-base-station-line'"><x-ri-base-station-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-shield-line'"><x-ri-shield-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-shield-check-line'"><x-ri-shield-check-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-shield-star-line'"><x-ri-shield-star-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-lock-line'"><x-ri-lock-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-lock-2-line'"><x-ri-lock-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-rocket-line'"><x-ri-rocket-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-rocket-2-line'"><x-ri-rocket-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-spaceship-line'"><x-ri-spaceship-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-plane-line'"><x-ri-plane-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-game-line'"><x-ri-game-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-gamepad-line'"><x-ri-gamepad-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-steam-line'"><x-ri-steam-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-playstation-line'"><x-ri-playstation-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-xbox-line'"><x-ri-xbox-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-windows-line'"><x-ri-windows-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-ubuntu-line'"><x-ri-ubuntu-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-centos-line'"><x-ri-centos-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-linux-line'"><x-ri-linux-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-apple-line'"><x-ri-apple-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-bug-line'"><x-ri-bug-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-bug-2-line'"><x-ri-bug-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-robot-line'"><x-ri-robot-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-robot-2-line'"><x-ri-robot-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-home-line'"><x-ri-home-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-home-2-line'"><x-ri-home-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-building-line'"><x-ri-building-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-building-2-line'"><x-ri-building-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-store-line'"><x-ri-store-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-flask-line'"><x-ri-flask-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-test-tube-line'"><x-ri-test-tube-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-microscope-line'"><x-ri-microscope-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-fire-line'"><x-ri-fire-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-fire-fill'"><x-ri-fire-fill class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-blaze-line'"><x-ri-blaze-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-sparkling-line'"><x-ri-sparkling-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-star-line'"><x-ri-star-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-star-fill'"><x-ri-star-fill class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-vip-crown-line'"><x-ri-vip-crown-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-vip-diamond-line'"><x-ri-vip-diamond-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-heart-line'"><x-ri-heart-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-heart-fill'"><x-ri-heart-fill class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-heart-2-line'"><x-ri-heart-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-heart-3-line'"><x-ri-heart-3-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-lightning-line'"><x-ri-lightning-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-thunderstorms-line'"><x-ri-thunderstorms-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-flashlight-line'"><x-ri-flashlight-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-box-3-line'"><x-ri-box-3-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-archive-line'"><x-ri-archive-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-inbox-line'"><x-ri-inbox-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-inbox-2-line'"><x-ri-inbox-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-folder-line'"><x-ri-folder-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-folder-2-line'"><x-ri-folder-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-folder-shield-line'"><x-ri-folder-shield-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-folder-lock-line'"><x-ri-folder-lock-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-settings-line'"><x-ri-settings-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-settings-2-line'"><x-ri-settings-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-settings-3-line'"><x-ri-settings-3-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-equalizer-line'"><x-ri-equalizer-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-dashboard-line'"><x-ri-dashboard-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-pie-chart-line'"><x-ri-pie-chart-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-bar-chart-line'"><x-ri-bar-chart-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-line-chart-line'"><x-ri-line-chart-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-money-dollar-circle-line'"><x-ri-money-dollar-circle-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-money-euro-circle-line'"><x-ri-money-euro-circle-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-bank-line'"><x-ri-bank-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-safe-line'"><x-ri-safe-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-user-line'"><x-ri-user-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-user-3-line'"><x-ri-user-3-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-team-line'"><x-ri-team-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-group-line'"><x-ri-group-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-mail-line'"><x-ri-mail-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-mail-open-line'"><x-ri-mail-open-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-chat-1-line'"><x-ri-chat-1-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-message-2-line'"><x-ri-message-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-camera-line'"><x-ri-camera-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-camera-2-line'"><x-ri-camera-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-vidicon-line'"><x-ri-vidicon-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-film-line'"><x-ri-film-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-music-line'"><x-ri-music-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-music-2-line'"><x-ri-music-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-headphone-line'"><x-ri-headphone-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-speaker-line'"><x-ri-speaker-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-book-line'"><x-ri-book-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-book-2-line'"><x-ri-book-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-book-open-line'"><x-ri-book-open-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-file-text-line'"><x-ri-file-text-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-sun-line'"><x-ri-sun-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-moon-line'"><x-ri-moon-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-contrast-2-line'"><x-ri-contrast-2-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
-                                    <template x-if="icon === 'ri-palette-line'"><x-ri-palette-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                        :class="selectedIcon === icon ? 'bg-primary/10 border-primary ring-2 ring-primary/30' : 'border-neutral'"
+                                        :data-icon-preview="icon">
+                                    <template x-if="icon === 'server'"><x-heroicon-o-server class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'server-stack'"><x-heroicon-o-server-stack class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'computer-desktop'"><x-heroicon-o-computer-desktop class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'cpu-chip'"><x-heroicon-o-cpu-chip class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'circle-stack'"><x-heroicon-o-circle-stack class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'cloud'"><x-heroicon-o-cloud class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'command-line'"><x-heroicon-o-command-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'code-bracket'"><x-heroicon-o-code-bracket class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'code-bracket-square'"><x-heroicon-o-code-bracket-square class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'globe-alt'"><x-heroicon-o-globe-alt class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'globe-americas'"><x-heroicon-o-globe-americas class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'globe-europe-africa'"><x-heroicon-o-globe-europe-africa class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'globe-asia-australia'"><x-heroicon-o-globe-asia-australia class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'wifi'"><x-heroicon-o-wifi class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'signal'"><x-heroicon-o-signal class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'shield-check'"><x-heroicon-o-shield-check class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'shield-exclamation'"><x-heroicon-o-shield-exclamation class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'lock-closed'"><x-heroicon-o-lock-closed class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'lock-open'"><x-heroicon-o-lock-open class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'key'"><x-heroicon-o-key class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'rocket-launch'"><x-heroicon-o-rocket-launch class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'paper-airplane'"><x-heroicon-o-paper-airplane class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'bolt'"><x-heroicon-o-bolt class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'fire'"><x-heroicon-o-fire class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'sparkles'"><x-heroicon-o-sparkles class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'star'"><x-heroicon-o-star class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'heart'"><x-heroicon-o-heart class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'home'"><x-heroicon-o-home class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'home-modern'"><x-heroicon-o-home-modern class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'building-office'"><x-heroicon-o-building-office class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'building-office-2'"><x-heroicon-o-building-office-2 class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'building-storefront'"><x-heroicon-o-building-storefront class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'cube'"><x-heroicon-o-cube class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'cube-transparent'"><x-heroicon-o-cube-transparent class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'archive-box'"><x-heroicon-o-archive-box class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'inbox'"><x-heroicon-o-inbox class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'inbox-stack'"><x-heroicon-o-inbox-stack class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'folder'"><x-heroicon-o-folder class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'folder-open'"><x-heroicon-o-folder-open class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'cog-6-tooth'"><x-heroicon-o-cog-6-tooth class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'cog-8-tooth'"><x-heroicon-o-cog-8-tooth class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'wrench-screwdriver'"><x-heroicon-o-wrench-screwdriver class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'wrench'"><x-heroicon-o-wrench class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'beaker'"><x-heroicon-o-beaker class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'bug-ant'"><x-heroicon-o-bug-ant class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'puzzle-piece'"><x-heroicon-o-puzzle-piece class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'chart-bar'"><x-heroicon-o-chart-bar class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'chart-pie'"><x-heroicon-o-chart-pie class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'presentation-chart-line'"><x-heroicon-o-presentation-chart-line class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'currency-dollar'"><x-heroicon-o-currency-dollar class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'currency-euro'"><x-heroicon-o-currency-euro class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'banknotes'"><x-heroicon-o-banknotes class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'credit-card'"><x-heroicon-o-credit-card class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'user'"><x-heroicon-o-user class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'user-circle'"><x-heroicon-o-user-circle class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'user-group'"><x-heroicon-o-user-group class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'users'"><x-heroicon-o-users class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'envelope'"><x-heroicon-o-envelope class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'envelope-open'"><x-heroicon-o-envelope-open class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'chat-bubble-left'"><x-heroicon-o-chat-bubble-left class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'chat-bubble-left-right'"><x-heroicon-o-chat-bubble-left-right class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'camera'"><x-heroicon-o-camera class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'video-camera'"><x-heroicon-o-video-camera class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'film'"><x-heroicon-o-film class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'musical-note'"><x-heroicon-o-musical-note class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'book-open'"><x-heroicon-o-book-open class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'document-text'"><x-heroicon-o-document-text class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'sun'"><x-heroicon-o-sun class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'moon'"><x-heroicon-o-moon class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'swatch'"><x-heroicon-o-swatch class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'paint-brush'"><x-heroicon-o-paint-brush class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'trophy'"><x-heroicon-o-trophy class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'academic-cap'"><x-heroicon-o-academic-cap class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'light-bulb'"><x-heroicon-o-light-bulb class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'finger-print'"><x-heroicon-o-finger-print class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'eye'"><x-heroicon-o-eye class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'map'"><x-heroicon-o-map class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'map-pin'"><x-heroicon-o-map-pin class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'clock'"><x-heroicon-o-clock class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'calendar'"><x-heroicon-o-calendar class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'gift'"><x-heroicon-o-gift class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
+                                    <template x-if="icon === 'cake'"><x-heroicon-o-cake class="size-5" :style="selectedColor ? 'color: ' + selectedColor : ''" /></template>
                                 </button>
                             </template>
                         </div>