diff --git a/packages/ui/src/components/TabBar.tsx b/packages/ui/src/components/TabBar.tsx
index e357960..6618f1b 100644
--- a/packages/ui/src/components/TabBar.tsx
+++ b/packages/ui/src/components/TabBar.tsx
@@ -5,14 +5,14 @@ import { KIND_LABELS, findNode } from "@opsxapi/core";
 import { useState } from "react";
 import { useWorkspace } from "../workspaceStore";
 import { ContextMenu, cx, type MenuItem } from "./common";
+import { Icon, type IconName } from "./icons";
 
-const KIND_TAB_ICON: Record<string, string> = {
-  http: "",
-  graphql: "◈",
-  websocket: "⚡",
-  sse: "📡",
-  socketio: "🔌",
-  mqtt: "📮",
+const KIND_TAB_ICON: Record<string, IconName> = {
+  graphql: "hexagon",
+  websocket: "zap",
+  sse: "radio",
+  socketio: "plug-zap",
+  mqtt: "mailbox",
 };
 
 export function TabBar() {
@@ -77,7 +77,7 @@ export function TabBar() {
             {node.type === "request" && node.kind === "http" ? (
               <span className={`ops-method-${node.data.method} font-bold`}>{node.data.method}</span>
             ) : node.type === "request" ? (
-              <span title={KIND_LABELS[node.kind]}>{KIND_TAB_ICON[node.kind]}</span>
+              <Icon name={KIND_TAB_ICON[node.kind]} size={13} className="ops-dim shrink-0" title={KIND_LABELS[node.kind]} />
             ) : null}
             <span className="max-w-48 truncate">{node.name}</span>
             {busy && <span className="ops-dot ops-dot-connecting" />}