Stack-Cairn · su-fen · Jun 21, 2026 · Jun 21, 2026 · Jun 21, 2026
diff --git a/crates/agent-gateway/web/package.json b/crates/agent-gateway/web/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@git-diff-view/file": "^0.1.3",
     "@git-diff-view/react": "^0.1.3",
+    "@iconify-json/gravity-ui": "^1.2.12",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",

diff --git a/crates/agent-gateway/web/pnpm-lock.yaml b/crates/agent-gateway/web/pnpm-lock.yaml
diff --git a/crates/agent-gateway/web/src/components/chat/ChatHistorySidebar.tsx b/crates/agent-gateway/web/src/components/chat/ChatHistorySidebar.tsx
@@ -17,15 +17,15 @@ import {
   Folder,
   FolderTree,
   Link2,
+  McpLogo,
   MessageSquareText,
   MoreHorizontal,
   PanelLeftClose,
   Pin,
   PinOff,
-  Plug,
   Plus,
   Share2,
-  Sparkles,
+  SkillIcon,
   SquarePen,
   Trash2,
 } from "../icons";
@@ -1586,9 +1586,9 @@ export const ChatHistorySidebar = memo(function ChatHistorySidebar(props: ChatHi
               )}
               title="Skills Hub"
             >
-              <Sparkles
+              <SkillIcon
                 className={cn(
-                  "h-4 w-4 shrink-0",
+                  "h-[17px] w-[17px] shrink-0",
                   activeView === "skills-hub" ? "text-amber-500" : "text-foreground/85",
                 )}
               />
@@ -1606,7 +1606,7 @@ export const ChatHistorySidebar = memo(function ChatHistorySidebar(props: ChatHi
               )}
               title="MCP Hub"
             >
-              <Plug
+              <McpLogo
                 className={cn(
                   "h-4 w-4 shrink-0",
                   activeView === "mcp-hub" ? "text-violet-500" : "text-foreground/85",

diff --git a/crates/agent-gateway/web/src/components/icons.tsx b/crates/agent-gateway/web/src/components/icons.tsx
@@ -1,5 +1,6 @@
 import type { ComponentType, SVGProps } from "react";
 
+import McpLogoSource from "~icons/gravity-ui/logo-mcp";
 import AlertCircleSource from "~icons/lucide/circle-alert";
 import AlertTriangleSource from "~icons/lucide/triangle-alert";
 import ClaudeSource from "~icons/logos/claude-icon";
@@ -211,6 +212,79 @@ function createIcon(Source: IconSource): IconComponent {
   };
 }
 
+const skillIconOuterPath = `M8102 20439 c-298 -35 -568 -170 -777 -390 -175 -183 -288 -406 -337
+-667 -10 -54 -13 -1300 -13 -6347 0 -6030 1 -6283 18 -6365 74 -347 266 -634
+550 -822 144 -95 269 -147 459 -191 92 -21 104 -21 1808 -26 l1715 -6 3690
+-692 c2030 -381 3733 -698 3785 -704 123 -15 276 -5 411 25 480 109 863 496
+963 973 58 275 2269 12123 2278 12207 14 129 0 295 -36 437 -105 413 -439 766
+-844 893 -46 14 -928 184 -1960 376 -1032 193 -1883 354 -1891 358 -7 4 -28
+49 -46 100 -127 355 -420 649 -773 776 -39 14 -116 36 -170 48 l-97 23 -4330
+1 c-2381 1 -4363 -2 -4403 -7z m8810 -500 c298 -102 510 -345 557 -640 15 -88
+15 -12428 1 -12517 -16 -95 -67 -226 -121 -306 -92 -138 -236 -256 -378 -311
+-156 -59 188 -55 -4538 -53 l-4328 3 -73 23 c-295 91 -499 310 -569 608 -17
+76 -18 289 -18 6299 l0 6220 22 86 c49 194 143 339 295 456 91 69 225 130 339
+152 25 5 1953 8 4389 7 l4345 -1 77 -26z m2838 -1269 c971 -181 1794 -337
+1830 -345 151 -37 328 -150 426 -273 62 -78 139 -240 159 -335 38 -176 115
+256 -1119 -6332 -619 -3311 -1138 -6060 -1152 -6110 -62 -220 -207 -392 -419
+-495 -207 -100 -314 -104 -730 -27 -159 30 -1273 238 -2475 463 l-2184 409
+926 3 927 2 1473 -276 c810 -152 1507 -278 1548 -281 258 -17 513 150 615 404
+28 68 2223 11780 2232 11903 18 269 -170 541 -431 624 -45 15 -824 165 -1741
+336 -913 170 -1666 312 -1672 315 -10 3 -13 48 -13 175 0 157 1 170 18 170 10
+0 812 -148 1782 -330z m-112 -575 c908 -170 1658 -315 1690 -327 42 -16 74
+-38 123 -87 73 -73 105 -140 115 -240 5 -47 -165 -970 -1091 -5916 -603 -3223
+-1100 -5879 -1106 -5903 -26 -116 -102 -213 -212 -267 -130 -64 -83 -70 -1187
+138 l-974 184 84 27 c189 63 352 165 501 315 195 195 309 413 354 675 13 79
+15 733 15 5903 l0 5815 28 -6 c15 -3 762 -143 1660 -311z`;
+
+const skillIconInnerPath = `M8340 19620 c-138 -18 -292 -99 -385 -202 -54 -60 -104 -148 -137
+-238 l-23 -65 -3 -6035 c-2 -5476 -1 -6042 13 -6114 49 -242 221 -424 465
+-493 62 -17 225 -18 4180 -18 3369 0 4127 2 4180 13 181 37 358 175 438 342
+22 47 45 109 51 138 16 75 16 12109 0 12184 -15 71 -79 202 -128 261 -84 100
+-199 176 -328 214 -55 17 -281 18 -4163 19 -2258 1 -4130 -2 -4160 -6z m8231
+-240 c122 -23 228 -105 283 -220 l31 -65 0 -6055 0 -6055 -28 -60 c-56 -119
+-171 -205 -304 -225 -47 -7 -1349 -10 -4133 -8 -3755 3 -4069 4 -4113 20 -114
+39 -204 125 -249 235 l-23 58 -3 6005 c-2 4516 0 6019 9 6060 32 155 156 279
+311 309 64 13 8152 13 8219 1z`;
+
+const skillIconStarPath = `M11967 15673 l-495 -858 -1021 -3 c-562 -1 -1021 -4 -1021 -6 0 -3
+983 -1708 1005 -1742 13 -20 -26 -90 -496 -904 -280 -485 -509 -884 -509 -886
+0 -2 460 -5 1021 -6 l1022 -3 491 -852 c270 -469 495 -851 500 -850 4 2 229
+386 500 855 l491 852 1021 2 1022 3 -510 883 -510 883 510 882 509 882 -1018
+3 -1019 2 -23 38 c-13 20 -237 406 -497 857 -260 451 -474 821 -475 823 -1 1
+-225 -383 -498 -855z m732 -501 c112 -194 201 -355 199 -358 -3 -2 -201 -3
+-441 -2 l-436 3 221 383 220 383 17 -28 c10 -15 109 -187 220 -381z m-1509
+-839 c0 -17 -466 -811 -472 -805 -8 8 -468 803 -468 808 0 2 212 4 470 4 259
+0 470 -3 470 -7z m2366 -645 l374 -647 -374 -648 -374 -648 -719 -2 -718 -2
+-369 641 c-204 353 -370 649 -370 657 -1 9 166 305 369 658 l370 643 719 -3
+718 -2 374 -647z m1097 604 c-16 -26 -122 -211 -237 -410 -115 -199 -213 -359
+-217 -355 -5 6 -200 343 -466 806 -2 4 210 7 472 7 l475 0 -27 -48z m-3686
+-2152 l229 -395 -470 -3 c-258 -1 -471 -1 -473 2 -3 3 407 721 454 795 12 19
+17 21 24 10 4 -8 111 -192 236 -409z m3478 8 l233 -403 -233 -3 c-129 -1 -342
+-1 -474 0 l-241 3 211 365 c116 201 222 384 236 408 13 24 27 41 30 38 3 -3
+110 -187 238 -408z m-1548 -892 c-3 -8 -98 -173 -210 -368 -112 -194 -208
+-361 -214 -371 -8 -15 -45 42 -213 335 -112 194 -212 368 -223 386 l-19 32
+442 0 c377 0 441 -2 437 -14z`;
+
+function SkillIconSource({ title, ...props }: SVGProps<SVGSVGElement> & { title?: string }) {
+  return (
+    <svg
+      {...props}
+      version="1.0"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="620 505 1725 1725"
+      preserveAspectRatio="xMidYMid meet"
+      aria-hidden={title ? undefined : true}
+    >
+      <title>{title ?? "Skill"}</title>
+      <g transform="translate(0,2600) scale(0.1,-0.1)" fill="currentColor" stroke="none">
+        <path d={skillIconOuterPath} />
+        <path d={skillIconInnerPath} />
+        <path d={skillIconStarPath} />
+      </g>
+    </svg>
+  );
+}
+
 export const AlertCircle = createIcon(AlertCircleSource);
 export const AlertTriangle = createIcon(AlertTriangleSource);
 export const ClaudeIcon = createIcon(ClaudeSource);
@@ -341,6 +415,7 @@ export const Lock = createIcon(LockSource);
 export const LogOut = createIcon(LogOutSource);
 export const MessageSquare = createIcon(MessageSquareSource);
 export const MessageSquareText = createIcon(MessageSquareTextSource);
+export const McpLogo = createIcon(McpLogoSource);
 export const MonitorSmartphone = createIcon(MonitorSmartphoneSource);
 export const Moon = createIcon(MoonSource);
 export const MoreHorizontal = createIcon(MoreHorizontalSource);
@@ -370,6 +445,7 @@ export const Settings = createIcon(SettingsSource);
 export const Settings2 = createIcon(Settings2Source);
 export const Share2 = createIcon(Share2Source);
 export const Shield = createIcon(ShieldSource);
+export const SkillIcon = createIcon(SkillIconSource);
 export const Sparkles = createIcon(SparklesSource);
 export const Square = createIcon(SquareSource);
 export const SquarePen = createIcon(SquarePenSource);

diff --git a/crates/agent-gateway/web/src/pages/mcp-hub/McpHubPage.tsx b/crates/agent-gateway/web/src/pages/mcp-hub/McpHubPage.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { Cloud, Plug, Plus, Server, Sparkles } from "../../components/icons";
+import { Cloud, McpLogo, Plug, Plus, Server, Sparkles } from "../../components/icons";
 import { Button } from "../../components/ui/button";
 import { useLocale } from "../../i18n";
 import { McpRegistryBrowser } from "./McpRegistryBrowser";
@@ -65,7 +65,7 @@ export function McpHubPage(props: McpHubPageProps) {
 
       <div className="relative z-10 flex h-full min-h-0 flex-col overflow-hidden">
         <HubHeader
-          icon={<Plug className="h-5 w-5" />}
+          icon={<McpLogo className="h-5 w-5" />}
           title="MCP Hub"
           subtitle={t("mcpHub.subtitle")}
           sidebarOpen={sidebarOpen}

diff --git a/crates/agent-gateway/web/src/pages/skills-hub/SkillsHubPage.tsx b/crates/agent-gateway/web/src/pages/skills-hub/SkillsHubPage.tsx
@@ -12,9 +12,11 @@ import {
   Loader2,
   Lock,
   MessageSquare,
+  Plug,
   RefreshCw,
   Search,
-  Sparkles,
+  Server,
+  SkillIcon,
   Trash2,
   X,
 } from "../../components/icons";
@@ -740,7 +742,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
 
       <div className="relative z-10 flex h-full min-h-0 flex-col overflow-hidden">
         <HubHeader
-          icon={<Sparkles className="h-5 w-5" />}
+          icon={<SkillIcon className="h-6 w-6" />}
           title={t("settings.skillsHubTitle")}
           subtitle={rootDir ? rootDir : t("settings.skillsHubSubtitle")}
           sidebarOpen={sidebarOpen}
@@ -768,7 +770,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                         : "border-border/40 bg-muted/40 text-muted-foreground",
                     )}
                   >
-                    <Sparkles className="h-5 w-5" />
+                    <Plug className="h-5 w-5" />
                     {skillsEnabled ? (
                       <span className="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full bg-emerald-500 ring-2 ring-background" />
                     ) : null}
@@ -872,7 +874,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                   {
                     value: "installed" as const,
                     label: t("settings.skillsHubInstalledTab"),
-                    icon: Sparkles,
+                    icon: Server,
                     count: selectableSkills.length,
                   },
                   {
@@ -1044,7 +1046,7 @@ export function SkillsHubPage(props: SkillsHubPageProps) {
                                   : "border-border/30 bg-muted/50 text-muted-foreground group-hover:border-border/50 group-hover:bg-background/70 group-hover:text-foreground/85",
                               )}
                             >
-                              <Sparkles className="h-[18px] w-[18px]" />
+                              <SkillIcon className="h-6 w-6" />
                             </div>
 
                             {alwaysEnabled ? (
@@ -1283,7 +1285,7 @@ function InstalledSkillPreviewDrawer(props: {
       >
         <div className="flex items-start gap-3 border-b border-border/40 px-5 py-4">
           <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border border-border/55 bg-background/80 text-foreground/85 shadow-[0_1px_0_rgba(255,255,255,0.55)_inset]">
-            {alwaysEnabled ? <Lock className="h-5 w-5" /> : <Sparkles className="h-5 w-5" />}
+            {alwaysEnabled ? <Lock className="h-5 w-5" /> : <SkillIcon className="h-7 w-7" />}
           </div>
           <div className="min-w-0 flex-1">
             <div className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/80">
@@ -1324,7 +1326,7 @@ function InstalledSkillPreviewDrawer(props: {
               <div className="rounded-2xl border border-border/40 bg-background/70 p-3.5 shadow-[0_1px_0_rgba(255,255,255,0.55)_inset]">
                 <div className="flex items-start gap-3">
                   <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-border/45 bg-background/80 text-foreground/75">
-                    <Sparkles className="h-3.5 w-3.5" />
+                    <SkillIcon className="h-5 w-5" />
                   </div>
                   <div className="min-w-0 flex-1">
                     <div className="text-[10.5px] font-semibold uppercase tracking-wider text-muted-foreground/70">
@@ -1697,7 +1699,7 @@ function SkillsStoreView(props: {
                               : "border-border/30 bg-muted/50 text-muted-foreground group-hover:border-border/50 group-hover:bg-background/70 group-hover:text-foreground/85",
                           )}
                         >
-                          <Sparkles className="h-[18px] w-[18px]" />
+                          <SkillIcon className="h-6 w-6" />
                         </div>
                         <div className="min-w-0 flex-1">
                           <div className="flex min-w-0 items-start gap-1.5">
@@ -1927,7 +1929,7 @@ function SkillsStorePreviewDrawer(props: {
                 loading="lazy"
               />
             ) : (
-              <Sparkles className="h-5 w-5" />
+              <SkillIcon className="h-7 w-7" />
             )}
           </div>
           <div className="min-w-0 flex-1">

diff --git a/crates/agent-gui/package.json b/crates/agent-gui/package.json
@@ -24,6 +24,7 @@
     "@earendil-works/pi-ai": "^0.79.6",
     "@git-diff-view/file": "^0.1.3",
     "@git-diff-view/react": "^0.1.3",
+    "@iconify-json/gravity-ui": "^1.2.12",
     "@openai/codex-sdk": "^0.118.0",
     "@streamdown/cjk": "^1.0.3",
     "@streamdown/code": "^1.1.1",

diff --git a/crates/agent-gui/pnpm-lock.yaml b/crates/agent-gui/pnpm-lock.yaml