From b9d5d4e2774b740c5ade6dbb5e4573b012a7b286 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Mon, 9 Mar 2026 18:06:44 -0700
Subject: [PATCH] update page icons

---
 webui/index.html       | 20 ++++++++++----------
 webui/static/style.css | 11 +++++++++--
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index e7b63040..df8166a8 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -92,43 +92,43 @@
             <!-- Navigation Section -->
             <nav class="sidebar-nav">
                 <button class="nav-button active" data-page="dashboard">
-                    <span class="nav-icon">📊</span>
+                    <span class="nav-icon"><img src="/static/dashboard.png" class="nav-icon-img"></span>
                     <span class="nav-text">Dashboard</span>
                 </button>
                 <button class="nav-button" data-page="sync">
-                    <span class="nav-icon">🔄</span>
+                    <span class="nav-icon"><img src="/static/sync.png" class="nav-icon-img"></span>
                     <span class="nav-text">Sync</span>
                 </button>
                 <button class="nav-button" data-page="downloads">
-                    <span class="nav-icon">📥</span>
+                    <span class="nav-icon"><img src="/static/search.png" class="nav-icon-img"></span>
                     <span class="nav-text">Search</span>
                 </button>
                 <button class="nav-button" data-page="discover">
-                    <span class="nav-icon">🎧</span>
+                    <span class="nav-icon"><img src="/static/discover.png" class="nav-icon-img"></span>
                     <span class="nav-text">Discover</span>
                 </button>
                 <button class="nav-button" data-page="artists">
-                    <span class="nav-icon">🎵</span>
+                    <span class="nav-icon"><img src="/static/artists.png" class="nav-icon-img"></span>
                     <span class="nav-text">Artists</span>
                 </button>
                 <button class="nav-button" data-page="automations">
-                    <span class="nav-icon">⚡</span>
+                    <span class="nav-icon"><img src="/static/automation.png" class="nav-icon-img"></span>
                     <span class="nav-text">Automations</span>
                 </button>
                 <button class="nav-button" data-page="library">
-                    <span class="nav-icon">📚</span>
+                    <span class="nav-icon"><img src="/static/library.png" class="nav-icon-img"></span>
                     <span class="nav-text">Library</span>
                 </button>
                 <button class="nav-button" data-page="import">
-                    <span class="nav-icon">📂</span>
+                    <span class="nav-icon"><img src="/static/import.png" class="nav-icon-img"></span>
                     <span class="nav-text">Import</span>
                 </button>
                 <button class="nav-button" data-page="settings">
-                    <span class="nav-icon">⚙️</span>
+                    <span class="nav-icon"><img src="/static/settings.png" class="nav-icon-img"></span>
                     <span class="nav-text">Settings</span>
                 </button>
                 <button class="nav-button" data-page="hydrabase" id="hydrabase-nav" style="display: none;">
-                    <span class="nav-icon"><img src="/static/hydrabase.png?v=1" class="hydrabase-icon"></span>
+                    <span class="nav-icon"><img src="/static/hydrabase.png?v=1" class="nav-icon-img"></span>
                     <span class="nav-text">Hydrabase</span>
                 </button>
             </nav>
diff --git a/webui/static/style.css b/webui/static/style.css
index 72ee155a..cdd9e38b 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -255,8 +255,8 @@ body {
 }
 
 .nav-icon {
-    width: 28px;
-    height: 28px;
+    width: 40px;
+    height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -274,6 +274,13 @@ body {
         inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
 
+.nav-icon-img {
+    width: 32px;
+    height: 32px;
+    object-fit: contain;
+    pointer-events: none;
+}
+
 .nav-button:hover .nav-icon {
     color: rgba(255, 255, 255, 0.95);
     background: linear-gradient(135deg,