diff --git a/frontend/index.html b/frontend/index.html
index 3d397d6..d159e7c 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -14,17 +14,10 @@
         </div>
         <div class="actions">
             <button class="icon-btn menu-toggle" onclick="toggleDrawer('menu')" title="Menu">
-                <span class="hamburger">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                </span>
+                <img class="icon-svg" src="https://cdn.jsdelivr.net/npm/heroicons@2.0.13/24/outline/bars-3.svg" alt="Menu">
             </button>
             <button class="icon-btn settings-toggle" onclick="toggleDrawer('settings')" title="Settings">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <circle cx="12" cy="12" r="3"></circle>
-                    <path d="M12 1v6m0 6v6M4.22 4.22l4.24 4.24m5.08 0l4.24-4.24M1 12h6m6 0h6m-16.78 7.78l4.24-4.24m5.08 0l4.24 4.24"></path>
-                </svg>
+                <img class="icon-svg" src="https://cdn.jsdelivr.net/npm/heroicons@2.0.13/24/outline/wrench.svg" alt="Settings">
             </button>
         </div>
     </header>
diff --git a/frontend/style.css b/frontend/style.css
index d1a9f56..6943dd5 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -79,8 +79,8 @@ body {
 }
 
 .icon-btn {
-    width: 40px;
-    height: 40px;
+    width: 48px;
+    height: 48px;
     border: none;
     background: transparent;
     border-radius: 8px;
@@ -98,6 +98,18 @@ body {
     color: var(--accent);
 }
 
+/* CDN-served icon images (Heroicons) */
+.icon-svg {
+    width: 24px;
+    height: 24px;
+    display: block;
+    filter: invert(100%) saturate(0%);
+}
+
+.icon-btn:hover .icon-svg {
+    filter: none;
+}
+
 /* Hamburger Menu */
 .hamburger {
     display: flex;