diff --git a/app/frontend/src/components/sidebar/icons.ts b/app/frontend/src/components/sidebar/icons.ts
deleted file mode 100644
index 32e97744..00000000
--- a/app/frontend/src/components/sidebar/icons.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-/** Icon column treatment shared by the sidebar info panels (Pane, Host):
- * brighter token, bold weight, +2px size. leading-none keeps the taller
- * glyph inside the row's 16px line box (no row-height change). */
-export const ICON_CLASS = "text-accent-bright font-bold text-[14px] leading-none";
diff --git a/app/frontend/src/components/sidebar/icons.tsx b/app/frontend/src/components/sidebar/icons.tsx
new file mode 100644
index 00000000..64bc85c7
--- /dev/null
+++ b/app/frontend/src/components/sidebar/icons.tsx
@@ -0,0 +1,43 @@
+/** Shared sidebar icons. */
+
+/** Icon column treatment shared by the sidebar info panels (Pane, Host):
+ * brighter token, bold weight, +2px size. leading-none keeps the taller
+ * glyph inside the row's 16px line box (no row-height change). */
+export const ICON_CLASS = "text-accent-bright font-bold text-[14px] leading-none";
+
+/** Small palette icon for color-picker triggers — an artist's palette
+ * silhouette with four paint blobs. Line-art to match the sidebar's other
+ * line icons (e.g. the window-row pin); replaces the former U+25A0 glyph,
+ * which read as a media "stop" button rather than a color control. Blobs are
+ * pure fills (stroke="none") so they read as dots, not stroked rings.
+ *
+ * Shared by the window-row, session-row, and server-panel color triggers so
+ * the affordance is identical everywhere. `size` defaults to 13px (sidebar
+ * rows); the compact server tile passes a smaller size.
+ *
+ * strokeWidth is 2 (not the lucide-default 1.7) so the *effective* stroke
+ * weight matches the window-row pin: 2 ÷ 24-viewBox × 13px ≈ 1.08px vs the
+ * pin's 1.5 ÷ 16 × 12 ≈ 1.125px. A thinner stroke reads as a lighter color
+ * even with the same `currentColor` token, so weight parity is what makes the
+ * icons look like the same color in a cluster. */
+export function PaletteIcon({ size = 13 }: { size?: number }) {
+ return (
+
+ );
+}
diff --git a/app/frontend/src/components/sidebar/server-panel.tsx b/app/frontend/src/components/sidebar/server-panel.tsx
index 5e998792..3c63167f 100644
--- a/app/frontend/src/components/sidebar/server-panel.tsx
+++ b/app/frontend/src/components/sidebar/server-panel.tsx
@@ -3,6 +3,7 @@ import { createPortal } from "react-dom";
import { CollapsiblePanel } from "./collapsible-panel";
import { LogoSpinner } from "@/components/logo-spinner";
import { SwatchPopover } from "@/components/swatch-popover";
+import { PaletteIcon } from "./icons";
import { UNCOLORED_SELECTED_KEY, type RowTint } from "@/themes";
import type { ServerInfo } from "@/api/client";
@@ -291,9 +292,9 @@ function ServerTile({
type="button"
aria-label={`Set color for server ${name}`}
onClick={onColorClick}
- className="text-text-secondary hover:text-text-primary text-[11px] leading-none px-0.5 py-0.5"
+ className="text-text-secondary hover:text-text-primary leading-none px-0.5 py-0.5 flex items-center justify-center"
>
- ■
+
)}
{onKill && (
diff --git a/app/frontend/src/components/sidebar/session-row.tsx b/app/frontend/src/components/sidebar/session-row.tsx
index 79501f0d..d7078e23 100644
--- a/app/frontend/src/components/sidebar/session-row.tsx
+++ b/app/frontend/src/components/sidebar/session-row.tsx
@@ -3,6 +3,7 @@ import type { ProjectSession } from "@/types";
import type { MergedSession } from "@/contexts/optimistic-context";
import type { RowTint } from "@/themes";
import { SwatchPopover } from "@/components/swatch-popover";
+import { PaletteIcon } from "./icons";
type SessionRowProps = {
/** Tmux server this session belongs to — bound into the identity-arg
@@ -194,9 +195,9 @@ function SessionRowInner({
setShowColorPicker((v) => !v);
}}
aria-label={`Set color for ${session.name}`}
- className="text-text-secondary hover:text-text-primary transition-opacity opacity-0 group-hover:opacity-100 coarse:opacity-100 text-[12px] px-0.5 min-h-[36px] flex items-center justify-center"
+ className="text-text-secondary hover:text-text-primary transition-opacity opacity-0 group-hover:opacity-100 coarse:opacity-100 px-0.5 min-h-[36px] flex items-center justify-center"
>
- ■
+
)}