fix(ui): give settings sidebar rows unique icons (#111974)

ui/src/app-navigation.test.ts

@@ -85,7 +85,7 @@ describe("navigationIconForRoute", () => {
       custodian: "lobster",
       activity: "activity",
       apps: "layoutGrid",
-      approvals: "shieldCheck",
+      approvals: "badgeCheck",
       workboard: "kanban",
       worktrees: "folder",
       channels: "link",
@@ -100,19 +100,19 @@ describe("navigationIconForRoute", () => {
       "skill-workshop": "wrench",
       nodes: "monitorSmartphone",
       config: "settings",
-      profile: "lobster",
+      profile: "circleUser",
       communications: "send",
-      appearance: "spark",
+      appearance: "palette",
       automation: "terminal",
       mcp: "wrench",
       infrastructure: "globe",
-      labs: "spark",
+      labs: "flaskConical",
       about: "fileText",
       "ai-agents": "brain",
       "model-setup": "spark",
       "model-providers": "plug",
       "memory-import": "download",
-      notifications: "send",
+      notifications: "bell",
       security: "shieldCheck",
       advanced: "fileCode",
       debug: "bug",

ui/src/app-navigation.ts

@@ -200,7 +200,7 @@ const NAVIGATION_ICONS: NavigationItem = {
   agents: "bot",
   activity: "activity",
   apps: "layoutGrid",
-  approvals: "shieldCheck",
+  approvals: "badgeCheck",
   workboard: "kanban",
   worktrees: "folder",
   channels: "link",
@@ -216,19 +216,19 @@ const NAVIGATION_ICONS: NavigationItem = {
   chat: "messageSquare",
   custodian: "lobster",
   config: "settings",
-  profile: "lobster",
+  profile: "circleUser",
   communications: "send",
-  appearance: "spark",
+  appearance: "palette",
   automation: "terminal",
   mcp: "wrench",
   infrastructure: "globe",
-  labs: "spark",
+  labs: "flaskConical",
   about: "fileText",
   "ai-agents": "brain",
   "model-setup": "spark",
   "model-providers": "plug",
   "memory-import": "download",
-  notifications: "send",
+  notifications: "bell",
   security: "shieldCheck",
   advanced: "fileCode",
   debug: "bug",

ui/src/components/icons-tools.ts

@@ -275,6 +275,49 @@ export const toolIcons = {
       <circle cx="76" cy="34" r="2.5" fill="#00e5cc" />
     </svg>
   `,
+  circleUser: html`
+    <svg viewBox="0 0 24 24">
+      <path d="M18 20a6 6 0 0 0-12 0" />
+      <circle cx="12" cy="10" r="4" />
+      <circle cx="12" cy="12" r="10" />
+    </svg>
+  `,
+  bell: html`
+    <svg viewBox="0 0 24 24">
+      <path d="M10.268 21a2 2 0 0 0 3.464 0" />
+      <path
+        d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
+      />
+    </svg>
+  `,
+  palette: html`
+    <svg viewBox="0 0 24 24">
+      <path
+        d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"
+      />
+      <circle cx="13.5" cy="6.5" r=".5" fill="currentColor" />
+      <circle cx="17.5" cy="10.5" r=".5" fill="currentColor" />
+      <circle cx="6.5" cy="12.5" r=".5" fill="currentColor" />
+      <circle cx="8.5" cy="7.5" r=".5" fill="currentColor" />
+    </svg>
+  `,
+  flaskConical: html`
+    <svg viewBox="0 0 24 24">
+      <path
+        d="M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2"
+      />
+      <path d="M6.453 15h11.094" />
+      <path d="M8.5 2h7" />
+    </svg>
+  `,
+  badgeCheck: html`
+    <svg viewBox="0 0 24 24">
+      <path
+        d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"
+      />
+      <path d="m9 12 2 2 4-4" />
+    </svg>
+  `,
   refresh: html`
     <svg viewBox="0 0 24 24">
       <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />