From 9572a1582b921b46993476e0e0f0018ca93faa6d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 6 Aug 2026 05:24:58 +0000
Subject: [PATCH 01/10] docs: scope the Control Plane theming engine

Research + architecture scoping for switchable UI themes (colors, fonts,
icon packs, component personality) across the Control Plane:

- Audit of existing foundations (shadcn-style tokens, next-themes,
  Tailwind v4 @theme inline) and the gaps blocking multi-theming
- Recommended token-driven architecture: data-theme scopes, semantic
  <Icon> abstraction, next/font family switching, org/user persistence
- OSS evaluation: tweakcn, Iconify, @fluentui/react-icons,
  material-color-utilities, daisyUI, Style Dictionary (adopt/borrow/skip)
- Example Fluent (Microsoft) and Material (Google) theme manifests
- Phased implementation plan with estimates

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SyTtr9JJXCS8xNkzW5Fny5
---
 docs/THEMING_ENGINE_SCOPE.md | 236 +++++++++++++++++++++++++++++++++++
 1 file changed, 236 insertions(+)
 create mode 100644 docs/THEMING_ENGINE_SCOPE.md

diff --git a/docs/THEMING_ENGINE_SCOPE.md b/docs/THEMING_ENGINE_SCOPE.md
new file mode 100644
index 00000000..e483f805
--- /dev/null
+++ b/docs/THEMING_ENGINE_SCOPE.md
@@ -0,0 +1,236 @@
+# CommandCenter Theming Engine — Scoping Document
+
+**Status:** Scoping / research — no implementation yet
+**Scope:** `workbench/control_plane` (Next.js 16 · React 19 · Tailwind CSS v4)
+**Goal:** A theming engine that can restyle the entire Control Plane — colors,
+fonts, radii, shadows, icon packs, component "personality" — switchable on the
+fly from Settings, with company-wide defaults. Example target themes: the
+current RapidTool look, a Microsoft Fluent/Metro ("Lumia") look, a Google
+Material look.
+
+---
+
+## 1. What we already have (audit)
+
+The codebase is unusually well-positioned for this. The hard prerequisite for
+a theming engine — *components reference semantic tokens instead of raw
+values* — is already largely true.
+
+| Building block | Current state |
+|---|---|
+| **Color tokens** | shadcn/ui-compatible semantic CSS custom properties (`--primary`, `--background`, `--card`, `--muted-foreground`, …) in `src/app/globals.css`, mapped to Tailwind utilities via v4 `@theme inline`. Dark is `:root`, light is `.light`. |
+| **Theme switching** | `next-themes` already installed and mounted in `Providers.tsx` (`attribute="class"`, dark/light only). |
+| **Radius** | Tokenized: `--radius` drives `rounded-lg/md/sm` via `@theme inline`. One variable changes the roundness of the whole app. |
+| **Fonts** | Geist Sans/Mono via `next/font`, exposed as `--font-geist-sans` / `--font-geist-mono` and wired to `font-sans` / `font-mono`. |
+| **Icons** | `lucide-react`, imported **directly in ~160 files**, ~115 unique icons. This is the biggest migration surface. |
+| **Design system doc** | `workbench/control_plane/DESIGN_SYSTEM.md` mandates tokens, shared components, and layout patterns — agents already follow it. |
+| **Settings infra** | `/settings/*` pages + `/api/settings/*` API routes that persist to the backend. An "Appearance" section slots right in. |
+
+### Gaps that block multi-theming today
+
+1. **Only 2 themes are modeled.** `next-themes` is configured for `dark`/`light`
+   classes only; there is no concept of a *style* (RapidTool / Fluent /
+   Material) orthogonal to *mode* (dark / light).
+2. **Icons are hard-imported.** 160 files `import { X } from "lucide-react"` —
+   no indirection layer, so an icon-pack swap currently means editing every file.
+3. **Hardcoded values outside the token system.** `tech-glass`, `tech-glow`,
+   `chat-shimmer-text`, scrollbars, and the ProseMirror selection color embed
+   raw `hsl(...)` values in `globals.css`; a handful of components use inline
+   hex/hsl.
+4. **No shared `<Button>`/`<Input>` primitives.** The design system specifies
+   button *class strings*, not components. Colors/radius will theme fine via
+   tokens, but per-theme *shape personality* (e.g. Fluent's 4px squarish
+   buttons vs. Material's pill FABs) has no single place to live.
+5. **Typography scale is not tokenized.** Sizes like `text-xs`/`text-[10px]`
+   are hardcoded; only the font *family* is a variable.
+6. **No per-user/org persistence for appearance.** Mode lives in
+   `localStorage` via next-themes only.
+
+---
+
+## 2. Recommended architecture: token-driven themes, not component libraries
+
+**Core decision: do NOT adopt a per-theme component library** (Fluent UI
+React, MUI, daisyUI, Radix Themes). Swapping component libraries per theme
+means N parallel implementations of every screen — a rewrite, not a theme
+switch. Instead, keep our own components and make *every visual decision a
+design token*, then ship themes as token bundles:
+
+```
+Theme = {
+  metadata      (id, name, author, preview colors)
+  color tokens  (dark + light variants — mode stays orthogonal to style)
+  font tokens   (sans / mono / display stacks → next/font variables)
+  shape tokens  (radius scale, border widths, shadow scale, density)
+  effect tokens (glass, glow, transition curves — or "none" for flat themes)
+  icon pack id  ("lucide" | "fluent" | "material" | …)
+}
+```
+
+### 2.1 CSS layer — themes as `data-theme` scopes (zero new dependencies)
+
+Tailwind v4's CSS-first design makes this nearly free. `@theme inline` already
+maps utilities to `var(--*)`; we only add per-theme variable scopes:
+
+```css
+/* globals.css — theme scopes set the *source* variables */
+:root, [data-theme="rapidtool"] {            /* current design, unchanged */
+  --primary: hsl(198 89% 50%); --radius: 0.75rem; --font-app: var(--font-geist-sans); …
+}
+[data-theme="fluent"] {                       /* Microsoft / Lumia-inspired */
+  --primary: hsl(206 100% 42%);  /* Fluent blue #0078D4 */
+  --radius: 0.25rem;             /* squarish Fluent corners */
+  --font-app: var(--font-segoe-alike);
+  --effect-glass-opacity: 0.85;  /* acrylic */
+}
+[data-theme="material"] {                     /* Google Material 3 */
+  --primary: hsl(256 34% 48%);   /* M3 primary40 */
+  --radius: 1.25rem;             /* M3 large shape */
+  --font-app: var(--font-roboto);
+  --effect-glass-opacity: 1;     /* flat surfaces, elevation via shadow */
+}
+/* mode stays a separate axis, exactly as today */
+[data-theme="fluent"].light { … } etc.
+```
+
+`next-themes` natively supports arbitrary named themes and can even manage
+the mode × style matrix for us (`themes: ["rapidtool-dark", "rapidtool-light",
+"fluent-dark", …]`), or we keep next-themes for mode (class) and set
+`data-theme` ourselves from a small zustand store — recommended, since we
+already use zustand and it keeps "style" and "mode" as clean separate axes.
+An inline `<script>` in `layout.tsx` (same trick next-themes uses) applies the
+stored theme before first paint to avoid flash.
+
+### 2.2 Icon layer — semantic `<Icon>` component with swappable packs
+
+Introduce `@/components/icon`:
+
+```tsx
+<Icon name="add" className="w-4 h-4" />   // renders Plus | AddRegular | MdAdd
+```
+
+- A **semantic registry** maps ~115 icon names → per-pack components:
+  `{ add: { lucide: Plus, fluent: AddRegular, material: MaterialSymbolsAdd } }`.
+- Pack per theme comes from the theme manifest; unmapped icons fall back to
+  lucide so a new pack can be added incrementally.
+- Migration of the 160 call-sites is a mostly mechanical codemod
+  (`import { Plus } from "lucide-react"` → `<Icon name="add">`), doable
+  file-by-file — old and new styles coexist during migration.
+- Icon sources (all open source, tree-shakable, offline):
+  - **lucide-react** (current) — keep as base/fallback.
+  - **@fluentui/react-icons** (MIT, Microsoft's official Fluent System Icons) —
+    the authentic Fluent look.
+  - **Material Symbols** via **@iconify/react + @iconify-json/material-symbols**
+    (Apache-2.0) — Iconify renders any of its 200k+ icons offline from JSON
+    collections, which also future-proofs adding more packs (Tabler, Phosphor,
+    Heroicons…) without new per-pack APIs.
+
+### 2.3 Fonts — preloaded `next/font` families switched by variable
+
+Load 3–4 families up front in `layout.tsx` (Geist, an Open-Sans/Segoe-alike
+such as **Selawik** (Microsoft's open-source Segoe substitute, SIL OFL) or
+Inter for Fluent, **Roboto/Roboto Flex** for Material). Each registers a CSS
+variable; `--font-app` per theme selects one. Cost is a few 10s of KB per
+subset font, self-hosted by `next/font` — no runtime font loading needed.
+
+### 2.4 Component personality — tokenize the remaining hardcoded styles
+
+- Convert `tech-glass` / `tech-glow` / scrollbar / shimmer colors to derive
+  from tokens (`color-mix(in oklch, var(--card) …)`) with per-theme effect
+  variables, so flat themes (Material) can disable glow/glass entirely.
+- Extract `<Button>`, `<Input>`, `<Badge>` primitives from the class-string
+  recipes in `DESIGN_SYSTEM.md`. This is where deeper per-theme shape
+  differences (Fluent's 1px inner borders, Material's state-layer hover)
+  get expressed once instead of 160 times. Not a blocker for v1 — tokens
+  alone already carry color/radius/font — but it's the path to "really feels
+  like Fluent/Material" fidelity.
+
+### 2.5 Settings & persistence — org default + per-user override
+
+- **Settings → Appearance** page: theme gallery cards (mini live preview
+  rendered from each theme's tokens), mode toggle (dark/light/system),
+  optional accent-color override.
+- Persistence mirrors the existing pattern: `GET/PUT /api/settings/appearance`
+  stores the **org-wide default** ("across the company") in backend config;
+  per-user override stored with the member profile; `localStorage` caches the
+  resolved theme for no-flash first paint. Resolution order:
+  user override → org default → built-in default.
+- Because themes are data (a JSON manifest + CSS variables), new themes can
+  later be added *without code changes* — including agent-generated ones.
+
+---
+
+## 3. Open-source landscape — what to adopt, borrow, or skip
+
+| Project | License | What it offers | Verdict |
+|---|---|---|---|
+| **next-themes** ([repo](https://github.com/pacocoursey/next-themes)) | MIT | No-flash theme switching, arbitrary named themes, `data-theme`/class attributes, system-mode | **Adopt (already installed).** Keep for mode; style axis via store + `data-theme`. |
+| **tweakcn** ([repo](https://github.com/jnsahaj/tweakcn), [editor](https://tweakcn.com/editor/theme)) | Open source (MIT) | Visual no-code theme editor for exactly our token set (shadcn variables): colors, typography, radius, shadows; 16+ ready presets (Catppuccin, Supabase, Graphite…); exports plain CSS variables | **Adopt as theme-authoring tool.** Our tokens are shadcn-compatible, so its presets import almost verbatim — instant theme catalog seed. Can self-host later. |
+| **@iconify/react + @iconify-json/*** ([icon sets](https://icones.js.org)) | MIT / per-set | One renderer for 200k+ icons across 150+ sets, offline JSON collections, tree-shakable | **Adopt for non-lucide packs** behind our semantic `<Icon>`. |
+| **@fluentui/react-icons** ([npm](https://www.npmjs.com/package/@fluentui/react-icons)) | MIT | Microsoft's official Fluent System Icons as React components | **Adopt for the Fluent theme** (directly or via `@iconify-json/fluent`). |
+| **@material/material-color-utilities** ([repo](https://github.com/material-foundation/material-color-utilities)) | Apache-2.0 | Google's official M3 dynamic-color engine (HCT color space): full accessible palette from one seed color | **Adopt for the Material theme + "accent color" feature** — generate a correct, contrast-safe scheme from a single user-picked color. |
+| **shadcn/ui theming + registry format** ([docs](https://ui.shadcn.com/docs/theming)) | MIT | The token naming convention we already use; registry JSON format for distributing themes | **Borrow conventions.** Keeps us compatible with the whole shadcn theme ecosystem (tweakcn, community themes). |
+| **daisyUI 5** ([themes](https://daisyui.com/docs/themes/)) | MIT | Tailwind v4 plugin, 35 built-in `data-theme` themes, theme generator | **Skip as dependency** (brings its own component classes & token names, conflicts with ours) — but **copy its proven `data-theme` scoping pattern** and mine its themes for palette inspiration. |
+| **Radix Themes / Fluent UI React / MUI** | MIT | Full themed component libraries | **Skip.** Adopting any means rebuilding every screen on their components; theming ≠ replatforming. |
+| **Style Dictionary / Terrazzo (DTCG tokens)** ([style-dictionary](https://github.com/style-dictionary/style-dictionary)) | Apache-2.0 | Design-token build pipeline (W3C DTCG JSON → CSS/TS) | **Defer.** Right answer if themes later need to target more surfaces (email templates, PDFs, mobile). Overkill for one web app now. |
+| **theme-change, use-material-you, etc.** | MIT | Small helpers | **Skip** — trivial to do with next-themes/zustand. |
+
+---
+
+## 4. Example theme manifests (target fidelity)
+
+```jsonc
+// themes/fluent.json — "Microsoft" (Fluent 2 / Metro-Lumia heritage)
+{
+  "id": "fluent", "name": "Fluent",
+  "iconPack": "fluent",
+  "fonts": { "app": "selawik", "mono": "cascadia-code" },
+  "shape": { "radius": "0.25rem", "borderWidth": "1px", "density": "compact" },
+  "effects": { "glass": "acrylic", "glow": false, "motion": "subtle" },
+  "colors": {
+    "dark":  { "primary": "hsl(206 100% 50%)", "background": "hsl(0 0% 13%)", … },
+    "light": { "primary": "hsl(206 100% 42%)", "background": "hsl(0 0% 98%)", … }
+  }
+}
+
+// themes/material.json — "Google" (Material 3)
+{
+  "id": "material", "name": "Material",
+  "iconPack": "material-symbols",
+  "fonts": { "app": "roboto-flex", "mono": "roboto-mono" },
+  "shape": { "radius": "1.25rem", "borderWidth": "0px", "density": "comfortable" },
+  "effects": { "glass": "none", "glow": false, "elevation": "m3-shadows" },
+  "seedColor": "#6750A4"   // full scheme generated via material-color-utilities
+}
+```
+
+A build step (or runtime loader) compiles manifests → the `[data-theme="…"]`
+CSS blocks, so themes stay declarative data.
+
+---
+
+## 5. Phased implementation plan
+
+| Phase | Work | Outcome | Est. |
+|---|---|---|---|
+| **1. Token foundation** | Add `data-theme` scoping to `globals.css`; theme store (zustand) + no-flash script; tokenize `tech-glass`/`tech-glow`/scrollbar/shimmer; typography + density variables | Multi-theme capable app; RapidTool = default theme; 2–3 color-only presets imported from tweakcn prove the pipeline | ~2–3 days |
+| **2. Settings UI + persistence** | Settings → Appearance page (theme gallery, mode toggle, accent picker); `GET/PUT /api/settings/appearance`; org default + per-user override | Anyone can switch themes from Settings; admins set the company default | ~2 days |
+| **3. Icon abstraction** | `<Icon>` component + semantic registry for the ~115 used icons; codemod the 160 lucide import sites; wire pack selection to theme | Icon packs swap with the theme | ~3–4 days (mechanical, parallelizable) |
+| **4. Flagship themes** | Fluent theme (Selawik font, Fluent icons, squared radii, acrylic); Material theme (Roboto, Material Symbols, material-color-utilities scheme from seed, M3 elevation) | The "looks like Microsoft / looks like Google" demo | ~3–4 days |
+| **5. Component primitives (fidelity pass)** | Extract `<Button>/<Input>/<Badge>` from DESIGN_SYSTEM recipes; per-theme shape/state styling; update DESIGN_SYSTEM.md + agent rules | Deep per-theme personality; future themes get it for free | ~1 week, incremental |
+
+Phases 1–2 alone deliver user-visible theme switching. 3–4 deliver the
+Microsoft/Google vision. 5 is polish that can trail indefinitely.
+
+### Risks / notes
+
+- **Agent-authored UI**: `DESIGN_SYSTEM.md` must be updated in lock-step
+  (use `<Icon>`, never import lucide directly; never hardcode radii) or
+  agents will keep generating non-themeable code.
+- **Contrast safety**: every theme must pass WCAG AA in both modes;
+  material-color-utilities guarantees it for generated schemes, tweakcn
+  presets need a spot check.
+- **Charts/editors**: Monaco, xyflow, syntax highlighting have their own
+  theme systems — each needs a small per-theme mapping (mostly one-time).
+- **Bundle size**: fonts self-hosted via `next/font` (small subsets); icon
+  packs are tree-shaken per registry, not whole-set imports.

From ce38555b5c23b8ec95d3c507c6b5b178ec5b6a26 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 6 Aug 2026 06:13:16 +0000
Subject: [PATCH 02/10] feat(control-plane): theming engine with switchable
 design systems
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a theming engine that restyles the entire Control Plane — colours,
fonts, corner radius, effects and icon pack — from Settings > Appearance.

Four themes ship: RapidTool (the existing design, preserved token for
token), Fluent (Microsoft Fluent 2), Material (Google Material 3) and
Graphite (low-distraction monochrome).

Architecture
- A theme is DATA: a manifest in src/lib/theme/themes.ts. Adding one needs
  no component, CSS or Tailwind change.
- css.ts compiles manifests to html[data-theme="..."] custom-property
  scopes, inlined once in the head, so switching is a single attribute
  write with no fetch and no flash. The html qualifier puts them at
  specificity (0,1,1), above the globals.css fallback at (0,1,0), so
  generated themes win regardless of stylesheet order.
- Style (data-theme) and mode (the next-themes .light class) are
  independent axes; every theme defines both modes.
- A pre-paint boot script applies the stored preference before the first
  frame, mirroring how next-themes handles light/dark.
- The Tailwind radius scale now derives from --radius, so one value
  controls the app's roundness. At the default 0.75rem it resolves to
  exactly Tailwind's own defaults, leaving the shipped look unchanged.
- tech-glass/glow/transition and the scrollbar, shimmer and selection
  colours are token-driven, which also removes the .light re-tint special
  case: any theme's light mode now gets readable glass automatically.

Icons
- New <Icon name="Plus" /> renders from the active theme's pack. Lucide
  names are the shared vocabulary, so migrating a call site is a one-line
  edit and any of Lucide's ~1,600 names still works.
- Fluent and Material packs are pruned Iconify collections (187 icons,
  ~80 KB each) generated by scripts/build-icon-packs.mjs, which resolves
  every name against the real collections so a bad mapping fails loudly.
  They load lazily, only when a theme needs them, and render offline.
- All sidebar and landing-page glyphs migrated. Unmigrated call sites keep
  rendering Lucide, so the migration is incremental and never breaks.
- resolveIcon() stays hook-free: server components and iconSvg.ts's
  static-string rendering cannot run hooks.

Preferences
- Resolution order: member override, org default, built-in default.
- Personal choices are per-browser; the org default comes from
  /api/settings/appearance and is cached locally so it survives first
  paint. Admins can lock the org to a single theme.
- The route validates every field before forwarding — these values drive a
  CSS selector for the whole org, so a bad write breaks the app for
  everyone. Accent colours are restricted to plain colour literals and
  applied through the CSSOM, never concatenated into stylesheet text.
- Falls back to built-in defaults with orgManaged:false when the gateway
  has no appearance store, so the feature works without backend changes
  and the UI explains why org controls are unavailable.

Testing
- 37 unit tests over manifests, CSS generation and the icon registry,
  including a drift guard that parses globals.css and fails if its
  no-JavaScript fallback diverges from the default manifest.
- 14 browser tests asserting computed styles and real glyph swapping —
  the only place CSS cascade order can actually be verified.

Not included: shared Button/Input primitives and the remaining ~155 files
that still import lucide-react directly. Those already theme correctly for
colour, radius and font; they keep Lucide glyphs until migrated.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SyTtr9JJXCS8xNkzW5Fny5
---
 docs/THEMING_ENGINE_SCOPE.md                  |  53 +-
 workbench/control_plane/DESIGN_SYSTEM.md      | 133 +++-
 workbench/control_plane/e2e/theming.spec.ts   | 211 +++++
 workbench/control_plane/package-lock.json     |  99 +++
 workbench/control_plane/package.json          |   7 +-
 .../scripts/build-icon-packs.mjs              | 341 ++++++++
 .../src/app/api/settings/appearance/route.ts  | 164 ++++
 .../src/app/centers/[slug]/page.tsx           |  11 +-
 workbench/control_plane/src/app/globals.css   | 150 +++-
 workbench/control_plane/src/app/layout.tsx    |  48 +-
 workbench/control_plane/src/app/page.tsx      |   8 +-
 .../src/app/settings/appearance/page.tsx      | 569 +++++++++++++
 .../control_plane/src/components/AppShell.tsx |   5 +-
 .../control_plane/src/components/Icon.tsx     |  95 +++
 .../src/components/Providers.tsx              |   5 +
 .../control_plane/src/components/Sidebar.tsx  |  17 +-
 .../src/components/ThemeProvider.tsx          |  52 ++
 .../src/components/ThemeStyles.tsx            |  28 +
 workbench/control_plane/src/lib/nav.ts        |   9 +
 workbench/control_plane/src/lib/theme/boot.ts |  47 ++
 .../control_plane/src/lib/theme/css.test.ts   | 133 ++++
 workbench/control_plane/src/lib/theme/css.ts  | 140 ++++
 .../src/lib/theme/icon-data/fluent.json       |   1 +
 .../src/lib/theme/icon-data/material.json     |   1 +
 .../src/lib/theme/icon-data/registry.json     | 750 ++++++++++++++++++
 .../control_plane/src/lib/theme/icon-packs.ts |  87 ++
 .../src/lib/theme/icon-registry.test.ts       |  98 +++
 .../src/lib/theme/icon-registry.ts            |  48 ++
 .../control_plane/src/lib/theme/storage.ts    |  76 ++
 .../control_plane/src/lib/theme/store.ts      | 157 ++++
 .../src/lib/theme/themes.test.ts              | 123 +++
 .../control_plane/src/lib/theme/themes.ts     | 415 ++++++++++
 .../control_plane/src/lib/theme/types.ts      | 227 ++++++
 33 files changed, 4228 insertions(+), 80 deletions(-)
 create mode 100644 workbench/control_plane/e2e/theming.spec.ts
 create mode 100644 workbench/control_plane/scripts/build-icon-packs.mjs
 create mode 100644 workbench/control_plane/src/app/api/settings/appearance/route.ts
 create mode 100644 workbench/control_plane/src/app/settings/appearance/page.tsx
 create mode 100644 workbench/control_plane/src/components/Icon.tsx
 create mode 100644 workbench/control_plane/src/components/ThemeProvider.tsx
 create mode 100644 workbench/control_plane/src/components/ThemeStyles.tsx
 create mode 100644 workbench/control_plane/src/lib/theme/boot.ts
 create mode 100644 workbench/control_plane/src/lib/theme/css.test.ts
 create mode 100644 workbench/control_plane/src/lib/theme/css.ts
 create mode 100644 workbench/control_plane/src/lib/theme/icon-data/fluent.json
 create mode 100644 workbench/control_plane/src/lib/theme/icon-data/material.json
 create mode 100644 workbench/control_plane/src/lib/theme/icon-data/registry.json
 create mode 100644 workbench/control_plane/src/lib/theme/icon-packs.ts
 create mode 100644 workbench/control_plane/src/lib/theme/icon-registry.test.ts
 create mode 100644 workbench/control_plane/src/lib/theme/icon-registry.ts
 create mode 100644 workbench/control_plane/src/lib/theme/storage.ts
 create mode 100644 workbench/control_plane/src/lib/theme/store.ts
 create mode 100644 workbench/control_plane/src/lib/theme/themes.test.ts
 create mode 100644 workbench/control_plane/src/lib/theme/themes.ts
 create mode 100644 workbench/control_plane/src/lib/theme/types.ts

diff --git a/docs/THEMING_ENGINE_SCOPE.md b/docs/THEMING_ENGINE_SCOPE.md
index e483f805..56e08644 100644
--- a/docs/THEMING_ENGINE_SCOPE.md
+++ b/docs/THEMING_ENGINE_SCOPE.md
@@ -1,6 +1,7 @@
 # CommandCenter Theming Engine — Scoping Document
 
-**Status:** Scoping / research — no implementation yet
+**Status:** Phases 1–4 built and shipped. See "What was built" below; the rest
+of this document is the original research and remains the design rationale.
 **Scope:** `workbench/control_plane` (Next.js 16 · React 19 · Tailwind CSS v4)
 **Goal:** A theming engine that can restyle the entire Control Plane — colors,
 fonts, radii, shadows, icon packs, component "personality" — switchable on the
@@ -10,6 +11,56 @@ Material look.
 
 ---
 
+## 0. What was built
+
+Four themes, switchable from **Settings → Appearance**, each changing colours,
+fonts, corner radius, effects and the icon pack across every page:
+
+| Theme | Look | Icons | Fonts |
+|---|---|---|---|
+| **RapidTool** (default) | The original design, preserved token-for-token | Lucide | Geist |
+| **Fluent** | Microsoft Fluent 2 — 4px corners, acrylic, no glow | Fluent System Icons | Segoe UI → Inter |
+| **Material** | Google Material 3 — 16px corners, flat + elevation | Material Symbols Rounded | Roboto |
+| **Graphite** | Low-distraction monochrome, monospace headings | Lucide | Geist / Geist Mono |
+
+**How it works.** A theme is a manifest in `src/lib/theme/themes.ts` — colours
+for both modes, font stacks, shape, effects, icon pack. `css.ts` compiles every
+manifest to an `html[data-theme="…"]` custom-property scope, inlined once in
+the document head, so switching is a single attribute write with no fetch and
+no flash. *Style* (`data-theme`) and *mode* (the next-themes `.light` class)
+are independent axes. A pre-paint boot script applies the stored preference
+before the first frame.
+
+Adding a theme is a manifest entry — no component, CSS or Tailwind change.
+
+**Icons** go through `<Icon name="Plus" />`, using Lucide names as the shared
+vocabulary so migrating a call site is a one-line edit. Non-Lucide packs are
+pruned Iconify collections (~80 KB each, 187 icons) built by
+`scripts/build-icon-packs.mjs`, fetched lazily only when a theme needs them and
+rendered offline. All 28 sidebar glyphs swap; unmigrated call sites keep
+rendering Lucide, so the migration is incremental and never breaks.
+
+**Preferences** resolve member override → org default → built-in. Personal
+choices are per-browser; the org default comes from
+`GET/PUT /api/settings/appearance` and is cached locally so it survives first
+paint. Admins can lock the org to one theme. The route validates every field
+before forwarding, and falls back to built-in defaults with `orgManaged:
+false` when the gateway has no appearance store — so the feature works today
+without backend changes, and the UI says so rather than silently dropping edits.
+
+**Verified.** 37 unit tests (`src/lib/theme/*.test.ts`) plus 14 browser tests
+(`e2e/theming.spec.ts`) asserting computed styles and real glyph swapping —
+the only place CSS cascade order can actually be checked. A drift guard parses
+`globals.css` and fails if its no-JavaScript fallback diverges from the default
+manifest.
+
+**Not done (Phase 5).** Shared `<Button>` / `<Input>` primitives, and migrating
+the remaining ~155 files that still import `lucide-react` directly. Neither
+blocks anything: those call sites already theme correctly for colour, radius
+and font, and simply keep Lucide glyphs until migrated.
+
+---
+
 ## 1. What we already have (audit)
 
 The codebase is unusually well-positioned for this. The hard prerequisite for
diff --git a/workbench/control_plane/DESIGN_SYSTEM.md b/workbench/control_plane/DESIGN_SYSTEM.md
index b029d576..e051a576 100644
--- a/workbench/control_plane/DESIGN_SYSTEM.md
+++ b/workbench/control_plane/DESIGN_SYSTEM.md
@@ -5,10 +5,37 @@ agent-generated UI MUST follow these conventions.
 
 ---
 
+## The design system is themeable
+
+The Control Plane ships several themes — RapidTool (default), Fluent
+(Microsoft), Material (Google) and Graphite — and members switch between them
+in **Settings → Appearance**. A theme changes colours, fonts, corner radius,
+effects **and the icon pack**, all at once, across every page.
+
+This works only because components describe intent (`bg-primary`,
+`rounded-lg`, `<Icon name="Plus">`) rather than appearance (`bg-[#0ea5e9]`,
+`rounded-[12px]`, `<Plus />`). Hardcoding any visual value opts that element
+out of theming: it will look correct on the default theme and wrong on every
+other one.
+
+**The three rules that keep the app themeable:**
+
+1. **Never hardcode a colour.** Use the semantic tokens below.
+2. **Never hardcode a radius, blur, shadow or transition.** Use `rounded-*`,
+   `tech-glass`, `tech-elevated`, `tech-transition`.
+3. **Never import from `lucide-react` in a component.** Use
+   `<Icon name="Plus" />` from `@/components/Icon`.
+
+Themes are data: `src/lib/theme/themes.ts`. Adding one is a manifest entry —
+no component, CSS or Tailwind change. See "Theming engine" at the end of this
+document.
+
+---
+
 ## Color Tokens (HSL — Tailwind CSS v4)
 
-Defined in `src/app/globals.css` as CSS custom properties. Always use the
-semantic token name, never a raw hex value.
+Every theme supplies a full set of these; the table shows the default theme's
+values. Always use the semantic token name, never a raw hex value.
 
 | Token | Dark (default) | Light (.light) | Usage |
 |---|---|---|---|
@@ -137,16 +164,47 @@ Interactive cards (agent tiles, provider cards, API cards) use:
 
 ## Icons
 
-Use **lucide-react** exclusively. Import icons directly:
+Use the **`<Icon>`** component. It renders the glyph from whichever pack the
+active theme asks for — Lucide, Fluent System Icons, or Material Symbols.
 
 ```tsx
-import { Zap, Plus, RefreshCw, X, Loader2 } from "lucide-react";
+import Icon from "@/components/Icon";
+
+<Icon name="Plus" size={16} />
+<Icon name="AlertTriangle" size={14} className="text-warning" />
+```
+
+**Lucide names are the vocabulary.** `name` is always a Lucide component name
+(`Plus`, `Trash2`, `MessageCircle`); other packs map onto those names. Any of
+Lucide's ~1,600 names works — one without a mapping simply renders the Lucide
+glyph on every theme, which is a safe default, not an error.
+
+Migrating an existing call site is a one-line change:
+
+```diff
+- import { Plus } from "lucide-react";
++ import Icon from "@/components/Icon";
+- <Plus size={16} />
++ <Icon name="Plus" size={16} />
 ```
 
+**Do not import from `lucide-react` in a component.** A direct import pins that
+glyph to Lucide, so it stays Lucide-shaped while everything around it turns
+Fluent or Material.
+
+Two deliberate exceptions, both because they cannot run React hooks:
+`resolveIcon()` in `@/lib/icons` (used by server components) and
+`iconSvg.ts` (renders to a static SVG string for the HTML sandbox).
+
 Common icon sizes:
-- Inline with text: `w-3.5 h-3.5` or `w-4 h-4`
-- Standalone buttons: `w-4 h-4` or `w-5 h-5`
-- Card/tile icons: `w-5 h-5`
+- Inline with text: `size={14}` or `size={16}`
+- Standalone buttons: `size={16}` or `size={18}`
+- Card/tile icons: `size={20}`
+
+To add a mapping for a new icon, add it to `MAP` in
+`scripts/build-icon-packs.mjs` and run `npm run build:icons`. The script
+resolves candidates against the real collections, so a name that does not
+exist fails loudly rather than shipping a blank square.
 
 ---
 
@@ -171,12 +229,17 @@ Every page follows this structure:
 
 ## Tech Utilities (from globals.css)
 
+All of these are token-driven, so their behaviour changes with the theme — a
+flat theme like Material renders `tech-glass` opaque and `tech-glow` invisible
+rather than needing a separate code path.
+
 | Class | Purpose |
 |---|---|
-| `tech-transition` | Smooth 200ms cubic-bezier transition on all properties |
-| `tech-glass` | Frosted glass panel (backdrop-blur + semi-transparent bg) |
-| `tech-glass-subtle` | Softer glass effect |
-| `tech-glow` | Primary-color box-shadow glow |
+| `tech-transition` | Themed transition on all properties (`--motion-duration` / `--motion-easing`) |
+| `tech-glass` | Frosted panel — blur and opacity from `--glass-blur` / `--glass-opacity` |
+| `tech-glass-subtle` | Same material at higher opacity, for modals and drawers over live content |
+| `tech-glow` | Primary-colour glow, scaled by `--glow-strength` (0 disables it) |
+| `tech-elevated` | Elevation shadow from `--elevation` — how flat themes express depth |
 | `pb-safe` / `pt-safe` | iOS safe-area padding |
 
 ---
@@ -197,9 +260,53 @@ Every page follows this structure:
 4. **Use consistent spacing.** Page-level padding is `px-4 sm:px-6`.
    Content padding is `p-4`. Gaps between grid items are `gap-3`.
 
-5. **Support dark + light themes.** All color usage must work with both
-   `:root` (dark) and `.light` class themes. Test with ThemeToggle.
+5. **Support every theme, in both modes.** Colour usage must work in dark and
+   light, and must not assume the default theme's shape or effects. Check a
+   new surface against Fluent (square corners, no glow) and Material (round
+   corners, flat) as well as the default — those two catch nearly every
+   hardcoded value.
 
 6. **Mobile-responsive.** Use `sm:` breakpoint prefixes. Side panels slide
    up from the bottom on mobile (`sm:hidden` + fixed bottom sheet).
    Grid columns: `grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5`.
+
+7. **Use `<Icon>`, never a direct `lucide-react` import.** See Icons above.
+
+---
+
+## Theming engine
+
+Where things live:
+
+| File | Role |
+|---|---|
+| `src/lib/theme/themes.ts` | The themes themselves. **Add a theme here and nowhere else.** |
+| `src/lib/theme/types.ts` | Token vocabulary — what a theme is allowed to set |
+| `src/lib/theme/css.ts` | Manifests → `html[data-theme="…"]` CSS scopes |
+| `src/lib/theme/store.ts` | Active theme, density, accent; org default vs member override |
+| `src/lib/theme/boot.ts` | Pre-paint script that applies the stored theme (no flash) |
+| `src/components/Icon.tsx` | The themed icon primitive |
+| `scripts/build-icon-packs.mjs` | Regenerates the pruned icon packs (`npm run build:icons`) |
+| `src/app/settings/appearance/` | The Settings UI |
+
+**Two independent axes.** *Style* (which theme) lives on
+`<html data-theme="…">`; *mode* (dark/light) stays on the `.light` / `.dark`
+class managed by next-themes. Every theme defines both modes, so the axes never
+interact. Structural tokens — radius, fonts, effects — are emitted once on the
+theme's base scope and inherited by its light scope.
+
+**Why `globals.css` still contains the default theme's values.** Those
+`:root` / `.light` blocks are the no-JavaScript fallback. The generated scopes
+outrank them on specificity (0,1,1 vs 0,1,0), so they never apply in a normal
+session. They must stay identical to the `rapidtool` manifest —
+`src/lib/theme/themes.test.ts` parses the stylesheet and fails if they drift.
+**Change how the app looks by editing the manifest, not `globals.css`.**
+
+**Preference resolution:** member override → organisation default → built-in
+default. Members' choices are per-browser (localStorage); the org default is
+served by the gateway and cached locally so it survives the first paint. An
+admin can lock the org to one theme by turning off personal overrides.
+
+Coverage: `src/lib/theme/*.test.ts` (manifests, CSS generation, icon registry)
+and `e2e/theming.spec.ts` (computed styles and real glyph swapping in a
+browser — the only place cascade order can actually be verified).
diff --git a/workbench/control_plane/e2e/theming.spec.ts b/workbench/control_plane/e2e/theming.spec.ts
new file mode 100644
index 00000000..a83bd850
--- /dev/null
+++ b/workbench/control_plane/e2e/theming.spec.ts
@@ -0,0 +1,211 @@
+import { expect, test, type Page } from "@playwright/test";
+
+/**
+ * The theming engine, end to end.
+ *
+ * Unit tests cover the manifests and the generated CSS as text. What they
+ * cannot check is the part that actually decides whether a theme applies: CSS
+ * specificity and cascade order in a real browser. `globals.css` keeps a
+ * fallback copy of the default theme at `:root` (0,1,0) and the generated
+ * scopes sit at `html[data-theme=…]` (0,1,1) — if that relationship ever
+ * inverts, every theme silently stops working while every unit test still
+ * passes. These tests read computed style, so they see what the user sees.
+ *
+ * They also pin the two axes as independent: switching colour mode must not
+ * disturb the active theme's shape, type or effects.
+ */
+
+const readVar = (page: Page, prop: string) =>
+  page.evaluate(
+    (p) => getComputedStyle(document.documentElement).getPropertyValue(p).trim(),
+    prop,
+  );
+
+/** Load the app with a theme already stored, as a returning member would. */
+async function loadWithTheme(page: Page, themeId: string, mode: "dark" | "light" = "dark") {
+  await page.goto("/");
+  await page.evaluate(
+    ([t, m]) => {
+      localStorage.setItem("cc-theme", t);
+      localStorage.setItem("theme", m);
+    },
+    [themeId, mode],
+  );
+  await page.goto("/");
+}
+
+/** Split the page's glyphs by which library drew them. Lucide self-labels. */
+const countGlyphs = (page: Page) =>
+  page.evaluate(() => {
+    const svgs = [...document.querySelectorAll("svg")];
+    return {
+      lucide: svgs.filter((s) => s.getAttribute("class")?.includes("lucide")).length,
+      themed: svgs.filter((s) => !s.getAttribute("class")?.includes("lucide")).length,
+    };
+  });
+
+test.describe("theme tokens", () => {
+  test("the server renders a theme scope before any script runs", async ({ page }) => {
+    await page.goto("/");
+    // Without this the first paint would be unstyled for anyone with
+    // JavaScript disabled or still loading.
+    await expect(page.locator("html")).toHaveAttribute("data-theme", "rapidtool");
+    expect(await readVar(page, "--primary")).toBe("hsl(198 89% 50%)");
+    expect(await readVar(page, "--radius")).toBe("0.75rem");
+  });
+
+  test("a stored theme is applied before first paint", async ({ page }) => {
+    await loadWithTheme(page, "material");
+    await expect(page.locator("html")).toHaveAttribute("data-theme", "material");
+    expect(await readVar(page, "--radius")).toBe("1rem");
+  });
+
+  test("an unknown stored theme falls back instead of leaving the app unstyled", async ({
+    page,
+  }) => {
+    await loadWithTheme(page, "theme-that-was-deleted");
+    await expect(page.locator("html")).toHaveAttribute("data-theme", "rapidtool");
+    expect(await readVar(page, "--primary")).toBe("hsl(198 89% 50%)");
+  });
+
+  test("switching theme re-resolves colour, shape and effect tokens together", async ({
+    page,
+  }) => {
+    await loadWithTheme(page, "fluent");
+    expect(await readVar(page, "--primary")).toBe("hsl(197 100% 65%)");
+    expect(await readVar(page, "--radius")).toBe("0.25rem");
+    expect(await readVar(page, "--glass-blur")).toBe("30px");
+    // Fluent has no glow; a zero here is what switches `.tech-glow` off.
+    expect(await readVar(page, "--glow-strength")).toBe("0");
+
+    await loadWithTheme(page, "material");
+    expect(await readVar(page, "--primary")).toBe("hsl(258 100% 87%)");
+    expect(await readVar(page, "--radius")).toBe("1rem");
+    // Material is flat: depth comes from --elevation, not blur.
+    expect(await readVar(page, "--glass-blur")).toBe("0px");
+  });
+
+  test("the theme's font stack reaches the body", async ({ page }) => {
+    await loadWithTheme(page, "material");
+    const font = await page.evaluate(() => getComputedStyle(document.body).fontFamily);
+    expect(font).toMatch(/Roboto/i);
+
+    await loadWithTheme(page, "fluent");
+    const fluentFont = await page.evaluate(() => getComputedStyle(document.body).fontFamily);
+    expect(fluentFont).toContain("Segoe UI");
+  });
+
+  test("the whole Tailwind radius scale follows --radius", async ({ page }) => {
+    await loadWithTheme(page, "fluent");
+    const radii = await page.evaluate(() => {
+      const el = document.createElement("div");
+      document.body.appendChild(el);
+      const at = (cls: string) => {
+        el.className = cls;
+        return getComputedStyle(el).borderRadius;
+      };
+      const out = { sm: at("rounded-sm"), lg: at("rounded-lg"), xl: at("rounded-xl") };
+      el.remove();
+      return out;
+    });
+    expect(radii.lg).toBe("4px");
+    expect(radii.xl).toBe("4px");
+    // `rounded-sm` is --radius minus 4px; at Fluent's 0.25rem that is zero,
+    // not a negative value the browser would discard.
+    expect(radii.sm).toBe("0px");
+  });
+});
+
+test.describe("colour mode is independent of theme", () => {
+  test("light mode swaps colours but keeps the theme's structure", async ({ page }) => {
+    await loadWithTheme(page, "fluent", "light");
+    expect(await readVar(page, "--primary")).toBe("hsl(206 100% 42%)");
+    expect(await readVar(page, "--background")).toBe("hsl(0 0% 95%)");
+    // Structural tokens live only on the base scope; light inherits them.
+    expect(await readVar(page, "--radius")).toBe("0.25rem");
+
+    await loadWithTheme(page, "fluent", "dark");
+    expect(await readVar(page, "--primary")).toBe("hsl(197 100% 65%)");
+  });
+});
+
+test.describe("icon packs", () => {
+  test("a lucide theme draws every glyph with lucide", async ({ page }) => {
+    await loadWithTheme(page, "rapidtool");
+    const glyphs = await countGlyphs(page);
+    expect(glyphs.lucide).toBeGreaterThan(20);
+    expect(glyphs.themed).toBe(0);
+  });
+
+  test("the Fluent theme swaps the chrome onto Fluent System Icons", async ({ page }) => {
+    await loadWithTheme(page, "fluent");
+    // The pack is a lazily-fetched chunk, so the swap lands a tick after paint.
+    await expect
+      .poll(async () => (await countGlyphs(page)).themed, { timeout: 15_000 })
+      .toBeGreaterThan(20);
+
+    expect((await countGlyphs(page)).lucide).toBe(0);
+
+    const glyph = await page.evaluate(() => {
+      const svg = [...document.querySelectorAll("svg")].find(
+        (s) => !s.getAttribute("class")?.includes("lucide"),
+      );
+      return { viewBox: svg?.getAttribute("viewBox"), hasPath: !!svg?.querySelector("path") };
+    });
+    // Real geometry on Fluent's 20px UI grid — not an empty placeholder svg.
+    expect(glyph.hasPath).toBe(true);
+    expect(glyph.viewBox).toBe("0 0 20 20");
+  });
+
+  test("the Material theme swaps the chrome onto Material Symbols", async ({ page }) => {
+    await loadWithTheme(page, "material");
+    await expect
+      .poll(async () => (await countGlyphs(page)).themed, { timeout: 15_000 })
+      .toBeGreaterThan(20);
+
+    const viewBox = await page.evaluate(
+      () =>
+        [...document.querySelectorAll("svg")]
+          .find((s) => !s.getAttribute("class")?.includes("lucide"))
+          ?.getAttribute("viewBox"),
+    );
+    expect(viewBox).toBe("0 0 24 24");
+  });
+
+  test("returning to a lucide theme restores lucide glyphs", async ({ page }) => {
+    await loadWithTheme(page, "graphite");
+    const glyphs = await countGlyphs(page);
+    expect(glyphs.lucide).toBeGreaterThan(20);
+    expect(glyphs.themed).toBe(0);
+  });
+});
+
+test.describe("user preferences", () => {
+  test("density scales the root font size", async ({ page }) => {
+    await page.goto("/");
+    await page.evaluate(() => localStorage.setItem("cc-density", "compact"));
+    await page.goto("/");
+    // 16px browser default × the compact scale of 0.92.
+    expect(await page.evaluate(() => getComputedStyle(document.documentElement).fontSize)).toBe(
+      "14.72px",
+    );
+  });
+
+  test("an accent override replaces the theme's primary", async ({ page }) => {
+    await page.goto("/");
+    await page.evaluate(() => localStorage.setItem("cc-accent", "rgb(255, 0, 0)"));
+    await page.goto("/");
+    expect(await readVar(page, "--primary")).toBe("rgb(255, 0, 0)");
+  });
+
+  test("a malformed stored accent is ignored rather than applied", async ({ page }) => {
+    await page.goto("/");
+    await page.evaluate(() =>
+      localStorage.setItem("cc-accent", "red; background: url(https://evil.test/x)"),
+    );
+    await page.goto("/");
+    // The boot script writes through setProperty, so the CSSOM rejects the
+    // value outright; nothing is injected into the stylesheet.
+    expect(await readVar(page, "--primary")).toBe("hsl(198 89% 50%)");
+  });
+});
diff --git a/workbench/control_plane/package-lock.json b/workbench/control_plane/package-lock.json
index 11101776..621bb992 100644
--- a/workbench/control_plane/package-lock.json
+++ b/workbench/control_plane/package-lock.json
@@ -8,6 +8,7 @@
       "name": "control_plane",
       "version": "0.1.0",
       "dependencies": {
+        "@iconify/react": "^6.0.2",
         "@monaco-editor/react": "^4.7.0",
         "@tiptap/extension-image": "^3.29.2",
         "@tiptap/extension-table": "^3.29.2",
@@ -41,6 +42,9 @@
         "zustand": "^5.0.14"
       },
       "devDependencies": {
+        "@iconify-json/fluent": "^1.2.54",
+        "@iconify-json/material-symbols": "^1.2.88",
+        "@iconify/utils": "^3.1.4",
         "@playwright/test": "^1.60.0",
         "@tailwindcss/postcss": "^4",
         "@tailwindcss/typography": "^0.5.19",
@@ -67,6 +71,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@antfu/install-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
+      "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^1.3.0",
+        "tinyexec": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@antfu/install-pkg/node_modules/tinyexec": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.3.0.tgz",
+      "integrity": "sha512-QKAl9m8gWWGHV8jZcPeym6j+XULi6tOf1mT83WYJ4Lk2ytW/uwAWkrP0uFsdoYMdueVJ0qs26wZ+23xeB4ibNQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@auth/core": {
       "version": "0.41.2",
       "resolved": "https://registry.npmjs.org/@auth/core/-/core-0.41.2.tgz",
@@ -1042,6 +1070,59 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@iconify-json/fluent": {
+      "version": "1.2.54",
+      "resolved": "https://registry.npmjs.org/@iconify-json/fluent/-/fluent-1.2.54.tgz",
+      "integrity": "sha512-5qtBUKoCZHK1+GVauwfpNM8lBuay8mOTWXBxgh83A/aDXybs9ROlGQUy70v01bpARg4K3+tenAB7DjY//y2EHg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify-json/material-symbols": {
+      "version": "1.2.88",
+      "resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.2.88.tgz",
+      "integrity": "sha512-lx5EwRkKckCkczozRrKiyrtD+K2/tIn+/kf9HFrUez/6DGMQKb2sI7b+/agN7jItLvmY/VYUajs/ZcEjj6xiaA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/react": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@iconify/react/-/react-6.0.2.tgz",
+      "integrity": "sha512-SMmC2sactfpJD427WJEDN6PMyznTFMhByK9yLW0gOTtnjzzbsi/Ke/XqsumsavFPwNiXs8jSiYeZTmLCLwO+Fg==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.1.4.tgz",
+      "integrity": "sha512-b1S7B1k9ohZ+iNTi2ATxbRYG9fTrJmUT0rc46bvVnNxqNRGW7dyo/vRREwyniI5IRN2RSJHDcm+s3BjWrSAjHw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.1.0",
+        "@iconify/types": "^2.0.0",
+        "import-meta-resolve": "^4.2.0"
+      }
+    },
     "node_modules/@img/colour": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
@@ -6987,6 +7068,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/import-meta-resolve": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz",
+      "integrity": "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -9638,6 +9730,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/package-manager-detector": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.8.0.tgz",
+      "integrity": "sha512-yQA4H19AmPEoMUeavPMDIe1higySl/gH/yaQrkT/s07Qp+7pp2hYz30N3z2l5BkjVkF9Ow6o0wjJamm2y7Sn0A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
diff --git a/workbench/control_plane/package.json b/workbench/control_plane/package.json
index 3d87c05c..d7fc3b7c 100644
--- a/workbench/control_plane/package.json
+++ b/workbench/control_plane/package.json
@@ -9,9 +9,11 @@
     "lint": "eslint",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:e2e": "npm run build && playwright test"
+    "test:e2e": "npm run build && playwright test",
+    "build:icons": "node scripts/build-icon-packs.mjs"
   },
   "dependencies": {
+    "@iconify/react": "^6.0.2",
     "@monaco-editor/react": "^4.7.0",
     "@tiptap/extension-image": "^3.29.2",
     "@tiptap/extension-table": "^3.29.2",
@@ -45,6 +47,9 @@
     "zustand": "^5.0.14"
   },
   "devDependencies": {
+    "@iconify-json/fluent": "^1.2.54",
+    "@iconify-json/material-symbols": "^1.2.88",
+    "@iconify/utils": "^3.1.4",
     "@playwright/test": "^1.60.0",
     "@tailwindcss/postcss": "^4",
     "@tailwindcss/typography": "^0.5.19",
diff --git a/workbench/control_plane/scripts/build-icon-packs.mjs b/workbench/control_plane/scripts/build-icon-packs.mjs
new file mode 100644
index 00000000..61c08f54
--- /dev/null
+++ b/workbench/control_plane/scripts/build-icon-packs.mjs
@@ -0,0 +1,341 @@
+/**
+ * Builds the offline icon-pack data used by `<Icon>`.
+ *
+ * The theming engine speaks Lucide names as its canonical icon vocabulary
+ * (see src/lib/theme/icon-registry.ts). This script resolves each of those
+ * names onto a real icon in the Fluent and Material Symbols collections, then
+ * writes out:
+ *
+ *   src/lib/theme/icon-data/<pack>.json  — a PRUNED Iconify collection holding
+ *                                          only the icons we actually map
+ *
+ * Pruning matters: the full Fluent collection is 20k icons and the full
+ * Material Symbols one 16k. We ship the ~150 we use, so the packs cost a few
+ * tens of KB instead of several megabytes, and render with no network calls.
+ *
+ * Run with: npm run build:icons
+ */
+
+import { readFileSync, writeFileSync, mkdirSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { getIcons } from "@iconify/utils";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const ROOT = resolve(HERE, "..");
+const OUT_DIR = resolve(ROOT, "src/lib/theme/icon-data");
+
+/**
+ * Candidate base names per pack, in preference order. The first candidate that
+ * exists in the collection wins, which keeps this file readable while still
+ * failing loudly when a concept has no equivalent in a pack.
+ *
+ * Keys are Lucide component names — the vocabulary every call site already
+ * uses.
+ */
+const MAP = {
+  // ── Status / feedback ────────────────────────────────────────────────────
+  Loader2: { fluent: ["spinner-ios"], material: ["progress-activity"] },
+  Loader: { fluent: ["spinner-ios"], material: ["progress-activity"] },
+  Check: { fluent: ["checkmark"], material: ["check"] },
+  CheckCircle2: { fluent: ["checkmark-circle"], material: ["check-circle"] },
+  CheckCircle: { fluent: ["checkmark-circle"], material: ["check-circle"] },
+  X: { fluent: ["dismiss"], material: ["close"] },
+  XCircle: { fluent: ["dismiss-circle"], material: ["cancel"] },
+  AlertTriangle: { fluent: ["warning"], material: ["warning"] },
+  TriangleAlert: { fluent: ["warning"], material: ["warning"] },
+  AlertCircle: { fluent: ["error-circle"], material: ["error"] },
+  Info: { fluent: ["info"], material: ["info"] },
+  HelpCircle: { fluent: ["question-circle"], material: ["help"] },
+  Bell: { fluent: ["alert"], material: ["notifications"] },
+  Activity: { fluent: ["pulse"], material: ["monitoring", "timeline"] },
+
+  // ── Editing / actions ────────────────────────────────────────────────────
+  Plus: { fluent: ["add"], material: ["add"] },
+  Minus: { fluent: ["subtract"], material: ["remove"] },
+  Trash2: { fluent: ["delete"], material: ["delete"] },
+  Trash: { fluent: ["delete"], material: ["delete"] },
+  Pencil: { fluent: ["edit"], material: ["edit"] },
+  PenLine: { fluent: ["edit-line-horizontal-3", "edit"], material: ["edit"] },
+  Edit: { fluent: ["edit"], material: ["edit"] },
+  Save: { fluent: ["save"], material: ["save"] },
+  Copy: { fluent: ["copy"], material: ["content-copy"] },
+  Download: { fluent: ["arrow-download"], material: ["download"] },
+  Upload: { fluent: ["arrow-upload"], material: ["upload"] },
+  Undo2: { fluent: ["arrow-undo"], material: ["undo"] },
+  RotateCcw: { fluent: ["arrow-counterclockwise", "arrow-undo"], material: ["undo", "refresh"] },
+  RefreshCw: { fluent: ["arrow-sync"], material: ["refresh"] },
+  RefreshCcw: { fluent: ["arrow-sync"], material: ["refresh"] },
+  Search: { fluent: ["search"], material: ["search"] },
+  Filter: { fluent: ["filter"], material: ["filter-alt"] },
+  SlidersHorizontal: { fluent: ["options"], material: ["tune"] },
+  Settings: { fluent: ["settings"], material: ["settings"] },
+  Settings2: { fluent: ["settings"], material: ["tune"] },
+  Share2: { fluent: ["share"], material: ["share"] },
+  Send: { fluent: ["send"], material: ["send"] },
+  Eye: { fluent: ["eye"], material: ["visibility"] },
+  EyeOff: { fluent: ["eye-off"], material: ["visibility-off"] },
+
+  // ── Navigation / arrows ──────────────────────────────────────────────────
+  ChevronDown: { fluent: ["chevron-down"], material: ["keyboard-arrow-down"] },
+  ChevronUp: { fluent: ["chevron-up"], material: ["keyboard-arrow-up"] },
+  ChevronLeft: { fluent: ["chevron-left"], material: ["keyboard-arrow-left"] },
+  ChevronRight: { fluent: ["chevron-right"], material: ["keyboard-arrow-right"] },
+  ArrowLeft: { fluent: ["arrow-left"], material: ["arrow-back"] },
+  ArrowRight: { fluent: ["arrow-right"], material: ["arrow-forward"] },
+  ArrowUp: { fluent: ["arrow-up"], material: ["arrow-upward"] },
+  ArrowDown: { fluent: ["arrow-down"], material: ["arrow-downward"] },
+  CornerDownLeft: { fluent: ["arrow-enter-left", "arrow-enter"], material: ["subdirectory-arrow-left"] },
+  ExternalLink: { fluent: ["open"], material: ["open-in-new"] },
+  MoreHorizontal: { fluent: ["more-horizontal"], material: ["more-horiz"] },
+  MoreVertical: { fluent: ["more-vertical"], material: ["more-vert"] },
+  Menu: { fluent: ["navigation"], material: ["menu"] },
+  PanelLeft: { fluent: ["panel-left"], material: ["view-sidebar"] },
+  Maximize2: { fluent: ["arrow-expand"], material: ["open-in-full"] },
+  Minimize2: { fluent: ["arrow-minimize"], material: ["close-fullscreen"] },
+
+  // ── Communication ────────────────────────────────────────────────────────
+  Mail: { fluent: ["mail"], material: ["mail"] },
+  MailOpen: { fluent: ["mail-read"], material: ["drafts"] },
+  MailMinus: { fluent: ["mail-dismiss"], material: ["unsubscribe"] },
+  Inbox: { fluent: ["mail-inbox"], material: ["inbox"] },
+  Reply: { fluent: ["arrow-reply"], material: ["reply"] },
+  ReplyAll: { fluent: ["arrow-reply-all"], material: ["reply-all"] },
+  Forward: { fluent: ["arrow-forward"], material: ["forward"] },
+  MessageCircle: { fluent: ["chat"], material: ["chat"] },
+  MessageSquare: { fluent: ["chat"], material: ["chat-bubble"] },
+  MessagesSquare: { fluent: ["chat-multiple"], material: ["forum"] },
+  Phone: { fluent: ["call"], material: ["call"] },
+  Paperclip: { fluent: ["attach"], material: ["attach-file"] },
+  AtSign: { fluent: ["mention"], material: ["alternate-email"] },
+
+  // ── People ───────────────────────────────────────────────────────────────
+  User: { fluent: ["person"], material: ["person"] },
+  Users: { fluent: ["people"], material: ["group"] },
+  UserPlus: { fluent: ["person-add"], material: ["person-add"] },
+  UserMinus: { fluent: ["person-subtract"], material: ["person-remove"] },
+  Building2: { fluent: ["building"], material: ["apartment"] },
+
+  // ── Files / content ──────────────────────────────────────────────────────
+  File: { fluent: ["document"], material: ["draft"] },
+  FileText: { fluent: ["document-text"], material: ["description"] },
+  FileCode: { fluent: ["document-javascript", "code"], material: ["code"] },
+  FileSpreadsheet: { fluent: ["document-table"], material: ["table-chart"] },
+  FileImage: { fluent: ["image"], material: ["image"] },
+  Folder: { fluent: ["folder"], material: ["folder"] },
+  FolderOpen: { fluent: ["folder-open"], material: ["folder-open"] },
+  FolderInput: { fluent: ["folder-arrow-right"], material: ["drive-file-move"] },
+  FolderKanban: { fluent: ["board"], material: ["view-kanban"] },
+  Archive: { fluent: ["archive"], material: ["archive"] },
+  ArchiveRestore: { fluent: ["archive-arrow-back"], material: ["unarchive"] },
+  Image: { fluent: ["image"], material: ["image"] },
+  BookOpen: { fluent: ["book-open"], material: ["menu-book"] },
+  StickyNote: { fluent: ["note"], material: ["sticky-note-2"] },
+  ClipboardCheck: { fluent: ["clipboard-checkmark"], material: ["assignment-turned-in"] },
+
+  // ── Layout ───────────────────────────────────────────────────────────────
+  LayoutGrid: { fluent: ["grid"], material: ["grid-view"] },
+  LayoutList: { fluent: ["apps-list"], material: ["view-list"] },
+  LayoutDashboard: { fluent: ["board"], material: ["dashboard"] },
+  Columns3: { fluent: ["column-triple"], material: ["view-column"] },
+  ListChecks: { fluent: ["task-list-square-ltr"], material: ["checklist"] },
+  ListTree: { fluent: ["text-bullet-list-tree"], material: ["account-tree"] },
+  CheckSquare: { fluent: ["checkbox-checked"], material: ["check-box"] },
+  Square: { fluent: ["square"], material: ["square"] },
+  Circle: { fluent: ["circle"], material: ["circle"] },
+
+  // ── Time ─────────────────────────────────────────────────────────────────
+  Clock: { fluent: ["clock"], material: ["schedule"] },
+  Timer: { fluent: ["timer"], material: ["timer"] },
+  History: { fluent: ["history"], material: ["history"] },
+  Calendar: { fluent: ["calendar"], material: ["calendar-today"] },
+  CalendarDays: { fluent: ["calendar-ltr"], material: ["calendar-month"] },
+  CalendarClock: { fluent: ["calendar-clock"], material: ["event-upcoming", "schedule"] },
+  CalendarPlus: { fluent: ["calendar-add"], material: ["calendar-add-on"] },
+
+  // ── Media ────────────────────────────────────────────────────────────────
+  Play: { fluent: ["play"], material: ["play-arrow"] },
+  Pause: { fluent: ["pause"], material: ["pause"] },
+  Mic: { fluent: ["mic"], material: ["mic"] },
+  MicOff: { fluent: ["mic-off"], material: ["mic-off"] },
+  Video: { fluent: ["video"], material: ["videocam"] },
+  Camera: { fluent: ["camera"], material: ["photo-camera"] },
+  Volume2: { fluent: ["speaker-2"], material: ["volume-up"] },
+  Radio: { fluent: ["radio-button"], material: ["radio-button-checked"] },
+
+  // ── Systems / infra ──────────────────────────────────────────────────────
+  Zap: { fluent: ["flash"], material: ["bolt"] },
+  Cloud: { fluent: ["cloud"], material: ["cloud"] },
+  HardDrive: { fluent: ["hard-drive"], material: ["hard-drive", "storage"] },
+  Server: { fluent: ["server"], material: ["dns"] },
+  Database: { fluent: ["database"], material: ["database"] },
+  Cpu: { fluent: ["developer-board"], material: ["memory"] },
+  Terminal: { fluent: ["window-console", "code"], material: ["terminal"] },
+  Code: { fluent: ["code"], material: ["code"] },
+  GitBranch: { fluent: ["branch"], material: ["fork-right"] },
+  Workflow: { fluent: ["flowchart"], material: ["account-tree"] },
+  Plug: { fluent: ["plug-connected"], material: ["power"] },
+  Power: { fluent: ["power"], material: ["power-settings-new"] },
+  Puzzle: { fluent: ["puzzle-piece"], material: ["extension"] },
+  Boxes: { fluent: ["cube-multiple", "cube"], material: ["widgets"] },
+  Package: { fluent: ["box"], material: ["inventory-2"] },
+  Layers: { fluent: ["layer"], material: ["layers"] },
+  Globe: { fluent: ["globe"], material: ["public"] },
+  Link2: { fluent: ["link"], material: ["link"] },
+  Link: { fluent: ["link"], material: ["link"] },
+  Wrench: { fluent: ["wrench"], material: ["build"] },
+  FlaskConical: { fluent: ["beaker"], material: ["science"] },
+  Rocket: { fluent: ["rocket"], material: ["rocket-launch"] },
+  Bot: { fluent: ["bot"], material: ["smart-toy"] },
+  Brain: { fluent: ["brain-circuit"], material: ["psychology"] },
+  Sparkles: { fluent: ["sparkle"], material: ["auto-awesome"] },
+  Wand2: { fluent: ["wand"], material: ["auto-fix-high"] },
+  Lightbulb: { fluent: ["lightbulb"], material: ["lightbulb"] },
+  Target: { fluent: ["target"], material: ["target", "my-location"] },
+  TrendingUp: { fluent: ["arrow-trending-lines", "arrow-trending"], material: ["trending-up"] },
+  BarChart3: { fluent: ["data-bar-vertical"], material: ["bar-chart"] },
+  Waves: { fluent: ["wifi-1", "pulse"], material: ["waves"] },
+  Wind: { fluent: ["weather-squalls"], material: ["air"] },
+
+  // ── Security ─────────────────────────────────────────────────────────────
+  Lock: { fluent: ["lock-closed"], material: ["lock"] },
+  Unlock: { fluent: ["lock-open"], material: ["lock-open"] },
+  KeyRound: { fluent: ["key"], material: ["key"] },
+  Shield: { fluent: ["shield"], material: ["shield"] },
+  ShieldCheck: { fluent: ["shield-checkmark"], material: ["verified-user"] },
+  ShieldAlert: { fluent: ["shield-error"], material: ["gpp-maybe"] },
+  ShieldOff: { fluent: ["shield-dismiss"], material: ["gpp-bad"] },
+  LogOut: { fluent: ["sign-out"], material: ["logout"] },
+  LogIn: { fluent: ["arrow-enter"], material: ["login"] },
+
+  // ── Misc chrome ──────────────────────────────────────────────────────────
+  Star: { fluent: ["star"], material: ["star"] },
+  Flag: { fluent: ["flag"], material: ["flag"] },
+  Tag: { fluent: ["tag"], material: ["label"] },
+  Tags: { fluent: ["tag-multiple"], material: ["label"] },
+  Sun: { fluent: ["weather-sunny"], material: ["light-mode"] },
+  Moon: { fluent: ["weather-moon"], material: ["dark-mode"] },
+  Monitor: { fluent: ["desktop"], material: ["desktop-windows"] },
+  Smartphone: { fluent: ["phone"], material: ["smartphone"] },
+  Home: { fluent: ["home"], material: ["home"] },
+  Command: { fluent: ["keyboard-shift"], material: ["keyboard-command-key"] },
+  MapPin: { fluent: ["location"], material: ["location-on"] },
+  Briefcase: { fluent: ["briefcase"], material: ["work"] },
+  CreditCard: { fluent: ["payment"], material: ["credit-card"] },
+  DollarSign: { fluent: ["currency-dollar-euro", "currency"], material: ["attach-money"] },
+  ThumbsUp: { fluent: ["thumb-like"], material: ["thumb-up"] },
+  Stethoscope: { fluent: ["stethoscope"], material: ["stethoscope"] },
+
+  // ── Navigation icons (src/lib/nav.ts, src/lib/centers.ts) ────────────────
+  // The sidebar is the most visible surface in the app, so every icon it can
+  // render needs a mapping or the theme switch looks half-applied.
+  Palette: { fluent: ["color"], material: ["palette"] },
+  UserCog: { fluent: ["person-settings"], material: ["manage-accounts"] },
+  UserSearch: { fluent: ["person-search"], material: ["person-search"] },
+  PlusSquare: { fluent: ["add-square"], material: ["add-box"] },
+  KanbanSquare: { fluent: ["board"], material: ["view-kanban"] },
+  ClipboardList: { fluent: ["clipboard-task-list-ltr"], material: ["assignment"] },
+  Cog: { fluent: ["settings"], material: ["settings"] },
+  Network: { fluent: ["organization"], material: ["hub"] },
+  BellRing: { fluent: ["alert-badge", "alert-on"], material: ["notifications-active"] },
+  Megaphone: { fluent: ["megaphone"], material: ["campaign"] },
+  Newspaper: { fluent: ["news"], material: ["newspaper"] },
+  Handshake: { fluent: ["handshake"], material: ["handshake"] },
+  Landmark: { fluent: ["building-bank"], material: ["account-balance"] },
+  Receipt: { fluent: ["receipt"], material: ["receipt"] },
+  Wallet: { fluent: ["wallet"], material: ["wallet"] },
+  ShoppingCart: { fluent: ["cart"], material: ["shopping-cart"] },
+  Truck: { fluent: ["vehicle-truck"], material: ["local-shipping"] },
+  Factory: { fluent: ["building-factory"], material: ["factory"] },
+  LifeBuoy: { fluent: ["person-support"], material: ["support"] },
+};
+
+/**
+ * Suffixes tried against each candidate base name.
+ *
+ * Fluent's UI standard is the 20px regular grid, with 24px as the common
+ * fallback. Material Symbols Rounded is the face Material 3 actually ships,
+ * so rounded variants come first.
+ */
+const SUFFIXES = {
+  fluent: ["-20-regular", "-24-regular", "-16-regular", "-28-regular", "-32-regular", "-48-regular"],
+  material: ["-rounded", "", "-outline-rounded", "-outline"],
+};
+
+const COLLECTIONS = {
+  fluent: JSON.parse(
+    readFileSync(resolve(ROOT, "node_modules/@iconify-json/fluent/icons.json"), "utf8"),
+  ),
+  material: JSON.parse(
+    readFileSync(
+      resolve(ROOT, "node_modules/@iconify-json/material-symbols/icons.json"),
+      "utf8",
+    ),
+  ),
+};
+
+/** Iconify prefix each pack publishes under. */
+const PREFIX = { fluent: "fluent", material: "material-symbols" };
+
+function exists(collection, name) {
+  return Boolean(collection.icons?.[name] || collection.aliases?.[name]);
+}
+
+/** First `base + suffix` combination that exists in the collection. */
+function resolveName(pack, bases) {
+  const collection = COLLECTIONS[pack];
+  for (const base of bases) {
+    for (const suffix of SUFFIXES[pack]) {
+      const candidate = `${base}${suffix}`;
+      if (exists(collection, candidate)) return candidate;
+    }
+  }
+  return null;
+}
+
+const registry = {};
+const missing = [];
+
+for (const [lucideName, candidates] of Object.entries(MAP)) {
+  const entry = {};
+  for (const pack of ["fluent", "material"]) {
+    const resolved = resolveName(pack, candidates[pack] ?? []);
+    if (resolved) entry[pack] = resolved;
+    else missing.push(`${lucideName} → ${pack} (tried: ${(candidates[pack] ?? []).join(", ")})`);
+  }
+  if (Object.keys(entry).length > 0) registry[lucideName] = entry;
+}
+
+mkdirSync(OUT_DIR, { recursive: true });
+
+// Pruned collections — only the icons the registry actually references.
+// getIcons() follows aliases and parent chains, so the output is self-contained.
+const summary = [];
+for (const pack of ["fluent", "material"]) {
+  const names = Object.values(registry)
+    .map((e) => e[pack])
+    .filter(Boolean);
+  const pruned = getIcons(COLLECTIONS[pack], names);
+  if (!pruned) throw new Error(`Failed to prune the ${pack} collection`);
+  pruned.prefix = PREFIX[pack];
+  const file = resolve(OUT_DIR, `${pack}.json`);
+  const json = JSON.stringify(pruned);
+  writeFileSync(file, `${json}\n`);
+  summary.push(
+    `  ${pack.padEnd(9)} ${String(names.length).padStart(3)} icons  ${(json.length / 1024).toFixed(1)} KB`,
+  );
+}
+
+writeFileSync(
+  resolve(OUT_DIR, "registry.json"),
+  `${JSON.stringify(registry, null, 2)}\n`,
+);
+
+console.log(`Wrote ${Object.keys(registry).length} icon mappings to ${OUT_DIR}`);
+console.log(summary.join("\n"));
+
+if (missing.length > 0) {
+  console.error(`\n${missing.length} unresolved mapping(s):`);
+  for (const m of missing) console.error(`  ${m}`);
+  process.exitCode = 1;
+}
diff --git a/workbench/control_plane/src/app/api/settings/appearance/route.ts b/workbench/control_plane/src/app/api/settings/appearance/route.ts
new file mode 100644
index 00000000..1e3daca0
--- /dev/null
+++ b/workbench/control_plane/src/app/api/settings/appearance/route.ts
@@ -0,0 +1,164 @@
+/**
+ * GET /api/settings/appearance — the organisation's appearance defaults
+ * PUT /api/settings/appearance — update them (admin-only, enforced upstream)
+ *
+ * Only the ORGANISATION half lives here. A member's own theme, density and
+ * accent stay in their browser: they are per-device preferences with no
+ * server-side consequence, and round-tripping them would add a request to
+ * every page load to render something the boot script has already applied.
+ *
+ * The gateway may not have an appearance store yet. Rather than failing the
+ * page, GET falls back to the built-in defaults and reports `orgManaged:
+ * false`, which is what Settings uses to explain that the org-wide controls
+ * are unavailable in this deployment.
+ */
+
+import { NextRequest, NextResponse } from "next/server";
+import {
+  GATEWAY_URL,
+  NoIdentityError,
+  gatewayHeaders,
+  requireIdentity,
+  unauthenticated,
+} from "@/lib/gateway";
+import { DEFAULT_THEME_ID, findTheme } from "@/lib/theme/themes";
+import { isSafeColor } from "@/lib/theme/css";
+import { DENSITY_SCALE } from "@/lib/theme/types";
+import type { AppearanceSettings, Density, ThemeMode } from "@/lib/theme/types";
+
+export const dynamic = "force-dynamic";
+
+const GATEWAY_PATH = "/settings/appearance";
+
+const BUILTIN_DEFAULTS: AppearanceSettings["org"] = {
+  themeId: DEFAULT_THEME_ID,
+  mode: "dark",
+  density: "default",
+  allowUserOverride: true,
+};
+
+const EMPTY_USER: AppearanceSettings["user"] = {
+  themeId: null,
+  mode: null,
+  density: null,
+  accent: null,
+};
+
+function isMode(v: unknown): v is ThemeMode {
+  return v === "dark" || v === "light";
+}
+
+function isDensity(v: unknown): v is Density {
+  return typeof v === "string" && v in DENSITY_SCALE;
+}
+
+/**
+ * Coerce whatever the gateway returned into a usable org default.
+ *
+ * Every field is validated rather than trusted: a theme id that no longer
+ * exists (removed, renamed, or from a newer deployment) would otherwise put
+ * `data-theme` into a state no stylesheet matches, leaving the app unstyled.
+ * Unrecognised values fall back field by field, so one bad key does not
+ * discard an otherwise good response.
+ */
+function normaliseOrg(raw: unknown): AppearanceSettings["org"] {
+  const o = (raw ?? {}) as Record<string, unknown>;
+  return {
+    themeId: findTheme(String(o.themeId ?? "")) ? String(o.themeId) : BUILTIN_DEFAULTS.themeId,
+    mode: isMode(o.mode) ? o.mode : BUILTIN_DEFAULTS.mode,
+    density: isDensity(o.density) ? o.density : BUILTIN_DEFAULTS.density,
+    allowUserOverride:
+      typeof o.allowUserOverride === "boolean"
+        ? o.allowUserOverride
+        : BUILTIN_DEFAULTS.allowUserOverride,
+  };
+}
+
+export async function GET(): Promise<NextResponse> {
+  const me = await requireIdentity();
+  if (me instanceof NextResponse) return me;
+
+  try {
+    const res = await fetch(`${GATEWAY_URL}${GATEWAY_PATH}`, {
+      headers: await gatewayHeaders(),
+      signal: AbortSignal.timeout(8_000),
+      cache: "no-store",
+    });
+    if (res.ok) {
+      const data = await res.json();
+      return NextResponse.json({
+        org: normaliseOrg(data?.org ?? data),
+        user: EMPTY_USER,
+        orgManaged: true,
+      } satisfies AppearanceSettings);
+    }
+  } catch {
+    // Gateway unreachable or timed out — fall through to the built-in default.
+  }
+
+  return NextResponse.json({
+    org: BUILTIN_DEFAULTS,
+    user: EMPTY_USER,
+    orgManaged: false,
+  } satisfies AppearanceSettings);
+}
+
+export async function PUT(req: NextRequest): Promise<NextResponse> {
+  const me = await requireIdentity();
+  if (me instanceof NextResponse) return me;
+
+  let body: unknown;
+  try {
+    body = await req.json();
+  } catch {
+    return NextResponse.json({ error: "Body must be JSON" }, { status: 400 });
+  }
+
+  const input = (body ?? {}) as Record<string, unknown>;
+
+  // Validate here rather than forwarding blindly: these values end up driving
+  // a CSS selector and a colour declaration for every member of the org, so a
+  // bad write is a broken app for everyone, not just the admin who made it.
+  if (input.themeId !== undefined && !findTheme(String(input.themeId))) {
+    return NextResponse.json({ error: `Unknown theme: ${String(input.themeId)}` }, { status: 400 });
+  }
+  if (input.mode !== undefined && !isMode(input.mode)) {
+    return NextResponse.json({ error: "mode must be 'dark' or 'light'" }, { status: 400 });
+  }
+  if (input.density !== undefined && !isDensity(input.density)) {
+    return NextResponse.json(
+      { error: `density must be one of ${Object.keys(DENSITY_SCALE).join(", ")}` },
+      { status: 400 },
+    );
+  }
+  if (
+    input.accent !== undefined &&
+    input.accent !== null &&
+    !isSafeColor(String(input.accent))
+  ) {
+    return NextResponse.json({ error: "accent must be a plain CSS colour" }, { status: 400 });
+  }
+
+  // Whether the caller may set an org-wide default is an authorization
+  // question, and authorization is resolved from the org tables at the
+  // gateway — not from anything this request could assert.
+  try {
+    const res = await fetch(`${GATEWAY_URL}${GATEWAY_PATH}`, {
+      method: "PUT",
+      headers: await gatewayHeaders({ "Content-Type": "application/json" }),
+      body: JSON.stringify(input),
+      signal: AbortSignal.timeout(8_000),
+    });
+    const text = await res.text();
+    return new NextResponse(text, {
+      status: res.status,
+      headers: { "Content-Type": res.headers.get("content-type") ?? "application/json" },
+    });
+  } catch (err) {
+    if (err instanceof NoIdentityError) return unauthenticated();
+    return NextResponse.json(
+      { error: "Appearance defaults are not available in this deployment" },
+      { status: 503 },
+    );
+  }
+}
diff --git a/workbench/control_plane/src/app/centers/[slug]/page.tsx b/workbench/control_plane/src/app/centers/[slug]/page.tsx
index a5158f2a..0b82c7d1 100644
--- a/workbench/control_plane/src/app/centers/[slug]/page.tsx
+++ b/workbench/control_plane/src/app/centers/[slug]/page.tsx
@@ -14,7 +14,7 @@
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import { centerBySlug } from "@/lib/centers";
-import { resolveIcon } from "@/lib/icons";
+import ThemedIcon from "@/components/Icon";
 
 export default function CenterPage() {
   const params = useParams<{ slug: string }>();
@@ -32,7 +32,6 @@ export default function CenterPage() {
     );
   }
 
-  const CenterIcon = resolveIcon(center.icon);
   const live = center.apps.filter((a) => a.status === "live");
   const planned = center.apps.filter((a) => a.status === "planned");
 
@@ -41,7 +40,7 @@ export default function CenterPage() {
       {/* Header */}
       <div className="flex items-start gap-4">
         <span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
-          <CenterIcon size={24} />
+          <ThemedIcon name={center.icon} size={24} />
         </span>
         <div className="min-w-0">
           <div className="flex flex-wrap items-center gap-2">
@@ -62,7 +61,6 @@ export default function CenterPage() {
           </div>
           <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
             {live.map((app) => {
-              const Icon = resolveIcon(app.icon);
               return (
                 <Link
                   key={app.label}
@@ -70,7 +68,7 @@ export default function CenterPage() {
                   className="rounded-xl border border-border bg-card/50 p-4 hover:border-primary/40 hover:bg-card tech-transition"
                 >
                   <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
-                    <Icon size={18} />
+                    <ThemedIcon name={app.icon} size={18} />
                   </span>
                   <div className="mt-3 text-sm font-semibold">{app.label}</div>
                   <p className="mt-1 text-[11px] leading-snug text-muted-foreground">{app.note}</p>
@@ -92,7 +90,6 @@ export default function CenterPage() {
           </div>
           <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
             {planned.map((app) => {
-              const Icon = resolveIcon(app.icon);
               return (
                 <div
                   key={app.label}
@@ -100,7 +97,7 @@ export default function CenterPage() {
                 >
                   <div className="flex items-start justify-between gap-2">
                     <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-secondary text-muted-foreground">
-                      <Icon size={18} />
+                      <ThemedIcon name={app.icon} size={18} />
                     </span>
                     <span className="rounded-full bg-secondary px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
                       Planned
diff --git a/workbench/control_plane/src/app/globals.css b/workbench/control_plane/src/app/globals.css
index fee452ec..143bb342 100644
--- a/workbench/control_plane/src/app/globals.css
+++ b/workbench/control_plane/src/app/globals.css
@@ -6,11 +6,45 @@
    Primary: professional blue  hsl(198 89% 50%)
    Accent:  warm orange       hsl(27 96% 61%)
    Surface: deep blue-gray    hsl(220 13% 8%)
-   
+
    Light theme is applied via .light class (next-themes class strategy).
+
+   THEMING ENGINE — read this before editing the blocks below.
+
+   These `:root` / `.light` blocks are the FALLBACK layer. The live values come
+   from the theme manifests in src/lib/theme/themes.ts, emitted by
+   <ThemeStyles> as `html[data-theme="…"]` scopes whose specificity (0,1,1)
+   deliberately outranks everything here (0,1,0). What is written below is what
+   you see only before the boot script runs, or with JavaScript disabled.
+
+   Consequences:
+     • These values MUST stay identical to the `rapidtool` manifest.
+       src/lib/theme/themes.test.ts parses this file and fails the build if
+       they drift.
+     • To change how the app looks, edit the manifest — not this file.
+     • To add a theme, add a manifest entry. Nothing here needs to change.
    ──────────────────────────────────────────────────────────────────────── */
 
 :root {
+  /* Structural tokens — shape, typography and effects. Themes override these
+     wholesale; the values here are RapidTool's. */
+  --border-width: 1px;
+  --font-app: var(--font-geist-sans);
+  --font-app-mono: var(--font-geist-mono);
+  --font-display: var(--font-geist-sans);
+  --heading-tracking: 0em;
+  --heading-weight: 700;
+  --label-weight: 500;
+  --glass-blur: 16px;
+  --glass-opacity: 0.65;
+  --glass-opacity-strong: 0.92;
+  --glow-strength: 1;
+  --elevation: 0 4px 16px hsl(0 0% 0% / 0.25);
+  --motion-duration: 0.2s;
+  --motion-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  /* Root font-size multiplier driven by the user's density preference. */
+  --ui-scale: 1;
+
   --background: hsl(220 13% 8%);
   --foreground: hsl(210 40% 98%);
 
@@ -135,66 +169,98 @@
   --color-sidebar-primary: var(--sidebar-primary);
   --color-sidebar-accent: var(--sidebar-accent);
   --color-sidebar-border: var(--sidebar-border);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: var(--font-app);
+  --font-mono: var(--font-app-mono);
+  /* The whole radius scale is derived from --radius so a theme controls the
+     app's roundness with one value. At RapidTool's 0.75rem these resolve to
+     exactly Tailwind's own defaults (8/10/12/12/16/24px), so the shipped look
+     is unchanged; Fluent's 0.25rem squares everything off and Material's 1rem
+     rounds it. max() keeps a small --radius from producing negative values. */
+  --radius-sm: max(0px, calc(var(--radius) - 4px));
+  --radius-md: max(0px, calc(var(--radius) - 2px));
   --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
+  --radius-xl: var(--radius);
+  --radius-2xl: calc(var(--radius) + 4px);
+  --radius-3xl: calc(var(--radius) + 12px);
+}
+
+/* Density: scales the root font size, and with it every rem-based size
+   Tailwind emits (text, spacing, radii). Mobile inputs are pinned in px so
+   iOS keyboard zoom stays prevented regardless of this setting. */
+html {
+  font-size: calc(100% * var(--ui-scale, 1));
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: var(--font-geist-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-family: var(--font-app), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* Headings follow the theme's display face and tracking. Weight stays with the
+   Tailwind utility on each element — a `font-bold` class outranks a bare
+   element selector, so --heading-weight is for primitives to consume, not
+   something this rule can impose. */
+h1,
+h2,
+h3,
+h4 {
+  font-family: var(--font-display), var(--font-app), system-ui, sans-serif;
+  letter-spacing: var(--heading-tracking);
+}
+
 /* Prevent accidental horizontal scrolling of the whole app on small screens. */
 html,
 body {
   overflow-x: hidden;
 }
 
-/* ── Tech glass / glow effects ────────────────────────────────────────── */
+/* ── Tech glass / glow effects ──────────────────────────────────────────
+   Fully token-driven, so each theme decides how surfaces behave: RapidTool
+   blurs and glows, Fluent renders acrylic without glow, Material switches both
+   off and expresses depth with --elevation instead.
+
+   These used to hardcode dark-theme colours plus a `.light` re-tint. Deriving
+   them from --popover / --card / --border removes that special case: any
+   theme's light mode now gets readable glass automatically. */
 .tech-glass {
-  background: hsl(220 13% 12% / 0.65);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid hsl(220 13% 18%);
+  background: color-mix(in srgb, var(--popover) calc(var(--glass-opacity) * 100%), transparent);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: var(--border-width) solid var(--border);
 }
 
+/* Modals, drawers and popovers — the same material at a higher opacity, since
+   they sit over live content and must stay readable. */
 .tech-glass-subtle {
-  background: hsl(220 13% 10% / 0.92);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid hsl(220 13% 16% / 0.8);
-}
-
-/* Light theme — the glass surfaces are dark-only by default, which leaves
-   panels/modals (e.g. the agent session picker) as a dark card with dark
-   light-mode text = unreadable. Re-tint them to the light surface so the
-   theme's foreground tokens land on a light background. */
-.light .tech-glass {
-  background: hsl(0 0% 100% / 0.72);
-  border-color: hsl(214.3 31.8% 91.4%);
-}
-
-.light .tech-glass-subtle {
-  background: hsl(0 0% 100% / 0.95);
-  border-color: hsl(214.3 31.8% 88%);
+  background: color-mix(in srgb, var(--card) calc(var(--glass-opacity-strong) * 100%), transparent);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: var(--border-width) solid color-mix(in srgb, var(--border) 80%, transparent);
 }
 
+/* --glow-strength scales the effect; a theme setting it to 0 makes the colour
+   fully transparent, which switches glowing off without a separate rule. */
 .tech-glow {
-  box-shadow: 0 0 24px hsl(198 89% 50% / 0.08);
+  box-shadow: 0 0 24px
+    color-mix(in srgb, var(--primary) calc(var(--glow-strength) * 8%), transparent);
 }
 
 .tech-glow:hover {
-  box-shadow: 0 0 32px hsl(198 89% 50% / 0.15);
+  box-shadow: 0 0 32px
+    color-mix(in srgb, var(--primary) calc(var(--glow-strength) * 15%), transparent);
 }
 
 .tech-transition {
-  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: all var(--motion-duration) var(--motion-easing);
+}
+
+/* Elevation — themes that render flat surfaces (Material) use shadow rather
+   than blur to separate layers. */
+.tech-elevated {
+  box-shadow: var(--elevation);
 }
 
 /* ── iOS safe-area padding utilities ─────────────────────────────────────
@@ -275,7 +341,7 @@ body {
   content: "";
   position: absolute;
   inset: 0;
-  background: hsl(198 89% 50% / 0.14);
+  background: color-mix(in srgb, var(--primary) 14%, transparent);
   pointer-events: none;
 }
 .sig-rich .ProseMirror .column-resize-handle {
@@ -307,9 +373,9 @@ body {
 .chat-shimmer-text {
   background: linear-gradient(
     90deg,
-    hsl(215 20% 50%) 0%,
-    hsl(210 40% 90%) 45%,
-    hsl(215 20% 50%) 90%
+    var(--muted-foreground) 0%,
+    var(--foreground) 45%,
+    var(--muted-foreground) 90%
   );
   background-size: 200% 100%;
   -webkit-background-clip: text;
@@ -379,7 +445,7 @@ body {
 
 .scrollbar-thin {
   scrollbar-width: thin;
-  scrollbar-color: hsl(0 0% 50% / 0.35) transparent;
+  scrollbar-color: color-mix(in srgb, var(--muted-foreground) 45%, transparent) transparent;
 }
 
 .scrollbar-thin::-webkit-scrollbar {
@@ -391,12 +457,12 @@ body {
 }
 
 .scrollbar-thin::-webkit-scrollbar-thumb {
-  background-color: hsl(0 0% 50% / 0.35);
+  background-color: color-mix(in srgb, var(--muted-foreground) 45%, transparent);
   border-radius: 10rem;
 }
 
 .scrollbar-thin::-webkit-scrollbar-thumb:hover {
-  background-color: hsl(0 0% 50% / 0.55);
+  background-color: color-mix(in srgb, var(--muted-foreground) 65%, transparent);
 }
 
 .scrollbar-hide {
@@ -423,6 +489,12 @@ body {
     animation-duration: 1.6s;
   }
 
+  /* Themes set their own motion feel; honouring the OS preference has to
+     override whichever one is active. */
+  :root {
+    --motion-duration: 0.01ms;
+  }
+
   *,
   *::before,
   *::after {
diff --git a/workbench/control_plane/src/app/layout.tsx b/workbench/control_plane/src/app/layout.tsx
index 2305d6ba..d071ce24 100644
--- a/workbench/control_plane/src/app/layout.tsx
+++ b/workbench/control_plane/src/app/layout.tsx
@@ -1,7 +1,12 @@
 import type { Metadata, Viewport } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Geist, Geist_Mono, Inter, Roboto, Roboto_Mono } from "next/font/google";
 import "./globals.css";
 
+// Every theme's font stack is loaded up front and selected at runtime through
+// `--font-app` / `--font-app-mono`, because a theme switch has to be instant —
+// fetching a face on switch would show a frame of fallback text. next/font
+// self-hosts and subsets each family, so the whole set is a modest one-time
+// cost and no request ever leaves for Google.
 const geistSans = Geist({
   variable: "--font-geist-sans",
   subsets: ["latin"],
@@ -12,8 +17,28 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
+// Fluent: stands in for Segoe UI, which the stack prefers when the OS has it.
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+});
+
+// Material 3's type face, and its monospace companion.
+const roboto = Roboto({
+  variable: "--font-roboto",
+  subsets: ["latin"],
+  weight: ["300", "400", "500", "700"],
+});
+
+const robotoMono = Roboto_Mono({
+  variable: "--font-roboto-mono",
+  subsets: ["latin"],
+});
+
 import AppShell from "@/components/AppShell";
 import Providers from "@/components/Providers";
+import ThemeStyles from "@/components/ThemeStyles";
+import { themeBootScript } from "@/lib/theme/boot";
 
 export const metadata: Metadata = {
   title: "CommandCenter Control Plane",
@@ -30,6 +55,14 @@ export const viewport: Viewport = {
   viewportFit: "cover",
 };
 
+const fontVariables = [
+  geistSans.variable,
+  geistMono.variable,
+  inter.variable,
+  roboto.variable,
+  robotoMono.variable,
+].join(" ");
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -39,9 +72,20 @@ export default function RootLayout({
     <html
       lang="en"
       suppressHydrationWarning
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      // Server-rendered default. The boot script below replaces it with the
+      // member's stored theme before the first paint; it is set here so the
+      // document is never without a theme scope, even with JS disabled.
+      data-theme="rapidtool"
+      className={`${fontVariables} h-full antialiased`}
     >
+      <head>
+        <ThemeStyles />
+      </head>
       <body className="h-full bg-background text-foreground antialiased">
+        {/* Applies the stored theme, density and accent before anything paints.
+            Runs ahead of hydration, so there is no flash of the default theme.
+            Mirrors how next-themes handles the light/dark class. */}
+        <script dangerouslySetInnerHTML={{ __html: themeBootScript() }} />
         <Providers>
           <AppShell>{children}</AppShell>
         </Providers>
diff --git a/workbench/control_plane/src/app/page.tsx b/workbench/control_plane/src/app/page.tsx
index d335190e..3f6df235 100644
--- a/workbench/control_plane/src/app/page.tsx
+++ b/workbench/control_plane/src/app/page.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { NAV_SECTIONS } from "@/lib/nav";
-import { resolveIcon } from "@/lib/icons";
+import ThemedIcon from "@/components/Icon";
 
 // The landing page mirrors the sidebar: every pane comes from NAV_SECTIONS,
 // so adding an app or a Center there surfaces it here too. Primary sections
@@ -26,7 +26,6 @@ export default function Home() {
           </div>
           <div className="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
             {section.items.map((p) => {
-              const Icon = resolveIcon(p.icon);
               return (
                 <Link
                   key={p.href}
@@ -34,7 +33,7 @@ export default function Home() {
                   className="rounded-xl border border-border bg-card/50 p-4 hover:border-primary/40 hover:bg-card tech-transition"
                 >
                   <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
-                    <Icon size={18} />
+                    <ThemedIcon name={p.icon} size={18} />
                   </span>
                   <div className="mt-3 text-sm font-semibold">{p.label}</div>
                   <p className="mt-1 text-[11px] leading-snug text-muted-foreground">{p.note}</p>
@@ -53,7 +52,6 @@ export default function Home() {
           </div>
           <div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2">
             {section.items.map((p) => {
-              const Icon = resolveIcon(p.icon);
               return (
                 <Link
                   key={p.href}
@@ -61,7 +59,7 @@ export default function Home() {
                   className="flex items-center gap-3 rounded-xl border border-border bg-card/30 px-4 py-3 hover:border-primary/40 hover:bg-card tech-transition"
                 >
                   <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-secondary text-muted-foreground">
-                    <Icon size={16} />
+                    <ThemedIcon name={p.icon} size={16} />
                   </span>
                   <div className="min-w-0">
                     <div className="text-sm font-medium">{p.label}</div>
diff --git a/workbench/control_plane/src/app/settings/appearance/page.tsx b/workbench/control_plane/src/app/settings/appearance/page.tsx
new file mode 100644
index 00000000..06872e19
--- /dev/null
+++ b/workbench/control_plane/src/app/settings/appearance/page.tsx
@@ -0,0 +1,569 @@
+"use client";
+
+/**
+ * /settings/appearance — pick the look of the Control Plane.
+ *
+ * Two scopes, deliberately separated in the UI because they behave differently:
+ *
+ *   • Your appearance — theme, mode, density and accent for this browser.
+ *     Applies the moment you click; nothing to save.
+ *   • Organisation default — what everyone gets who has not chosen for
+ *     themselves. Admin-only, and needs a gateway that stores it.
+ *
+ * Each theme card renders a real preview built from that theme's own tokens
+ * (its surfaces, its primary, its radius, its font), rather than a static
+ * screenshot, so the gallery cannot go stale when a manifest changes.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { useTheme } from "next-themes";
+import Icon from "@/components/Icon";
+import Tabs from "@/components/Tabs";
+import { THEMES, resolveTheme } from "@/lib/theme/themes";
+import { useAppearanceStore, effectiveThemeId, effectiveDensity } from "@/lib/theme/store";
+import { isSafeColor } from "@/lib/theme/css";
+import type { AppearanceSettings, ColorTokens, Density, Theme, ThemeMode } from "@/lib/theme/types";
+import { DENSITY_SCALE } from "@/lib/theme/types";
+
+const DENSITY_LABELS: Record<Density, string> = {
+  compact: "Compact",
+  default: "Default",
+  comfortable: "Comfortable",
+};
+
+/** Accent suggestions — one per built-in theme's primary, plus a few extras. */
+const ACCENT_PRESETS = [
+  { label: "Theme default", value: null },
+  { label: "Azure", value: "hsl(206 100% 42%)" },
+  { label: "Violet", value: "hsl(258 60% 55%)" },
+  { label: "Emerald", value: "hsl(158 64% 38%)" },
+  { label: "Amber", value: "hsl(32 95% 48%)" },
+  { label: "Rose", value: "hsl(347 77% 50%)" },
+];
+
+export default function AppearancePage() {
+  const [tab, setTab] = useState<"personal" | "organisation">("personal");
+
+  // Preferences live in localStorage, so the server cannot know them. Waiting
+  // on the store's own hydration flag — rather than a bare mounted flag —
+  // gates the render on the preferences actually being loaded, and keeps the
+  // server's markup and the first client paint identical.
+  const hydrated = useAppearanceStore((s) => s.hydrated);
+
+  if (!hydrated) {
+    return (
+      <div className="flex h-full flex-col">
+        <PageHeader />
+        <div className="flex-1 p-4 text-xs text-muted-foreground">Loading preferences…</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      <PageHeader />
+      <Tabs
+        tabs={[
+          { id: "personal", label: "Your appearance" },
+          { id: "organisation", label: "Organisation default" },
+        ]}
+        activeTab={tab}
+        onTabChange={(id) => setTab(id as typeof tab)}
+        variant="underline"
+      />
+      <div className="flex-1 overflow-y-auto p-4 sm:p-6">
+        {tab === "personal" ? <PersonalSettings /> : <OrganisationSettings />}
+      </div>
+    </div>
+  );
+}
+
+function PageHeader() {
+  return (
+    <div className="flex shrink-0 items-center justify-between border-b border-border px-4 py-3 sm:px-6 sm:py-4">
+      <div>
+        <h1 className="text-base font-bold text-foreground sm:text-lg">Appearance</h1>
+        <p className="mt-0.5 text-xs text-muted-foreground">
+          Themes, colour mode, density and accent across the Control Plane
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// ── Personal ────────────────────────────────────────────────────────────────
+
+function PersonalSettings() {
+  const { theme: mode, setTheme: setMode } = useTheme();
+  const activeId = useAppearanceStore(effectiveThemeId);
+  const density = useAppearanceStore(effectiveDensity);
+  const accent = useAppearanceStore((s) => s.accent);
+  const userThemeId = useAppearanceStore((s) => s.userThemeId);
+  const orgThemeId = useAppearanceStore((s) => s.orgThemeId);
+  const allowUserOverride = useAppearanceStore((s) => s.allowUserOverride);
+  const setUserTheme = useAppearanceStore((s) => s.setUserTheme);
+  const setUserDensity = useAppearanceStore((s) => s.setUserDensity);
+  const setAccent = useAppearanceStore((s) => s.setAccent);
+
+  const previewMode: ThemeMode = mode === "light" ? "light" : "dark";
+
+  if (!allowUserOverride) {
+    return (
+      <div className="rounded-lg border border-border bg-card p-4">
+        <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
+          <Icon name="Lock" size={15} />
+          Appearance is managed by your organisation
+        </div>
+        <p className="mt-1.5 text-xs text-muted-foreground">
+          Everyone is on <span className="text-foreground">{resolveTheme(orgThemeId).name}</span>. An
+          administrator can allow personal overrides from the Organisation default tab.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      <section>
+        <SectionHeading
+          title="Theme"
+          description="Changes colours, fonts, corner radius, effects and the icon pack across every page."
+        />
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+          {THEMES.map((theme) => (
+            <ThemeCard
+              key={theme.id}
+              theme={theme}
+              mode={previewMode}
+              selected={activeId === theme.id}
+              isOrgDefault={orgThemeId === theme.id}
+              onSelect={() => setUserTheme(theme.id)}
+            />
+          ))}
+        </div>
+        {userThemeId && (
+          <button
+            onClick={() => setUserTheme(null)}
+            className="mt-3 rounded-lg border border-border px-3 py-2 text-xs text-muted-foreground tech-transition hover:border-primary/30 hover:text-foreground"
+          >
+            Reset to organisation default ({resolveTheme(orgThemeId).name})
+          </button>
+        )}
+      </section>
+
+      <section>
+        <SectionHeading
+          title="Colour mode"
+          description="Every theme ships both. Independent of your theme choice."
+        />
+        <div className="flex gap-2">
+          {(["dark", "light"] as const).map((m) => (
+            <OptionPill
+              key={m}
+              selected={previewMode === m}
+              onClick={() => setMode(m)}
+              icon={m === "dark" ? "Moon" : "Sun"}
+              label={m === "dark" ? "Dark" : "Light"}
+            />
+          ))}
+        </div>
+      </section>
+
+      <section>
+        <SectionHeading
+          title="Density"
+          description="Scales text and spacing together. Useful on very large or very small screens."
+        />
+        <div className="flex flex-wrap gap-2">
+          {(Object.keys(DENSITY_SCALE) as Density[]).map((d) => (
+            <OptionPill
+              key={d}
+              selected={density === d}
+              onClick={() => setUserDensity(d)}
+              label={DENSITY_LABELS[d]}
+              hint={`${Math.round(DENSITY_SCALE[d] * 100)}%`}
+            />
+          ))}
+        </div>
+      </section>
+
+      <section>
+        <SectionHeading
+          title="Accent colour"
+          description="Overrides the theme's primary colour. Leave on Theme default unless you have a reason."
+        />
+        <div className="flex flex-wrap gap-2">
+          {ACCENT_PRESETS.map((preset) => (
+            <button
+              key={preset.label}
+              onClick={() => setAccent(preset.value)}
+              className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-xs tech-transition ${
+                accent === preset.value
+                  ? "border-primary bg-primary/5 text-foreground ring-1 ring-primary/20"
+                  : "border-border text-muted-foreground hover:border-primary/40 hover:text-foreground"
+              }`}
+            >
+              <span
+                className="h-3.5 w-3.5 rounded-full border border-border"
+                style={{ background: preset.value ?? "var(--primary)" }}
+              />
+              {preset.label}
+            </button>
+          ))}
+        </div>
+        <CustomAccentInput value={accent} onChange={setAccent} />
+      </section>
+    </div>
+  );
+}
+
+function CustomAccentInput({
+  value,
+  onChange,
+}: {
+  value: string | null;
+  onChange: (v: string | null) => void;
+}) {
+  const [draft, setDraft] = useState(value ?? "");
+  const [error, setError] = useState<string | null>(null);
+
+  const apply = useCallback(() => {
+    const trimmed = draft.trim();
+    if (!trimmed) {
+      setError(null);
+      onChange(null);
+      return;
+    }
+    if (!isSafeColor(trimmed)) {
+      setError("Use a plain colour, e.g. #0078d4 or hsl(206 100% 42%)");
+      return;
+    }
+    setError(null);
+    onChange(trimmed);
+  }, [draft, onChange]);
+
+  return (
+    <div className="mt-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <input
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && apply()}
+          placeholder="#0078d4"
+          aria-label="Custom accent colour"
+          className="w-48 rounded-lg border border-border bg-background px-3 py-2 text-xs text-foreground outline-none tech-transition focus:border-primary/50"
+        />
+        <button
+          onClick={apply}
+          className="rounded-lg border border-border px-3 py-2 text-xs text-muted-foreground tech-transition hover:border-primary/30 hover:text-foreground"
+        >
+          Apply
+        </button>
+      </div>
+      {error && <p className="mt-1.5 text-[11px] text-destructive">{error}</p>}
+    </div>
+  );
+}
+
+// ── Organisation ────────────────────────────────────────────────────────────
+
+function OrganisationSettings() {
+  const [settings, setSettings] = useState<AppearanceSettings | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<{ kind: "ok" | "error"; text: string } | null>(null);
+  const setOrgDefaults = useAppearanceStore((s) => s.setOrgDefaults);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch("/api/settings/appearance")
+      .then((r) => (r.ok ? r.json() : null))
+      .then((data: AppearanceSettings | null) => {
+        if (!cancelled && data) setSettings(data);
+      })
+      .catch(() => {
+        if (!cancelled) setMessage({ kind: "error", text: "Could not load organisation defaults." });
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const save = useCallback(
+    async (patch: Partial<AppearanceSettings["org"]>) => {
+      if (!settings) return;
+      const next = { ...settings.org, ...patch };
+      setSaving(true);
+      setMessage(null);
+      try {
+        const res = await fetch("/api/settings/appearance", {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(next),
+        });
+        if (!res.ok) {
+          const body = await res.json().catch(() => ({}));
+          setMessage({
+            kind: "error",
+            text: body?.error ?? `Could not save (${res.status}).`,
+          });
+          return;
+        }
+        setSettings({ ...settings, org: next });
+        // Push it into the live store too, so the admin sees the effect
+        // immediately rather than on the next reload.
+        setOrgDefaults(next);
+        setMessage({ kind: "ok", text: "Organisation default updated." });
+      } catch {
+        setMessage({ kind: "error", text: "Could not reach the server." });
+      } finally {
+        setSaving(false);
+      }
+    },
+    [settings, setOrgDefaults],
+  );
+
+  if (!settings) {
+    return <p className="text-xs text-muted-foreground">Loading organisation defaults…</p>;
+  }
+
+  return (
+    <div className="space-y-8">
+      {!settings.orgManaged && (
+        <div className="flex items-start gap-2 rounded-lg border border-warning/30 bg-warning/5 p-3">
+          <Icon name="AlertTriangle" size={15} className="mt-0.5 shrink-0 text-warning" />
+          <div className="text-xs text-muted-foreground">
+            <span className="font-medium text-foreground">
+              No appearance store is configured on the gateway.
+            </span>{" "}
+            The values below are the built-in defaults and cannot be saved yet. Personal
+            preferences on the other tab work regardless.
+          </div>
+        </div>
+      )}
+
+      <section>
+        <SectionHeading
+          title="Default theme"
+          description="What members see before they choose one for themselves."
+        />
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+          {THEMES.map((theme) => (
+            <ThemeCard
+              key={theme.id}
+              theme={theme}
+              mode={settings.org.mode}
+              selected={settings.org.themeId === theme.id}
+              onSelect={() => save({ themeId: theme.id })}
+              disabled={saving || !settings.orgManaged}
+            />
+          ))}
+        </div>
+      </section>
+
+      <section>
+        <SectionHeading title="Default colour mode" description="" />
+        <div className="flex gap-2">
+          {(["dark", "light"] as const).map((m) => (
+            <OptionPill
+              key={m}
+              selected={settings.org.mode === m}
+              onClick={() => save({ mode: m })}
+              icon={m === "dark" ? "Moon" : "Sun"}
+              label={m === "dark" ? "Dark" : "Light"}
+              disabled={saving || !settings.orgManaged}
+            />
+          ))}
+        </div>
+      </section>
+
+      <section>
+        <SectionHeading
+          title="Personal overrides"
+          description="Turn off to standardise the whole company on the default theme."
+        />
+        <OptionPill
+          selected={settings.org.allowUserOverride}
+          onClick={() => save({ allowUserOverride: !settings.org.allowUserOverride })}
+          icon={settings.org.allowUserOverride ? "Check" : "X"}
+          label={settings.org.allowUserOverride ? "Members may choose" : "Locked to default"}
+          disabled={saving || !settings.orgManaged}
+        />
+      </section>
+
+      {message && (
+        <p
+          className={`text-xs ${message.kind === "ok" ? "text-success" : "text-destructive"}`}
+          role="status"
+        >
+          {message.text}
+        </p>
+      )}
+    </div>
+  );
+}
+
+// ── Shared pieces ───────────────────────────────────────────────────────────
+
+function SectionHeading({ title, description }: { title: string; description: string }) {
+  return (
+    <div className="mb-3">
+      <h2 className="text-sm font-semibold text-foreground">{title}</h2>
+      {description && <p className="mt-0.5 text-xs text-muted-foreground">{description}</p>}
+    </div>
+  );
+}
+
+function OptionPill({
+  selected,
+  onClick,
+  label,
+  icon,
+  hint,
+  disabled,
+}: {
+  selected: boolean;
+  onClick: () => void;
+  label: string;
+  icon?: string;
+  hint?: string;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-xs tech-transition disabled:cursor-not-allowed disabled:opacity-50 ${
+        selected
+          ? "border-primary bg-primary/5 text-foreground ring-1 ring-primary/20"
+          : "border-border text-muted-foreground hover:border-primary/40 hover:text-foreground"
+      }`}
+    >
+      {icon && <Icon name={icon} size={14} />}
+      {label}
+      {hint && <span className="text-[10px] text-muted-foreground">{hint}</span>}
+    </button>
+  );
+}
+
+/**
+ * A theme card whose preview is drawn with the theme's own tokens.
+ *
+ * The swatch is a miniature of the real UI — surface, card, a primary button,
+ * a muted line — rendered with inline custom properties rather than Tailwind
+ * classes, because the classes resolve against the ACTIVE theme and would show
+ * every card in the same colours.
+ */
+function ThemeCard({
+  theme,
+  mode,
+  selected,
+  isOrgDefault,
+  onSelect,
+  disabled,
+}: {
+  theme: Theme;
+  mode: ThemeMode;
+  selected: boolean;
+  isOrgDefault?: boolean;
+  onSelect: () => void;
+  disabled?: boolean;
+}) {
+  const c: ColorTokens = theme.colors[mode];
+
+  return (
+    <button
+      onClick={onSelect}
+      disabled={disabled}
+      aria-pressed={selected}
+      className={`w-full rounded-xl border p-3 text-left tech-transition disabled:cursor-not-allowed disabled:opacity-50 sm:p-4 ${
+        selected
+          ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+          : "border-border bg-card hover:border-primary/40 hover:bg-secondary/30"
+      }`}
+    >
+      <div
+        className="mb-3 overflow-hidden rounded-lg border"
+        style={{
+          background: c.background,
+          borderColor: c.border,
+          borderRadius: theme.shape.radius,
+          fontFamily: theme.typography.app,
+        }}
+      >
+        <div className="flex items-center gap-1.5 px-2.5 py-2" style={{ background: c.sidebarBackground ?? c.background }}>
+          <span
+            className="inline-block h-3.5 w-3.5"
+            style={{ background: c.primary, borderRadius: theme.shape.radius }}
+          />
+          <span className="text-[10px] font-semibold" style={{ color: c.foreground }}>
+            CommandCenter
+          </span>
+        </div>
+        <div className="space-y-1.5 p-2.5">
+          <div
+            className="space-y-1.5 p-2"
+            style={{
+              background: c.card,
+              borderRadius: theme.shape.radius,
+              border: `${theme.shape.borderWidth} solid ${c.border}`,
+            }}
+          >
+            <div className="h-1.5 w-2/3 rounded-full" style={{ background: c.foreground, opacity: 0.85 }} />
+            <div className="h-1.5 w-full rounded-full" style={{ background: c.mutedForeground, opacity: 0.5 }} />
+          </div>
+          <div className="flex items-center gap-1.5">
+            <span
+              className="px-2 py-1 text-[9px] font-medium"
+              style={{
+                background: c.primary,
+                color: c.primaryForeground,
+                borderRadius: theme.shape.radius,
+                fontWeight: theme.typography.labelWeight,
+              }}
+            >
+              Action
+            </span>
+            <span
+              className="px-2 py-1 text-[9px]"
+              style={{
+                color: c.mutedForeground,
+                borderRadius: theme.shape.radius,
+                border: `${theme.shape.borderWidth} solid ${c.border}`,
+              }}
+            >
+              Cancel
+            </span>
+            <span className="ml-auto flex gap-1">
+              {[c.success, c.warning, c.destructive, c.accent].map((color, i) => (
+                <span key={i} className="h-2 w-2 rounded-full" style={{ background: color }} />
+              ))}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0">
+          <div className="flex items-center gap-1.5">
+            <span className="truncate text-sm font-semibold text-foreground">{theme.name}</span>
+            {selected && <Icon name="Check" size={13} className="shrink-0 text-primary" />}
+          </div>
+          <p className="mt-0.5 text-[11px] leading-snug text-muted-foreground">{theme.description}</p>
+        </div>
+      </div>
+      <div className="mt-2 flex flex-wrap items-center gap-1.5">
+        <Badge>{theme.iconPack} icons</Badge>
+        <Badge>{theme.shape.radius === "0.25rem" ? "square" : theme.shape.radius === "1rem" ? "rounded" : "radius " + theme.shape.radius}</Badge>
+        {isOrgDefault && <Badge>org default</Badge>}
+      </div>
+    </button>
+  );
+}
+
+function Badge({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="rounded-md bg-secondary px-1.5 py-0.5 text-[10px] text-muted-foreground">
+      {children}
+    </span>
+  );
+}
diff --git a/workbench/control_plane/src/components/AppShell.tsx b/workbench/control_plane/src/components/AppShell.tsx
index a535b5a4..99725a82 100644
--- a/workbench/control_plane/src/components/AppShell.tsx
+++ b/workbench/control_plane/src/components/AppShell.tsx
@@ -163,7 +163,7 @@ export default function AppShell({ children }: { children: React.ReactNode }) {
 // ---------------------------------------------------------------------------
 
 import { MessageCircle, FolderOpen, Menu as MenuIcon, Filter, LayoutGrid, Play, FileCode, FlaskConical } from "lucide-react";
-import { resolveIcon } from "@/lib/icons";
+import ThemedIcon from "@/components/Icon";
 
 function MobileBottomNavInner({
   pathname,
@@ -220,7 +220,6 @@ function MobileBottomNavInner({
             <div className="flex flex-col gap-0.5">
               {section.items.map((p) => {
                 const active = pathname?.startsWith(p.href);
-                const Icon = resolveIcon(p.icon);
                 return (
                   <Link
                     key={p.href}
@@ -233,7 +232,7 @@ function MobileBottomNavInner({
                     }`}
                   >
                     <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-secondary text-muted-foreground">
-                      <Icon size={15} strokeWidth={active ? 2.5 : 2} />
+                      <ThemedIcon name={p.icon} size={15} strokeWidth={active ? 2.5 : 2} />
                     </span>
                     <span className="text-sm font-medium">{p.label}</span>
                   </Link>
diff --git a/workbench/control_plane/src/components/Icon.tsx b/workbench/control_plane/src/components/Icon.tsx
new file mode 100644
index 00000000..81cded97
--- /dev/null
+++ b/workbench/control_plane/src/components/Icon.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+/**
+ * Icon — the themed icon primitive.
+ *
+ * Renders a glyph from whichever pack the active theme asks for, using Lucide
+ * names as the shared vocabulary:
+ *
+ *     <Icon name="Plus" size={16} className="text-primary" />
+ *
+ * On the RapidTool and Graphite themes that is Lucide's `Plus`; on Fluent it
+ * is `fluent:add-20-regular`; on Material `material-symbols:add-rounded`. Call
+ * sites never know or care.
+ *
+ * Migrating an existing call site is a one-line change:
+ *     import { Plus } from "lucide-react";  →  import Icon from "@/components/Icon";
+ *     <Plus size={16} />                    →  <Icon name="Plus" size={16} />
+ *
+ * Lucide remains the fallback in three cases — the theme uses it, the name has
+ * no mapping, or the pack has not finished loading — so an icon always renders.
+ *
+ * Note that `resolveIcon()` in `@/lib/icons` is deliberately NOT themed: it is
+ * called from server components and from `iconSvg.ts`, which renders to a
+ * static string for the HTML sandbox, and neither can run hooks.
+ */
+
+import { createElement } from "react";
+import { Icon as IconifyIcon } from "@iconify/react";
+import { resolveIcon } from "@/lib/icons";
+import { useIconPack } from "@/lib/theme/store";
+import { ensureIconPack, useIconPackReady } from "@/lib/theme/icon-packs";
+import { iconifyName } from "@/lib/theme/icon-registry";
+
+export type IconProps = {
+  /** Lucide icon name, e.g. "Plus", "AlertTriangle", "MessageCircle". */
+  name: string;
+  /** Edge length in px. Matches Lucide's `size` prop. */
+  size?: number;
+  className?: string;
+  /**
+   * Lucide stroke weight. Ignored by the Iconify packs, whose glyphs carry
+   * their own weight — passing it is harmless so call sites need no edit.
+   */
+  strokeWidth?: number;
+  style?: React.CSSProperties;
+  "aria-label"?: string;
+  "aria-hidden"?: boolean;
+};
+
+export default function Icon({
+  name,
+  size = 16,
+  className,
+  strokeWidth,
+  style,
+  ...aria
+}: IconProps) {
+  const pack = useIconPack();
+  const ready = useIconPackReady(pack);
+
+  // Idempotent and asynchronous — kicks off the fetch the first time a themed
+  // icon is rendered, in case ThemeProvider's preload has not run yet.
+  if (typeof window !== "undefined") ensureIconPack(pack);
+
+  const themed = ready ? iconifyName(name, pack) : null;
+
+  if (themed) {
+    return (
+      <IconifyIcon
+        icon={themed}
+        width={size}
+        height={size}
+        className={className}
+        style={style}
+        // Iconify renders decorative markup; without a label it should be
+        // invisible to assistive tech, matching Lucide's own default.
+        aria-hidden={aria["aria-label"] ? undefined : true}
+        {...aria}
+      />
+    );
+  }
+
+  // createElement rather than JSX: `resolveIcon` LOOKS UP a component from a
+  // fixed module map, it does not create one, but rendering the result as
+  // `<LucideGlyph />` is indistinguishable from creating a component per render
+  // to the lint rule. Same call shape used by genUITemplates and
+  // GenerativeUINode for the same reason.
+  return createElement(resolveIcon(name), {
+    size,
+    className,
+    strokeWidth,
+    style,
+    ...aria,
+  });
+}
diff --git a/workbench/control_plane/src/components/Providers.tsx b/workbench/control_plane/src/components/Providers.tsx
index fc77a05c..5be9b679 100644
--- a/workbench/control_plane/src/components/Providers.tsx
+++ b/workbench/control_plane/src/components/Providers.tsx
@@ -4,6 +4,7 @@ import { SessionProvider } from "next-auth/react";
 import { ThemeProvider } from "next-themes";
 import ViewModeProvider from "@/components/ViewModeProvider";
 import AccessProvider from "@/components/AccessProvider";
+import AppearanceProvider from "@/components/ThemeProvider";
 
 export default function Providers({
   children,
@@ -13,7 +14,11 @@ export default function Providers({
 }) {
   return (
     <SessionProvider refetchOnWindowFocus={false}>
+      {/* next-themes owns the light/dark axis (the `.light` / `.dark` class).
+          AppearanceProvider owns the orthogonal style axis — which theme, at
+          what density, with which accent — via the `data-theme` attribute. */}
       <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} disableTransitionOnChange>
+        <AppearanceProvider />
         <ViewModeProvider>
           {/* Inside SessionProvider: access is resolved for the signed-in
               member, so it must not mount before the session exists. */}
diff --git a/workbench/control_plane/src/components/Sidebar.tsx b/workbench/control_plane/src/components/Sidebar.tsx
index 8d9af871..3d9b8f95 100644
--- a/workbench/control_plane/src/components/Sidebar.tsx
+++ b/workbench/control_plane/src/components/Sidebar.tsx
@@ -4,10 +4,9 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useSession, signOut } from "next-auth/react";
-import { ChevronDown, ChevronLeft, ChevronRight, LogOut, Command } from "lucide-react";
 import { NAV_SECTIONS, visibleSections, type NavPane, type NavSection } from "@/lib/nav";
 import { useAccess } from "@/components/AccessProvider";
-import { resolveIcon } from "@/lib/icons";
+import ThemedIcon from "@/components/Icon";
 import ThemeToggle from "@/components/ThemeToggle";
 
 /** Mirrors gateway/routes/apps/pins.py's PinnedApp — GET /api/apps/pins. */
@@ -124,7 +123,7 @@ export default function Sidebar() {
           <Link href="/" className="block min-w-0">
             <div className="flex items-center gap-2">
               <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-                <Command size={15} strokeWidth={2.5} />
+                <ThemedIcon name="Command" size={15} strokeWidth={2.5} />
               </span>
               <div>
                 <div className="text-sm font-semibold tracking-tight text-sidebar-foreground leading-tight">CommandCenter</div>
@@ -138,7 +137,7 @@ export default function Sidebar() {
           className="shrink-0 rounded-lg p-1.5 text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-foreground tech-transition"
           title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
         >
-          {collapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
+          {collapsed ? <ThemedIcon name="ChevronRight" size={16} /> : <ThemedIcon name="ChevronLeft" size={16} />}
         </button>
       </div>
 
@@ -176,7 +175,7 @@ export default function Sidebar() {
                 className="ml-2 shrink-0 rounded-lg p-1.5 text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-foreground tech-transition"
                 title="Sign out"
               >
-                <LogOut size={14} />
+                <ThemedIcon name="LogOut" size={14} />
               </button>
               <ThemeToggle />
             </div>
@@ -262,7 +261,8 @@ function NavSectionBlock({
         }`}
       >
         <span>{section.label}</span>
-        <ChevronDown
+        <ThemedIcon
+          name="ChevronDown"
           size={12}
           className={`shrink-0 text-muted-foreground/50 group-hover:text-muted-foreground tech-transition ${
             folded ? "-rotate-90" : ""
@@ -306,7 +306,6 @@ function NavLink({
   pinnedApps?: PinnedApp[];
 }) {
   const active = pathname?.startsWith(pane.href);
-  const Icon = resolveIcon(pane.icon);
 
   if (collapsed) {
     return (
@@ -320,7 +319,7 @@ function NavLink({
             : "text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-foreground"
         }`}
       >
-        <Icon size={18} strokeWidth={active ? 2.5 : 2} />
+        <ThemedIcon name={pane.icon} size={18} strokeWidth={active ? 2.5 : 2} />
         {badge !== undefined && badge > 0 && (
           <span className="absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-amber-500 text-[8px] font-bold text-white">
             {badge > 9 ? "9+" : badge}
@@ -342,7 +341,7 @@ function NavLink({
         }`}
       >
         <div className="flex items-center gap-2.5">
-          <Icon size={16} strokeWidth={active ? 2.5 : 2} />
+          <ThemedIcon name={pane.icon} size={16} strokeWidth={active ? 2.5 : 2} />
           <span className="font-medium text-[13px]">{pane.label}</span>
           {badge !== undefined && badge > 0 && (
             <span className="ml-auto rounded-full bg-amber-500 px-1.5 py-0.5 text-[10px] font-bold text-white">
diff --git a/workbench/control_plane/src/components/ThemeProvider.tsx b/workbench/control_plane/src/components/ThemeProvider.tsx
new file mode 100644
index 00000000..64218007
--- /dev/null
+++ b/workbench/control_plane/src/components/ThemeProvider.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+/**
+ * ThemeProvider — runtime half of the theming engine.
+ *
+ * Renders nothing. Three jobs, all side effects:
+ *
+ *   1. Read the member's stored preferences into the store on mount. The boot
+ *      script has already applied them to the DOM; this is what tells React
+ *      about them.
+ *   2. Fetch the organisation's defaults so a member who has never opened
+ *      Settings still gets the company look, and cache them locally so the
+ *      boot script can apply them on the next load with no flash.
+ *   3. Preload the active theme's icon pack, so themed glyphs are ready
+ *      before the first `<Icon>` needs them rather than after.
+ */
+
+import { useEffect } from "react";
+import { useAppearanceStore, effectiveThemeId } from "@/lib/theme/store";
+import { ensureIconPack } from "@/lib/theme/icon-packs";
+import { resolveTheme } from "@/lib/theme/themes";
+import type { AppearanceSettings } from "@/lib/theme/types";
+
+export default function ThemeProvider() {
+  const hydrate = useAppearanceStore((s) => s.hydrate);
+  const setOrgDefaults = useAppearanceStore((s) => s.setOrgDefaults);
+  const themeId = useAppearanceStore(effectiveThemeId);
+
+  useEffect(() => {
+    hydrate();
+  }, [hydrate]);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    fetch("/api/settings/appearance", { signal: controller.signal })
+      .then((r) => (r.ok ? r.json() : null))
+      .then((data: AppearanceSettings | null) => {
+        if (data?.org) setOrgDefaults(data.org);
+      })
+      .catch(() => {
+        // Signed out, offline, or the gateway is down — the cached org
+        // defaults the boot script already applied remain in force.
+      });
+    return () => controller.abort();
+  }, [setOrgDefaults]);
+
+  useEffect(() => {
+    ensureIconPack(resolveTheme(themeId).iconPack);
+  }, [themeId]);
+
+  return null;
+}
diff --git a/workbench/control_plane/src/components/ThemeStyles.tsx b/workbench/control_plane/src/components/ThemeStyles.tsx
new file mode 100644
index 00000000..0dca1ebd
--- /dev/null
+++ b/workbench/control_plane/src/components/ThemeStyles.tsx
@@ -0,0 +1,28 @@
+/**
+ * ThemeStyles — ships every theme's tokens to the browser.
+ *
+ * The full set is inlined once, in the document head, rather than fetched per
+ * theme. Themes are a few hundred custom properties each, so all of them
+ * together cost less than a single extra round trip, and inlining is what
+ * makes switching instant: changing `data-theme` re-resolves already-parsed
+ * CSS with no network request and no flash of the previous look.
+ *
+ * A server component with no state — the CSS is derived from static manifests,
+ * so it is computed once at module load and reused for every request.
+ */
+
+import { buildAllThemesCss, THEME_STYLE_ID } from "@/lib/theme/css";
+
+const THEME_CSS = buildAllThemesCss();
+
+export default function ThemeStyles() {
+  return (
+    <style
+      // React 19 hoists a style with a `precedence` into <head> and dedupes it
+      // by href, so this renders once even though the layout may re-render.
+      href={THEME_STYLE_ID}
+      precedence="theme"
+      dangerouslySetInnerHTML={{ __html: THEME_CSS }}
+    />
+  );
+}
diff --git a/workbench/control_plane/src/lib/nav.ts b/workbench/control_plane/src/lib/nav.ts
index e57bf964..090989e3 100644
--- a/workbench/control_plane/src/lib/nav.ts
+++ b/workbench/control_plane/src/lib/nav.ts
@@ -204,6 +204,15 @@ export const NAV_SECTIONS: NavSection[] = [
         note: "People · teams · roles · per-user access",
         adminOnly: true,
       },
+      {
+        // Ungated on purpose: choosing your own theme is a personal
+        // preference, not an admin capability. The org-wide default on the
+        // same page is authorized at the gateway.
+        href: "/settings/appearance",
+        label: "Appearance",
+        icon: "Palette",
+        note: "Themes · colour mode · density · accent",
+      },
     ],
   },
 ];
diff --git a/workbench/control_plane/src/lib/theme/boot.ts b/workbench/control_plane/src/lib/theme/boot.ts
new file mode 100644
index 00000000..82676d41
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/boot.ts
@@ -0,0 +1,47 @@
+/**
+ * Pre-paint boot script.
+ *
+ * Runs before React hydrates and before the first paint, so the document is
+ * already wearing the right theme when pixels first hit the screen. Without
+ * it every load would flash the default theme for a frame before the store
+ * caught up — the same problem next-themes solves for light/dark, applied to
+ * the style, density and accent axes it does not know about.
+ *
+ * Constraints: this string is executed as an inline `<script>`, so it cannot
+ * import anything and must not throw. Storage keys are interpolated from
+ * `storage.ts` so the script and the React store always read the same places.
+ * It contains no server- or user-supplied data — the values it acts on come
+ * from localStorage and are written through the CSSOM, never concatenated into
+ * CSS text.
+ */
+
+import { DEFAULT_THEME_ID, THEMES } from "./themes";
+import { DENSITY_SCALE } from "./types";
+import {
+  ACCENT_PROPERTIES,
+  DENSITY_PROPERTY,
+  STORAGE_KEYS,
+  THEME_ATTRIBUTE,
+} from "./storage";
+
+/**
+ * The script source. Generated rather than hand-written so the known-theme
+ * list, density scale and storage keys stay in lockstep with the manifests.
+ */
+export function themeBootScript(): string {
+  const ids = JSON.stringify(THEMES.map((t) => t.id));
+  const scales = JSON.stringify(DENSITY_SCALE);
+  const accentProps = JSON.stringify(ACCENT_PROPERTIES);
+
+  return `(function(){try{
+var d=document.documentElement,ls=window.localStorage;
+var known=${ids},scale=${scales};
+var t=ls.getItem(${JSON.stringify(STORAGE_KEYS.theme)})||ls.getItem(${JSON.stringify(STORAGE_KEYS.orgTheme)});
+if(known.indexOf(t)===-1)t=${JSON.stringify(DEFAULT_THEME_ID)};
+d.setAttribute(${JSON.stringify(THEME_ATTRIBUTE)},t);
+var den=ls.getItem(${JSON.stringify(STORAGE_KEYS.density)})||ls.getItem(${JSON.stringify(STORAGE_KEYS.orgDensity)});
+if(scale[den])d.style.setProperty(${JSON.stringify(DENSITY_PROPERTY)},String(scale[den]));
+var a=ls.getItem(${JSON.stringify(STORAGE_KEYS.accent)});
+if(a){var p=${accentProps};for(var i=0;i<p.length;i++)d.style.setProperty(p[i],a);}
+}catch(e){}})();`;
+}
diff --git a/workbench/control_plane/src/lib/theme/css.test.ts b/workbench/control_plane/src/lib/theme/css.test.ts
new file mode 100644
index 00000000..7b4cbd65
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/css.test.ts
@@ -0,0 +1,133 @@
+/**
+ * CSS generation.
+ *
+ * These assertions encode the two properties the whole engine rests on:
+ * the generated scopes must outrank the fallback layer in `globals.css`, and
+ * a theme's light mode must outrank its own dark mode. Get either wrong and
+ * themes appear to "not apply" in ways that are painful to debug from the
+ * browser, so they are pinned here instead.
+ */
+
+import { describe, expect, it } from "vitest";
+
+import { buildAllThemesCss, buildThemeCss, isSafeColor } from "./css";
+import { THEMES, resolveTheme } from "./themes";
+import type { Theme } from "./types";
+
+const rapidtool = resolveTheme("rapidtool");
+
+describe("buildThemeCss", () => {
+  it("scopes tokens under html[data-theme] so they outrank the :root fallback", () => {
+    const css = buildThemeCss(rapidtool);
+    // `html[data-theme=…]` is (0,1,1); `:root` and `.light` in globals.css are
+    // (0,1,0). The `html` qualifier is what makes generated themes win
+    // regardless of stylesheet order.
+    expect(css).toContain('html[data-theme="rapidtool"] {');
+    expect(css).toContain('html[data-theme="rapidtool"].light {');
+  });
+
+  it("emits dark tokens on the base scope and light tokens on the .light scope", () => {
+    const css = buildThemeCss(rapidtool);
+    const darkStart = css.indexOf('html[data-theme="rapidtool"] {');
+    const lightStart = css.indexOf('html[data-theme="rapidtool"].light {');
+    const darkBlock = css.slice(darkStart, lightStart);
+    const lightBlock = css.slice(lightStart);
+
+    expect(darkBlock).toContain(`--background: ${rapidtool.colors.dark.background};`);
+    expect(lightBlock).toContain(`--background: ${rapidtool.colors.light.background};`);
+  });
+
+  it("puts structural tokens only on the base scope, so light inherits them", () => {
+    const css = buildThemeCss(rapidtool);
+    const lightStart = css.indexOf('html[data-theme="rapidtool"].light {');
+    const lightBlock = css.slice(lightStart);
+
+    // Shape, typography and effects do not vary by mode. Emitting them twice
+    // would double the payload and invite the two copies to disagree.
+    expect(lightBlock).not.toContain("--radius:");
+    expect(lightBlock).not.toContain("--font-app:");
+    expect(lightBlock).not.toContain("--glass-blur:");
+    expect(css).toContain(`--radius: ${rapidtool.shape.radius};`);
+  });
+
+  it("fills unset sidebar tokens from the matching core token", () => {
+    const theme: Theme = {
+      ...rapidtool,
+      id: "fixture",
+      colors: {
+        dark: { ...rapidtool.colors.dark, sidebarBackground: undefined, sidebarAccent: undefined },
+        light: rapidtool.colors.light,
+      },
+    };
+    const css = buildThemeCss(theme);
+    const darkBlock = css.slice(0, css.indexOf(".light {"));
+
+    expect(darkBlock).toContain(`--sidebar-background: ${rapidtool.colors.dark.background};`);
+    expect(darkBlock).toContain(`--sidebar-accent: ${rapidtool.colors.dark.secondary};`);
+  });
+
+  it("rejects theme ids that would need escaping in a selector", () => {
+    for (const id of ['a"b', "a b", "a.b", "A", "-lead", "a{b"]) {
+      expect(() => buildThemeCss({ ...rapidtool, id })).toThrow(/Invalid theme id/);
+    }
+  });
+});
+
+describe("buildAllThemesCss", () => {
+  const css = buildAllThemesCss();
+
+  it("emits a scope pair for every registered theme", () => {
+    for (const theme of THEMES) {
+      expect(css).toContain(`html[data-theme="${theme.id}"] {`);
+      expect(css).toContain(`html[data-theme="${theme.id}"].light {`);
+    }
+  });
+
+  it("orders each theme's light scope after its dark scope", () => {
+    // Equal-specificity ties are broken by source order, so a light block that
+    // preceded its dark block would never take effect.
+    for (const theme of THEMES) {
+      expect(css.indexOf(`html[data-theme="${theme.id}"] {`)).toBeLessThan(
+        css.indexOf(`html[data-theme="${theme.id}"].light {`),
+      );
+    }
+  });
+
+  it("stays small enough to inline in every document", () => {
+    // Inlining is what makes switching instant; if this ever grows past a few
+    // tens of KB the design should move to a fetched stylesheet instead.
+    expect(css.length).toBeLessThan(64_000);
+  });
+});
+
+describe("isSafeColor", () => {
+  it("accepts ordinary colour literals", () => {
+    for (const value of [
+      "#fff",
+      "#0078d4",
+      "#0078d4ff",
+      "rebeccapurple",
+      "hsl(206 100% 42%)",
+      "rgb(0, 120, 212)",
+      "rgba(0,120,212,0.5)",
+      "oklch(0.7 0.15 250)",
+    ]) {
+      expect(isSafeColor(value), value).toBe(true);
+    }
+  });
+
+  it("rejects anything that could escape the declaration", () => {
+    for (const value of [
+      "red; background: url(https://evil.test/x)",
+      "url(https://evil.test/x)",
+      "}",
+      "var(--primary)",
+      "expression(alert(1))",
+      "",
+      "   ",
+      "#".repeat(80),
+    ]) {
+      expect(isSafeColor(value), value).toBe(false);
+    }
+  });
+});
diff --git a/workbench/control_plane/src/lib/theme/css.ts b/workbench/control_plane/src/lib/theme/css.ts
new file mode 100644
index 00000000..cecce207
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/css.ts
@@ -0,0 +1,140 @@
+/**
+ * Theme → CSS.
+ *
+ * Turns theme manifests into the custom-property scopes the app renders
+ * against. The output is emitted once, server-side, into a `<style>` tag in
+ * the document head (see `components/ThemeStyles.tsx`), so switching themes at
+ * runtime is a single attribute write with no stylesheet fetch and no flash.
+ *
+ * Selector strategy
+ * -----------------
+ *   html[data-theme="x"]        → dark tokens  (specificity 0,1,1)
+ *   html[data-theme="x"].light  → light tokens (specificity 0,2,1)
+ *
+ * The `html` element qualifier is deliberate. `globals.css` keeps the original
+ * `:root` / `.light` blocks as a no-JavaScript fallback, and those score
+ * (0,1,0) — lower than everything generated here. Generated themes therefore
+ * always win no matter which stylesheet the browser happens to apply first,
+ * which a bare `[data-theme=…]` selector could not guarantee.
+ */
+
+import type { ColorTokens, Theme } from "./types";
+import { THEMES } from "./themes";
+
+/** `id` of the injected `<style>` element. */
+export const THEME_STYLE_ID = "cc-theme-tokens";
+
+/**
+ * Theme ids become part of a CSS selector, so they are restricted to
+ * characters that need no escaping. Enforced at generation time — a malformed
+ * id fails the build rather than emitting a broken or injectable selector.
+ */
+const SAFE_ID = /^[a-z0-9][a-z0-9-]*$/;
+
+/** `cardForeground` → `card-foreground`. */
+function kebab(name: string): string {
+  return name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+}
+
+/**
+ * Sidebar tokens a theme did not spell out fall back to the equivalent core
+ * token, so a theme only declares the surfaces it wants to look different.
+ */
+function withSidebarDefaults(c: ColorTokens): Required<ColorTokens> {
+  return {
+    ...c,
+    sidebarBackground: c.sidebarBackground ?? c.background,
+    sidebarForeground: c.sidebarForeground ?? c.foreground,
+    sidebarPrimary: c.sidebarPrimary ?? c.primary,
+    sidebarPrimaryForeground: c.sidebarPrimaryForeground ?? c.primaryForeground,
+    sidebarAccent: c.sidebarAccent ?? c.secondary,
+    sidebarAccentForeground: c.sidebarAccentForeground ?? c.secondaryForeground,
+    sidebarBorder: c.sidebarBorder ?? c.border,
+    sidebarRing: c.sidebarRing ?? c.ring,
+  };
+}
+
+function declarations(entries: [string, string][], indent = "  "): string {
+  return entries.map(([k, v]) => `${indent}--${k}: ${v};`).join("\n");
+}
+
+/** Colour declarations for one mode. */
+function colorDeclarations(colors: ColorTokens): [string, string][] {
+  const full = withSidebarDefaults(colors);
+  return Object.entries(full).map(([key, value]) => [kebab(key), value as string]);
+}
+
+/**
+ * The non-colour half of a theme: shape, typography and effects. These do not
+ * vary by mode, so they are emitted once on the theme's dark (base) scope and
+ * inherited by the light scope.
+ */
+function structuralDeclarations(theme: Theme): [string, string][] {
+  const { shape, effects, typography } = theme;
+  return [
+    ["radius", shape.radius],
+    ["border-width", shape.borderWidth],
+    ["font-app", typography.app],
+    ["font-app-mono", typography.mono],
+    ["font-display", typography.display ?? typography.app],
+    ["heading-tracking", typography.headingLetterSpacing],
+    ["heading-weight", typography.headingWeight],
+    ["label-weight", typography.labelWeight],
+    ["glass-blur", effects.glassBlur],
+    ["glass-opacity", effects.glassOpacity],
+    ["glass-opacity-strong", effects.glassOpacityStrong],
+    ["glow-strength", effects.glowStrength],
+    ["elevation", effects.shadow],
+    ["motion-duration", effects.motionDuration],
+    ["motion-easing", effects.motionEasing],
+  ];
+}
+
+/** CSS for a single theme — both modes. */
+export function buildThemeCss(theme: Theme): string {
+  if (!SAFE_ID.test(theme.id)) {
+    throw new Error(
+      `Invalid theme id ${JSON.stringify(theme.id)}: ids must match ${SAFE_ID} ` +
+        `so they can be embedded in a CSS selector without escaping.`,
+    );
+  }
+
+  const base = `html[data-theme="${theme.id}"]`;
+  const dark = declarations([
+    ...structuralDeclarations(theme),
+    ...colorDeclarations(theme.colors.dark),
+  ]);
+  const light = declarations(colorDeclarations(theme.colors.light));
+
+  return [
+    `/* ${theme.name} — ${theme.description} */`,
+    `${base} {`,
+    dark,
+    `}`,
+    `${base}.light {`,
+    light,
+    `}`,
+  ].join("\n");
+}
+
+/** CSS for every built-in theme, concatenated in registration order. */
+export function buildAllThemesCss(themes: Theme[] = THEMES): string {
+  return themes.map(buildThemeCss).join("\n\n");
+}
+
+/**
+ * Accepted forms for a user-supplied accent colour.
+ *
+ * The accent is the one theme value that comes from user input, and it ends up
+ * in a CSS custom property. Restricting it to plain colour literals keeps
+ * anything that could terminate a declaration or open a `url()` out of the
+ * stylesheet, whichever path applies it.
+ */
+const SAFE_COLOR =
+  /^(#[0-9a-f]{3,8}|(rgb|hsl|oklch|lab|lch)a?\([0-9a-z%.,/\s+-]*\)|[a-z]{3,20})$/i;
+
+/** True when `value` is a colour literal safe to use as an accent override. */
+export function isSafeColor(value: string): boolean {
+  const v = value.trim();
+  return v.length > 0 && v.length <= 64 && SAFE_COLOR.test(v);
+}
diff --git a/workbench/control_plane/src/lib/theme/icon-data/fluent.json b/workbench/control_plane/src/lib/theme/icon-data/fluent.json
new file mode 100644
index 00000000..c33db93b
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/icon-data/fluent.json
@@ -0,0 +1 @@
+{"prefix":"fluent","icons":{"spinner-ios-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 3a7 7 0 0 0-7 7a.5.5 0 0 1-1 0a8 8 0 1 1 8 8a.5.5 0 0 1 0-1a7 7 0 1 0 0-14\"/>"},"checkmark-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3.374 10.168a.5.5 0 0 0-.748.664l4 4.5a.5.5 0 0 0 .728.022l10.5-10.5a.5.5 0 0 0-.707-.708L7.02 14.271z\"/>"},"checkmark-circle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14m3.358 4.646a.5.5 0 0 1 .058.638l-.058.07l-4.004 4.004a.5.5 0 0 1-.638.058l-.07-.058l-2-2a.5.5 0 0 1 .638-.765l.07.058L9 11.298l3.651-3.652a.5.5 0 0 1 .707 0\"/>"},"dismiss-20-regular":{"body":"<path fill=\"currentColor\" d=\"m4.089 4.216l.057-.07a.5.5 0 0 1 .638-.057l.07.057L10 9.293l5.146-5.147a.5.5 0 0 1 .638-.057l.07.057a.5.5 0 0 1 .057.638l-.057.07L10.707 10l5.147 5.146a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.638.057l-.07-.057L10 10.707l-5.146 5.147a.5.5 0 0 1-.638.057l-.07-.057a.5.5 0 0 1-.057-.638l.057-.07L9.293 10L4.146 4.854a.5.5 0 0 1-.057-.638l.057-.07z\"/>"},"dismiss-circle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14M7.81 7.114l.069.058L10 9.292l2.121-2.12a.5.5 0 0 1 .638-.058l.07.058a.5.5 0 0 1 .057.637l-.058.07L10.708 10l2.12 2.121a.5.5 0 0 1 .058.638l-.058.07a.5.5 0 0 1-.637.057l-.07-.058L10 10.708l-2.121 2.12a.5.5 0 0 1-.638.058l-.07-.058a.5.5 0 0 1-.057-.637l.058-.07L9.292 10l-2.12-2.121a.5.5 0 0 1-.058-.638l.058-.07a.5.5 0 0 1 .637-.057\"/>"},"warning-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.37 3.556c1.14-2.074 4.12-2.074 5.259 0l5.496 10.005c1.098 1.999-.35 4.444-2.63 4.444H4.504c-2.281 0-3.727-2.445-2.629-4.444zm4.383.481c-.76-1.383-2.746-1.382-3.506 0L2.751 14.042c-.732 1.333.232 2.963 1.753 2.963h10.991c1.52 0 2.485-1.63 1.753-2.963zM10 12.75a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5m0-6.25a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5\"/>"},"error-circle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14m0 9.5a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5M10 6a.5.5 0 0 1 .492.41l.008.09V11a.5.5 0 0 1-.992.09L9.5 11V6.5A.5.5 0 0 1 10 6\"/>"},"info-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.492 8.91A.5.5 0 0 0 9.5 9v4.502l.008.09a.5.5 0 0 0 .992-.09V9zm.307-2.16a.75.75 0 1 0-1.5 0a.75.75 0 0 0 1.5 0M18 10a8 8 0 1 0-16 0a8 8 0 0 0 16 0M3 10a7 7 0 1 1 14 0a7 7 0 0 1-14 0\"/>"},"question-circle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14m0 10.5a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5m0-8a2.5 2.5 0 0 1 1.651 4.377l-.154.125l-.219.163l-.087.072a2 2 0 0 0-.156.149c-.339.36-.535.856-.535 1.614a.5.5 0 0 1-1 0c0-1.012.293-1.752.805-2.298a3 3 0 0 1 .356-.323l.247-.185l.118-.1A1.5 1.5 0 1 0 8.5 8a.5.5 0 0 1-1 .001A2.5 2.5 0 0 1 10 5.5\"/>"},"alert-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.998 2c3.149 0 5.744 2.335 5.984 5.355l.014.223l.004.224l-.001 3.596l.925 2.222q.034.081.053.167l.016.086l.008.132a1 1 0 0 1-.749.963l-.116.027l-.135.01l-3.501-.001l-.005.161a2.5 2.5 0 0 1-4.99 0l-.005-.161H3.999a1 1 0 0 1-.26-.034l-.124-.042a1 1 0 0 1-.603-1.052l.021-.128l.043-.128l.923-2.219L4 7.793l.004-.225C4.127 4.451 6.771 2 9.998 2M11.5 15.004h-3l.007.141a1.5 1.5 0 0 0 1.349 1.348L10 16.5a1.5 1.5 0 0 0 1.493-1.355zM9.998 3c-2.623 0-4.77 1.924-4.98 4.385l-.014.212L5 7.802V11.5l-.038.192l-.963 2.313l11.958.002l.045-.002l-.964-2.313L15 11.5V7.812l-.004-.204C14.891 5.035 12.695 3 9.998 3\"/>"},"pulse-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.004 3a.5.5 0 0 1 .479.37l3.043 11.303l2.495-8.317a.5.5 0 0 1 .947-.032L15.347 10H17.5a.5.5 0 0 1 0 1H15a.5.5 0 0 1-.468-.324l-.98-2.612l-2.573 8.58a.5.5 0 0 1-.962-.014L6.986 5.37L5.48 10.637A.5.5 0 0 1 5 11H2.5a.5.5 0 0 1 0-1h2.123l1.896-6.637A.5.5 0 0 1 7.004 3\"/>"},"add-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2.5a.5.5 0 0 1 .5.5v6.5H17a.5.5 0 0 1 0 1h-6.5V17a.5.5 0 0 1-1 0v-6.5H3a.5.5 0 0 1 0-1h6.5V3a.5.5 0 0 1 .5-.5\"/>"},"subtract-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 10a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 3 10\"/>"},"delete-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.5 4h3a1.5 1.5 0 0 0-3 0m-1 0a2.5 2.5 0 0 1 5 0h5a.5.5 0 0 1 0 1h-1.054l-1.194 10.344A3 3 0 0 1 12.272 18H7.728a3 3 0 0 1-2.98-2.656L3.554 5H2.5a.5.5 0 0 1 0-1zM5.741 15.23A2 2 0 0 0 7.728 17h4.544a2 2 0 0 0 1.987-1.77L15.439 5H4.561zM8.5 7.5A.5.5 0 0 1 9 8v6a.5.5 0 0 1-1 0V8a.5.5 0 0 1 .5-.5M12 8a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z\"/>"},"edit-20-regular":{"body":"<path fill=\"currentColor\" d=\"M17.181 2.927a2.975 2.975 0 0 0-4.259-.054l-9.375 9.375a2.44 2.44 0 0 0-.656 1.194l-.877 3.95a.5.5 0 0 0 .596.597l3.927-.873a2.5 2.5 0 0 0 1.234-.678l9.358-9.358a2.975 2.975 0 0 0 .052-4.153m-3.552.653a1.975 1.975 0 1 1 2.793 2.793l-.671.671l-2.793-2.792zm-1.378 1.38l2.793 2.792l-7.98 7.98a1.5 1.5 0 0 1-.744.409l-3.16.702l.708-3.183c.059-.267.193-.511.386-.704z\"/>"},"edit-line-horizontal-3-20-regular":{"body":"<path fill=\"currentColor\" d=\"M12.922 2.873A2.975 2.975 0 0 1 17.13 7.08l-9.358 9.358a2.5 2.5 0 0 1-1.234.678l-3.926.873a.5.5 0 0 1-.597-.597l.877-3.95c.101-.452.329-.867.656-1.194zm3.535.743a1.975 1.975 0 0 0-2.828-.036l-.671.672l2.793 2.792l.67-.671c.758-.758.774-1.98.036-2.757m-1.413 4.135L12.25 4.96l-7.996 7.996a1.44 1.44 0 0 0-.387.704l-.707 3.183l3.159-.702c.282-.063.54-.205.744-.409zM2.5 3h8.88l-1 1H2.5a.5.5 0 0 1 0-1m0 3h5.88L7.378 7H2.5a.5.5 0 0 1 0-1m0 3h2.879l-1 1H2.5a.5.5 0 0 1 0-1\"/>"},"save-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 5a2 2 0 0 1 2-2h8.379a2 2 0 0 1 1.414.586l1.621 1.621A2 2 0 0 1 17 6.621V15a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1v-4.5A1.5 1.5 0 0 1 6.5 10h7a1.5 1.5 0 0 1 1.5 1.5V16a1 1 0 0 0 1-1V6.621a1 1 0 0 0-.293-.707l-1.621-1.621A1 1 0 0 0 13.379 4H13v2.5A1.5 1.5 0 0 1 11.5 8h-4A1.5 1.5 0 0 1 6 6.5V4zm2 0v2.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5V4zm7 12v-4.5a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0-.5.5V16z\"/>"},"copy-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7 7H5.5A1.5 1.5 0 0 0 4 8.5v6A1.5 1.5 0 0 0 5.5 16h4a1.5 1.5 0 0 0 1.413-1h1.037a2.5 2.5 0 0 1-2.45 2h-4A2.5 2.5 0 0 1 3 14.5v-6A2.5 2.5 0 0 1 5.5 6H7zm7.5-4A2.5 2.5 0 0 1 17 5.5v6a2.5 2.5 0 0 1-2.5 2.5h-4A2.5 2.5 0 0 1 8 11.5v-6A2.5 2.5 0 0 1 10.5 3zm-4 1A1.5 1.5 0 0 0 9 5.5v6a1.5 1.5 0 0 0 1.5 1.5h4a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 14.5 4z\"/>"},"arrow-download-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15.5 17a.5.5 0 0 1 .09.992L15.5 18h-11a.5.5 0 0 1-.09-.992L4.5 17zM10 2.002a.5.5 0 0 1 .492.41l.008.09l-.004 11.794l3.645-3.648a.5.5 0 0 1 .638-.059l.07.058a.5.5 0 0 1 .058.638l-.058.07l-4.492 4.5a.5.5 0 0 1-.255.136l-.106.01a.5.5 0 0 1-.395-.195l-4.457-4.451a.5.5 0 0 1 .637-.766l.07.058l3.645 3.641L9.5 2.502a.5.5 0 0 1 .5-.5\"/>"},"arrow-upload-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15 3.002a.5.5 0 0 0 .09-.992L15 2.002H4a.5.5 0 0 0-.09.992l.09.008zM9.5 18a.5.5 0 0 0 .492-.41L10 17.5L9.996 5.706l3.645 3.648a.5.5 0 0 0 .638.059l.07-.058a.5.5 0 0 0 .058-.638l-.058-.07l-4.492-4.5a.5.5 0 0 0-.255-.136L9.496 4a.5.5 0 0 0-.395.194L4.644 8.647a.5.5 0 0 0 .637.765l.07-.057l3.645-3.641L9 17.5a.5.5 0 0 0 .5.5\"/>"},"arrow-undo-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 2.5a.5.5 0 0 0-1 0v4.9a.6.6 0 0 0 .6.6h4.9a.5.5 0 0 0 0-1H5.906l3.473-3.019a4 4 0 0 1 5.248 6.038l-8.172 7.104a.5.5 0 0 0 .656.754l8.172-7.103a5 5 0 0 0-6.56-7.547L5 6.463z\"/>"},"arrow-counterclockwise-20-regular":{"body":"<path fill=\"currentColor\" d=\"M16 10A6 6 0 0 0 5.528 6H7.5a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 1 0v1.601a7 7 0 1 1-1.98 4.361a.5.5 0 0 1 .998.076A6 6 0 1 0 16 10\"/>"},"arrow-sync-20-regular":{"body":"<path fill=\"currentColor\" d=\"M11.414 3.635a.5.5 0 0 0 0-.707L9.293.807a.5.5 0 0 0-.707.707l.997.997a7.5 7.5 0 0 0-4.075 13.495a.5.5 0 0 0 .6-.8A6.5 6.5 0 0 1 10.066 3.5q.037 0 .073-.005L8.586 5.049a.5.5 0 0 0 .707.707zM8.586 16.363a.5.5 0 0 0 0 .707l2.121 2.121a.5.5 0 0 0 .707-.707l-.997-.997a7.5 7.5 0 0 0 4.075-13.495a.5.5 0 1 0-.6.8q.369.277.704.61A6.5 6.5 0 0 1 9.934 16.5l-.074.004l1.554-1.554a.5.5 0 1 0-.707-.707z\"/>"},"search-20-regular":{"body":"<path fill=\"currentColor\" d=\"M13.73 14.436a6.5 6.5 0 1 1 .707-.707l3.416 3.418a.5.5 0 0 1-.637.764l-.07-.057zm-.71-.71q.385-.32.707-.706a5.5 5.5 0 1 0-.707.707\"/>"},"filter-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.5 13h5a.5.5 0 0 1 .09.992L12.5 14h-5a.5.5 0 0 1-.09-.992zh5zm-2-4h9a.5.5 0 0 1 .09.992L14.5 10h-9a.5.5 0 0 1-.09-.992zh9zm-2-4h13a.5.5 0 0 1 .09.992L16.5 6h-13a.5.5 0 0 1-.09-.992zh13z\"/>"},"options-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14.95 5a2.5 2.5 0 0 0-4.9 0H2.5a.5.5 0 0 0 0 1h7.55a2.5 2.5 0 0 0 4.9 0h2.55a.5.5 0 0 0 0-1zM12.5 7a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m-2.55 7a2.5 2.5 0 0 0-4.9 0H2.5a.5.5 0 0 0 0 1h2.55a2.5 2.5 0 0 0 4.9 0h7.55a.5.5 0 0 0 0-1zM7.5 16a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3\"/>"},"settings-20-regular":{"body":"<path fill=\"currentColor\" d=\"M1.911 7.383a8.5 8.5 0 0 1 1.78-3.08a.5.5 0 0 1 .54-.135l1.918.686a1 1 0 0 0 1.32-.762l.366-2.006a.5.5 0 0 1 .388-.4a8.5 8.5 0 0 1 3.554 0a.5.5 0 0 1 .388.4l.366 2.006a1 1 0 0 0 1.32.762l1.919-.686a.5.5 0 0 1 .54.136a8.5 8.5 0 0 1 1.78 3.079a.5.5 0 0 1-.153.535l-1.555 1.32a1 1 0 0 0 0 1.524l1.555 1.32a.5.5 0 0 1 .152.535a8.5 8.5 0 0 1-1.78 3.08a.5.5 0 0 1-.54.135l-1.918-.686a1 1 0 0 0-1.32.762l-.366 2.007a.5.5 0 0 1-.388.399a8.5 8.5 0 0 1-3.554 0a.5.5 0 0 1-.388-.4l-.366-2.006a1 1 0 0 0-1.32-.762l-1.918.686a.5.5 0 0 1-.54-.136a8.5 8.5 0 0 1-1.78-3.079a.5.5 0 0 1 .152-.535l1.555-1.32a1 1 0 0 0 0-1.524l-1.555-1.32a.5.5 0 0 1-.152-.535m1.06-.006l1.294 1.098a2 2 0 0 1 0 3.05l-1.293 1.098c.292.782.713 1.51 1.244 2.152l1.596-.57q.155-.055.315-.085a2 2 0 0 1 2.326 1.609l.304 1.669a7.6 7.6 0 0 0 2.486 0l.304-1.67a1.998 1.998 0 0 1 2.641-1.524l1.596.571a7.5 7.5 0 0 0 1.245-2.152l-1.294-1.098a1.998 1.998 0 0 1 0-3.05l1.294-1.098a7.5 7.5 0 0 0-1.245-2.152l-1.596.57a2 2 0 0 1-2.64-1.524l-.305-1.669a7.6 7.6 0 0 0-2.486 0l-.304 1.669a2 2 0 0 1-2.64 1.525l-1.597-.571a7.5 7.5 0 0 0-1.244 2.152M7.502 10a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0m1 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 0 0-3 0\"/>"},"share-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.5 3a.5.5 0 0 1 0 1H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1.5a.5.5 0 0 1 1 0V14a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3zm3.797-.957a.5.5 0 0 1 .538.085l5 4.5a.5.5 0 0 1 0 .744l-5 4.5A.5.5 0 0 1 13 11.5V9.34c-1.4.128-2.665.78-3.7 1.608c-1.015.813-1.775 1.768-2.195 2.484l-.158.291A.5.5 0 0 1 6 13.5c0-2.049.382-4.284 1.518-6.024C8.61 5.808 10.368 4.643 13 4.513V2.5l.005-.073a.5.5 0 0 1 .292-.384M14 5a.5.5 0 0 1-.5.5c-2.588 0-4.177 1.045-5.144 2.523c-.685 1.049-1.073 2.34-1.246 3.684c.433-.52.96-1.054 1.565-1.54C9.943 9.153 11.6 8.316 13.5 8.316a.5.5 0 0 1 .5.5v1.56L17.75 7L14 3.623z\"/>"},"send-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2.184 2.112a.5.5 0 0 1 .54-.06l15 7.5a.5.5 0 0 1 0 .895l-15 7.5a.5.5 0 0 1-.707-.576L3.983 10L2.017 2.629a.5.5 0 0 1 .167-.517m2.7 8.388L3.27 16.556L16.382 10L3.269 3.444L4.884 9.5H11.5a.5.5 0 1 1 0 1z\"/>"},"eye-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3.26 11.602C3.942 8.327 6.793 6 10 6s6.057 2.327 6.74 5.602a.5.5 0 0 0 .98-.204C16.943 7.673 13.693 5 10 5s-6.943 2.673-7.72 6.398a.5.5 0 0 0 .98.204M10 8a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7m-2.5 3.5a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0\"/>"},"eye-off-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2.854 2.146a.5.5 0 1 0-.708.708l3.5 3.498a8.1 8.1 0 0 0-3.366 5.046a.5.5 0 1 0 .98.204a7.1 7.1 0 0 1 3.107-4.528L7.953 8.66a3.5 3.5 0 1 0 4.886 4.886l4.307 4.308a.5.5 0 0 0 .708-.708zm9.265 10.68A2.5 2.5 0 1 1 8.673 9.38zm-1.995-4.824l3.374 3.374a3.5 3.5 0 0 0-3.374-3.374M10 6c-.57 0-1.129.074-1.666.213l-.803-.803A7.7 7.7 0 0 1 10 5c3.693 0 6.942 2.673 7.72 6.398a.5.5 0 0 1-.98.204C16.058 8.327 13.207 6 10 6\"/>"},"chevron-down-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15.854 7.646a.5.5 0 0 1 .001.707l-5.465 5.484a.55.55 0 0 1-.78 0L4.147 8.353a.5.5 0 1 1 .708-.706L10 12.812l5.147-5.165a.5.5 0 0 1 .707-.001\"/>"},"chevron-up-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.147 12.353a.5.5 0 0 1-.001-.707L9.61 6.162a.55.55 0 0 1 .779 0l5.465 5.484a.5.5 0 0 1-.708.706L10 7.188l-5.146 5.164a.5.5 0 0 1-.707.001\"/>"},"chevron-left-20-regular":{"body":"<path fill=\"currentColor\" d=\"M12.353 15.854a.5.5 0 0 1-.707.001L6.162 10.39a.55.55 0 0 1 0-.78l5.484-5.464a.5.5 0 1 1 .706.708L7.188 10l5.164 5.147a.5.5 0 0 1 .001.707\"/>"},"chevron-right-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.646 4.147a.5.5 0 0 1 .707-.001l5.484 5.465a.55.55 0 0 1 0 .779l-5.484 5.465a.5.5 0 0 1-.706-.708L12.812 10L7.647 4.854a.5.5 0 0 1-.001-.707\"/>"},"arrow-left-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.159 16.867a.5.5 0 1 0 .674-.739l-6.168-5.63h13.831a.5.5 0 0 0 0-1H3.668l6.165-5.629a.5.5 0 0 0-.674-.738L2.243 9.445a.75.75 0 0 0-.24.631a.75.75 0 0 0 .24.477z\"/>"},"arrow-right-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.837 3.13a.5.5 0 0 0-.674.74L16.33 9.5H2.5a.5.5 0 0 0 0 1h13.828l-6.165 5.628a.5.5 0 0 0 .674.739l6.916-6.314a.747.747 0 0 0 0-1.108z\"/>"},"arrow-up-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3.133 9.16a.5.5 0 1 0 .738.675l5.631-6.168v13.831a.5.5 0 1 0 1 0V3.67l5.628 6.165a.5.5 0 0 0 .739-.674l-6.314-6.916a.75.75 0 0 0-.632-.24a.75.75 0 0 0-.476.24z\"/>"},"arrow-down-20-regular":{"body":"<path fill=\"currentColor\" d=\"M16.867 10.837a.5.5 0 1 0-.739-.674l-5.63 6.168V2.5a.5.5 0 0 0-1 0v13.828l-5.629-6.165a.5.5 0 0 0-.738.674l6.314 6.916a.747.747 0 0 0 1.108 0z\"/>"},"arrow-enter-left-20-regular":{"body":"<path fill=\"currentColor\" d=\"m3.76 12l3.333 3.136a.5.5 0 0 1-.686.728l-4.25-4a.5.5 0 0 1 0-.728l4.25-4a.5.5 0 1 1 .686.728L3.76 11H15a2 2 0 0 0 2-2V4.5a.5.5 0 0 1 1 0V9a3 3 0 0 1-3 3z\"/>"},"open-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-2.5a.5.5 0 0 1 1 0V14a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h2.5a.5.5 0 0 1 0 1zm5-.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V4.707l-4.146 4.147a.5.5 0 0 1-.708-.708L15.293 4H11.5a.5.5 0 0 1-.5-.5\"/>"},"more-horizontal-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6.25 10a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0m5 0a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0M15 11.25a1.25 1.25 0 1 0 0-2.5a1.25 1.25 0 0 0 0 2.5\"/>"},"more-vertical-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 6a1.25 1.25 0 1 1 0-2.5A1.25 1.25 0 0 1 10 6m0 5.25a1.25 1.25 0 1 1 0-2.5a1.25 1.25 0 0 1 0 2.5m-1.25 4a1.25 1.25 0 1 0 2.5 0a1.25 1.25 0 0 0-2.5 0\"/>"},"navigation-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2 4.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5m0 5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5m.5 4.5a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1z\"/>"},"panel-left-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2 6a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3zm6.5-2v11H15a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm-1 0H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2.5z\"/>"},"arrow-expand-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3.5 3a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0V4.707l3.146 3.147a.5.5 0 1 0 .708-.708L4.707 4H7.5a.5.5 0 0 0 0-1zm0 14a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 1 0v2.793l3.146-3.147a.5.5 0 0 1 .708.708L4.707 16H7.5a.5.5 0 0 1 0 1zM17 3.5a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 0 0 1h2.793l-3.147 3.146a.5.5 0 0 0 .708.708L16 4.707V7.5a.5.5 0 0 0 1 0zM16.5 17a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-1 0v2.793l-3.146-3.147a.5.5 0 0 0-.708.708L15.293 16H12.5a.5.5 0 0 0 0 1z\"/>"},"arrow-minimize-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.5 11a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0v-3.793l-5.146 5.147a.5.5 0 0 1-.708-.707L7.293 12H3.5a.5.5 0 0 1 0-1zm8.647-8.854a.5.5 0 1 1 .707.708L12.707 8H16.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 1 0v3.793z\"/>"},"mail-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15.5 4A2.5 2.5 0 0 1 18 6.5v8a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 14.5v-8A2.5 2.5 0 0 1 4.5 4zM17 7.961l-6.746 3.97a.5.5 0 0 1-.426.038l-.082-.038L3 7.963V14.5A1.5 1.5 0 0 0 4.5 16h11a1.5 1.5 0 0 0 1.5-1.5zM15.5 5h-11A1.5 1.5 0 0 0 3 6.5v.302l7 4.118l7-4.12v-.3A1.5 1.5 0 0 0 15.5 5\"/>"},"mail-read-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.743 2.071a.5.5 0 0 1 .514 0l6.772 4.063A2 2 0 0 1 18 7.85v6.65a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 14.5V7.85a2 2 0 0 1 .971-1.716zM10 3.083L3.486 6.992L3.472 7L10 10.917L16.528 7l-.013-.008zm7 4.8l-6.743 4.046a.5.5 0 0 1-.514 0L3 7.883V14.5A1.5 1.5 0 0 0 4.5 16h11a1.5 1.5 0 0 0 1.5-1.5z\"/>"},"mail-dismiss-20-regular":{"body":"<path fill=\"currentColor\" d=\"M19 5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.646-1.146a.5.5 0 0 0-.708-.708L14.5 4.793l-1.146-1.147a.5.5 0 0 0-.708.708L13.793 5.5l-1.147 1.146a.5.5 0 0 0 .708.708L14.5 6.207l1.146 1.147a.5.5 0 0 0 .708-.708L15.207 5.5zM17 14.5v-4.1a5.5 5.5 0 0 0 1-.657V14.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 14.5v-8A2.5 2.5 0 0 1 4.5 4h4.707a5.5 5.5 0 0 0-.185 1H4.5A1.5 1.5 0 0 0 3 6.5v.302l7 4.118l1.441-.848q.488.327 1.043.547l-2.23 1.312a.5.5 0 0 1-.426.038l-.082-.038L3 7.963V14.5A1.5 1.5 0 0 0 4.5 16h11a1.5 1.5 0 0 0 1.5-1.5\"/>"},"mail-inbox-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zm10 7h-3.5a.5.5 0 0 0-.5.5v.011l-.004.06a2.6 2.6 0 0 1-.256.955a1.7 1.7 0 0 1-.572.667c-.26.174-.63.307-1.168.307s-.907-.133-1.168-.307a1.7 1.7 0 0 1-.572-.667A2.6 2.6 0 0 1 8 10.511V10.5a.5.5 0 0 0-.5-.5H4V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2zM4 11h3.05c.047.264.137.616.315.974c.186.371.473.758.912 1.051c.443.295 1.01.475 1.723.475s1.28-.18 1.723-.475c.44-.293.726-.68.912-1.051c.178-.358.268-.71.315-.974H16v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z\"/>"},"arrow-reply-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.354 3.646a.5.5 0 0 1 0 .708L3.707 8H10.5a7.5 7.5 0 0 1 7.5 7.5a.5.5 0 0 1-1 0A6.5 6.5 0 0 0 10.5 9H3.707l3.647 3.646a.5.5 0 0 1-.708.708l-4.5-4.5a.5.5 0 0 1 0-.708l4.5-4.5a.5.5 0 0 1 .708 0\"/>"},"arrow-reply-all-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.354 3.646a.5.5 0 0 1 0 .708L3.207 8.5l4.147 4.146a.5.5 0 0 1-.708.708l-4.5-4.5a.5.5 0 0 1 0-.708l4.5-4.5a.5.5 0 0 1 .708 0m3 0a.5.5 0 0 1 0 .708L6.707 8H10.5a7.5 7.5 0 0 1 7.5 7.5a.5.5 0 0 1-1 0A6.5 6.5 0 0 0 10.5 9H6.707l3.647 3.646a.5.5 0 0 1-.708.708l-4.5-4.5a.5.5 0 0 1 0-.708l4.5-4.5a.5.5 0 0 1 .708 0\"/>"},"arrow-forward-20-regular":{"body":"<path fill=\"currentColor\" d=\"M12.646 3.646a.5.5 0 0 0 0 .708L16.293 8H9.5A7.5 7.5 0 0 0 2 15.5a.5.5 0 0 0 1 0A6.5 6.5 0 0 1 9.5 9h6.793l-3.647 3.646a.5.5 0 0 0 .708.708l4.5-4.5a.5.5 0 0 0 0-.708l-4.5-4.5a.5.5 0 0 0-.708 0\"/>"},"chat-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 1 1-3.613 15.14l-.121-.065l-3.645.91a.5.5 0 0 1-.62-.441v-.082l.014-.083l.91-3.644l-.063-.12a8 8 0 0 1-.83-2.887l-.025-.382L2 10a8 8 0 0 1 8-8m0 1a7 7 0 0 0-6.106 10.425a.5.5 0 0 1 .063.272l-.014.094l-.756 3.021l3.024-.754a.5.5 0 0 1 .188-.01l.091.021l.087.039A7 7 0 1 0 10 3m.5 8a.5.5 0 0 1 .09.992L10.5 12h-3a.5.5 0 0 1-.09-.992L7.5 11zm2-3a.5.5 0 0 1 .09.992L12.5 9h-5a.5.5 0 0 1-.09-.992L7.5 8z\"/>"},"chat-multiple-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.538 2a6.5 6.5 0 0 0-5.674 9.672l-.796 2.082a1 1 0 0 0 1.204 1.32l2.487-.697A6.5 6.5 0 1 0 8.539 2m-5.5 6.5a5.5 5.5 0 1 1 2.998 4.9l-.174-.09l-2.86.801l.969-2.536l-.128-.21A5.47 5.47 0 0 1 3.038 8.5m8.463 9.5a6.49 6.49 0 0 1-4.927-2.26a7.5 7.5 0 0 0 1.76.257A5.5 5.5 0 0 0 11.5 17c.902 0 1.752-.217 2.502-.6l.174-.09l2.86.801l-.969-2.536l.128-.21c.51-.834.805-1.814.805-2.865a5.47 5.47 0 0 0-.964-3.11a7.5 7.5 0 0 0-.235-1.763A6.48 6.48 0 0 1 18 11.5c0 1.151-.3 2.233-.825 3.172l.795 2.082a1 1 0 0 1-1.204 1.32l-2.487-.697c-.843.4-1.786.623-2.78.623\"/>"},"call-20-regular":{"body":"<path fill=\"currentColor\" d=\"m6.987 2.066l-.717.216a3.5 3.5 0 0 0-2.454 2.854c-.297 2.068.367 4.486 1.968 7.259c1.597 2.766 3.355 4.548 5.29 5.328a3.5 3.5 0 0 0 3.715-.705l.542-.514a2 2 0 0 0 .247-2.623l-1.356-1.88a1.5 1.5 0 0 0-1.655-.556l-2.051.627l-.053.01c-.226.033-.748-.456-1.398-1.582c-.68-1.178-.82-1.867-.633-2.045l1.043-.973a2.5 2.5 0 0 0 .575-2.85l-.662-1.471a2 2 0 0 0-2.4-1.095m1.49 1.505l.66 1.471a1.5 1.5 0 0 1-.344 1.71l-1.046.974C7.078 8.36 7.3 9.442 8.2 11c.846 1.466 1.618 2.19 2.448 2.064l.124-.026l2.088-.637a.5.5 0 0 1 .552.185l1.356 1.88a1 1 0 0 1-.123 1.312l-.543.514a2.5 2.5 0 0 1-2.653.503c-1.698-.684-3.303-2.311-4.798-4.9C5.152 9.3 4.545 7.093 4.806 5.278a2.5 2.5 0 0 1 1.753-2.039l.717-.216a1 1 0 0 1 1.2.548\"/>"},"attach-20-regular":{"body":"<path fill=\"currentColor\" d=\"m4.828 10.485l5.657-5.657a3 3 0 0 1 4.243 4.243L8.01 15.788a1.5 1.5 0 0 1-2.121-2.121l6.01-6.01a.5.5 0 1 0-.707-.708l-6.01 6.01a2.5 2.5 0 0 0 3.535 3.536l6.718-6.717A4 4 0 1 0 9.778 4.12L4.12 9.778a.5.5 0 0 0 .707.707\"/>"},"mention-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 0 1 8 8c0 2.5-1.378 3.996-3 3.996c-1.071 0-2.036-.652-2.567-1.815C11.82 13.26 10.76 14 9.5 14C7.497 14 6 12.134 6 10s1.497-4 3.5-4c1 0 1.875.466 2.5 1.198V6.5a.5.5 0 0 1 1 0V10l.013.39c.126 1.872 1.164 2.606 1.987 2.606c.878 0 2-.835 2-2.996a7 7 0 1 0-4.712 6.614a.54.54 0 0 1 .559.121c.253.253.176.68-.16.8A8 8 0 1 1 10 2m-.5 5C8.189 7 7 8.268 7 10s1.189 3 2.5 3s2.5-1.268 2.5-3s-1.189-3-2.5-3\"/>"},"person-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a4 4 0 1 0 0 8a4 4 0 0 0 0-8M7 6a3 3 0 1 1 6 0a3 3 0 0 1-6 0m-1.991 5A2 2 0 0 0 3 13c0 1.691.833 2.966 2.135 3.797C6.417 17.614 8.145 18 10 18s3.583-.386 4.865-1.203C16.167 15.967 17 14.69 17 13a2 2 0 0 0-2-2zM4 13c0-.553.448-1 1.009-1H15a1 1 0 0 1 1 1c0 1.309-.622 2.284-1.673 2.953C13.257 16.636 11.735 17 10 17s-3.257-.364-4.327-1.047C4.623 15.283 4 14.31 4 13\"/>"},"people-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.5 6.75a2.25 2.25 0 1 1 4.5 0a2.25 2.25 0 0 1-4.5 0M6.75 3.5a3.25 3.25 0 1 0 0 6.5a3.25 3.25 0 0 0 0-6.5m5.687 11.645c.538.22 1.215.355 2.063.355c1.881 0 2.921-.668 3.469-1.434a2.9 2.9 0 0 0 .521-1.36a2 2 0 0 0 .01-.137V12.5A1.5 1.5 0 0 0 17 11h-4.63c.24.29.42.629.525 1H17a.5.5 0 0 1 .5.5v.054l-.005.05a1.9 1.9 0 0 1-.34.88c-.327.459-1.037 1.016-2.655 1.016c-.732 0-1.278-.114-1.687-.281c-.082.28-.201.596-.376.926M1.5 13a2 2 0 0 1 2-2H10a2 2 0 0 1 2 2v.084l-.002.04l-.01.135a3.95 3.95 0 0 1-.67 1.806C10.617 16.08 9.263 17 6.75 17s-3.867-.92-4.568-1.934a3.95 3.95 0 0 1-.67-1.807a3 3 0 0 1-.012-.175zm1 .06v.018l.007.083a2.95 2.95 0 0 0 .498 1.336C3.492 15.201 4.513 16 6.75 16s3.258-.799 3.745-1.503a2.95 2.95 0 0 0 .498-1.336q.006-.057.006-.083l.001-.017V13a1 1 0 0 0-1-1H3.5a1 1 0 0 0-1 1zM13 7.5a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0M14.5 5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5\"/>"},"person-add-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9 2a4 4 0 1 0 0 8a4 4 0 0 0 0-8M6 6a3 3 0 1 1 6 0a3 3 0 0 1-6 0m-1.991 5A2 2 0 0 0 2 13c0 1.691.833 2.966 2.135 3.797C5.417 17.614 7.145 18 9 18q.617 0 1.21-.057a5.5 5.5 0 0 1-.618-.958Q9.301 17 9 17c-1.735 0-3.257-.364-4.327-1.047C3.623 15.283 3 14.31 3 13c0-.553.448-1 1.009-1h5.59q.277-.538.658-1zM14.5 19a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9m0-7a.5.5 0 0 1 .5.5V14h1.5a.5.5 0 0 1 0 1H15v1.5a.5.5 0 0 1-1 0V15h-1.5a.5.5 0 0 1 0-1H14v-1.5a.5.5 0 0 1 .5-.5\"/>"},"person-subtract-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a4 4 0 1 0 0 8a4 4 0 0 0 0-8M7 6a3 3 0 1 1 6 0a3 3 0 0 1-6 0m-1.991 5A2 2 0 0 0 3 13c0 1.691.833 2.966 2.135 3.797C6.417 17.614 8.145 18 10 18q.127 0 .255-.003a5.5 5.5 0 0 1-.659-1.004c-1.567-.052-2.937-.41-3.923-1.04C4.623 15.283 4 14.31 4 13c0-.553.448-1 1.009-1h4.59q.277-.538.658-1zM19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-7 0a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 0-1h-4a.5.5 0 0 0-.5.5\"/>"},"building-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6.75 6.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m.75 2.25a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m-.75 3.75a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m3.75-6.75a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0M9.75 9.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m.75 2.25a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m2.25.75a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5M4.5 18a.5.5 0 0 1-.5-.5v-14A1.5 1.5 0 0 1 5.5 2h6A1.5 1.5 0 0 1 13 3.5V8h1.5A1.5 1.5 0 0 1 16 9.5v8a.5.5 0 0 1-.5.5zM5 3.5V17h2v-2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5V17h2V9.5a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0-.5.5M12 15h-1.5v2H12zm-2.5 0H8v2h1.5z\"/>"},"document-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2zM5 4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1zm9.793 3H11.5a.5.5 0 0 1-.5-.5V3.207z\"/>"},"document-text-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6.5 10a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zM4 4a2 2 0 0 1 2-2h4.586a1.5 1.5 0 0 1 1.06.44l3.915 3.914A1.5 1.5 0 0 1 16 7.414V16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 10 6.5V3zm5.5 4h3.293L11 3.207V6.5a.5.5 0 0 0 .5.5\"/>"},"document-javascript-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4 4a2 2 0 0 1 2-2h4.586a1.5 1.5 0 0 1 1.06.44l3.915 3.914A1.5 1.5 0 0 1 16 7.414V16a2 2 0 0 1-2 2H8.5c.219-.29.375-.63.45-1H14a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 10 6.5V3H6a1 1 0 0 0-1 1v7.5q-.123.091-.232.198A1.5 1.5 0 0 0 4 11.085zm7.5 3h3.293L11 3.207V6.5a.5.5 0 0 0 .5.5m-8 5a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0V16a.5.5 0 0 0-1 0v.5a1.5 1.5 0 0 0 3 0v-4a.5.5 0 0 0-.5-.5M5 13.5a1.5 1.5 0 0 1 3 0a.5.5 0 0 1-1 0a.5.5 0 0 0-1 0v.382a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 8 16.118v.382a1.5 1.5 0 0 1-3 0a.5.5 0 0 1 1 0a.5.5 0 0 0 1 0v-.382a.5.5 0 0 0-.276-.447l-.895-.447A1.5 1.5 0 0 1 5 13.882z\"/>"},"document-table-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 10.5A1.5 1.5 0 0 1 7.5 9h5a1.5 1.5 0 0 1 1.5 1.5v4a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 6 14.5zM8 15v-2H7v1.5a.5.5 0 0 0 .5.5zm1-3h4v-1.5a.5.5 0 0 0-.5-.5H9zm0 3h3.5a.5.5 0 0 0 .5-.5V13H9zm-1.5-5a.5.5 0 0 0-.5.5V12h1v-2zM6 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2zM5 4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1zm9.793 3H11.5a.5.5 0 0 1-.5-.5V3.207z\"/>"},"image-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14 7.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0a.5.5 0 0 0 1 0M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm3-2a2 2 0 0 0-2 2v8c0 .373.102.722.28 1.02l4.669-4.588a1.5 1.5 0 0 1 2.102 0l4.67 4.588A2 2 0 0 0 16 14V6a2 2 0 0 0-2-2zm0 12h8c.37 0 .715-.1 1.012-.274l-4.662-4.58a.5.5 0 0 0-.7 0l-4.662 4.58A2 2 0 0 0 6 16\"/>"},"folder-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.5 3A2.5 2.5 0 0 0 2 5.5v9A2.5 2.5 0 0 0 4.5 17h11a2.5 2.5 0 0 0 2.5-2.5v-7A2.5 2.5 0 0 0 15.5 5H9.707L8.22 3.513A1.75 1.75 0 0 0 6.982 3zM3 5.5A1.5 1.5 0 0 1 4.5 4h2.482a.75.75 0 0 1 .53.22l1.28 1.28L7.44 6.854A.5.5 0 0 1 7.086 7H3zM3 8h4.086a1.5 1.5 0 0 0 1.06-.44L9.707 6H15.5A1.5 1.5 0 0 1 17 7.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5z\"/>"},"folder-open-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 5.5v6.604l1.5-2.6a3 3 0 0 1 2.599-1.5H15V7.5A1.5 1.5 0 0 0 13.5 6h-4a.5.5 0 0 1-.353-.146L7.44 4.146A.5.5 0 0 0 7.086 4H4.5A1.5 1.5 0 0 0 3 5.5m1.284 10.485q.106.015.22.015H13.9a2 2 0 0 0 1.732-1l2.163-3.745a1.5 1.5 0 0 0-1.3-2.25H7.1a2 2 0 0 0-1.732 1L3.205 13.75a1.5 1.5 0 0 0 1.079 2.235M2 14.46V5.5A2.5 2.5 0 0 1 4.5 3h2.586a1.5 1.5 0 0 1 1.06.44L9.708 5H13.5A2.5 2.5 0 0 1 16 7.5v.505h.496c1.925 0 3.128 2.083 2.166 3.75L16.499 15.5a3 3 0 0 1-2.598 1.5h-9.4q-.095 0-.186-.007a2.46 2.46 0 0 1-1.438-.592A2.5 2.5 0 0 1 2 14.461\"/>"},"folder-arrow-right-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.5 3A2.5 2.5 0 0 0 2 5.5v9A2.5 2.5 0 0 0 4.5 17h5.1a5.5 5.5 0 0 1-.393-1H4.5A1.5 1.5 0 0 1 3 14.5V8h4.086a1.5 1.5 0 0 0 1.06-.44L9.707 6H15.5A1.5 1.5 0 0 1 17 7.5v2.1q.538.276 1 .657V7.5A2.5 2.5 0 0 0 15.5 5H9.707L8.22 3.513A1.75 1.75 0 0 0 6.982 3zM3 5.5A1.5 1.5 0 0 1 4.5 4h2.482a.75.75 0 0 1 .53.22l1.28 1.28L7.44 6.854A.5.5 0 0 1 7.086 7H3zM14.5 10a4.5 4.5 0 1 1 0 9a4.5 4.5 0 0 1 0-9m2.353 4.854l.003-.003a.5.5 0 0 0 .144-.348v-.006a.5.5 0 0 0-.146-.35l-2-2a.5.5 0 0 0-.708.707L15.293 14H12.5a.5.5 0 0 0 0 1h2.793l-1.147 1.146a.5.5 0 0 0 .708.708z\"/>"},"board-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm3-2a2 2 0 0 0-2 2v1.058l5.5-.053V4zm4.5 0v8H16V6a2 2 0 0 0-2-2zm5.5 9h-5.5v3H14a2 2 0 0 0 2-2zm-6.5 3V8.005L4 8.058V14a2 2 0 0 0 2 2z\"/>"},"archive-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.5 10a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM2 4.75C2 3.784 2.784 3 3.75 3h12.5c.966 0 1.75.784 1.75 1.75v1.5c0 .698-.409 1.3-1 1.582V14a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7.832A1.75 1.75 0 0 1 2 6.25zM3.75 4a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h12.5a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75zM4 8v6a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8z\"/>"},"archive-arrow-back-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.5 10a.5.5 0 0 0 0 1h1.757c.313-.38.677-.716 1.08-1zM6 16h3.207q.149.524.393 1H6a3 3 0 0 1-3-3V7.832A1.75 1.75 0 0 1 2 6.25v-1.5C2 3.784 2.784 3 3.75 3h12.5c.966 0 1.75.784 1.75 1.75v1.5c0 .698-.409 1.3-1 1.582V9.6a5.5 5.5 0 0 0-1-.393V8H4v6a2 2 0 0 0 2 2M3.75 4a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h12.5a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75zM14.5 19a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9m-.896-6.396l-.897.896h1.543A2.75 2.75 0 0 1 17 16.25v.25a.5.5 0 0 1-1 0v-.25a1.75 1.75 0 0 0-1.75-1.75h-1.543l.897.896a.5.5 0 0 1-.708.708l-1.752-1.753a.5.5 0 0 1 .002-.705l1.75-1.75a.5.5 0 0 1 .708.708\"/>"},"book-open-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 16c-.456.607-1.182 1-2 1H3.5A1.5 1.5 0 0 1 2 15.5v-11A1.5 1.5 0 0 1 3.5 3H8c.818 0 1.544.393 2 1c.456-.607 1.182-1 2-1h4.5A1.5 1.5 0 0 1 18 4.5v11a1.5 1.5 0 0 1-1.5 1.5H12a2.5 2.5 0 0 1-2-1M3 4.5v11a.5.5 0 0 0 .5.5H8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 8 4H3.5a.5.5 0 0 0-.5.5m7.5 10A1.5 1.5 0 0 0 12 16h4.5a.5.5 0 0 0 .5-.5v-11a.5.5 0 0 0-.5-.5H12a1.5 1.5 0 0 0-1.5 1.5z\"/>"},"note-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14 3a3 3 0 0 1 2.995 2.824L17 6v4.379a2 2 0 0 1-.467 1.284l-.119.13l-4.621 4.621a2 2 0 0 1-1.238.578l-.176.008H6a3 3 0 0 1-2.995-2.824L3 14V6a3 3 0 0 1 2.824-2.995L6 3zm0 1H6a2 2 0 0 0-1.995 1.85L4 6v8a2 2 0 0 0 1.85 1.995L6 16h4v-3a3 3 0 0 1 2.824-2.995L13 10h3V6a2 2 0 0 0-1.85-1.995zm1.783 7.001L13 11a2 2 0 0 0-1.995 1.85L11 13v2.781l.086-.074l4.621-4.621q.04-.04.075-.085\"/>"},"clipboard-checkmark-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.085 3A1.5 1.5 0 0 1 8.5 2h3a1.5 1.5 0 0 1 1.415 1H14.5A1.5 1.5 0 0 1 16 4.5v4.707a5.5 5.5 0 0 0-1-.185V4.5a.5.5 0 0 0-.5-.5h-1.585A1.5 1.5 0 0 1 11.5 5h-3a1.5 1.5 0 0 1-1.415-1H5.5a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h4.1q.276.538.657 1H5.5A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3zM8.5 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.146-1.854a.5.5 0 0 0-.708 0L13.5 15.293l-.646-.647a.5.5 0 0 0-.708.708l1 1a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.708\"/>"},"grid-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.5 11A1.5 1.5 0 0 1 9 12.5v4A1.5 1.5 0 0 1 7.5 18h-4A1.5 1.5 0 0 1 2 16.5v-4A1.5 1.5 0 0 1 3.5 11zm9 0a1.5 1.5 0 0 1 1.5 1.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a1.5 1.5 0 0 1-1.5-1.5v-4a1.5 1.5 0 0 1 1.5-1.5zm-9 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5m9 0h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5m-9-10A1.5 1.5 0 0 1 9 3.5v4A1.5 1.5 0 0 1 7.5 9h-4A1.5 1.5 0 0 1 2 7.5v-4A1.5 1.5 0 0 1 3.5 2zm9 0A1.5 1.5 0 0 1 18 3.5v4A1.5 1.5 0 0 1 16.5 9h-4A1.5 1.5 0 0 1 11 7.5v-4A1.5 1.5 0 0 1 12.5 2zm-9 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5m9 0h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5\"/>"},"apps-list-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2 3.5A1.5 1.5 0 0 1 3.5 2h1A1.5 1.5 0 0 1 6 3.5v1A1.5 1.5 0 0 1 4.5 6h-1A1.5 1.5 0 0 1 2 4.5zM3.5 3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM2 9.5A1.5 1.5 0 0 1 3.5 8h1A1.5 1.5 0 0 1 6 9.5v1A1.5 1.5 0 0 1 4.5 12h-1A1.5 1.5 0 0 1 2 10.5zM3.5 9a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM2 15.5A1.5 1.5 0 0 1 3.5 14h1A1.5 1.5 0 0 1 6 15.5v1A1.5 1.5 0 0 1 4.5 18h-1A1.5 1.5 0 0 1 2 16.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM8 4.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5\"/>"},"column-triple-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 17a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2zm-1-2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1zm7 2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2zm-1-2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1zm7 2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2zm-1-2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1z\"/>"},"task-list-square-ltr-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.354 7.104a.5.5 0 0 0-.708-.708L7.234 7.808l-.397-.362a.5.5 0 0 0-.674.738l.75.685a.5.5 0 0 0 .69-.016zm0 4.292a.5.5 0 0 1 0 .708l-1.75 1.75a.5.5 0 0 1-.691.015l-.75-.685a.5.5 0 0 1 .674-.738l.397.363l1.412-1.413a.5.5 0 0 1 .708 0M11 12a.5.5 0 0 0 0 1h2.5a.5.5 0 0 0 0-1zm-.5-4.5A.5.5 0 0 1 11 7h2.5a.5.5 0 0 1 0 1H11a.5.5 0 0 1-.5-.5M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zM4 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z\"/>"},"text-bullet-list-tree-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 5.5a1 1 0 1 0 0-2a1 1 0 0 0 0 2m3-1a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m0 5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m4.5 4.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zm-2.5.5a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-5-4a1 1 0 1 0 0-2a1 1 0 0 0 0 2\"/>"},"checkbox-checked-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zM4 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm9.854 1.854a.5.5 0 0 0-.708-.708L8.5 11.793l-1.646-1.647a.5.5 0 0 0-.708.708l2 2a.5.5 0 0 0 .708 0z\"/>"},"square-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm3-2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z\"/>"},"circle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 3a7 7 0 1 0 0 14a7 7 0 0 0 0-14m-8 7a8 8 0 1 1 16 0a8 8 0 0 1-16 0\"/>"},"clock-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14m-.5 2a.5.5 0 0 1 .492.41L10 5.5V10h2.5a.5.5 0 0 1 .09.992L12.5 11h-3a.5.5 0 0 1-.492-.41L9 10.5v-5a.5.5 0 0 1 .5-.5\"/>"},"timer-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.5 2a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1zm7.656 1.929a.5.5 0 1 0-.707.707l1.414 1.414a.5.5 0 1 0 .707-.707zM9.5 6a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5m0 12a7 7 0 1 0 0-14a7 7 0 0 0 0 14m0-1a6 6 0 1 1 0-12a6 6 0 0 1 0 12\"/>"},"history-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 4a6 6 0 1 1-5.982 5.538a.5.5 0 1 0-.998-.076Q3 9.73 3 10a7 7 0 1 0 2-4.899V3.5a.5.5 0 0 0-1 0v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 0-1H5.528A5.98 5.98 0 0 1 10 4m0 2.5a.5.5 0 0 0-1 0v4a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 0-1H10z\"/>"},"calendar-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7 11a1 1 0 1 0 0-2a1 1 0 0 0 0 2m1 2a1 1 0 1 1-2 0a1 1 0 0 1 2 0m2-2a1 1 0 1 0 0-2a1 1 0 0 0 0 2m1 2a1 1 0 1 1-2 0a1 1 0 0 1 2 0m2-2a1 1 0 1 0 0-2a1 1 0 0 0 0 2m4-5.5A2.5 2.5 0 0 0 14.5 3h-9A2.5 2.5 0 0 0 3 5.5v9A2.5 2.5 0 0 0 5.5 17h9a2.5 2.5 0 0 0 2.5-2.5zM4 7h12v7.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 14.5zm1.5-3h9A1.5 1.5 0 0 1 16 5.5V6H4v-.5A1.5 1.5 0 0 1 5.5 4\"/>"},"calendar-ltr-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7 11a1 1 0 1 0 0-2a1 1 0 0 0 0 2m1 2a1 1 0 1 1-2 0a1 1 0 0 1 2 0m2-2a1 1 0 1 0 0-2a1 1 0 0 0 0 2m1 2a1 1 0 1 1-2 0a1 1 0 0 1 2 0m2-2a1 1 0 1 0 0-2a1 1 0 0 0 0 2m4-5.5A2.5 2.5 0 0 0 14.5 3h-9A2.5 2.5 0 0 0 3 5.5v9A2.5 2.5 0 0 0 5.5 17h9a2.5 2.5 0 0 0 2.5-2.5zM4 7h12v7.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 14.5zm1.5-3h9A1.5 1.5 0 0 1 16 5.5V6H4v-.5A1.5 1.5 0 0 1 5.5 4\"/>"},"calendar-clock-20-regular":{"body":"<path fill=\"currentColor\" d=\"M17 5.5A2.5 2.5 0 0 0 14.5 3h-9A2.5 2.5 0 0 0 3 5.5v9A2.5 2.5 0 0 0 5.5 17h4.1a5.5 5.5 0 0 1-.393-1H5.5A1.5 1.5 0 0 1 4 14.5V7h12v2.207q.524.149 1 .393zM5.5 4h9A1.5 1.5 0 0 1 16 5.5V6H4v-.5A1.5 1.5 0 0 1 5.5 4m9 15a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9m-.5-6.5a.5.5 0 0 1 1 0V14h1a.5.5 0 0 1 0 1h-1.5a.5.5 0 0 1-.5-.5z\"/>"},"calendar-add-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14.5 3A2.5 2.5 0 0 1 17 5.5v4.1a5.5 5.5 0 0 0-1-.393V7H4v7.5A1.5 1.5 0 0 0 5.5 16h3.707q.149.524.393 1H5.5A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3zm0 1h-9A1.5 1.5 0 0 0 4 5.5V6h12v-.5A1.5 1.5 0 0 0 14.5 4M19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-4-2a.5.5 0 0 0-1 0V14h-1.5a.5.5 0 0 0 0 1H14v1.5a.5.5 0 0 0 1 0V15h1.5a.5.5 0 0 0 0-1H15z\"/>"},"play-20-regular":{"body":"<path fill=\"currentColor\" d=\"M17.22 8.687a1.498 1.498 0 0 1 0 2.626l-9.997 5.499A1.5 1.5 0 0 1 5 15.499V4.501a1.5 1.5 0 0 1 2.223-1.313zm-.482 1.75a.5.5 0 0 0 0-.875L6.741 4.063A.5.5 0 0 0 6 4.501v10.998a.5.5 0 0 0 .741.438z\"/>"},"pause-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM4 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm9-2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm-1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1z\"/>"},"mic-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 13a3 3 0 0 0 3-3V5a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3m0-1a2 2 0 0 1-2-2V5a2 2 0 1 1 4 0v5a2 2 0 0 1-2 2M5 9.5a.5.5 0 0 1 .5.5a4.5 4.5 0 1 0 9 0a.5.5 0 0 1 1 0a5.5 5.5 0 0 1-5 5.478V17.5a.5.5 0 0 1-1 0v-2.022A5.5 5.5 0 0 1 4.5 10a.5.5 0 0 1 .5-.5\"/>"},"mic-off-20-regular":{"body":"<path fill=\"currentColor\" d=\"M12 5v4.879l.898.898Q13 10.404 13 10V5a3 3 0 0 0-5.998-.119L8 5.879V5a2 2 0 1 1 4 0M7 7.707L2.146 2.854a.5.5 0 1 1 .708-.708l15 15a.5.5 0 0 1-.708.708l-3.626-3.627a5.5 5.5 0 0 1-3.02 1.25V17.5a.5.5 0 0 1-1 0v-2.022A5.5 5.5 0 0 1 4.5 10a.5.5 0 0 1 1 0a4.5 4.5 0 0 0 7.309 3.516l-1.07-1.07A3 3 0 0 1 7 10zm4.016 4.016L8 8.707V10a2 2 0 0 0 3.016 1.723m3.787.959l-.742-.742A4.5 4.5 0 0 0 14.5 10a.5.5 0 0 1 1 0c0 .974-.253 1.888-.697 2.682\"/>"},"video-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 4a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h5a3 3 0 0 0 3-3v-.321l3.037 2.097a1.25 1.25 0 0 0 1.96-1.029V6.252a1.25 1.25 0 0 0-1.96-1.028L13 7.32V7a3 3 0 0 0-3-3zm8 4.536l3.605-2.49a.25.25 0 0 1 .392.206v7.495a.25.25 0 0 1-.392.206L13 11.463zM3 7a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/>"},"camera-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 6a4 4 0 1 0 0 8a4 4 0 0 0 0-8m-3 4a3 3 0 1 1 6 0a3 3 0 0 1-6 0m1.124-8a1.5 1.5 0 0 0-1.34.826L6.194 4h-1.69a2.5 2.5 0 0 0-2.5 2.5v8a2.5 2.5 0 0 0 2.5 2.5h11a2.5 2.5 0 0 0 2.5-2.5v-8a2.5 2.5 0 0 0-2.5-2.5h-1.69l-.584-1.17A1.5 1.5 0 0 0 11.888 2zm-.447 1.275A.5.5 0 0 1 8.124 3h3.764a.5.5 0 0 1 .448.276l.723 1.447a.5.5 0 0 0 .447.276h1.999a1.5 1.5 0 0 1 1.5 1.5V14.5a1.5 1.5 0 0 1-1.5 1.5h-11a1.5 1.5 0 0 1-1.5-1.5v-8a1.5 1.5 0 0 1 1.5-1.5h1.998a.5.5 0 0 0 .446-.276z\"/>"},"speaker-2-20-regular":{"body":"<path fill=\"currentColor\" d=\"M11.996 3.006c0-.873-1.04-1.327-1.68-.733L6.444 5.866a.5.5 0 0 1-.34.134H3.496a1.5 1.5 0 0 0-1.5 1.5v5a1.5 1.5 0 0 0 1.5 1.5h2.608a.5.5 0 0 1 .34.133l3.872 3.594c.64.593 1.68.14 1.68-.733zM7.124 6.599l3.872-3.593v13.988L7.124 13.4a1.5 1.5 0 0 0-1.02-.4H3.496a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5h2.608a1.5 1.5 0 0 0 1.02-.4m8.132-1.972a.5.5 0 0 1 .706.04a8 8 0 0 1 0 10.666a.5.5 0 0 1-.745-.667a7 7 0 0 0 0-9.333a.5.5 0 0 1 .039-.706m-1.176 8.306a.5.5 0 0 1-.183-.683a4.5 4.5 0 0 0 0-4.5a.5.5 0 1 1 .865-.5a5.5 5.5 0 0 1 .001 5.5a.5.5 0 0 1-.683.183\"/>"},"radio-button-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 3a7 7 0 1 0 0 14a7 7 0 0 0 0-14m-8 7a8 8 0 1 1 16 0a8 8 0 0 1-16 0\"/>"},"flash-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6.19 2.77c.131-.456.548-.77 1.022-.77h5.25c.725 0 1.237.71 1.007 1.398l-.002.008L12.205 7h2.564c.947 0 1.407 1.144.767 1.811l-.004.004l-8.676 8.858c-.755.782-2.06.06-1.796-.996l1.17-4.679H4.963a1.062 1.062 0 0 1-1.022-1.354zM7.213 3a.06.06 0 0 0-.06.045l-2.25 7.874c-.01.04.02.08.06.08H6.87a.5.5 0 0 1 .485.62l-1.325 5.3a.1.1 0 0 0-.003.03q0 .006.003.011q.005.013.03.03c.018.01.034.01.042.01l.01-.004a.1.1 0 0 0 .024-.018l.004-.004l8.675-8.856a.06.06 0 0 0 .017-.032a.1.1 0 0 0-.007-.044a.1.1 0 0 0-.025-.034q-.006-.007-.03-.008H11.5a.5.5 0 0 1-.472-.666l1.493-4.254a.062.062 0 0 0-.06-.08z\"/>"},"cloud-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 4c2.817 0 4.415 1.923 4.647 4.246h.07c1.814 0 3.283 1.512 3.283 3.377S16.53 15 14.718 15H5.282C3.469 15 2 13.488 2 11.623C2 9.82 3.373 8.347 5.102 8.251l.251-.005C5.587 5.908 7.183 4 10 4m0 1C7.886 5 6.551 6.316 6.348 8.345a1 1 0 0 1-.995.901h-.07C4.027 9.246 3 10.304 3 11.623C3 12.943 4.028 14 5.282 14h9.436C15.972 14 17 12.942 17 11.623c0-1.32-1.028-2.377-2.282-2.377h-.071a1 1 0 0 1-.995-.9C13.45 6.325 12.109 5 10 5\"/>"},"hard-drive-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2 12c0-.398.08-.791.237-1.156l2.414-5.632A2 2 0 0 1 6.489 4h7.104c.742 0 1.43.41 1.763 1.088c.571 1.162 1.633 3.424 2.454 5.774c.13.369.19.754.19 1.138v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm11.593-7H6.49a1 1 0 0 0-.919.606l-1.894 4.42Q3.834 10 4 10h12q.231 0 .447.05a57 57 0 0 0-1.988-4.521a.96.96 0 0 0-.866-.529M16 15a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1zm-1.25-1.25a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5\"/>"},"server-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.5 5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM7 12.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m.5 1.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM5 4.5A2.5 2.5 0 0 1 7.5 2h5A2.5 2.5 0 0 1 15 4.5v11a2.5 2.5 0 0 1-2.5 2.5h-5A2.5 2.5 0 0 1 5 15.5zM7.5 3A1.5 1.5 0 0 0 6 4.5v11A1.5 1.5 0 0 0 7.5 17h5a1.5 1.5 0 0 0 1.5-1.5v-11A1.5 1.5 0 0 0 12.5 3z\"/>"},"database-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4 5c0-1.007.875-1.755 1.904-2.223C6.978 2.289 8.427 2 10 2s3.022.289 4.096.777C15.125 3.245 16 3.993 16 5v10c0 1.007-.875 1.755-1.904 2.223C13.022 17.71 11.573 18 10 18s-3.022-.289-4.096-.777C4.875 16.755 4 16.007 4 15zm1 0c0 .374.356.875 1.318 1.313C7.234 6.729 8.536 7 10 7s2.766-.27 3.682-.687C14.644 5.875 15 5.373 15 5c0-.374-.356-.875-1.318-1.313C12.766 3.271 11.464 3 10 3s-2.766.27-3.682.687C5.356 4.125 5 4.627 5 5m10 1.698a5 5 0 0 1-.904.525C13.022 7.711 11.573 8 10 8s-3.022-.289-4.096-.777A5 5 0 0 1 5 6.698V15c0 .374.356.875 1.318 1.313c.916.416 2.218.687 3.682.687s2.766-.27 3.682-.687C14.644 15.875 15 15.373 15 15z\"/>"},"developer-board-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 7a3 3 0 1 0 0 6a3 3 0 0 0 0-6m-2 3a2 2 0 1 1 4 0a2 2 0 0 1-4 0m-.5-8a.5.5 0 0 1 .5.5V4h1.5V2.5a.5.5 0 0 1 1 0V4H12V2.5a.5.5 0 0 1 1 0V4h.5A2.5 2.5 0 0 1 16 6.5V7h1.5a.5.5 0 0 1 0 1H16v1.5h1.5a.5.5 0 0 1 0 1H16V12h1.5a.5.5 0 0 1 0 1H16v.5a2.5 2.5 0 0 1-2.5 2.5H13v1.5a.5.5 0 0 1-1 0V16h-1.5v1.5a.5.5 0 0 1-1 0V16H8v1.5a.5.5 0 0 1-1 0V16h-.5A2.5 2.5 0 0 1 4 13.5V13H2.5a.5.5 0 0 1 0-1H4v-1.5H2.5a.5.5 0 0 1 0-1H4V8H2.5a.5.5 0 0 1 0-1H4v-.5A2.5 2.5 0 0 1 6.5 4H7V2.5a.5.5 0 0 1 .5-.5M15 6.5A1.5 1.5 0 0 0 13.5 5h-7A1.5 1.5 0 0 0 5 6.5v7A1.5 1.5 0 0 0 6.5 15h7a1.5 1.5 0 0 0 1.5-1.5z\"/>"},"window-console-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5.646 9.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L7.293 11.5L5.646 9.854a.5.5 0 0 1 0-.708M14.5 13h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1M2.996 5.5a2.5 2.5 0 0 1 2.5-2.5h9a2.5 2.5 0 0 1 2.5 2.5V6H17v1h-.003v7.5a2.5 2.5 0 0 1-2.5 2.5h-9a2.5 2.5 0 0 1-2.5-2.5zm13 .5v-.5a1.5 1.5 0 0 0-1.5-1.5h-9a1.5 1.5 0 0 0-1.5 1.5V6zm-12 1v7.5a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5V7z\"/>"},"code-20-regular":{"body":"<path fill=\"currentColor\" d=\"M12.967 3.68a.5.5 0 0 0-.934-.36l-5 13a.5.5 0 1 0 .934.36zM5.825 6.12a.5.5 0 0 1 .055.706L3.159 10l2.72 3.175a.5.5 0 0 1-.759.65l-3-3.5a.5.5 0 0 1 0-.65l3-3.5a.5.5 0 0 1 .705-.054m8.35 8.26a.5.5 0 0 1-.055-.705l2.722-3.175l-2.722-3.174a.5.5 0 1 1 .76-.651l3 3.5a.5.5 0 0 1 0 .65l-3 3.5a.5.5 0 0 1-.705.055\"/>"},"branch-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 5a3 3 0 0 1-2.145 2.876c.178.223.416.483.72.744c.726.622 1.834 1.252 3.425 1.363a3 3 0 1 1 .168 1.01c-1.96-.078-3.342-.841-4.243-1.613a7 7 0 0 1-.425-.398v3.06a3 3 0 1 1-1 0V7.958A3 3 0 1 1 10 5M7.009 7a2 2 0 1 0-.018-4a2 2 0 0 0 .018 4M17 10a2 2 0 1 0-4 0a2 2 0 0 0 4 0M7 17a2 2 0 1 0 0-4a2 2 0 0 0 0 4\"/>"},"flowchart-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.5 3A1.5 1.5 0 0 0 3 4.5v2A1.5 1.5 0 0 0 4.5 8H5v3.84a1 1 0 0 0-.207.16L3 13.793a1 1 0 0 0 0 1.414L4.793 17a1 1 0 0 0 1.414 0L8 15.207q.094-.095.16-.207H12v.5a1.5 1.5 0 0 0 1.5 1.5h2a1.5 1.5 0 0 0 1.5-1.5v-2a1.5 1.5 0 0 0-1.5-1.5h-2a1.5 1.5 0 0 0-1.5 1.5v.5H8.16a1 1 0 0 0-.16-.207L6.207 12A1 1 0 0 0 6 11.84V8h.5A1.5 1.5 0 0 0 8 6.5v-2A1.5 1.5 0 0 0 6.5 3zM4 4.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5zm-.293 10L5.5 12.707L7.293 14.5L5.5 16.293zM13.5 13h2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5\"/>"},"plug-connected-20-regular":{"body":"<path fill=\"currentColor\" d=\"M17.854 2.854a.5.5 0 0 0-.708-.708l-2.668 2.669a4.036 4.036 0 0 0-5.332.331l-.3.3a1.49 1.49 0 0 0 0 2.108l3.6 3.6a1.49 1.49 0 0 0 2.107 0l.3-.3a4.036 4.036 0 0 0 .332-5.332zm-4.008 7.592a.49.49 0 0 1-.693 0l-3.6-3.6a.49.49 0 0 1 0-.692l.3-.3a3.036 3.036 0 0 1 4.293 4.292zm-6.292-1.6a1.49 1.49 0 0 0-2.107 0l-.3.3a4.036 4.036 0 0 0-.332 5.332l-2.669 2.668a.5.5 0 0 0 .708.708l2.668-2.669a4.036 4.036 0 0 0 5.332-.332l.3-.3a1.49 1.49 0 0 0 0-2.107zm-1.4.708a.49.49 0 0 1 .693 0l3.6 3.6a.49.49 0 0 1 0 .692l-.3.3a3.035 3.035 0 1 1-4.293-4.292z\"/>"},"power-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.5 2.5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0zM13.743 4a.5.5 0 1 0-.499.867a6.5 6.5 0 1 1-6.494.004a.5.5 0 1 0-.5-.866A7.5 7.5 0 1 0 13.743 4\"/>"},"puzzle-piece-20-regular":{"body":"<path fill=\"currentColor\" d=\"M11 3c-.69 0-1.25.56-1.25 1.25V5H6.5a.5.5 0 0 0-.5.5v3.25h-.75a1.25 1.25 0 1 0 0 2.5H6v3.25a.5.5 0 0 0 .5.5h3.25v.75a1.25 1.25 0 1 0 2.5 0V15h3.25a.5.5 0 0 0 .5-.5v-2.25h-.75a2.25 2.25 0 0 1 0-4.5H16V5.5a.5.5 0 0 0-.5-.5h-3.25v-.75C12.25 3.56 11.69 3 11 3M8.764 4a2.25 2.25 0 0 1 4.472 0H15.5A1.5 1.5 0 0 1 17 5.5v3.25h-1.75a1.25 1.25 0 1 0 0 2.5H17v3.25a1.5 1.5 0 0 1-1.5 1.5h-2.264a2.25 2.25 0 0 1-4.472 0H6.5A1.5 1.5 0 0 1 5 14.5v-2.264a2.25 2.25 0 0 1 0-4.472V5.5A1.5 1.5 0 0 1 6.5 4z\"/>"},"cube-multiple-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.205 2.513a5 5 0 0 1 3.59 0l4.243 1.632c.58.223.962.78.962 1.4v.141a2.5 2.5 0 0 0-.603-.333l-4.961-1.908a4 4 0 0 0-2.872 0L3.603 5.353A2.5 2.5 0 0 0 3 5.686v-.14a1.5 1.5 0 0 1 .962-1.4zM6.04 8.303a.5.5 0 0 1 .657-.263L10 9.456l3.303-1.416a.5.5 0 0 1 .394.92L10.5 10.33v3.17a.5.5 0 0 1-1 0v-3.17L6.303 8.96a.5.5 0 0 1-.263-.657m2.883-3.925a3 3 0 0 1 2.154 0l4.961 1.909c.58.222.962.779.962 1.4v6.626a1.5 1.5 0 0 1-.962 1.4l-4.961 1.908a3 3 0 0 1-2.154 0l-4.961-1.908a1.5 1.5 0 0 1-.962-1.4V7.687a1.5 1.5 0 0 1 .962-1.4zm1.795.934a2 2 0 0 0-1.436 0L4.321 7.22A.5.5 0 0 0 4 7.687v6.626a.5.5 0 0 0 .32.467l4.962 1.908a2 2 0 0 0 1.436 0l4.962-1.908a.5.5 0 0 0 .32-.467V7.687a.5.5 0 0 0-.32-.467z\"/>"},"box-20-regular":{"body":"<path fill=\"currentColor\" d=\"M11.3 2.48a3.5 3.5 0 0 0-2.6 0L2.943 4.785A1.5 1.5 0 0 0 2 6.176v7.646a1.5 1.5 0 0 0 .943 1.393L8.7 17.518a3.5 3.5 0 0 0 2.6 0l5.757-2.303A1.5 1.5 0 0 0 18 13.822V6.176a1.5 1.5 0 0 0-.943-1.392zm-2.228.93a2.5 2.5 0 0 1 1.857 0l5.225 2.09l-2.279.91l-6.154-2.46zM6.375 4.487l6.154 2.461L10 7.961L3.846 5.499zm4.125 4.35l6.5-2.6v7.584a.5.5 0 0 1-.314.465l-5.757 2.303q-.21.083-.429.128zm-1 0v7.88a2.5 2.5 0 0 1-.428-.128l-5.758-2.303A.5.5 0 0 1 3 13.822V6.238z\"/>"},"layer-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.505 3.117a1 1 0 0 0-1.011 0l-6.01 3.52a1 1 0 0 0 .003 1.726l6.009 3.502a1 1 0 0 0 1.007 0l6.009-3.502a1 1 0 0 0 .001-1.727zM9.494 4.276a1 1 0 0 1 1.01 0l5.504 3.223l-5.505 3.209a1 1 0 0 1-1.007 0L3.99 7.499zM3.07 9.65l6.438 3.623a1 1 0 0 0 .98 0l6.438-3.623a1 1 0 0 1-.415 1.26l-6.01 3.502a1 1 0 0 1-1.006 0l-6.01-3.502a1 1 0 0 1-.415-1.26m0 2.453l6.438 3.622a1 1 0 0 0 .98 0l6.438-3.622a1 1 0 0 1-.415 1.26l-6.01 3.502a1 1 0 0 1-1.006 0l-6.01-3.502a1 1 0 0 1-.415-1.26\"/>"},"globe-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 18a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-15c.657 0 1.407.59 2.022 1.908c.217.466.406 1.002.559 1.592H7.419c.153-.59.342-1.126.56-1.592C8.592 3.59 9.342 3 10 3M7.072 4.485A10.5 10.5 0 0 0 6.389 6.5H3.936a7.02 7.02 0 0 1 3.778-3.118c-.241.33-.456.704-.642 1.103M6.192 7.5A16 16 0 0 0 6 10c0 .87.067 1.712.193 2.5H3.46A7 7 0 0 1 3 10c0-.88.163-1.724.46-2.5zm.197 6c.176.743.407 1.422.683 2.015c.186.399.401.773.642 1.103A7.02 7.02 0 0 1 3.936 13.5zm1.03 0h5.162a9.3 9.3 0 0 1-.56 1.592C11.408 16.41 10.658 17 10 17s-1.407-.59-2.022-1.908A9.3 9.3 0 0 1 7.42 13.5m5.375-1H7.206A15 15 0 0 1 7 10c0-.883.073-1.725.206-2.5h5.588c.133.775.206 1.617.206 2.5s-.073 1.725-.206 2.5m.817 1h2.453a7.02 7.02 0 0 1-3.778 3.118c.241-.33.456-.704.642-1.103c.276-.593.507-1.272.683-2.015m2.93-1h-2.734c.126-.788.193-1.63.193-2.5s-.067-1.712-.193-2.5h2.733c.297.776.46 1.62.46 2.5s-.163 1.724-.46 2.5m-4.255-9.118A7.02 7.02 0 0 1 16.064 6.5H13.61a10.5 10.5 0 0 0-.683-2.015a6.6 6.6 0 0 0-.642-1.103\"/>"},"link-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8 6a.5.5 0 0 1 .09.992L8 7H6a3 3 0 0 0-.197 5.994L6 13h2a.5.5 0 0 1 .09.992L8 14H6a4 4 0 0 1-.22-7.994L6 6zm6 0a4 4 0 0 1 .22 7.994L14 14h-2a.5.5 0 0 1-.09-.992L12 13h2a3 3 0 0 0 .197-5.994L14 7h-2a.5.5 0 0 1-.09-.992L12 6zM6 9.5h8a.5.5 0 0 1 .09.992L14 10.5H6a.5.5 0 0 1-.09-.992zh8z\"/>"},"wrench-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9 6.5a4.5 4.5 0 0 1 6.352-4.102a.5.5 0 0 1 .148.809L13.207 5.5L14.5 6.793L16.793 4.5a.5.5 0 0 1 .809.147a4.5 4.5 0 0 1-5.207 6.216L6.03 17.311a2.357 2.357 0 0 1-3.374-3.293L9.082 7.36A4.5 4.5 0 0 1 9 6.5M13.5 3a3.5 3.5 0 0 0-3.387 4.386a.5.5 0 0 1-.125.473l-6.612 6.854a1.357 1.357 0 0 0 1.942 1.896l6.574-6.66a.5.5 0 0 1 .512-.124a3.5 3.5 0 0 0 4.521-4.044l-2.072 2.073a.5.5 0 0 1-.707 0l-2-2a.5.5 0 0 1 0-.708l2.073-2.072a3.5 3.5 0 0 0-.72-.074\"/>"},"beaker-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14 3a.5.5 0 0 1 0 1h-.996v4.684c0 .58.144 1.15.42 1.66l2.395 4.446a1.5 1.5 0 0 1-1.32 2.212H5.502a1.5 1.5 0 0 1-1.32-2.212l2.394-4.443a3.5 3.5 0 0 0 .418-1.66V4H6a.5.5 0 0 1 0-1zM7.994 4v4.687a4.5 4.5 0 0 1-.538 2.134L6.821 12h6.359l-.637-1.181a4.5 4.5 0 0 1-.539-2.135V4zm5.724 9H6.282l-1.22 2.264a.5.5 0 0 0 .44.738h8.997a.5.5 0 0 0 .44-.738z\"/>"},"rocket-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.755 6.426a1.998 1.998 0 1 1 2.825 2.827a1.998 1.998 0 0 1-2.825-2.827m2.119.708a.998.998 0 1 0-1.413 1.411a.998.998 0 0 0 1.413-1.411m-1.125 7.37a1.5 1.5 0 0 1-1.703-.295l-.61-.609l-.732 1.22a.5.5 0 0 1-.782.097l-2.83-2.831a.5.5 0 0 1 .096-.782l1.22-.732l-.61-.61a1.5 1.5 0 0 1-.295-1.703l-1.12-1.12a.5.5 0 0 1 0-.707l1.06-1.06a3 3 0 0 1 3.413-.589l.938-.937a6.29 6.29 0 0 1 6.33-1.557c.76.238 1.357.834 1.595 1.595a6.29 6.29 0 0 1-1.557 6.33l-.937.938a3 3 0 0 1-.59 3.413l-1.059 1.06a.5.5 0 0 1-.707 0zm4.076-11.26a5.29 5.29 0 0 0-5.324 1.309l-.816.815l.004.004l-.707.707l-.004-.004l-2.122 2.122l.004.004l-.403.403a.5.5 0 0 0 .048.651l4.248 4.247a.5.5 0 0 0 .652.047l.402-.401l.003.004l2.122-2.122l-.003-.004l.707-.707l.003.004l.816-.816a5.29 5.29 0 0 0 1.31-5.325a1.43 1.43 0 0 0-.94-.938m-3.307 10.615l.704.705l.707-.707a2 2 0 0 0 .52-1.93zm-4.438-8.3a2 2 0 0 0-1.93.52l-.706.707l.705.704zm.627 7.312l-1.57-1.57l-.886.53l1.925 1.926zm-2.904 2.04a.5.5 0 1 0-.707-.706l-1.768 1.768a.5.5 0 1 0 .707.707zM4.388 12.79a.5.5 0 0 1 0 .707l-.71.709a.5.5 0 0 1-.706-.708l.709-.708a.5.5 0 0 1 .707 0m2.83 3.537a.5.5 0 0 0-.707-.707l-.709.709a.5.5 0 1 0 .707.707z\"/>"},"bot-20-regular":{"body":"<path fill=\"currentColor\" d=\"M12 5.5a1 1 0 1 0 0 2a1 1 0 0 0 0-2m-5 1a1 1 0 1 1 2 0a1 1 0 0 1-2 0m3.5-4a.5.5 0 0 0-1 0V3h-3A1.5 1.5 0 0 0 5 4.5v4A1.5 1.5 0 0 0 6.5 10h7A1.5 1.5 0 0 0 15 8.5v-4A1.5 1.5 0 0 0 13.5 3h-3zM6.5 4h7a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5m3.75 13.998c2.616-.033 4.195-.595 5.122-1.44c.875-.8 1.089-1.777 1.123-2.556h.005v-.69a1.81 1.81 0 0 0-1.81-1.809H11.5V11.5h-3v.003H5.31c-1 0-1.81.81-1.81 1.81v.689h.005c.034.78.248 1.757 1.123 2.555c.927.846 2.506 1.408 5.122 1.441V18h.5zm-4.94-5.495h9.38a.81.81 0 0 1 .81.81v.437c0 .69-.131 1.456-.802 2.069C14.01 16.446 12.66 17 10 17s-4.01-.554-4.698-1.181c-.67-.613-.802-1.38-.802-2.069v-.438a.81.81 0 0 1 .81-.809\"/>"},"brain-circuit-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5.7 3.948a2.423 2.423 0 0 1 4.3-1a2.423 2.423 0 0 1 4.3 1l.125.627l.406.081A2.7 2.7 0 0 1 17 7.302V7.5c0 .726-.31 1.38-.805 1.837a3.248 3.248 0 0 1-.77 6.088l-.037.185A2.973 2.973 0 0 1 10 16.678a2.973 2.973 0 0 1-5.388-1.068l-.037-.185a3.248 3.248 0 0 1-.77-6.088A2.5 2.5 0 0 1 3 7.5v-.198a2.7 2.7 0 0 1 2.169-2.646l.406-.08zm8.3 6.967v.585a1.5 1.5 0 0 1-1.5 1.5h-2v2.027a1.973 1.973 0 0 0 3.907.387l.103-.512a.5.5 0 0 1 .392-.392l.291-.059a2.248 2.248 0 0 0-.28-4.445a1.5 1.5 0 0 1-.913.909m-1 0a1.5 1.5 0 1 1 1.895-1.968A1.5 1.5 0 0 0 16 7.5v-.198c0-.81-.571-1.506-1.365-1.665l-.733-.147a.5.5 0 0 1-.392-.392l-.191-.954a1.423 1.423 0 0 0-2.819.28V12h2a.5.5 0 0 0 .5-.5zM9.5 6V4.423a1.423 1.423 0 0 0-2.819-.279l-.19.954a.5.5 0 0 1-.393.392l-.733.147A1.7 1.7 0 0 0 4 7.302V7.5A1.5 1.5 0 0 0 5.5 9h1A1.5 1.5 0 0 1 8 10.5v.585a1.5 1.5 0 1 1-1 0V10.5a.5.5 0 0 0-.5-.5H5.248a2.248 2.248 0 0 0-.441 4.451l.291.059a.5.5 0 0 1 .392.392l.103.512a1.973 1.973 0 0 0 3.907-.387V7h-.585a1.5 1.5 0 1 1 0-1zM8 6.5a.5.5 0 1 0-1 0a.5.5 0 0 0 1 0M7.5 13a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1m6-3a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1\"/>"},"sparkle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.398 12.809a1.04 1.04 0 0 0 1.204-.003c.178-.13.313-.31.387-.518l.447-1.373a2.34 2.34 0 0 1 1.477-1.479l1.391-.45a1.045 1.045 0 0 0-.044-1.98l-1.375-.448a2.34 2.34 0 0 1-1.48-1.477l-.452-1.388a1.044 1.044 0 0 0-1.973.017l-.457 1.4a2.34 2.34 0 0 1-1.44 1.45l-1.39.447a1.045 1.045 0 0 0 .016 1.974l1.374.445a2.33 2.33 0 0 1 1.481 1.488l.452 1.391c.072.204.206.38.382.504m.085-7.415l.527-1.377l.44 1.377a3.33 3.33 0 0 0 2.117 2.114l1.406.53l-1.382.447a3.34 3.34 0 0 0-2.115 2.117l-.523 1.378l-.449-1.379a3.34 3.34 0 0 0-.8-1.31a3.4 3.4 0 0 0-1.312-.812l-1.378-.522l1.386-.45a3.36 3.36 0 0 0 1.29-.813a3.4 3.4 0 0 0 .793-1.3m6.052 11.457a.806.806 0 0 0 1.226-.398l.248-.762a1.1 1.1 0 0 1 .26-.42c.118-.12.262-.208.42-.26l.772-.252a.8.8 0 0 0-.023-1.52l-.764-.25a1.08 1.08 0 0 1-.68-.678l-.252-.773a.8.8 0 0 0-1.518.01l-.247.762a1.07 1.07 0 0 1-.665.679l-.773.252a.8.8 0 0 0 .008 1.518l.763.247c.16.054.304.143.422.261c.119.119.207.263.258.422l.253.774a.8.8 0 0 0 .292.388m-.913-2.793L12.443 14l.184-.064a2.11 2.11 0 0 0 1.3-1.317l.058-.178l.06.181a2.08 2.08 0 0 0 1.316 1.316l.195.063l-.18.06a2.08 2.08 0 0 0-1.317 1.32l-.059.181l-.058-.18a2.08 2.08 0 0 0-1.32-1.323\"/>"},"wand-20-regular":{"body":"<path fill=\"currentColor\" d=\"M16.5 2a.5.5 0 0 1 .5.5V3h.5a.5.5 0 0 1 0 1H17v.5a.5.5 0 0 1-1 0V4h-.5a.5.5 0 1 1 0-1h.5v-.5a.5.5 0 0 1 .5-.5m-10 4a.5.5 0 0 0 0-1H6v-.5a.5.5 0 0 0-1 0V5h-.5a.5.5 0 0 0 0 1H5v.5a.5.5 0 0 0 1 0V6zm9 9a.5.5 0 0 0 0-1H15v-.5a.5.5 0 0 0-1 0v.5h-.5a.5.5 0 1 0 0 1h.5v.5a.5.5 0 1 0 1 0V15zm-2.066-8.434a1.914 1.914 0 0 0-2.707 0l-8.166 8.166a1.914 1.914 0 1 0 2.707 2.707l8.166-8.166a1.914 1.914 0 0 0 0-2.707m-2 .707a.914.914 0 0 1 1.293 1.293l-.477.477l-1.293-1.293zM10.25 8.457l1.293 1.293l-6.982 6.982a.914.914 0 0 1-1.293-1.292z\"/>"},"lightbulb-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2c3.314 0 6 2.597 6 5.8c0 1.677-.745 3.216-2.204 4.594a.6.6 0 0 0-.145.213l-.026.081l-.936 3.917c-.184.771-.865 1.33-1.67 1.39l-.144.005h-1.75c-.818 0-1.535-.516-1.776-1.262l-.038-.133l-.935-3.916a.6.6 0 0 0-.17-.295c-1.39-1.312-2.133-2.77-2.2-4.355L4 7.8l.003-.191C4.108 4.494 6.753 2 10 2m2.045 13h-4.09l.319 1.334l.026.096c.097.3.376.522.712.563l.113.007h1.713l.106-.003a.86.86 0 0 0 .741-.525l.031-.1zM10 3C7.368 3 5.212 4.953 5.015 7.414l-.012.212L5 7.779l.004.217c.056 1.304.674 2.525 1.888 3.671c.188.178.33.398.414.64l.043.15L7.716 14h4.569l.387-1.615l.051-.15c.086-.215.218-.409.386-.568C14.383 10.465 15 9.181 15 7.8C15 5.157 12.769 3 10 3\"/>"},"target-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 11.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M5 10a5 5 0 1 1 10 0a5 5 0 0 1-10 0m5-4a4 4 0 1 0 0 8a4 4 0 0 0 0-8m-8 4a8 8 0 1 1 16 0a8 8 0 0 1-16 0m8-7a7 7 0 1 0 0 14a7 7 0 0 0 0-14\"/>"},"arrow-trending-lines-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14.5 2a.5.5 0 0 0 0 1h1.793L11.5 7.793L8.854 5.146a.5.5 0 0 0-.708 0l-5 5a.5.5 0 0 0 .708.708L8.5 6.207l2.646 2.647a.5.5 0 0 0 .708 0L17 3.707V5.5a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-.5-.5zm1 7a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 1 0v-8a.5.5 0 0 0-.5-.5m-8 2a.5.5 0 0 0-.5.5v6a.5.5 0 0 0 1 0v-6a.5.5 0 0 0-.5-.5m3.5 2.5a.5.5 0 0 1 1 0v4a.5.5 0 0 1-1 0zm-8 1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0z\"/>"},"data-bar-vertical-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 3a2 2 0 0 0-2 2v10a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2M4 5a1 1 0 0 1 2 0v10a1 1 0 1 1-2 0zm4 3a2 2 0 1 1 4 0v7a2 2 0 1 1-4 0zm2-1a1 1 0 0 0-1 1v7a1 1 0 1 0 2 0V8a1 1 0 0 0-1-1m3 4a2 2 0 1 1 4 0v4a2 2 0 1 1-4 0zm2-1a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0v-4a1 1 0 0 0-1-1\"/>"},"wifi-1-20-regular":{"body":"<path fill=\"currentColor\" d=\"M16.832 7.384c.41.409.796.877 1.133 1.365a.5.5 0 0 1-.823.568A8.612 8.612 0 0 0 3.946 8.091c-.348.348-.693.77-1.007 1.222a.5.5 0 0 1-.821-.57a10 10 0 0 1 1.121-1.36a9.61 9.61 0 0 1 13.593 0m-2.236 1.973a6.6 6.6 0 0 1 1.194 1.656a.5.5 0 0 1-.89.455a5.6 5.6 0 0 0-1.01-1.404a5.45 5.45 0 0 0-8.716 1.39a.5.5 0 1 1-.892-.452a6.45 6.45 0 0 1 10.315-1.645m-1.709 2.497c.355.354.647.79.85 1.254a.5.5 0 0 1-.916.401a3.1 3.1 0 0 0-.64-.948a3.033 3.033 0 0 0-4.29 0a3 3 0 0 0-.631.938a.5.5 0 1 1-.916-.401a4 4 0 0 1 .84-1.244a4.033 4.033 0 0 1 5.703 0m-1.924 1.933a1.298 1.298 0 1 1-1.836 1.836a1.298 1.298 0 0 1 1.836-1.836\"/>"},"weather-squalls-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6.568 6.11A3.248 3.248 0 0 1 13 6.75A3.25 3.25 0 0 1 9.75 10H2.5a.5.5 0 1 1 0-1h7.25a2.251 2.251 0 0 0 .002-4.5A2.25 2.25 0 0 0 7.55 6.307l-.059.291a.5.5 0 1 1-.98-.196zM13 10.5a2.5 2.5 0 1 1 2.5 2.5h-1.38c.24.357.379.787.379 1.25a2.254 2.254 0 0 1-2.255 2.25a2.264 2.264 0 0 1-2.233-1.888l-.005-.03a.5.5 0 1 1 .986-.164l.005.03c.101.605.63 1.052 1.247 1.052a1.25 1.25 0 1 0 .005-2.5H2.5a.5.5 0 0 1 0-1h13a1.5 1.5 0 1 0-1.5-1.5a.5.5 0 0 1-1 0\"/>"},"lock-closed-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 1a4 4 0 0 1 4 4v2.05a2.5 2.5 0 0 1 2 2.45v6a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 4 15.5v-6a2.5 2.5 0 0 1 2-2.45V5a4 4 0 0 1 4-4M6.5 8A1.5 1.5 0 0 0 5 9.5v6A1.5 1.5 0 0 0 6.5 17h7a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 13.5 8zm3.5 3.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2M10 2a3 3 0 0 0-3 3v2h6V5a3 3 0 0 0-3-3\"/>"},"lock-open-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15 1a4 4 0 0 1 4 4v.5a.5.5 0 0 1-1 0V5a3 3 0 1 0-6 0v2h1.5A2.5 2.5 0 0 1 16 9.5v6a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 4 15.5v-6A2.5 2.5 0 0 1 6.5 7H11V5a4 4 0 0 1 4-4M6.5 8A1.5 1.5 0 0 0 5 9.5v6A1.5 1.5 0 0 0 6.5 17h7a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 13.5 8zm3.5 3.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2\"/>"},"key-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15 6a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-2.5-4C9.424 2 7 4.424 7 7.5c0 .397.04.796.122 1.175c.058.27-.008.504-.142.638l-4.54 4.54A1.5 1.5 0 0 0 2 14.915V16.5A1.5 1.5 0 0 0 3.5 18h2A1.5 1.5 0 0 0 7 16.5V16h1a1 1 0 0 0 1-1v-1h1a1 1 0 0 0 1-1v-.18c.493.134 1.007.18 1.5.18c3.076 0 5.5-2.424 5.5-5.5S15.576 2 12.5 2M8 7.5C8 4.976 9.976 3 12.5 3S17 4.976 17 7.5S15.024 12 12.5 12c-.66 0-1.273-.095-1.776-.347A.5.5 0 0 0 10 12.1v.9H9a1 1 0 0 0-1 1v1H7a1 1 0 0 0-1 1v.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.586a.5.5 0 0 1 .146-.353l4.541-4.541c.432-.432.522-1.044.412-1.556A4.6 4.6 0 0 1 8 7.5\"/>"},"shield-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.723 2.084a.5.5 0 0 1 .554 0a15.05 15.05 0 0 0 6.294 2.421A.5.5 0 0 1 17 5v4.5c0 3.891-2.307 6.73-6.82 8.467a.5.5 0 0 1-.36 0C5.308 16.23 3 13.39 3 9.5V5a.5.5 0 0 1 .43-.495a15.05 15.05 0 0 0 6.293-2.421m-.124 1.262A16 16 0 0 1 4 5.428V9.5c0 3.392 1.968 5.863 6 7.463c4.032-1.6 6-4.071 6-7.463V5.428a16 16 0 0 1-5.6-2.082l-.4-.249z\"/>"},"shield-checkmark-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.723 2.084a.5.5 0 0 1 .554 0a15.05 15.05 0 0 0 6.294 2.421A.5.5 0 0 1 17 5v4.6a5.5 5.5 0 0 0-1-.393v-3.78a16 16 0 0 1-5.6-2.081l-.4-.249l-.4.249A16 16 0 0 1 4 5.428V9.5c0 3.242 1.798 5.643 5.478 7.246c.195.435.444.84.74 1.206l-.038.015a.5.5 0 0 1-.36 0C5.308 16.23 3 13.39 3 9.5V5a.5.5 0 0 1 .43-.495a15.05 15.05 0 0 0 6.293-2.421M19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.146-1.854a.5.5 0 0 0-.708 0L13.5 15.293l-.646-.647a.5.5 0 0 0-.708.708l1 1a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.708\"/>"},"shield-error-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 6a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0v-5A.5.5 0 0 1 10 6m0 8.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5M9.723 2.084a.5.5 0 0 1 .554 0a15.05 15.05 0 0 0 6.294 2.421A.5.5 0 0 1 17 5v4.5c0 3.891-2.307 6.73-6.82 8.467a.5.5 0 0 1-.36 0C5.308 16.23 3 13.39 3 9.5V5a.5.5 0 0 1 .43-.495a15.05 15.05 0 0 0 6.293-2.421m-.124 1.262A16 16 0 0 1 4 5.428V9.5c0 3.392 1.968 5.863 6 7.463c4.032-1.6 6-4.071 6-7.463V5.428a16 16 0 0 1-5.6-2.082l-.4-.249z\"/>"},"shield-dismiss-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.854 7.146a.5.5 0 1 0-.708.708L9.293 10l-2.147 2.146a.5.5 0 0 0 .708.708L10 10.707l2.146 2.147a.5.5 0 0 0 .708-.708L10.707 10l2.147-2.146a.5.5 0 0 0-.708-.708L10 9.293zm2.423-5.062a.5.5 0 0 0-.554 0a15.05 15.05 0 0 1-6.294 2.421A.5.5 0 0 0 3 5v4.5c0 3.891 2.307 6.73 6.82 8.467a.5.5 0 0 0 .36 0C14.693 16.23 17 13.39 17 9.5V5a.5.5 0 0 0-.43-.495a15.05 15.05 0 0 1-6.293-2.421M4 5.428a16 16 0 0 0 5.6-2.082l.4-.249l.4.249A16 16 0 0 0 16 5.428V9.5c0 3.392-1.968 5.863-6 7.463c-4.032-1.6-6-4.071-6-7.463z\"/>"},"sign-out-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.5 11.25a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5M11 3.5a.5.5 0 0 0-.576-.494l-7 1.07A.5.5 0 0 0 3 4.57v10.86a.5.5 0 0 0 .424.494l7 1.071a.5.5 0 0 0 .576-.494V10h5.172l-.997.874a.5.5 0 0 0 .658.752l1.996-1.75a.5.5 0 0 0 0-.752l-1.996-1.75a.499.499 0 1 0-.658.752l.997.874H11zm-1 .582V15.92L4 15V4.999zM12.5 16H12v-5h1v4.5a.5.5 0 0 1-.5.5M12 8V4h.5a.5.5 0 0 1 .5.5V8z\"/>"},"arrow-enter-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.5 17a.5.5 0 0 1 0-1H14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H7.5a.5.5 0 0 1 0-1H14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3zm.146-10.854a.5.5 0 0 1 .708 0l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708l2.647-2.646H1.5a.5.5 0 0 1 0-1h8.793L7.646 6.854a.5.5 0 0 1 0-.708\"/>"},"star-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.104 2.9a1 1 0 0 1 1.794 0l1.93 3.91l4.317.628a1 1 0 0 1 .554 1.706l-3.124 3.044l.738 4.3a1 1 0 0 1-1.451 1.054l-3.86-2.03l-3.862 2.03a1 1 0 0 1-1.45-1.055l.737-4.299l-3.124-3.044a1 1 0 0 1 .554-1.706l4.317-.627zm.897.442l-1.93 3.911a1 1 0 0 1-.753.547L3 8.428l3.124 3.044a1 1 0 0 1 .287.885l-.737 4.3l3.86-2.03a1 1 0 0 1 .931 0l3.861 2.03l-.737-4.3a1 1 0 0 1 .287-.885L17 8.428L12.683 7.8a1 1 0 0 1-.752-.547z\"/>"},"flag-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 13h11.5a.5.5 0 0 0 .416-.777L14.101 8l2.815-4.223A.5.5 0 0 0 16.5 3h-12a.5.5 0 0 0-.5.5v14a.5.5 0 0 0 1 0zm0-1V4h10.566l-2.482 3.723a.5.5 0 0 0 0 .554L15.566 12z\"/>"},"tag-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14 7a1 1 0 1 0 0-2a1 1 0 0 0 0 2m-2.87-5a2 2 0 0 0-1.426.584L3.022 9.249a2 2 0 0 0-.002 2.83l4.949 4.948a2 2 0 0 0 2.828 0l6.631-6.63a2 2 0 0 0 .586-1.418l-.008-4.95a2 2 0 0 0-1.986-1.997zm-.72 1.292A1 1 0 0 1 11.123 3l4.89.032a1 1 0 0 1 .993.999l.008 4.95a1 1 0 0 1-.293.708l-6.63 6.631a1 1 0 0 1-1.415 0l-4.949-4.948a1 1 0 0 1 .001-1.415z\"/>"},"tag-multiple-20-regular":{"body":"<path fill=\"currentColor\" d=\"M13.5 6.5a1 1 0 1 0 0-2a1 1 0 0 0 0 2M9.207 2.586A2 2 0 0 1 10.621 2h4.452a2 2 0 0 1 2 2v4.374a2 2 0 0 1-.593 1.422l-5.818 5.76a2 2 0 0 1-2.82-.008l-4.385-4.384a2 2 0 0 1 0-2.828zM10.621 3a1 1 0 0 0-.707.293l-5.75 5.75a1 1 0 0 0 0 1.414l4.384 4.384a1 1 0 0 0 1.41.004l5.819-5.76a1 1 0 0 0 .296-.71V4a1 1 0 0 0-1-1zm-7.624 8.8a2 2 0 0 0 .46 2.114l2.977 2.977a4 4 0 0 0 5.642.014l4.404-4.36a2 2 0 0 0 .593-1.42v-.573l-4.997 4.953a4 4 0 0 1-.147.14l-.556.55a3 3 0 0 1-4.232-.01l-.499-.5a4 4 0 0 1-.208-.194l-2.977-2.977a2 2 0 0 1-.46-.714\"/>"},"weather-sunny-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 10 2m0 12a4 4 0 1 0 0-8a4 4 0 0 0 0 8m0-1a3 3 0 1 1 0-6a3 3 0 0 1 0 6m7.5-2.5a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1zM10 16a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5m-6.5-5.5a.5.5 0 0 0 0-1H2.463a.5.5 0 0 0 0 1zm.646-6.354a.5.5 0 0 1 .708 0l1 1a.5.5 0 1 1-.708.708l-1-1a.5.5 0 0 1 0-.708m.708 11.708a.5.5 0 0 1-.708-.708l1-1a.5.5 0 0 1 .708.708zm11-11.708a.5.5 0 0 0-.708 0l-1 1a.5.5 0 0 0 .708.708l1-1a.5.5 0 0 0 0-.708m-.708 11.708a.5.5 0 0 0 .708-.708l-1-1a.5.5 0 0 0-.708.708z\"/>"},"weather-moon-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15.493 13.497a6.98 6.98 0 0 1-11.483.892c2.831-1.087 4.558-2.42 5.593-4.397c1.048-2 1.337-4.16.76-6.909a6.98 6.98 0 0 1 5.13 10.414M5.457 16.918A7.981 7.981 0 1 0 9.88 2.035a.6.6 0 0 0-.614.74c.688 2.819.434 4.876-.55 6.753c-.934 1.784-2.544 3.031-5.55 4.107a.6.6 0 0 0-.292.903a7.95 7.95 0 0 0 2.582 2.38\"/>"},"desktop-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4 2a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3v2H5.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1H13v-2h3a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm8 13v2H8v-2zM3 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z\"/>"},"phone-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9 14a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zM7 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM6 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1z\"/>"},"home-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.998 2.388a1.5 1.5 0 0 1 2.005 0l5.5 4.942A1.5 1.5 0 0 1 17 8.445V15.5a1.5 1.5 0 0 1-1.5 1.5H13a1.5 1.5 0 0 1-1.5-1.5V12a.5.5 0 0 0-.5-.5H9a.5.5 0 0 0-.5.5v3.5A1.5 1.5 0 0 1 7 17H4.5A1.5 1.5 0 0 1 3 15.5V8.445c0-.425.18-.83.498-1.115zm1.336.744a.5.5 0 0 0-.668 0l-5.5 4.942A.5.5 0 0 0 4 8.445V15.5a.5.5 0 0 0 .5.5H7a.5.5 0 0 0 .5-.5V12A1.5 1.5 0 0 1 9 10.5h2a1.5 1.5 0 0 1 1.5 1.5v3.5a.5.5 0 0 0 .5.5h2.5a.5.5 0 0 0 .5-.5V8.445a.5.5 0 0 0-.166-.371z\"/>"},"keyboard-shift-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.861 2.528a1.492 1.492 0 0 1 2.278 0l6.62 7.803c.553.651.093 1.654-.759 1.654h-3.01v5.012A1 1 0 0 1 12.994 18H7.007a1 1 0 0 1-.998-1.003v-5.012H3c-.85 0-1.31-1.003-.759-1.654zm1.518.65a.497.497 0 0 0-.759 0L3 10.983h3.508a.5.5 0 0 1 .499.501v5.514h5.986v-5.514a.5.5 0 0 1 .499-.501H17z\"/>"},"location-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5.05 4.051a7 7 0 0 1 9.9 0a7.005 7.005 0 0 1 0 9.904l-1.128 1.114l-2.436 2.37a1.993 1.993 0 0 1-2.64.117l-.132-.117l-2.043-1.985l-1.52-1.5a7.005 7.005 0 0 1 0-9.903m9.195.705a6 6 0 0 0-8.49 0a6.01 6.01 0 0 0-.175 8.311l.175.183l.57.567l2.982 2.905l.093.08a1 1 0 0 0 1.2 0l.093-.08l2.23-2.168l1.322-1.304l.176-.183a6.01 6.01 0 0 0-.176-8.31M10 6.25a2.75 2.75 0 1 1-.001 5.5a2.75 2.75 0 0 1 0-5.5m0 1a1.75 1.75 0 1 0 0 3.5a1.75 1.75 0 0 0 0-3.5\"/>"},"briefcase-20-regular":{"body":"<path fill=\"currentColor\" d=\"M11.25 2c.966 0 1.75.784 1.75 1.75V5h2a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-2.996-2.846L2 14V8a3 3 0 0 1 3-3h2V3.75C7 2.784 7.784 2 8.75 2zM17 11.231A3 3 0 0 1 15 12h-4v.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5V12H5a2.98 2.98 0 0 1-2-.769V14l.01.204A2 2 0 0 0 5 16h10a2 2 0 0 0 2-2zM5 6a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h4v-.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v.5h4a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm3.75-3a.75.75 0 0 0-.75.75V5h4V3.75a.75.75 0 0 0-.75-.75z\"/>"},"payment-20-regular":{"body":"<path fill=\"currentColor\" d=\"M13.5 13a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zM2 6.75A2.75 2.75 0 0 1 4.75 4h10.5A2.75 2.75 0 0 1 18 6.75v6.5A2.75 2.75 0 0 1 15.25 16H4.75A2.75 2.75 0 0 1 2 13.25zM4.75 5A1.75 1.75 0 0 0 3 6.75V8h14V6.75A1.75 1.75 0 0 0 15.25 5zM17 9H3v4.25c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0 0 17 13.25z\"/>"},"currency-dollar-euro-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5.5 2a.5.5 0 0 0-.5.5v.535A3.5 3.5 0 0 0 2 6.5v.129c0 1.43.84 2.726 2.144 3.311l.856.383v5.613a2.5 2.5 0 0 1-2-2.45V12.5a.5.5 0 1 0-1 0v.985a3.5 3.5 0 0 0 3 3.464v.546a.5.5 0 0 0 1 0v-.546a3.5 3.5 0 0 0 3-3.464v-.12a3.62 3.62 0 0 0-2.14-3.304L6 9.676V4.05A2.5 2.5 0 0 1 8 6.5v1a.5.5 0 0 0 1 0v-1a3.5 3.5 0 0 0-3-3.465V2.5a.5.5 0 0 0-.5-.5M3 6.5a2.5 2.5 0 0 1 2-2.45v5.178l-.447-.2A2.63 2.63 0 0 1 3 6.627zm3 9.436v-5.164l.451.202A2.62 2.62 0 0 1 8 13.366v.12a2.5 2.5 0 0 1-2 2.45M12 10q0-.512.057-1H13.5a.5.5 0 1 0 0-1h-1.265c.216-.886.57-1.672 1.02-2.307C14.02 4.609 15.033 4 16.096 4c.392 0 .817.112 1.127.313a.5.5 0 1 0 .545-.838C17.273 3.153 16.652 3 16.097 3c-1.475 0-2.761.846-3.659 2.115c-.568.804-.993 1.79-1.229 2.885h-.71a.5.5 0 1 0 0 1h.552A10 10 0 0 0 11 10h-.505a.5.5 0 0 0 0 1h.556c.154 1.493.65 2.843 1.387 3.885c.898 1.269 2.184 2.115 3.66 2.115c.54 0 1.175-.129 1.684-.478a.5.5 0 0 0-.565-.825c-.296.203-.715.303-1.12.303c-1.064 0-2.076-.609-2.843-1.693c-.612-.865-1.047-2.011-1.197-3.307h1.438a.5.5 0 0 0 0-1z\"/>"},"thumb-like-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.052 2.294c.34-.977 1.632-1.427 2.43-.59c.164.17.326.354.436.519c.32.48.455 1.113.504 1.73c.05.627.016 1.301-.048 1.912a19 19 0 0 1-.241 1.583l-.01.052h.883a3 3 0 0 1 2.952 3.537l-.684 3.761a4.5 4.5 0 0 1-5.612 3.537l-5.6-1.527a2.5 2.5 0 0 1-1.793-1.922l-.353-1.765c-.278-1.389.784-2.559 1.913-3.005a2.8 2.8 0 0 0 .84-.49c1.707-1.514 2.325-2.723 3.385-4.85c.354-.71.718-1.676.998-2.482m1.965 5.585v-.002l.002-.007l.007-.031a14 14 0 0 0 .126-.584c.076-.388.167-.92.227-1.495c.061-.577.09-1.184.046-1.728c-.044-.556-.16-.985-.34-1.255a3 3 0 0 0-.326-.383c-.199-.208-.628-.16-.762.228c-.283.814-.664 1.83-1.048 2.6c-1.067 2.141-1.756 3.502-3.616 5.152c-.34.302-.744.517-1.136.672c-.88.348-1.447 1.148-1.3 1.879l.352 1.765a1.5 1.5 0 0 0 1.077 1.153l5.6 1.527a3.5 3.5 0 0 0 4.364-2.75l.684-3.762A2 2 0 0 0 14.006 8.5h-1.505a.5.5 0 0 1-.484-.621\"/>"},"stethoscope-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2.5 2a.5.5 0 0 0-.5.5v5a4.5 4.5 0 0 0 4 4.473V13a5 5 0 0 0 10 0v-1.05a2.5 2.5 0 1 0-1 0V13a4 4 0 1 1-8 0v-1.027A4.5 4.5 0 0 0 11 7.5v-5a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 0 0 1H10v4.5a3.5 3.5 0 0 1-7 0V3h1.5a.5.5 0 0 0 0-1zm13 6a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3\"/>"},"color-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 0 1 3.388 15.249a3.77 3.77 0 0 1-3.291-.059c-.974-.503-1.696-1.467-1.648-2.731c.017-.445.082-.867.143-1.243c.063-.387.118-.712.136-1.015c.018-.297-.004-.533-.078-.732c-.07-.191-.2-.381-.45-.569c-.313-.235-.58-.275-.845-.237c-.3.043-.614.188-1.014.387c-.735.365-1.776.942-2.974.332c-1.102-.562-1.424-1.868-1.22-2.917A8 8 0 0 1 10 2m0 1a7 7 0 0 0-6.871 5.655c-.153.788.126 1.547.691 1.835c.684.348 1.251.074 2.076-.336c.38-.188.834-.412 1.318-.481c.52-.075 1.054.028 1.586.427c.39.292.645.634.788 1.021c.14.379.162.768.14 1.14c-.022.366-.09.753-.149 1.116a9 9 0 0 0-.13 1.12c-.032.812.418 1.448 1.108 1.805a2.77 2.77 0 0 0 2.407.042A7.002 7.002 0 0 0 10 3m2.5 10a1 1 0 1 1 0 2a1 1 0 0 1 0-2m2-2.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2m0-3a1 1 0 1 1 0 2a1 1 0 0 1 0-2m-2-2.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2m-3-.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2\"/>"},"person-settings-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9 2a4 4 0 1 0 0 8a4 4 0 0 0 0-8M6 6a3 3 0 1 1 6 0a3 3 0 0 1-6 0m-1.991 5A2 2 0 0 0 2 13c0 1.691.833 2.966 2.135 3.797C5.417 17.614 7.145 18 9 18q.617 0 1.21-.057a5.5 5.5 0 0 1-.618-.958Q9.301 17 9 17c-1.735 0-3.257-.364-4.327-1.047C3.623 15.283 3 14.31 3 13c0-.553.448-1 1.009-1h5.59q.277-.538.658-1zm6.626 2.92a2 2 0 0 0 1.43-2.478l-.155-.557q.382-.293.821-.497l.338.358a2 2 0 0 0 2.91.001l.324-.344q.448.212.835.518l-.126.423a2 2 0 0 0 1.456 2.519l.349.082a4.7 4.7 0 0 1 .01 1.017l-.46.117a2 2 0 0 0-1.431 2.479l.156.556q-.383.294-.822.498l-.338-.358a2 2 0 0 0-2.909-.002l-.325.344a4.3 4.3 0 0 1-.835-.518l.127-.422a2 2 0 0 0-1.456-2.52l-.35-.082a4.7 4.7 0 0 1-.01-1.016zm4.865.58a1 1 0 1 0-2 0a1 1 0 0 0 2 0\"/>"},"person-search-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a4 4 0 1 0 0 8a4 4 0 0 0 0-8M7 6a3 3 0 1 1 6 0a3 3 0 0 1-6 0m7.865 10.797c-1.071.683-2.454 1.064-3.962 1.171a1.5 1.5 0 0 0-.342-.529l-.44-.44c1.685-.016 3.16-.379 4.206-1.046C15.377 15.283 16 14.31 16 13a1 1 0 0 0-1-1H8.744a4.5 4.5 0 0 0-.502-1H15a2 2 0 0 1 2 2c0 1.691-.833 2.966-2.135 3.797M4.5 17c.786 0 1.512-.26 2.096-.697l2.55 2.55a.5.5 0 1 0 .708-.707l-2.55-2.55A3.5 3.5 0 1 0 4.5 17m0-1a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5\"/>"},"add-square-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zM4 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm6.5.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 1 0 1 0v-3h3a.5.5 0 1 0 0-1h-3z\"/>"},"clipboard-task-list-ltr-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.354 7.854a.5.5 0 0 0-.708-.708L7.234 8.558l-.397-.362a.5.5 0 0 0-.674.738l.75.685a.5.5 0 0 0 .69-.016zm0 4.292a.5.5 0 0 1 0 .708l-1.75 1.75a.5.5 0 0 1-.691.015l-.75-.685a.5.5 0 0 1 .674-.738l.397.363l1.412-1.413a.5.5 0 0 1 .708 0M11 12.75a.5.5 0 0 0 0 1h2.5a.5.5 0 0 0 0-1zm-.5-4.5a.5.5 0 0 1 .5-.5h2.5a.5.5 0 0 1 0 1H11a.5.5 0 0 1-.5-.5M8.5 2a1.5 1.5 0 0 0-1.415 1H5.5A1.5 1.5 0 0 0 4 4.5v12A1.5 1.5 0 0 0 5.5 18h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 14.5 3h-1.585A1.5 1.5 0 0 0 11.5 2zM8 3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M5.5 4h1.585A1.5 1.5 0 0 0 8.5 5h3a1.5 1.5 0 0 0 1.415-1H14.5a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-12a.5.5 0 0 1 .5-.5\"/>"},"organization-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a3 3 0 0 0-.5 5.96V9.5h-3A1.5 1.5 0 0 0 5 11v1.042a3.001 3.001 0 1 0 1 0V11a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1.042a3.001 3.001 0 1 0 1 0V11a1.5 1.5 0 0 0-1.5-1.5h-3V7.96A3.001 3.001 0 0 0 10 2M8 5a2 2 0 1 1 4 0a2 2 0 0 1-4 0M3.5 15a2 2 0 1 1 4.001 0A2 2 0 0 1 3.5 15m11-2a2 2 0 1 1 0 4.001a2 2 0 0 1 0-4.001\"/>"},"alert-badge-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.998 2c1.09 0 2.113.28 2.995.77a3 3 0 0 0-.63.797A5.16 5.16 0 0 0 9.999 3c-2.623 0-4.77 1.924-4.98 4.385l-.014.212L5 7.802V11.5l-.038.192l-.963 2.313l11.958.002l.045-.002l-.963-2.313L15 11.5V8c.351 0 .688-.06 1-.17v3.568l.925 2.222q.033.081.053.167l.015.086l.009.132a1 1 0 0 1-.75.963l-.116.027l-.134.01l-3.502-.001l-.005.161a2.5 2.5 0 0 1-4.99 0l-.005-.161H4a1 1 0 0 1-.26-.034l-.125-.042a1 1 0 0 1-.603-1.052l.022-.128l.042-.128l.923-2.219L4 7.793l.005-.225C4.127 4.451 6.77 2 9.998 2M11.5 15.004h-3l.007.141a1.5 1.5 0 0 0 1.349 1.348L10 16.5a1.5 1.5 0 0 0 1.493-1.355zm1.707-10.89c.15-.305.376-.565.653-.757a2 2 0 1 1-.653.757\"/>"},"megaphone-20-regular":{"body":"<path fill=\"currentColor\" d=\"M18 4.802a1.5 1.5 0 0 0-1.887-1.45l-13 3.467A1.5 1.5 0 0 0 2 8.269v2.51a1.5 1.5 0 0 0 1.026 1.423L5 12.86v.89a3.25 3.25 0 0 0 6.27 1.2l4.756 1.586A1.5 1.5 0 0 0 18 15.113zm-7.68 9.832A2.251 2.251 0 0 1 6 13.75v-.556zm6.051-10.316a.5.5 0 0 1 .629.484v10.31a.5.5 0 0 1-.658.475l-13-4.333A.5.5 0 0 1 3 10.779V8.27a.5.5 0 0 1 .371-.484z\"/>"},"news-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 6.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5M10.5 9a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zm-.5 3.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5M5.5 9a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm.5 3v-2h2v2zM2 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1a2 2 0 0 1 2 2v5.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 13.5zm13 0a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v8.5A1.5 1.5 0 0 0 4.5 15h11a1.5 1.5 0 0 0 1.5-1.5V8a1 1 0 0 0-1-1v6.5a.5.5 0 0 1-1 0z\"/>"},"handshake-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.244 3.012a.5.5 0 0 0-.39.186l-.089.066C8.04 2.73 6.072 3.122 4.702 4.442a4.69 4.69 0 0 0-1.374 4.31l-.05.046l-.779.75a1.53 1.53 0 0 0 0 2.22c.398.384.95.528 1.463.432c.063.289.21.564.443.788c.307.296.706.449 1.108.46c.011.387.17.771.477 1.067s.707.45 1.109.46c.01.387.17.772.477 1.068a1.676 1.676 0 0 0 2.202.092l.437.42c.64.617 1.678.617 2.318 0c.306-.294.465-.676.479-1.062c.4-.012.795-.165 1.1-.459s.465-.677.477-1.063a1.66 1.66 0 0 0 1.087-.459c.243-.233.393-.522.451-.824a1.67 1.67 0 0 0 1.44-.436a1.53 1.53 0 0 0 0-2.221l-.72-.693l.147-.55a4.5 4.5 0 0 0-.42-3.336c-.836-1.506-2.458-2.436-4.212-2.436h-1.23l-.159-.004zm2.453 3.716l2.405 2.317l.003.002l1.741 1.678a.574.574 0 0 1 0 .833a.63.63 0 0 1-.865 0l-1.321-1.272a.52.52 0 0 0-.72 0l-.014.012a.48.48 0 0 0 0 .694l1.03.992c.24.23.24.604 0 .835a.63.63 0 0 1-.8.055a.524.524 0 0 0-.669.046a.477.477 0 0 0-.041.645a.574.574 0 0 1-.054.775a.63.63 0 0 1-.81.048a.524.524 0 0 0-.674.038a.477.477 0 0 0-.043.648a.58.58 0 0 1-.053.788a.637.637 0 0 1-.877 0l-.433-.417l.158-.152a1.53 1.53 0 0 0 0-2.221a1.66 1.66 0 0 0-1.108-.46a1.54 1.54 0 0 0-.477-1.068a1.66 1.66 0 0 0-1.109-.459a1.54 1.54 0 0 0-.477-1.068a1.67 1.67 0 0 0-1.463-.431a1.55 1.55 0 0 0-.443-.788a1.66 1.66 0 0 0-1.292-.454a3.74 3.74 0 0 1 1.13-3.208A4.06 4.06 0 0 1 8.708 4.04L7.253 5.11a1.703 1.703 0 0 0-.33 2.44a1.81 1.81 0 0 0 2.477.336l1.576-1.157zm-4.852-.813l2.592-1.903h.536a2 2 0 0 1 .147.004h1.242c1.404 0 2.685.745 3.338 1.922c.442.796.558 1.721.327 2.594l-.003.01l-2.76-2.667a.5.5 0 0 0-.353-.147h-2.1a.5.5 0 0 0-.295.097L8.808 7.079a.81.81 0 0 1-1.1-.149a.703.703 0 0 1 .137-1.015m.442 8.61l.01-.01l.778-.75l.009-.008a.63.63 0 0 1 .856.009a.574.574 0 0 1 0 .833l-.779.75a.63.63 0 0 1-.865 0a.574.574 0 0 1-.01-.824m.077-1.462l-.01.009l-.778.75l-.01.009a.63.63 0 0 1-.855-.01a.574.574 0 0 1-.007-.826l.007-.007l.778-.75l.007-.007a.63.63 0 0 1 .858.007a.574.574 0 0 1 .01.825m-1.595-1.519l-.779.75l-.007.007a.63.63 0 0 1-.858-.007a.574.574 0 0 1 0-.833l.778-.75a.63.63 0 0 1 .866 0a.574.574 0 0 1 .007.827zm-1.906-1.219l-.778.75a.63.63 0 0 1-.866 0a.574.574 0 0 1 0-.834l.779-.75a.63.63 0 0 1 .865 0a.574.574 0 0 1 0 .834\"/>"},"building-bank-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 5.874a.833.833 0 1 0 0-1.667a.833.833 0 0 0 0 1.667m6 7.466V8h.092c.893 0 1.26-1.148.53-1.665l-5.85-4.152a1.33 1.33 0 0 0-1.544 0L3.376 6.335c-.728.517-.363 1.664.53 1.664H4v5.34c-.601.386-1 1.06-1 1.827v1.333a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-1.333c0-.767-.398-1.441-1-1.826M9.806 2.999a.33.33 0 0 1 .385 0l5.639 4H4.168zm5.192 5v5.006a2 2 0 0 0-.166-.006h-1.834V8zM5 13.005V8h2v5H5.166q-.084 0-.167.006m.167.994h9.667c.644 0 1.166.522 1.166 1.167V16H4v-.833C4 14.522 4.523 14 5.167 14M9.5 13H8V8h1.5zm1 0V8H12v5z\"/>"},"receipt-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v7h3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm11 8v3a2 2 0 0 0 2-2v-1zm-1 3V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v9a2 2 0 0 0 2 2zM6 6.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5m0 3a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5m0 3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5\"/>"},"wallet-20-regular":{"body":"<path fill=\"currentColor\" d=\"M13.5 11a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1zM3 4.5A1.5 1.5 0 0 1 4.5 3H14a2 2 0 0 1 2 2v.268A2 2 0 0 1 17 7v8a2 2 0 0 1-2 2H5.5A2.5 2.5 0 0 1 3 14.5zM14 4H4.5a.5.5 0 0 0 0 1H15a1 1 0 0 0-1-1M4.5 6q-.264-.001-.5-.085V14.5A1.5 1.5 0 0 0 5.5 16H15a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1z\"/>"},"cart-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2.997 3.496a.5.5 0 0 1 .5-.5h.438c.727 0 1.145.473 1.387.945c.165.323.284.717.383 1.059H16a1 1 0 0 1 .962 1.272l-1.496 5.275A2 2 0 0 1 13.542 13H8.463a2 2 0 0 1-1.93-1.473l-.642-2.355l-.01-.032l-1.03-3.498l-.1-.337c-.1-.346-.188-.652-.32-.909c-.159-.31-.305-.4-.496-.4h-.438a.5.5 0 0 1-.5-.5M6.845 8.87l.653 2.396a1 1 0 0 0 .965.736h5.08a1 1 0 0 0 .961-.727L16 6H6zM10 15.499a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0a.5.5 0 0 0 1 0m6 0a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0a.5.5 0 0 0 1 0\"/>"},"vehicle-truck-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8 12a1 1 0 1 1-2 0a1 1 0 0 1 2 0m5 1a1 1 0 1 0 0-2a1 1 0 0 0 0 2m-5 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M4 2a2 2 0 0 0-2 2v10.5A1.5 1.5 0 0 0 3.5 16H4v.5A1.5 1.5 0 0 0 5.5 18h1A1.5 1.5 0 0 0 8 16.5V16h4v.5a1.5 1.5 0 0 0 1.5 1.5h1a1.5 1.5 0 0 0 1.5-1.5V16h.5a1.5 1.5 0 0 0 1.5-1.5V4a2 2 0 0 0-2-2zm9 14.5V16h2v.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5M7 16v.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5V16zM3 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v10.5a.5.5 0 0 1-.5.5H16V9.746q0-.307-.075-.606l-.75-3.004A1.5 1.5 0 0 0 13.718 5H6.281a1.5 1.5 0 0 0-1.455 1.136L4.075 9.14A2.5 2.5 0 0 0 4 9.746V15h-.5a.5.5 0 0 1-.5-.5zm2 11v-5h10v5zm.14-6l.656-2.621A.5.5 0 0 1 6.28 6h7.438a.5.5 0 0 1 .485.379L14.86 9z\"/>"},"building-factory-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.435 2a1.5 1.5 0 0 0-1.497 1.4l-.866 13A1.5 1.5 0 0 0 3.568 18h2.863a1.5 1.5 0 0 0 1.496-1.6l-.866-13A1.5 1.5 0 0 0 5.564 2zm-.499 1.467a.5.5 0 0 1 .5-.467h1.128a.5.5 0 0 1 .499.467l.867 13a.5.5 0 0 1-.5.533H3.569a.5.5 0 0 1-.498-.533zM16.5 18H8.43a2.5 2.5 0 0 0 .45-1H10v-4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4h.5a.5.5 0 0 0 .5-.5V6.623l-4.166 3.749a.5.5 0 0 1-.835-.372V6.623l-3.51 3.16l-.085-1.27l3.761-3.385A.5.5 0 0 1 13 5.5v3.377l4.165-3.749A.5.5 0 0 1 18 5.5v11a1.5 1.5 0 0 1-1.5 1.5M11 17h4v-4h-4z\"/>"},"person-support-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 14.5a2 2 0 0 1-1.994-1.84A6.002 6.002 0 0 1 10 1a6 6 0 0 1 5.98 5.5a.47.47 0 0 1-.48.5a.54.54 0 0 1-.525-.5a5 5 0 1 0-6.79 5.16A2 2 0 1 1 10 14.5M5.009 12H5.1c.39.381.823.717 1.292 1H5.009C4.448 13 4 13.447 4 14c0 1.309.622 2.284 1.673 2.953C6.743 17.636 8.265 18 10 18s3.257-.364 4.327-1.047C15.377 16.283 16 15.31 16 14a1 1 0 0 0-1-1h-2.041a3 3 0 0 0 0-1H15a2 2 0 0 1 2 2c0 1.691-.833 2.966-2.135 3.797C13.583 18.614 11.855 19 10 19s-3.583-.386-4.865-1.203C3.833 16.967 3 15.69 3 14c0-1.113.903-2 2.009-2M14 7a4 4 0 0 1-1.87 3.387a3 3 0 0 0-.93-.637a3 3 0 1 0-2.4 0c-.35.153-.665.37-.93.637a4 4 0 0 1-1.638-2.042A4 4 0 0 1 6 7a4 4 0 1 1 8 0\"/>"}},"lastModified":1785042646,"width":20,"height":20}
diff --git a/workbench/control_plane/src/lib/theme/icon-data/material.json b/workbench/control_plane/src/lib/theme/icon-data/material.json
new file mode 100644
index 00000000..83306bac
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/icon-data/material.json
@@ -0,0 +1 @@
+{"prefix":"material-symbols","icons":{"progress-activity":{"body":"<path fill=\"currentColor\" d=\"M8.125 21.213q-1.825-.788-3.187-2.15t-2.15-3.188T2 11.988t.788-3.875t2.15-3.175t3.187-2.15T12 2q.425 0 .713.288T13 3t-.288.713T12 4Q8.675 4 6.337 6.338T4 12t2.338 5.663T12 20t5.663-2.337T20 12q0-.425.288-.712T21 11t.713.288T22 12q0 2.05-.788 3.875t-2.15 3.188t-3.175 2.15t-3.875.787t-3.887-.787\"/>"},"check-rounded":{"body":"<path fill=\"currentColor\" d=\"m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z\"/>"},"check-circle-rounded":{"body":"<path fill=\"currentColor\" d=\"m10.6 13.8l-2.15-2.15q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7L9.9 15.9q.3.3.7.3t.7-.3l5.65-5.65q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275zM12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"close-rounded":{"body":"<path fill=\"currentColor\" d=\"m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z\"/>"},"cancel-rounded":{"body":"<path fill=\"currentColor\" d=\"m12 13.4l2.9 2.9q.275.275.7.275t.7-.275t.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7t.7.275t.7-.275zm0 8.6q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"warning-rounded":{"body":"<path fill=\"currentColor\" d=\"M2.725 21q-.275 0-.5-.137t-.35-.363t-.137-.488t.137-.512l9.25-16q.15-.25.388-.375T12 3t.488.125t.387.375l9.25 16q.15.25.138.513t-.138.487t-.35.363t-.5.137zm9.988-3.287Q13 17.425 13 17t-.288-.712T12 16t-.712.288T11 17t.288.713T12 18t.713-.288m0-3Q13 14.425 13 14v-3q0-.425-.288-.712T12 10t-.712.288T11 11v3q0 .425.288.713T12 15t.713-.288\"/>"},"error-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.713 16.713Q13 16.425 13 16t-.288-.712T12 15t-.712.288T11 16t.288.713T12 17t.713-.288m0-4Q13 12.425 13 12V8q0-.425-.288-.712T12 7t-.712.288T11 8v4q0 .425.288.713T12 13t.713-.288M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"info-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.713 16.713Q13 16.425 13 16v-4q0-.425-.288-.712T12 11t-.712.288T11 12v4q0 .425.288.713T12 17t.713-.288m0-8Q13 8.425 13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9t.713-.288M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"help-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.838 17.638q.362-.363.362-.888t-.362-.888t-.888-.362t-.887.363t-.363.887t.363.888t.887.362t.888-.363M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m.1-14.3q.625 0 1.088.4t.462 1q0 .55-.337.975t-.763.8q-.575.5-1.012 1.1t-.438 1.35q0 .35.263.588t.612.237q.375 0 .638-.25t.337-.625q.1-.525.45-.937t.75-.788q.575-.55.988-1.2t.412-1.45q0-1.275-1.037-2.087T12.1 6q-.95 0-1.812.4T8.975 7.625q-.175.3-.112.638t.337.512q.35.2.725.125t.625-.425q.275-.375.688-.575t.862-.2\"/>"},"notifications-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 19q-.425 0-.712-.288T4 18t.288-.712T5 17h1v-7q0-2.075 1.25-3.687T10.5 4.2v-.7q0-.625.438-1.062T12 2t1.063.438T13.5 3.5v.7q2 .5 3.25 2.113T18 10v7h1q.425 0 .713.288T20 18t-.288.713T19 19zm7 3q-.825 0-1.412-.587T10 20h4q0 .825-.587 1.413T12 22\"/>"},"monitoring-rounded":{"body":"<path fill=\"currentColor\" d=\"M3.288 20.713Q3 20.425 3 20v-1q0-.425.288-.712T4 18t.713.288T5 19v1q0 .425-.288.713T4 21t-.712-.288m4 0Q7 20.426 7 20v-5.5q0-.425.288-.712T8 13.5t.713.288T9 14.5V20q0 .425-.288.713T8 21t-.712-.288m4 0Q11 20.426 11 20v-3.5q0-.425.288-.712T12 15.5t.713.288t.287.712V20q0 .425-.288.713T12 21t-.712-.288m4 0Q15 20.426 15 20v-5q0-.425.288-.712T16 14t.713.288T17 15v5q0 .425-.288.713T16 21t-.712-.288m4 0Q19 20.426 19 20v-9q0-.425.288-.712T20 10t.713.288T21 11v9q0 .425-.288.713T20 21t-.712-.288M14 11.975q-.4 0-.763-.15t-.662-.425L10 8.825l-5.3 5.3q-.3.3-.712.288t-.713-.313q-.275-.3-.262-.712T3.3 12.7l5.275-5.275q.3-.3.663-.437T10 6.85t.775.138t.65.437L14 10l5.3-5.3q.3-.3.713-.288t.712.313q.275.3.263.713t-.288.687L15.425 11.4q-.275.275-.65.425t-.775.15\"/>"},"add-rounded":{"body":"<path fill=\"currentColor\" d=\"M11 13H6q-.425 0-.712-.288T5 12t.288-.712T6 11h5V6q0-.425.288-.712T12 5t.713.288T13 6v5h5q.425 0 .713.288T19 12t-.288.713T18 13h-5v5q0 .425-.288.713T12 19t-.712-.288T11 18z\"/>"},"remove-rounded":{"body":"<path fill=\"currentColor\" d=\"M6 13q-.425 0-.712-.288T5 12t.288-.712T6 11h12q.425 0 .713.288T19 12t-.288.713T18 13z\"/>"},"delete-rounded":{"body":"<path fill=\"currentColor\" d=\"M7 21q-.825 0-1.412-.587T5 19V6q-.425 0-.712-.288T4 5t.288-.712T5 4h4q0-.425.288-.712T10 3h4q.425 0 .713.288T15 4h4q.425 0 .713.288T20 5t-.288.713T19 6v13q0 .825-.587 1.413T17 21zm3.713-4.288Q11 16.426 11 16V9q0-.425-.288-.712T10 8t-.712.288T9 9v7q0 .425.288.713T10 17t.713-.288m4 0Q15 16.426 15 16V9q0-.425-.288-.712T14 8t-.712.288T13 9v7q0 .425.288.713T14 17t.713-.288\"/>"},"edit-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 21q-.425 0-.712-.288T3 20v-2.425q0-.4.15-.763t.425-.637L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.437.65T21 6.4q0 .4-.138.763t-.437.662l-12.6 12.6q-.275.275-.638.425t-.762.15zM17.6 7.8L19 6.4L17.6 5l-1.4 1.4z\"/>"},"save-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h11.175q.4 0 .763.15t.637.425l2.85 2.85q.275.275.425.638t.15.762V19q0 .825-.587 1.413T19 21zm9.125-3.875Q15 16.25 15 15t-.875-2.125T12 12t-2.125.875T9 15t.875 2.125T12 18t2.125-.875M7 10h7q.425 0 .713-.288T15 9V7q0-.425-.288-.712T14 6H7q-.425 0-.712.288T6 7v2q0 .425.288.713T7 10\"/>"},"content-copy-rounded":{"body":"<path fill=\"currentColor\" d=\"M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm-4 4q-.825 0-1.412-.587T3 20V7q0-.425.288-.712T4 6t.713.288T5 7v13h10q.425 0 .713.288T16 21t-.288.713T15 22z\"/>"},"download-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.625 15.513q-.175-.063-.325-.213l-3.6-3.6q-.3-.3-.288-.7t.288-.7q.3-.3.713-.312t.712.287L11 12.15V5q0-.425.288-.712T12 4t.713.288T13 5v7.15l1.875-1.875q.3-.3.713-.288t.712.313q.275.3.288.7t-.288.7l-3.6 3.6q-.15.15-.325.213t-.375.062t-.375-.062M6 20q-.825 0-1.412-.587T4 18v-2q0-.425.288-.712T5 15t.713.288T6 16v2h12v-2q0-.425.288-.712T19 15t.713.288T20 16v2q0 .825-.587 1.413T18 20z\"/>"},"upload-rounded":{"body":"<path fill=\"currentColor\" d=\"M6 20q-.825 0-1.412-.587T4 18v-2q0-.425.288-.712T5 15t.713.288T6 16v2h12v-2q0-.425.288-.712T19 15t.713.288T20 16v2q0 .825-.587 1.413T18 20zm5-12.15L9.125 9.725q-.3.3-.712.288T7.7 9.7q-.275-.3-.288-.7t.288-.7l3.6-3.6q.15-.15.325-.212T12 4.425t.375.063t.325.212l3.6 3.6q.3.3.288.7t-.288.7q-.3.3-.712.313t-.713-.288L13 7.85V15q0 .425-.288.713T12 16t-.712-.288T11 15z\"/>"},"undo-rounded":{"body":"<path fill=\"currentColor\" d=\"M8 19q-.425 0-.712-.288T7 18t.288-.712T8 17h6.1q1.575 0 2.738-1T18 13.5T16.838 11T14.1 10H7.8l1.9 1.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275L4.7 9.7q-.15-.15-.213-.325T4.426 9t.063-.375T4.7 8.3l3.6-3.6q.275-.275.7-.275t.7.275t.275.7t-.275.7L7.8 8h6.3q2.425 0 4.163 1.575T20 13.5t-1.737 3.925T14.1 19z\"/>"},"refresh-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 20q-3.35 0-5.675-2.325T4 12t2.325-5.675T12 4q1.725 0 3.3.712T18 6.75V5q0-.425.288-.712T19 4t.713.288T20 5v5q0 .425-.288.713T19 11h-5q-.425 0-.712-.288T13 10t.288-.712T14 9h3.2q-.8-1.4-2.187-2.2T12 6Q9.5 6 7.75 7.75T6 12t1.75 4.25T12 18q1.7 0 3.113-.862t2.187-2.313q.2-.35.563-.487t.737-.013q.4.125.575.525t-.025.75q-1.025 2-2.925 3.2T12 20\"/>"},"search-rounded":{"body":"<path fill=\"currentColor\" d=\"M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14\"/>"},"filter-alt":{"body":"<path fill=\"currentColor\" d=\"M11 20q-.425 0-.712-.288T10 19v-6L4.2 5.6q-.375-.5-.112-1.05T5 4h14q.65 0 .913.55T19.8 5.6L14 13v6q0 .425-.288.713T13 20z\"/>"},"tune-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.288 20.713Q11 20.425 11 20v-4q0-.425.288-.712T12 15t.713.288T13 16v1h7q.425 0 .713.288T21 18t-.288.713T20 19h-7v1q0 .425-.288.713T12 21t-.712-.288M4 19q-.425 0-.712-.288T3 18t.288-.712T4 17h4q.425 0 .713.288T9 18t-.288.713T8 19zm3.288-4.288Q7 14.425 7 14v-1H4q-.425 0-.712-.288T3 12t.288-.712T4 11h3v-1q0-.425.288-.712T8 9t.713.288T9 10v4q0 .425-.288.713T8 15t-.712-.288M12 13q-.425 0-.712-.288T11 12t.288-.712T12 11h8q.425 0 .713.288T21 12t-.288.713T20 13zm3.288-4.288Q15 8.425 15 8V4q0-.425.288-.712T16 3t.713.288T17 4v1h3q.425 0 .713.288T21 6t-.288.713T20 7h-3v1q0 .425-.288.713T16 9t-.712-.288M4 7q-.425 0-.712-.288T3 6t.288-.712T4 5h8q.425 0 .713.288T13 6t-.288.713T12 7z\"/>"},"settings-rounded":{"body":"<path fill=\"currentColor\" d=\"M10.825 22q-.675 0-1.162-.45t-.588-1.1L8.85 18.8q-.325-.125-.612-.3t-.563-.375l-1.55.65q-.625.275-1.25.05t-.975-.8l-1.175-2.05q-.35-.575-.2-1.225t.675-1.075l1.325-1Q4.5 12.5 4.5 12.337v-.675q0-.162.025-.337l-1.325-1Q2.675 9.9 2.525 9.25t.2-1.225L3.9 5.975q.35-.575.975-.8t1.25.05l1.55.65q.275-.2.575-.375t.6-.3l.225-1.65q.1-.65.588-1.1T10.825 2h2.35q.675 0 1.163.45t.587 1.1l.225 1.65q.325.125.613.3t.562.375l1.55-.65q.625-.275 1.25-.05t.975.8l1.175 2.05q.35.575.2 1.225t-.675 1.075l-1.325 1q.025.175.025.338v.674q0 .163-.05.338l1.325 1q.525.425.675 1.075t-.2 1.225l-1.2 2.05q-.35.575-.975.8t-1.25-.05l-1.5-.65q-.275.2-.575.375t-.6.3l-.225 1.65q-.1.65-.587 1.1t-1.163.45zm1.225-6.5q1.45 0 2.475-1.025T15.55 12t-1.025-2.475T12.05 8.5q-1.475 0-2.488 1.025T8.55 12t1.013 2.475T12.05 15.5\"/>"},"share":{"body":"<path fill=\"currentColor\" d=\"M17 22q-1.25 0-2.125-.875T14 19q0-.15.075-.7L7.05 14.2q-.4.375-.925.588T5 15q-1.25 0-2.125-.875T2 12t.875-2.125T5 9q.6 0 1.125.213t.925.587l7.025-4.1q-.05-.175-.062-.337T14 5q0-1.25.875-2.125T17 2t2.125.875T20 5t-.875 2.125T17 8q-.6 0-1.125-.213T14.95 7.2l-7.025 4.1q.05.175.063.338T8 12t-.012.363t-.063.337l7.025 4.1q.4-.375.925-.587T17 16q1.25 0 2.125.875T20 19t-.875 2.125T17 22\"/>"},"send-rounded":{"body":"<path fill=\"currentColor\" d=\"M4.4 19.425q-.5.2-.95-.088T3 18.5V14l8-2l-8-2V5.5q0-.55.45-.837t.95-.088l15.4 6.5q.625.275.625.925t-.625.925z\"/>"},"visibility-rounded":{"body":"<path fill=\"currentColor\" d=\"M15.188 14.688Q16.5 13.375 16.5 11.5t-1.312-3.187T12 7T8.813 8.313T7.5 11.5t1.313 3.188T12 16t3.188-1.312m-5.1-1.276Q9.3 12.625 9.3 11.5t.788-1.912T12 8.8t1.913.788t.787 1.912t-.787 1.913T12 14.2t-1.912-.787m-4.2 3.787q-2.763-1.8-4.363-4.75q-.125-.225-.187-.462t-.063-.488t.063-.488t.187-.462q1.6-2.95 4.363-4.75T12 4t6.113 1.8t4.362 4.75q.125.225.188.463t.062.487t-.062.488t-.188.462q-1.6 2.95-4.362 4.75T12 19t-6.113-1.8\"/>"},"visibility-off-rounded":{"body":"<path fill=\"currentColor\" d=\"m19.1 21.9l-3.5-3.45q-.875.275-1.775.413T12 19q-3.35 0-6.125-1.8t-4.35-4.75q-.125-.225-.187-.462t-.063-.488t.063-.488t.187-.462q.55-.975 1.175-1.9T4.15 7L2.075 4.9Q1.8 4.625 1.8 4.213t.3-.713q.275-.275.7-.275t.7.275l17 17q.275.275.288.688t-.288.712q-.275.275-.7.275t-.7-.275M12 16q.275 0 .525-.025t.5-.1l-5.4-5.4q-.075.25-.1.5T7.5 11.5q0 1.875 1.313 3.188T12 16m0-12q3.35 0 6.138 1.813t4.362 4.762q.125.2.188.438t.062.487t-.05.488t-.175.437q-.475.925-1.062 1.75t-1.313 1.55q-.35.35-.825.325t-.825-.375l-2-2q-.175-.175-.225-.413t.025-.487q.1-.325.15-.625t.05-.65q0-1.875-1.312-3.187T12 7q-.35 0-.65.05t-.625.15q-.25.075-.5.025T9.8 7l-.825-.825q-.475-.475-.312-1.1t.787-.8q.625-.125 1.263-.2T12 4m1.975 5.65q.275.325.462.713t.238.812q.025.2-.15.275t-.325-.075l-2.05-2.05Q12 9.175 12.088 9t.287-.175q.475.05.875.263t.725.562\"/>"},"keyboard-arrow-down-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.625 14.913q-.175-.063-.325-.213l-4.6-4.6q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l3.9 3.9l3.9-3.9q.275-.275.7-.275t.7.275t.275.7t-.275.7l-4.6 4.6q-.15.15-.325.213t-.375.062t-.375-.062\"/>"},"keyboard-arrow-up-rounded":{"body":"<path fill=\"currentColor\" d=\"m12 10.8l-3.9 3.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.6-4.6q.3-.3.7-.3t.7.3l4.6 4.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275z\"/>"},"keyboard-arrow-left-rounded":{"body":"<path fill=\"currentColor\" d=\"m10.8 12l3.9 3.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-4.6-4.6q-.15-.15-.212-.325T8.425 12t.063-.375t.212-.325l4.6-4.6q.275-.275.7-.275t.7.275t.275.7t-.275.7z\"/>"},"keyboard-arrow-right-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z\"/>"},"arrow-back-rounded":{"body":"<path fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"/>"},"arrow-forward-rounded":{"body":"<path fill=\"currentColor\" d=\"M16.175 13H5q-.425 0-.712-.288T4 12t.288-.712T5 11h11.175l-4.9-4.9q-.3-.3-.288-.7t.313-.7q.3-.275.7-.288t.7.288l6.6 6.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-6.6 6.6q-.275.275-.687.275T11.3 19.3q-.3-.3-.3-.712t.3-.713z\"/>"},"arrow-upward-rounded":{"body":"<path fill=\"currentColor\" d=\"m11 7.825l-4.9 4.9q-.3.3-.7.288t-.7-.313q-.275-.3-.288-.7t.288-.7l6.6-6.6q.15-.15.325-.212T12 4.425t.375.063t.325.212l6.6 6.6q.275.275.275.688t-.275.712q-.3.3-.712.3t-.713-.3L13 7.825V19q0 .425-.288.713T12 20t-.712-.288T11 19z\"/>"},"arrow-downward-rounded":{"body":"<path fill=\"currentColor\" d=\"M11 16.175V5q0-.425.288-.712T12 4t.713.288T13 5v11.175l4.9-4.9q.3-.3.7-.288t.7.313q.275.3.287.7t-.287.7l-6.6 6.6q-.15.15-.325.213t-.375.062t-.375-.062t-.325-.213l-6.6-6.6q-.275-.275-.275-.687T4.7 11.3q.3-.3.713-.3t.712.3z\"/>"},"subdirectory-arrow-left-rounded":{"body":"<path fill=\"currentColor\" d=\"m7.825 16l2.875 2.875q.3.3.313.7t-.288.7t-.712.3t-.713-.3L4.7 15.7q-.15-.15-.213-.325T4.426 15t.063-.375t.212-.325l4.625-4.625q.3-.3.7-.287t.7.312q.275.3.287.7t-.287.7l-2.9 2.9H17V5q0-.425.288-.712T18 4t.713.288T19 5v9q0 .825-.587 1.413T17 16z\"/>"},"open-in-new-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h6q.425 0 .713.288T12 4t-.288.713T11 5H5v14h14v-6q0-.425.288-.712T20 12t.713.288T21 13v6q0 .825-.587 1.413T19 21zM19 6.4L10.4 15q-.275.275-.7.275T9 15t-.275-.7t.275-.7L17.6 5H15q-.425 0-.712-.288T14 4t.288-.712T15 3h5q.425 0 .713.288T21 4v5q0 .425-.288.713T20 10t-.712-.288T19 9z\"/>"},"more-horiz":{"body":"<path fill=\"currentColor\" d=\"M6 14q-.825 0-1.412-.587T4 12t.588-1.412T6 10t1.413.588T8 12t-.587 1.413T6 14m6 0q-.825 0-1.412-.587T10 12t.588-1.412T12 10t1.413.588T14 12t-.587 1.413T12 14m6 0q-.825 0-1.412-.587T16 12t.588-1.412T18 10t1.413.588T20 12t-.587 1.413T18 14\"/>"},"more-vert":{"body":"<path fill=\"currentColor\" d=\"M12 20q-.825 0-1.412-.587T10 18t.588-1.412T12 16t1.413.588T14 18t-.587 1.413T12 20m0-6q-.825 0-1.412-.587T10 12t.588-1.412T12 10t1.413.588T14 12t-.587 1.413T12 14m0-6q-.825 0-1.412-.587T10 6t.588-1.412T12 4t1.413.588T14 6t-.587 1.413T12 8\"/>"},"menu-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z\"/>"},"view-sidebar":{"body":"<path fill=\"currentColor\" d=\"M19.5 8q-.625 0-1.062-.437T18 6.5v-1q0-.625.438-1.062T19.5 4h1q.625 0 1.063.438T22 5.5v1q0 .625-.437 1.063T20.5 8zm0 6q-.625 0-1.062-.437T18 12.5v-1q0-.625.438-1.062T19.5 10h1q.625 0 1.063.438T22 11.5v1q0 .625-.437 1.063T20.5 14zM4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h10q.825 0 1.413.588T16 6v12q0 .825-.587 1.413T14 20zm15.5 0q-.625 0-1.062-.437T18 18.5v-1q0-.625.438-1.062T19.5 16h1q.625 0 1.063.438T22 17.5v1q0 .625-.437 1.063T20.5 20z\"/>"},"open-in-full-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 21q-.425 0-.712-.288T3 20v-6q0-.425.288-.712T4 13t.713.288T5 14v3.6L17.6 5H14q-.425 0-.712-.288T13 4t.288-.712T14 3h6q.425 0 .713.288T21 4v6q0 .425-.288.713T20 11t-.712-.288T19 10V6.4L6.4 19H10q.425 0 .713.288T11 20t-.288.713T10 21z\"/>"},"close-fullscreen-rounded":{"body":"<path fill=\"currentColor\" d=\"m10 15.4l-5.9 5.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7L8.6 14H5q-.425 0-.712-.288T4 13t.288-.712T5 12h6q.425 0 .713.288T12 13v6q0 .425-.288.713T11 20t-.712-.288T10 19zm5.4-5.4H19q.425 0 .713.288T20 11t-.288.713T19 12h-6q-.425 0-.712-.288T12 11V5q0-.425.288-.712T13 4t.713.288T14 5v3.6l5.9-5.9q.275-.275.7-.275t.7.275t.275.7t-.275.7z\"/>"},"mail-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8.263-7.212q.137-.038.262-.113L19.6 8.25q.2-.125.3-.312t.1-.413q0-.5-.425-.75T18.7 6.8L12 11L5.3 6.8q-.45-.275-.875-.012T4 7.525q0 .25.1.438t.3.287l7.075 4.425q.125.075.263.113t.262.037t.263-.037\"/>"},"drafts-rounded":{"body":"<path fill=\"currentColor\" d=\"m13.025 1.6l8.025 4.8q.45.275.7.75t.25 1V19q0 .825-.587 1.413T20 21H4q-.825 0-1.412-.587T2 19V8.15q0-.525.25-1t.7-.75l8.025-4.8q.475-.275 1.025-.275t1.025.275M12 12.65L19.8 8L12 3.35L4.2 8z\"/>"},"unsubscribe-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 11L5.3 6.8q-.425-.275-.862-.025T4 7.525q0 .225.1.413t.3.312l7.075 4.425q.25.15.525.15t.525-.15L19.6 8.25q.2-.125.3-.312t.1-.413q0-.5-.437-.75T18.7 6.8zm3.463 10.538Q14 20.075 14 18t1.463-3.537T19 13t3.538 1.463T24 18t-1.463 3.538T19 23t-3.537-1.463M16.5 18.5h5q.2 0 .35-.15T22 18t-.15-.35t-.35-.15h-5q-.2 0-.35.15T16 18t.15.35t.35.15M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v4.45q0 .45-.375.7t-.8.1q-.45-.125-.9-.188T19 11q-2.925 0-4.962 2.037T12 18q0 .225.013.45t.037.425q.05.45-.213.788T11.15 20z\"/>"},"inbox-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm7-5q.8 0 1.475-.413t1.1-1.087q.15-.225.375-.363t.5-.137H19V5H5v9h3.55q.275 0 .5.138t.375.362q.425.675 1.1 1.088T12 16\"/>"},"reply-rounded":{"body":"<path fill=\"currentColor\" d=\"m6.825 12l2.9 2.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-4.6-4.6q-.3-.3-.3-.7t.3-.7l4.6-4.6q.275-.275.688-.275T9.7 5.7q.3.3.3.713t-.3.712L6.825 10H16q2.075 0 3.538 1.463T21 15v3q0 .425-.288.713T20 19t-.712-.288T19 18v-3q0-1.25-.875-2.125T16 12z\"/>"},"reply-all-rounded":{"body":"<path fill=\"currentColor\" d=\"m4.825 11l3.9 3.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-4.6-4.6q-.15-.15-.213-.325T2.426 11t.063-.375t.212-.325l4.6-4.6q.275-.275.688-.275T8.7 5.7q.3.3.3.713t-.3.712zm6 1l2.9 2.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-4.6-4.6q-.15-.15-.213-.325T7.426 11t.063-.375t.212-.325l4.6-4.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L10.825 10H17q2.075 0 3.538 1.463T22 15v3q0 .425-.288.713T21 19t-.712-.288T20 18v-3q0-1.25-.875-2.125T17 12z\"/>"},"forward-rounded":{"body":"<path fill=\"currentColor\" d=\"M19.175 11L15.3 7.125q-.3-.3-.3-.712t.3-.713q.3-.275.713-.275t.687.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.3.3-.7.288t-.7-.288q-.3-.3-.312-.7t.287-.7zm-6 1H7q-1.25 0-2.125.875T4 15v3q0 .425-.288.713T3 19t-.712-.288T2 18v-3q0-2.075 1.463-3.537T7 10h6.175L10.3 7.125q-.3-.3-.3-.712t.3-.713q.3-.275.713-.275t.687.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.3.3-.7.288t-.7-.288q-.3-.3-.312-.7t.287-.7z\"/>"},"chat-rounded":{"body":"<path fill=\"currentColor\" d=\"m6 18l-2.3 2.3q-.475.475-1.088.213T2 19.575V4q0-.825.588-1.412T4 2h16q.825 0 1.413.588T22 4v12q0 .825-.587 1.413T20 18zm1-4h6q.425 0 .713-.288T14 13t-.288-.712T13 12H7q-.425 0-.712.288T6 13t.288.713T7 14m0-3h10q.425 0 .713-.288T18 10t-.288-.712T17 9H7q-.425 0-.712.288T6 10t.288.713T7 11m0-3h10q.425 0 .713-.288T18 7t-.288-.712T17 6H7q-.425 0-.712.288T6 7t.288.713T7 8\"/>"},"chat-bubble-rounded":{"body":"<path fill=\"currentColor\" d=\"m6 18l-2.3 2.3q-.475.475-1.088.213T2 19.575V4q0-.825.588-1.412T4 2h16q.825 0 1.413.588T22 4v12q0 .825-.587 1.413T20 18z\"/>"},"forum-rounded":{"body":"<path fill=\"currentColor\" d=\"M21 20.6q-.2 0-.375-.075T20.3 20.3L18 18H8q-.825 0-1.412-.587T6 16v-1h11q.825 0 1.413-.587T19 13V6h1q.825 0 1.413.588T22 8v11.575q0 .45-.3.738t-.7.287m-18-5q-.4 0-.7-.287t-.3-.738V4q0-.825.588-1.412T4 2h11q.825 0 1.413.588T17 4v7q0 .825-.587 1.413T15 13H6l-2.3 2.3q-.15.15-.325.225T3 15.6\"/>"},"call":{"body":"<path fill=\"currentColor\" d=\"M19.95 21q-3.125 0-6.175-1.362t-5.55-3.863t-3.862-5.55T3 4.05q0-.45.3-.75t.75-.3H8.1q.35 0 .625.238t.325.562l.65 3.5q.05.4-.025.675T9.4 8.45L6.975 10.9q.5.925 1.187 1.787t1.513 1.663q.775.775 1.625 1.438T13.1 17l2.35-2.35q.225-.225.588-.337t.712-.063l3.45.7q.35.1.575.363T21 15.9v4.05q0 .45-.3.75t-.75.3\"/>"},"attach-file-rounded":{"body":"<path fill=\"currentColor\" d=\"M18 15.75q0 2.6-1.825 4.425T11.75 22t-4.425-1.825T5.5 15.75V6.5q0-1.875 1.313-3.187T10 2t3.188 1.313T14.5 6.5v8.75q0 1.15-.8 1.95t-1.95.8t-1.95-.8t-.8-1.95V7q0-.425.288-.712T10 6t.713.288T11 7v8.25q0 .325.213.538t.537.212t.538-.213t.212-.537V6.5q-.025-1.05-.737-1.775T10 4t-1.775.725T7.5 6.5v9.25q-.025 1.775 1.225 3.013T11.75 20q1.75 0 2.975-1.237T16 15.75V7q0-.425.288-.712T17 6t.713.288T18 7z\"/>"},"alternate-email-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12v1.45q0 1.475-1.012 2.513T18.5 17q-.875 0-1.65-.375t-1.3-1.075q-.725.725-1.638 1.088T12 17q-2.075 0-3.537-1.463T7 12t1.463-3.537T12 7t3.538 1.463T17 12v1.45q0 .65.425 1.1T18.5 15t1.075-.45t.425-1.1V12q0-3.35-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20h4q.425 0 .713.288T17 21t-.288.713T16 22zm2.125-7.875Q15 13.25 15 12t-.875-2.125T12 9t-2.125.875T9 12t.875 2.125T12 15t2.125-.875\"/>"},"person-rounded":{"body":"<path fill=\"currentColor\" d=\"M9.175 10.825Q8 9.65 8 8t1.175-2.825T12 4t2.825 1.175T16 8t-1.175 2.825T12 12t-2.825-1.175M4 18v-.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2v.8q0 .825-.587 1.413T18 20H6q-.825 0-1.412-.587T4 18\"/>"},"group-rounded":{"body":"<path fill=\"currentColor\" d=\"M1 17.2q0-.85.438-1.562T2.6 14.55q1.55-.775 3.15-1.162T9 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T17 17.2v.8q0 .825-.587 1.413T15 20H3q-.825 0-1.412-.587T1 18zM18.45 20q.275-.45.413-.962T19 18v-1q0-1.1-.612-2.113T16.65 13.15q1.275.15 2.4.513t2.1.887q.9.5 1.375 1.112T23 17v1q0 .825-.587 1.413T21 20zM6.175 10.825Q5 9.65 5 8t1.175-2.825T9 4t2.825 1.175T13 8t-1.175 2.825T9 12t-2.825-1.175m11.65 0Q16.65 12 15 12q-.275 0-.7-.062t-.7-.138q.675-.8 1.038-1.775T15 8t-.362-2.025T13.6 4.2q.35-.125.7-.163T15 4q1.65 0 2.825 1.175T19 8t-1.175 2.825\"/>"},"person-add-rounded":{"body":"<path fill=\"currentColor\" d=\"M18 11h-2q-.425 0-.712-.288T15 10t.288-.712T16 9h2V7q0-.425.288-.712T19 6t.713.288T20 7v2h2q.425 0 .713.288T23 10t-.288.713T22 11h-2v2q0 .425-.288.713T19 14t-.712-.288T18 13zm-11.825-.175Q5 9.65 5 8t1.175-2.825T9 4t2.825 1.175T13 8t-1.175 2.825T9 12t-2.825-1.175M1 18v-.8q0-.85.438-1.562T2.6 14.55q1.55-.775 3.15-1.162T9 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T17 17.2v.8q0 .825-.587 1.413T15 20H3q-.825 0-1.412-.587T1 18\"/>"},"person-remove-rounded":{"body":"<path fill=\"currentColor\" d=\"M17 9h4q.425 0 .713.288T22 10t-.288.713T21 11h-4q-.425 0-.712-.288T16 10t.288-.712T17 9M6.175 10.825Q5 9.65 5 8t1.175-2.825T9 4t2.825 1.175T13 8t-1.175 2.825T9 12t-2.825-1.175M1 18v-.8q0-.85.438-1.562T2.6 14.55q1.55-.775 3.15-1.162T9 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T17 17.2v.8q0 .825-.587 1.413T15 20H3q-.825 0-1.412-.587T1 18\"/>"},"apartment-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V9q0-.825.588-1.412T5 7h2V5q0-.825.588-1.412T9 3h6q.825 0 1.413.588T17 5v6h2q.825 0 1.413.588T21 13v6q0 .825-.587 1.413T19 21h-6v-4h-2v4zm0-2h2v-2H5zm0-4h2v-2H5zm0-4h2V9H5zm4 4h2v-2H9zm0-4h2V9H9zm0-4h2V5H9zm4 8h2v-2h-2zm0-4h2V9h-2zm0-4h2V5h-2zm4 12h2v-2h-2zm0-4h2v-2h-2z\"/>"},"draft-rounded":{"body":"<path fill=\"currentColor\" d=\"M6 22q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h7.175q.4 0 .763.15t.637.425l4.85 4.85q.275.275.425.638t.15.762V20q0 .825-.587 1.413T18 22zm7-14q0 .425.288.713T14 9h4l-5-5z\"/>"},"description-rounded":{"body":"<path fill=\"currentColor\" d=\"M9 18h6q.425 0 .713-.288T16 17t-.288-.712T15 16H9q-.425 0-.712.288T8 17t.288.713T9 18m0-4h6q.425 0 .713-.288T16 13t-.288-.712T15 12H9q-.425 0-.712.288T8 13t.288.713T9 14m-3 8q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h7.175q.4 0 .763.15t.637.425l4.85 4.85q.275.275.425.638t.15.762V20q0 .825-.587 1.413T18 22zm7-14q0 .425.288.713T14 9h4l-5-5z\"/>"},"code-rounded":{"body":"<path fill=\"currentColor\" d=\"M4.825 12.025L8.7 15.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-4.6-4.6q-.15-.15-.213-.325T2.426 12t.063-.375t.212-.325l4.6-4.6q.3-.3.713-.3t.712.3t.3.713t-.3.712zm14.35-.05L15.3 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.3.3-.7.288t-.7-.313t-.3-.712t.3-.713z\"/>"},"table-chart":{"body":"<path fill=\"currentColor\" d=\"M3 8V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v3zm2 13q-.825 0-1.412-.587T3 19v-9h4.5v11zm11.5 0V10H21v9q0 .825-.587 1.413T19 21zm-7 0V10h5v11z\"/>"},"image-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm2-4h10q.3 0 .45-.275t-.05-.525l-2.75-3.675q-.15-.2-.4-.2t-.4.2L11.25 16L9.4 13.525q-.15-.2-.4-.2t-.4.2l-2 2.675q-.2.25-.05.525T7 17\"/>"},"folder-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h5.175q.4 0 .763.15t.637.425L12 6h8q.825 0 1.413.588T22 8v10q0 .825-.587 1.413T20 20z\"/>"},"folder-open-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h5.175q.4 0 .763.15t.637.425L12 6h9q.425 0 .713.288T22 7t-.288.713T21 8H7.85q-1.55 0-2.7.975T4 11.45V18l1.975-6.575q.2-.65.738-1.037T7.9 10h12.9q1.025 0 1.613.813t.312 1.762l-1.8 6q-.2.65-.737 1.038T19 20z\"/>"},"drive-file-move-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h5.175q.4 0 .763.15t.637.425L12 6h8q.825 0 1.413.588T22 8v10q0 .825-.587 1.413T20 20zm8.2-6l-.925.925q-.275.275-.275.7t.275.7t.7.275t.7-.275L15.3 13.7q.3-.3.3-.7t-.3-.7l-2.625-2.625q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7L12.2 12H9q-.425 0-.712.288T8 13t.288.713T9 14z\"/>"},"view-kanban-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zM7.288 7.288Q7 7.575 7 8v8q0 .425.288.713T8 17t.713-.288T9 16V8q0-.425-.288-.712T8 7t-.712.288m8 0Q15 7.575 15 8v6q0 .425.288.713T16 15t.713-.288T17 14V8q0-.425-.288-.712T16 7t-.712.288m-4 0Q11 7.575 11 8v3q0 .425.288.713T12 12t.713-.288T13 11V8q0-.425-.288-.712T12 7t-.712.288\"/>"},"archive-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V6.525q0-.35.113-.675t.337-.6L4.7 3.725q.275-.35.687-.538T6.25 3h11.5q.45 0 .863.188t.687.537l1.25 1.525q.225.275.338.6t.112.675V19q0 .825-.587 1.413T19 21zm.4-15h13.2l-.85-1H6.25zm5.888 4.288Q11 10.575 11 11v3.2l-.9-.9q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7l2.6 2.6q.3.3.7.3t.7-.3l2.6-2.6q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275l-.9.9V11q0-.425-.288-.712T12 10t-.712.288\"/>"},"unarchive-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.713 17.388Q13 17.1 13 16.675v-3.2l.9.9q.275.275.7.275t.7-.275t.275-.7t-.275-.7L12.7 10.4q-.3-.3-.7-.3t-.7.3l-2.6 2.575q-.275.275-.275.7t.275.7t.7.275t.7-.275l.9-.9v3.2q0 .425.288.713t.712.287t.713-.288M5 21q-.825 0-1.412-.587T3 19V6.525q0-.35.113-.675t.337-.6L4.7 3.725q.275-.35.687-.538T6.25 3h11.5q.45 0 .863.188t.687.537l1.25 1.525q.225.275.338.6t.112.675V19q0 .825-.587 1.413T19 21zm.4-15h13.2l-.85-1H6.25z\"/>"},"menu-book-rounded":{"body":"<path fill=\"currentColor\" d=\"M13 17.05q1.1-.525 2.213-.788T17.5 16q.9 0 1.763.15T21 16.6V6.7q-.825-.35-1.713-.525T17.5 6q-1.175 0-2.325.3T13 7.2zm-1.662 2.338q-.313-.088-.588-.238q-.975-.575-2.05-.862T6.5 18q-1.05 0-2.062.275T2.5 19.05q-.525.275-1.012-.025T1 18.15V6.1q0-.275.138-.525T1.55 5.2q1.175-.575 2.413-.888T6.5 4q1.45 0 2.838.375T12 5.5q1.275-.75 2.663-1.125T17.5 4q1.3 0 2.538.313t2.412.887q.275.125.413.375T23 6.1v12.05q0 .575-.487.875t-1.013.025q-.925-.5-1.937-.775T17.5 18q-1.125 0-2.2.288t-2.05.862q-.275.15-.587.238t-.663.087t-.663-.088M14 8.776q0-.225.163-.462T14.525 8q.725-.25 1.45-.375T17.5 7.5q.5 0 .988.063t.962.162q.225.05.388.25t.162.45q0 .425-.275.625t-.7.1q-.35-.075-.737-.112T17.5 9q-.65 0-1.275.125t-1.2.325q-.45.175-.737-.025T14 8.775m0 5.5q0-.225.163-.462t.362-.313q.725-.25 1.45-.375T17.5 13q.5 0 .988.063t.962.162q.225.05.388.25t.162.45q0 .425-.275.625t-.7.1q-.35-.075-.737-.112T17.5 14.5q-.65 0-1.275.113t-1.2.312q-.45.175-.737-.012T14 14.275m0-2.75q0-.225.163-.462t.362-.313q.725-.25 1.45-.375t1.525-.125q.5 0 .988.063t.962.162q.225.05.388.25t.162.45q0 .425-.275.625t-.7.1q-.35-.075-.737-.112t-.788-.038q-.65 0-1.275.125t-1.2.325q-.45.175-.737-.025t-.288-.65\"/>"},"sticky-note-2-rounded":{"body":"<path fill=\"currentColor\" d=\"m14 19l5-5h-4q-.425 0-.712.288T14 15zm-9 2q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v9.175q0 .4-.15.763t-.425.637l-4.85 4.85q-.275.275-.637.425t-.763.15zm3-7h3q.425 0 .713-.288T12 13t-.288-.712T11 12H8q-.425 0-.712.288T7 13t.288.713T8 14m0-4h8q.425 0 .713-.288T17 9t-.288-.712T16 8H8q-.425 0-.712.288T7 9t.288.713T8 10\"/>"},"assignment-turned-in-rounded":{"body":"<path fill=\"currentColor\" d=\"M10.6 13.25L8.45 11.1q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7l2.85 2.85q.3.3.7.3t.7-.3l5.65-5.65q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h4.2q.325-.9 1.088-1.45T12 1t1.713.55T14.8 3H19q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm7.538-16.963q.212-.212.212-.537t-.213-.537T12 2.75t-.537.213t-.213.537t.213.538t.537.212t.538-.213\"/>"},"grid-view-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 11q-.825 0-1.412-.587T3 9V5q0-.825.588-1.412T5 3h4q.825 0 1.413.588T11 5v4q0 .825-.587 1.413T9 11zm0 10q-.825 0-1.412-.587T3 19v-4q0-.825.588-1.412T5 13h4q.825 0 1.413.588T11 15v4q0 .825-.587 1.413T9 21zm10-10q-.825 0-1.412-.587T13 9V5q0-.825.588-1.412T15 3h4q.825 0 1.413.588T21 5v4q0 .825-.587 1.413T19 11zm0 10q-.825 0-1.412-.587T13 19v-4q0-.825.588-1.412T15 13h4q.825 0 1.413.588T21 15v4q0 .825-.587 1.413T19 21z\"/>"},"view-list-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 9q-.425 0-.712-.288T3 8V6q0-.425.288-.712T4 5h2q.425 0 .713.288T7 6v2q0 .425-.288.713T6 9zm5 0q-.425 0-.712-.288T8 8V6q0-.425.288-.712T9 5h11q.425 0 .713.288T21 6v2q0 .425-.288.713T20 9zm0 5q-.425 0-.712-.288T8 13v-2q0-.425.288-.712T9 10h11q.425 0 .713.288T21 11v2q0 .425-.288.713T20 14zm0 5q-.425 0-.712-.288T8 18v-2q0-.425.288-.712T9 15h11q.425 0 .713.288T21 16v2q0 .425-.288.713T20 19zm-5 0q-.425 0-.712-.288T3 18v-2q0-.425.288-.712T4 15h2q.425 0 .713.288T7 16v2q0 .425-.288.713T6 19zm0-5q-.425 0-.712-.288T3 13v-2q0-.425.288-.712T4 10h2q.425 0 .713.288T7 11v2q0 .425-.288.713T6 14z\"/>"},"dashboard-rounded":{"body":"<path fill=\"currentColor\" d=\"M14 9q-.425 0-.712-.288T13 8V4q0-.425.288-.712T14 3h6q.425 0 .713.288T21 4v4q0 .425-.288.713T20 9zM4 13q-.425 0-.712-.288T3 12V4q0-.425.288-.712T4 3h6q.425 0 .713.288T11 4v8q0 .425-.288.713T10 13zm10 8q-.425 0-.712-.288T13 20v-8q0-.425.288-.712T14 11h6q.425 0 .713.288T21 12v8q0 .425-.288.713T20 21zM4 21q-.425 0-.712-.288T3 20v-4q0-.425.288-.712T4 15h6q.425 0 .713.288T11 16v4q0 .425-.288.713T10 21z\"/>"},"view-column":{"body":"<path fill=\"currentColor\" d=\"M5 19q-.825 0-1.412-.587T3 17V7q0-.825.588-1.412T5 5h1.325q.825 0 1.413.588T8.325 7v10q0 .825-.587 1.413T6.325 19zm6.325 0q-.825 0-1.412-.587T9.325 17V7q0-.825.588-1.412T11.325 5h1.325q.825 0 1.413.588T14.65 7v10q0 .825-.587 1.413T12.65 19zm6.325 0q-.825 0-1.412-.587T15.65 17V7q0-.825.588-1.412T17.65 5h1.325q.825 0 1.413.588T20.975 7v10q0 .825-.587 1.413T18.975 19z\"/>"},"checklist-rounded":{"body":"<path fill=\"currentColor\" d=\"m5.525 16.175l3.55-3.55q.3-.3.7-.288t.7.313q.275.3.275.7t-.275.7L6.25 18.3q-.3.3-.7.3t-.7-.3L2.7 16.15q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275zm0-8l3.55-3.55q.3-.3.7-.288t.7.313q.275.3.275.7t-.275.7L6.25 10.3q-.3.3-.7.3t-.7-.3L2.7 8.15q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275zM14 17q-.425 0-.712-.288T13 16t.288-.712T14 15h7q.425 0 .713.288T22 16t-.288.713T21 17zm0-8q-.425 0-.712-.288T13 8t.288-.712T14 7h7q.425 0 .713.288T22 8t-.288.713T21 9z\"/>"},"account-tree-rounded":{"body":"<path fill=\"currentColor\" d=\"M15 19v-1h-2q-.825 0-1.412-.587T11 16V8H9v1q0 .825-.587 1.413T7 11H4q-.825 0-1.412-.587T2 9V5q0-.825.588-1.412T4 3h3q.825 0 1.413.588T9 5v1h6V5q0-.825.588-1.412T17 3h3q.825 0 1.413.588T22 5v4q0 .825-.587 1.413T20 11h-3q-.825 0-1.412-.587T15 9V8h-2v8h2v-1q0-.825.588-1.412T17 13h3q.825 0 1.413.588T22 15v4q0 .825-.587 1.413T20 21h-3q-.825 0-1.412-.587T15 19\"/>"},"check-box-rounded":{"body":"<path fill=\"currentColor\" d=\"m10.6 13.4l-2.15-2.15q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7L9.9 15.5q.3.3.7.3t.7-.3l5.65-5.65q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21z\"/>"},"square-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21z\"/>"},"circle":{"body":"<path fill=\"currentColor\" d=\"M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"schedule-rounded":{"body":"<path fill=\"currentColor\" d=\"M13 11.6V8q0-.425-.288-.712T12 7t-.712.288T11 8v3.975q0 .2.075.388t.225.337l3.3 3.3q.275.275.7.275T16 16t.275-.7t-.275-.7zM12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"timer-rounded":{"body":"<path fill=\"currentColor\" d=\"M10 3q-.425 0-.712-.288T9 2t.288-.712T10 1h4q.425 0 .713.288T15 2t-.288.713T14 3zm2.713 10.713Q13 13.425 13 13V9q0-.425-.288-.712T12 8t-.712.288T11 9v4q0 .425.288.713T12 14t.713-.288m-4.2 7.576q-1.638-.713-2.863-1.938t-1.937-2.863T3 13t.713-3.488T5.65 6.65t2.863-1.937T12 4q1.55 0 2.975.5t2.675 1.45l.7-.7q.275-.275.7-.275t.7.275t.275.7t-.275.7l-.7.7Q20 8.6 20.5 10.025T21 13q0 1.85-.713 3.488T18.35 19.35t-2.863 1.938T12 22t-3.488-.712\"/>"},"history-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 21q-3.15 0-5.575-1.912T3.275 14.2q-.1-.375.15-.687t.675-.363q.4-.05.725.15t.45.6q.6 2.25 2.475 3.675T12 19q2.925 0 4.963-2.037T19 12t-2.037-4.962T12 5q-1.725 0-3.225.8T6.25 8H8q.425 0 .713.288T9 9t-.288.713T8 10H4q-.425 0-.712-.288T3 9V5q0-.425.288-.712T4 4t.713.288T5 5v1.35q1.275-1.6 3.113-2.475T12 3q1.875 0 3.513.713t2.85 1.924t1.925 2.85T21 12t-.712 3.513t-1.925 2.85t-2.85 1.925T12 21m1-9.4l2.5 2.5q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-2.8-2.8q-.15-.15-.225-.337T11 11.975V8q0-.425.288-.712T12 7t.713.288T13 8z\"/>"},"calendar-today-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5z\"/>"},"calendar-month-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5zm7-6q-.425 0-.712-.288T11 13t.288-.712T12 12t.713.288T13 13t-.288.713T12 14m-4.712-.288Q7 13.426 7 13t.288-.712T8 12t.713.288T9 13t-.288.713T8 14t-.712-.288M16 14q-.425 0-.712-.288T15 13t.288-.712T16 12t.713.288T17 13t-.288.713T16 14m-4 4q-.425 0-.712-.288T11 17t.288-.712T12 16t.713.288T13 17t-.288.713T12 18m-4.712-.288Q7 17.426 7 17t.288-.712T8 16t.713.288T9 17t-.288.713T8 18t-.712-.288M16 18q-.425 0-.712-.288T15 17t.288-.712T16 16t.713.288T17 17t-.288.713T16 18\"/>"},"event-upcoming-rounded":{"body":"<path fill=\"currentColor\" d=\"M19 22h-3q-.425 0-.712-.288T15 21t.288-.712T16 20h3V10H5v3q0 .425-.288.713T4 14t-.712-.288T3 13V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22m-9.825-2H2q-.425 0-.712-.288T1 19t.288-.712T2 18h7.175L7.3 16.1q-.275-.275-.287-.687T7.3 14.7q.275-.275.7-.275t.7.275l3.6 3.6q.3.3.3.7t-.3.7l-3.6 3.6q-.275.275-.687.288T7.3 23.3q-.275-.275-.275-.7t.275-.7z\"/>"},"calendar-add-on-rounded":{"body":"<path fill=\"currentColor\" d=\"M17 19h-2q-.425 0-.712-.288T14 18t.288-.712T15 17h2v-2q0-.425.288-.712T18 14t.713.288T19 15v2h2q.425 0 .713.288T22 18t-.288.713T21 19h-2v2q0 .425-.288.713T18 22t-.712-.288T17 21zM5 20q-.825 0-1.412-.587T3 18V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h6V3q0-.425.288-.712T15 2t.713.288T16 3v1h1q.825 0 1.413.588T19 6v5q0 .425-.288.713T18 12t-.712-.288T17 11v-1H5v8h6q.425 0 .713.288T12 19t-.288.713T11 20z\"/>"},"play-arrow-rounded":{"body":"<path fill=\"currentColor\" d=\"M8 17.175V6.825q0-.425.3-.713t.7-.287q.125 0 .263.037t.262.113l8.15 5.175q.225.15.338.375t.112.475t-.112.475t-.338.375l-8.15 5.175q-.125.075-.262.113T9 18.175q-.4 0-.7-.288t-.3-.712\"/>"},"pause-rounded":{"body":"<path fill=\"currentColor\" d=\"M16 19q-.825 0-1.412-.587T14 17V7q0-.825.588-1.412T16 5t1.413.588T18 7v10q0 .825-.587 1.413T16 19m-8 0q-.825 0-1.412-.587T6 17V7q0-.825.588-1.412T8 5t1.413.588T10 7v10q0 .825-.587 1.413T8 19\"/>"},"mic-rounded":{"body":"<path fill=\"currentColor\" d=\"M9.875 13.125Q9 12.25 9 11V5q0-1.25.875-2.125T12 2t2.125.875T15 5v6q0 1.25-.875 2.125T12 14t-2.125-.875M11 20v-2.075q-2.3-.325-3.937-1.95t-1.988-3.95q-.05-.425.225-.725T6 11t.713.288T7.1 12q.35 1.75 1.738 2.875T12 16q1.8 0 3.175-1.137T16.9 12q.1-.425.388-.712T18 11t.7.3t.225.725q-.35 2.275-1.975 3.925T13 17.925V20q0 .425-.288.713T12 21t-.712-.288T11 20\"/>"},"mic-off-rounded":{"body":"<path fill=\"currentColor\" d=\"M16.8 14.575q-.35-.2-.45-.612t.1-.763q.175-.275.288-.587t.162-.638q.1-.425.388-.7T18 11t.7.3t.225.725q-.075.575-.262 1.125t-.488 1.05q-.2.35-.612.463t-.763-.088m-3.5-4.125L9.575 6.725Q9.3 6.45 9.15 6.088T9 5.325V5q0-1.25.875-2.125T12 2t2.125.875T15 5v4.725q0 .675-.612.938T13.3 10.45M11 20v-2.1q-2.3-.3-3.937-1.925t-1.988-3.95q-.05-.425.225-.725T6 11t.713.288T7.1 12q.35 1.75 1.738 2.875T12 16q.85 0 1.613-.262T15 15l1.425 1.425q-.725.575-1.588.963T13 17.9V20q0 .425-.288.713T12 21t-.712-.288T11 20m8.1 1.9l-17-17q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l17 17q.275.275.275.7t-.275.7t-.7.275t-.7-.275\"/>"},"videocam-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h12q.825 0 1.413.588T18 6v4.5l3.15-3.15q.25-.25.55-.125t.3.475v8.6q0 .35-.3.475t-.55-.125L18 13.5V18q0 .825-.587 1.413T16 20z\"/>"},"photo-camera-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 17.5q1.875 0 3.188-1.312T16.5 13t-1.312-3.187T12 8.5T8.813 9.813T7.5 13t1.313 3.188T12 17.5m0-2q-1.05 0-1.775-.725T9.5 13t.725-1.775T12 10.5t1.775.725T14.5 13t-.725 1.775T12 15.5M4 21q-.825 0-1.412-.587T2 19V7q0-.825.588-1.412T4 5h3.15L8.4 3.65q.275-.3.663-.475T9.875 3h4.25q.425 0 .813.175t.662.475L16.85 5H20q.825 0 1.413.588T22 7v12q0 .825-.587 1.413T20 21z\"/>"},"volume-up-rounded":{"body":"<path fill=\"currentColor\" d=\"M19 11.975q0-2.075-1.1-3.787t-2.95-2.563q-.375-.175-.55-.537t-.05-.738q.15-.4.538-.575t.787 0Q18.1 4.85 19.55 7.063T21 11.974t-1.45 4.913t-3.875 3.287q-.4.175-.788 0t-.537-.575q-.125-.375.05-.737t.55-.538q1.85-.85 2.95-2.562t1.1-3.788M7 15H4q-.425 0-.712-.288T3 14v-4q0-.425.288-.712T4 9h3l3.3-3.3q.475-.475 1.088-.213t.612.938v11.15q0 .675-.612.938T10.3 18.3zm9.5-3q0 1.05-.475 1.988t-1.25 1.537q-.25.15-.513.013T14 15.1V8.85q0-.3.263-.437t.512.012q.775.625 1.25 1.575t.475 2\"/>"},"radio-button-checked":{"body":"<path fill=\"currentColor\" d=\"M15.538 15.538Q17 14.075 17 12t-1.463-3.537T12 7T8.463 8.463T7 12t1.463 3.538T12 17t3.538-1.463M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20\"/>"},"bolt-rounded":{"body":"<path fill=\"currentColor\" d=\"M9 15H5.9q-.6 0-.888-.537t.063-1.038l7.475-10.75q.25-.35.65-.487t.825.012t.625.525t.15.8L14 10h3.875q.65 0 .913.575t-.163 1.075L10.4 21.5q-.275.325-.675.425t-.775-.075t-.587-.537t-.163-.788z\"/>"},"cloud":{"body":"<path fill=\"currentColor\" d=\"M6.5 20q-2.275 0-3.887-1.575T1 14.575q0-1.95 1.175-3.475T5.25 9.15q.625-2.3 2.5-3.725T12 4q2.925 0 4.963 2.038T19 11q1.725.2 2.863 1.488T23 15.5q0 1.875-1.312 3.188T18.5 20z\"/>"},"hard-drive":{"body":"<path fill=\"currentColor\" d=\"M17 16q.625 0 1.063-.425T18.5 14.5q0-.625-.437-1.062T17 13q-.65 0-1.075.438T15.5 14.5q0 .65.425 1.075T17 16M2 9l3.4-3.4q.275-.275.638-.437T6.825 5H17.15q.425 0 .788.163t.637.437L22 9zm2 10q-.85 0-1.425-.575T2 17v-6h20v6q0 .85-.587 1.425T20 19z\"/>"},"dns":{"body":"<path fill=\"currentColor\" d=\"M7.5 6q-.625 0-1.062.438T6 7.5t.438 1.063T7.5 9t1.063-.437T9 7.5t-.437-1.062T7.5 6m0 10q-.625 0-1.062.438T6 17.5t.438 1.063T7.5 19t1.063-.437T9 17.5t-.437-1.062T7.5 16M4 3h16q.425 0 .713.288T21 4v7q0 .425-.288.713T20 12H4q-.425 0-.712-.288T3 11V4q0-.425.288-.712T4 3m0 10h16q.425 0 .713.288T21 14v7q0 .425-.288.713T20 22H4q-.425 0-.712-.288T3 21v-7q0-.425.288-.712T4 13\"/>"},"database":{"body":"<path fill=\"currentColor\" d=\"M18.375 9.825Q21 8.65 21 7t-2.625-2.825T12 3T5.625 4.175T3 7t2.625 2.825T12 11t6.375-1.175m-3.812 3.463q1.537-.213 2.962-.688t2.45-1.237T21 9.5V12q0 1.1-1.025 1.863t-2.45 1.237t-2.962.688T12 16t-2.562-.213t-2.963-.687t-2.45-1.237T3 12V9.5q0 1.1 1.025 1.863t2.45 1.237t2.963.688T12 13.5t2.563-.213m0 5q1.537-.212 2.962-.687t2.45-1.237T21 14.5V17q0 1.1-1.025 1.863t-2.45 1.237t-2.962.688T12 21t-2.562-.213t-2.963-.687t-2.45-1.237T3 17v-2.5q0 1.1 1.025 1.863t2.45 1.237t2.963.688T12 18.5t2.563-.213\"/>"},"memory-rounded":{"body":"<path fill=\"currentColor\" d=\"M9 14v-4q0-.425.288-.712T10 9h4q.425 0 .713.288T15 10v4q0 .425-.288.713T14 15h-4q-.425 0-.712-.288T9 14m0 6v-1H7q-.825 0-1.412-.587T5 17v-2H4q-.425 0-.712-.288T3 14t.288-.712T4 13h1v-2H4q-.425 0-.712-.288T3 10t.288-.712T4 9h1V7q0-.825.588-1.412T7 5h2V4q0-.425.288-.712T10 3t.713.288T11 4v1h2V4q0-.425.288-.712T14 3t.713.288T15 4v1h2q.825 0 1.413.588T19 7v2h1q.425 0 .713.288T21 10t-.288.713T20 11h-1v2h1q.425 0 .713.288T21 14t-.288.713T20 15h-1v2q0 .825-.587 1.413T17 19h-2v1q0 .425-.288.713T14 21t-.712-.288T13 20v-1h-2v1q0 .425-.288.713T10 21t-.712-.288T9 20m8-3V7H7v10z\"/>"},"terminal-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm0-2h16V8H4zm4.675-5l-1.9-1.9q-.3-.3-.288-.7t.313-.7q.3-.275.7-.287t.7.287l2.6 2.6q.3.3.3.7t-.3.7l-2.6 2.6q-.275.275-.687.288T6.8 16.3q-.275-.275-.275-.7t.275-.7zM13 17q-.425 0-.712-.288T12 16t.288-.712T13 15h4q.425 0 .713.288T18 16t-.288.713T17 17z\"/>"},"fork-right-rounded":{"body":"<path fill=\"currentColor\" d=\"M9.288 20.713Q9 20.425 9 20V6.825l-.9.875q-.275.275-.7.275T6.7 7.7q-.3-.3-.288-.713T6.7 6.3l2.6-2.6q.3-.3.7-.3t.7.3l2.6 2.6q.3.3.287.7t-.287.7q-.3.3-.7.313t-.7-.288l-.9-.9v6.525q.875-.775 1.975-1.112t2.2-.338q.275 0 .525.025t.475.075l-.875-.9q-.275-.275-.275-.7t.275-.7q.3-.3.713-.287t.687.287l2.6 2.6q.3.3.3.7t-.3.7l-2.6 2.6q-.275.275-.7.275t-.7-.275q-.3-.3-.3-.712t.275-.688l.9-.9q-.275-.05-.55-.088t-.55-.037q-1.35 0-2.488.763T11 17v3q0 .425-.288.713T10 21t-.712-.288\"/>"},"power-settings-new-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12q0-1.825.613-3.463T4.3 5.6q.275-.35.663-.325t.662.275t.363.65t-.263.825q-.8 1.025-1.263 2.288T4 12q0 3.35 2.325 5.675T12 20t5.675-2.325T20 12q0-1.425-.462-2.687t-1.263-2.288q-.35-.425-.262-.825t.362-.65t.663-.275t.662.325q1.075 1.3 1.688 2.938T22 12q0 2.075-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m-.712-9.287Q11 12.425 11 12V3q0-.425.288-.712T12 2t.713.288T13 3v9q0 .425-.288.713T12 13t-.712-.288\"/>"},"extension-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.85 0-1.425-.575T3 19v-3.125q0-.275.2-.488t.475-.262q.975-.2 1.65-.913T6 12.5q0-.975-.675-1.675T3.675 9.9Q3.4 9.825 3.2 9.612T3 9.125V6q0-.825.588-1.412T5 4h3.05q.175-1.275 1.15-2.137T11.5 1q1.3 0 2.275.863T14.95 4H18q.825 0 1.413.588T20 6v3.35q.9.45 1.45 1.3T22 12.5q0 1.025-.55 1.875T20 15.65V19q0 .85-.587 1.425T18 21z\"/>"},"widgets-rounded":{"body":"<path fill=\"currentColor\" d=\"M15.95 12.3L11.7 8.05q-.15-.15-.212-.325t-.063-.375t.063-.375t.212-.325l4.25-4.25q.15-.15.325-.212t.375-.063t.375.063t.325.212l4.25 4.25q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.25 4.25q-.15.15-.325.213t-.375.062t-.375-.062t-.325-.213M3 10V4q0-.425.288-.712T4 3h6q.425 0 .713.288T11 4v6q0 .425-.288.713T10 11H4q-.425 0-.712-.288T3 10m10 10v-6q0-.425.288-.712T14 13h6q.425 0 .713.288T21 14v6q0 .425-.288.713T20 21h-6q-.425 0-.712-.288T13 20M3 20v-6q0-.425.288-.712T4 13h6q.425 0 .713.288T11 14v6q0 .425-.288.713T10 21H4q-.425 0-.712-.288T3 20\"/>"},"inventory-2-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 22q-.825 0-1.412-.587T3 20V8.725q-.45-.275-.725-.712T2 7V4q0-.825.588-1.412T4 2h16q.825 0 1.413.588T22 4v3q0 .575-.275 1.013T21 8.724V20q0 .825-.587 1.413T19 22zM4 7h16V4H4zm6 7h4q.425 0 .713-.288T15 13t-.288-.712T14 12h-4q-.425 0-.712.288T9 13t.288.713T10 14\"/>"},"layers-rounded":{"body":"<path fill=\"currentColor\" d=\"M4.025 14.85q-.4-.3-.387-.787t.412-.788q.275-.2.6-.2t.6.2L12 18.5l6.75-5.225q.275-.2.6-.2t.6.2q.4.3.413.787t-.388.788l-6.75 5.25q-.55.425-1.225.425t-1.225-.425zm6.75.2l-5.75-4.475Q4.25 9.975 4.25 9t.775-1.575l5.75-4.475q.55-.425 1.225-.425t1.225.425l5.75 4.475q.775.6.775 1.575t-.775 1.575l-5.75 4.475q-.55.425-1.225.425t-1.225-.425\"/>"},"public":{"body":"<path fill=\"currentColor\" d=\"M8.1 21.213q-1.825-.788-3.175-2.138T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22t-3.9-.788M11 19.95V18q-.825 0-1.412-.587T9 16v-1l-4.8-4.8q-.075.45-.137.9T4 12q0 3.025 1.988 5.3T11 19.95m6.9-2.55q1.025-1.125 1.563-2.512T20 12q0-2.45-1.362-4.475T15 4.6V5q0 .825-.587 1.413T13 7h-2v2q0 .425-.288.713T10 10H8v2h6q.425 0 .713.288T15 13v3h1q.65 0 1.175.388T17.9 17.4\"/>"},"link-rounded":{"body":"<path fill=\"currentColor\" d=\"M7 17q-2.075 0-3.537-1.463T2 12t1.463-3.537T7 7h3q.425 0 .713.288T11 8t-.288.713T10 9H7q-1.25 0-2.125.875T4 12t.875 2.125T7 15h3q.425 0 .713.288T11 16t-.288.713T10 17zm2-4q-.425 0-.712-.288T8 12t.288-.712T9 11h6q.425 0 .713.288T16 12t-.288.713T15 13zm5 4q-.425 0-.712-.288T13 16t.288-.712T14 15h3q1.25 0 2.125-.875T20 12t-.875-2.125T17 9h-3q-.425 0-.712-.288T13 8t.288-.712T14 7h3q2.075 0 3.538 1.463T22 12t-1.463 3.538T17 17z\"/>"},"build-rounded":{"body":"<path fill=\"currentColor\" d=\"M9 15q-2.5 0-4.25-1.75T3 9q0-.5.075-1t.275-.95q.125-.25.313-.375t.412-.175t.463.013t.437.262L7.6 9.4l1.8-1.8l-2.625-2.625q-.2-.2-.262-.437T6.5 4.075t.175-.413t.375-.312q.45-.2.95-.275T9 3q2.5 0 4.25 1.75T15 9q0 .575-.1 1.088t-.3 1.012l5.05 5q.725.725.725 1.775t-.725 1.775t-1.775.725t-1.775-.75l-5-5.025q-.5.2-1.012.3T9 15\"/>"},"science":{"body":"<path fill=\"currentColor\" d=\"M5 21q-1.275 0-1.812-1.137t.262-2.113L9 11V5H8q-.425 0-.712-.288T7 4t.288-.712T8 3h8q.425 0 .713.288T17 4t-.288.713T16 5h-1v6l5.55 6.75q.8.975.263 2.113T19 21z\"/>"},"rocket-launch-rounded":{"body":"<path fill=\"currentColor\" d=\"M6.125 12.15q.65-1.65 1.563-3.175T9.75 6.1l-1.3-.275q-.5-.1-.975.05t-.825.5L3.5 9.525q-.375.375-.288.9t.588.725zm14.7-9.75q-2.65-.125-5.037 1.025T11.525 6.45q-1.2 1.2-2.113 2.6T7.826 12q-.125.325-.125.663t.25.587l3.125 3.125q.25.25.588.25t.662-.125q1.55-.675 2.95-1.588t2.6-2.112q1.875-1.875 3.025-4.262T21.925 3.5q0-.2-.1-.4t-.25-.35t-.35-.25t-.4-.1M13.9 8.438q0-.838.575-1.413t1.413-.575t1.412.575t.575 1.413T17.3 9.85t-1.412.575t-1.413-.575t-.575-1.412M12.175 18.2l1 2.325q.2.5.725.6t.9-.275l3.15-3.15q.35-.35.5-.837t.05-.988l-.25-1.3q-1.375 1.15-2.887 2.063T12.175 18.2M4.05 16.05q.875-.875 2.125-.888t2.125.863t.875 2.125t-.875 2.125q-1.2 1.2-2.838 1.425t-3.287.45q.225-1.65.463-3.287T4.05 16.05\"/>"},"smart-toy-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 15q-1.25 0-2.125-.875T1 12t.875-2.125T4 9V7q0-.825.588-1.412T6 5h3q0-1.25.875-2.125T12 2t2.125.875T15 5h3q.825 0 1.413.588T20 7v2q1.25 0 2.125.875T23 12t-.875 2.125T20 15v4q0 .825-.587 1.413T18 21H6q-.825 0-1.412-.587T4 19zm6.063-2.437q.437-.438.437-1.063t-.437-1.062T9 10t-1.062.438T7.5 11.5t.438 1.063T9 13t1.063-.437m6 0q.437-.438.437-1.063t-.437-1.062T15 10t-1.062.438T13.5 11.5t.438 1.063T15 13t1.063-.437M9 17h6q.425 0 .713-.288T16 16t-.288-.712T15 15H9q-.425 0-.712.288T8 16t.288.713T9 17\"/>"},"psychology-rounded":{"body":"<path fill=\"currentColor\" d=\"m10.85 13.75l.1.8q.025.2.163.325t.337.125h1.1q.2 0 .338-.125t.162-.325l.1-.8q.2-.075.363-.175t.287-.225l.75.325q.175.075.35.025t.275-.225l.55-.95q.1-.175.063-.35t-.188-.3l-.65-.475q.05-.2.05-.4t-.05-.4l.65-.475q.15-.125.188-.3t-.063-.35l-.55-.95q-.1-.175-.275-.225t-.35.025l-.75.325q-.125-.125-.288-.225t-.362-.175l-.1-.8q-.025-.2-.162-.325T12.55 7h-1.1q-.2 0-.337.125t-.163.325l-.1.8q-.2.075-.362.175t-.288.225l-.75-.325Q9.275 8.25 9.1 8.3t-.275.225l-.55.95q-.1.175-.062.35t.187.3l.65.475Q9 10.8 9 11t.05.4l-.65.475q-.15.125-.187.3t.062.35l.55.95q.1.175.275.225t.35-.025l.75-.325q.125.125.288.225t.362.175m.088-1.687Q10.5 11.625 10.5 11t.438-1.062T12 9.5t1.063.438T13.5 11t-.437 1.063T12 12.5t-1.062-.437M7 22q-.425 0-.712-.288T6 21v-3.3q-1.425-1.3-2.212-3.037T3 11q0-3.75 2.625-6.375T12 2q3.125 0 5.538 1.838t3.137 4.787l1.3 5.125q.125.475-.175.863T21 15h-2v3q0 .825-.587 1.413T17 20h-2v1q0 .425-.288.713T14 22z\"/>"},"auto-awesome-rounded":{"body":"<path fill=\"currentColor\" d=\"M19 8.3q-.125 0-.263-.075T18.55 8l-.8-1.75l-1.75-.8q-.15-.05-.225-.187T15.7 5q0-.125.075-.262T16 4.55l1.75-.8l.8-1.75q.05-.15.188-.225T19 1.7q.125 0 .263.075T19.45 2l.8 1.75l1.75.8q.15.05.225.188T22.3 5q0 .125-.075.263T22 5.45l-1.75.8l-.8 1.75q-.05.15-.188.225T19 8.3Zm0 14q-.125 0-.263-.075T18.55 22l-.8-1.75l-1.75-.8q-.15-.05-.225-.188T15.7 19q0-.125.075-.263T16 18.55l1.75-.8l.8-1.75q.05-.15.188-.225T19 15.7q.125 0 .263.075t.187.225l.8 1.75l1.75.8q.15.05.225.188T22.3 19q0 .125-.075.263T22 19.45l-1.75.8l-.8 1.75q-.05.15-.188.225T19 22.3ZM9 18.575q-.275 0-.525-.15T8.1 18l-1.6-3.5L3 12.9q-.275-.125-.425-.375T2.425 12q0-.275.15-.525T3 11.1l3.5-1.6L8.1 6q.125-.275.375-.425T9 5.425q.275 0 .525.15T9.9 6l1.6 3.5l3.5 1.6q.275.125.425.375t.15.525q0 .275-.15.525T15 12.9l-3.5 1.6L9.9 18q-.125.275-.375.425t-.525.15Z\"/>","hidden":true},"auto-fix":{"body":"<path fill=\"currentColor\" d=\"m20 7l-.95-2.05L17 4l2.05-.95L20 1l.95 2.05L23 4l-2.05.95L20 7ZM8.5 7l-.95-2.05L5.5 4l2.05-.95L8.5 1l.95 2.05L11.5 4l-2.05.95L8.5 7ZM20 18.5l-.95-2.05L17 15.5l2.05-.95l.95-2.05l.95 2.05l2.05.95l-2.05.95L20 18.5ZM5.1 21.7l-2.8-2.8q-.3-.3-.3-.725t.3-.725L13.45 6.3q.3-.3.725-.3t.725.3l2.8 2.8q.3.3.3.725t-.3.725L6.55 21.7q-.3.3-.725.3t-.725-.3Zm9.075-10.475l1.4-1.4l-1.4-1.4l-1.4 1.4l1.4 1.4Z\"/>","hidden":true},"lightbulb-rounded":{"body":"<path fill=\"currentColor\" d=\"M10.588 21.413Q10 20.825 10 20h4q0 .825-.587 1.413T12 22t-1.412-.587M9 19q-.425 0-.712-.288T8 18t.288-.712T9 17h6q.425 0 .713.288T16 18t-.288.713T15 19zm-.75-3q-1.725-1.025-2.738-2.75T4.5 9.5q0-3.125 2.188-5.312T12 2t5.313 2.188T19.5 9.5q0 2.025-1.012 3.75T15.75 16z\"/>"},"target":{"body":"<path fill=\"currentColor\" d=\"M8.1 21.213q-1.825-.788-3.175-2.138T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22t-3.9-.788m9.575-3.537Q20 15.35 20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20t5.675-2.325M7.75 16.25Q6 14.5 6 12t1.75-4.25T12 6t4.25 1.75T18 12t-1.75 4.25T12 18t-4.25-1.75m7.075-1.425Q16 13.65 16 12t-1.175-2.825T12 8T9.175 9.175T8 12t1.175 2.825T12 16t2.825-1.175m-4.237-1.412Q10 12.825 10 12t.588-1.412T12 10t1.413.588T14 12t-.587 1.413T12 14t-1.412-.587\"/>"},"trending-up-rounded":{"body":"<path fill=\"currentColor\" d=\"M2.7 17.625q-.3-.3-.288-.712t.288-.688l5.275-5.35Q8.55 10.3 9.4 10.3t1.425.575l2.575 2.6l5.2-5.15H17q-.425 0-.712-.288T16 7.326t.288-.712t.712-.288h4q.425 0 .713.288t.287.712v4q0 .425-.288.713t-.712.287t-.712-.287t-.288-.713v-1.6L14.825 14.9q-.575.575-1.425.575t-1.425-.575L9.4 12.325l-5.3 5.3q-.275.275-.7.275t-.7-.275\"/>"},"bar-chart-rounded":{"body":"<path fill=\"currentColor\" d=\"M17 20q-.425 0-.712-.288T16 19v-5q0-.425.288-.712T17 13h2q.425 0 .713.288T20 14v5q0 .425-.288.713T19 20zm-6 0q-.425 0-.712-.288T10 19V5q0-.425.288-.712T11 4h2q.425 0 .713.288T14 5v14q0 .425-.288.713T13 20zm-6 0q-.425 0-.712-.288T4 19v-9q0-.425.288-.712T5 9h2q.425 0 .713.288T8 10v9q0 .425-.288.713T7 20z\"/>"},"waves-rounded":{"body":"<path fill=\"currentColor\" d=\"M7 18.95q-1.225 0-1.95.55t-2.025.775q-.425.075-.725-.2t-.3-.7t.287-.712T3 18.25q.9-.275 1.7-.763T7 17q.95 0 1.563.213t1.137.474t1.05.488T12 18.4t1.25-.225t1.05-.488t1.15-.475T17 17q1.5 0 2.3.488t1.7.762q.425.125.713.413t.287.712t-.3.7t-.725.2q-1.3-.225-2.025-.775T17 18.95q-.7 0-1.213.213t-1.025.474t-1.15.488T12 20.35t-1.613-.225t-1.15-.488t-1.012-.475T7 18.95m0-4.45q-1.225 0-1.95.55t-2.025.775q-.425.075-.725-.2t-.3-.7t.287-.712T3 13.8q.9-.275 1.7-.763T7 12.55q.95 0 1.563.213t1.137.475t1.05.487t1.25.225t1.25-.225t1.05-.487t1.15-.475T17 12.55q1.5 0 2.3.488t1.7.762q.425.125.713.413t.287.712t-.3.7t-.725.2q-1.3-.225-2.025-.775T17 14.5q-.725 0-1.237.212t-1.026.475t-1.137.488t-1.6.225t-1.612-.225t-1.15-.488t-1.013-.474T7 14.5m0-4.45q-1.225 0-1.95.55t-2.025.775q-.425.075-.725-.2t-.3-.7t.288-.712T3 9.35q.9-.275 1.7-.763T7 8.1q.95 0 1.563.213t1.137.474t1.05.488T12 9.5t1.25-.225t1.05-.488t1.15-.475T17 8.1q1.5 0 2.3.488t1.7.762q.425.125.713.413t.287.712t-.3.7t-.725.2q-1.3-.225-2.025-.775T17 10.05q-.7 0-1.213.212t-1.025.475t-1.15.488T12 11.45t-1.613-.225t-1.15-.488t-1.012-.475T7 10.05M7 5.6q-1.225 0-1.95.55t-2.025.775Q2.6 7 2.3 6.725t-.3-.7t.287-.713T3 4.9q.9-.275 1.7-.763T7 3.65q.95 0 1.563.213t1.137.475t1.05.487T12 5.05t1.25-.225t1.05-.488t1.15-.474T17 3.65q1.5 0 2.3.488T21 4.9q.425.125.713.413t.287.712t-.3.7t-.725.2q-1.3-.225-2.025-.775T17 5.6q-.7 0-1.213.213t-1.025.475t-1.15.487T12 7t-1.613-.225t-1.15-.488t-1.012-.474T7 5.6\"/>"},"air-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.5 20q-.8 0-1.487-.4T8.9 18.5q-.275-.5-.012-1T9.7 17q.325 0 .575.2t.45.45q.125.175.338.263T11.5 18q.425 0 .713-.288T12.5 17t-.288-.712T11.5 16H3q-.425 0-.712-.288T2 15t.288-.712T3 14h8.5q1.25 0 2.125.875T14.5 17t-.875 2.125T11.5 20M3 10q-.425 0-.712-.288T2 9t.288-.712T3 8h12.5q.625 0 1.063-.437T17 6.5t-.437-1.062T15.5 5q-.4 0-.75.188t-.55.537q-.175.3-.425.538t-.6.237q-.5 0-.812-.375t-.163-.8q.35-1.05 1.263-1.687T15.5 3q1.45 0 2.475 1.025T19 6.5t-1.025 2.475T15.5 10zm16.95 7.7q-.5.225-.975-.062T18.5 16.8q0-.35.238-.587t.537-.413q.35-.2.538-.55T20 14.5q0-.625-.437-1.062T18.5 13H3q-.425 0-.712-.288T2 12t.288-.712T3 11h15.5q1.45 0 2.475 1.025T22 14.5q0 1.05-.55 1.913t-1.5 1.287\"/>"},"lock":{"body":"<path fill=\"currentColor\" d=\"M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h1V6q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm7.413-5.587Q14 15.825 14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17t1.413-.587M9 8h6V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6z\"/>"},"lock-open-rounded":{"body":"<path fill=\"currentColor\" d=\"M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h9V6q0-1.25-.875-2.125T12 3q-1.05 0-1.838.638T9.1 5.225q-.1.35-.413.563T8 6q-.425 0-.712-.275t-.213-.65q.275-1.7 1.662-2.888T12 1q2.075 0 3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm7.413-5.587Q14 15.825 14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17t1.413-.587\"/>"},"key-rounded":{"body":"<path fill=\"currentColor\" d=\"M4.875 14.125Q4 13.25 4 12t.875-2.125T7 9t2.125.875T10 12t-.875 2.125T7 15t-2.125-.875M7 18q1.925 0 3.475-1.1T12.65 14H13l1.3 1.3q.15.15.325.212t.375.063t.375-.062t.325-.213L17 14l1.75 1.375q.15.125.338.187t.387.038t.363-.112t.287-.238l2.25-2.575q.125-.15.188-.325t.062-.375t-.075-.362t-.2-.288L21.325 10.3q-.15-.15-.337-.225T20.6 10h-7.95q-.6-1.7-2.113-2.85T7 6Q4.5 6 2.75 7.75T1 12t1.75 4.25T7 18\"/>"},"shield-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.675 21.875q-.15-.025-.3-.075Q8 20.675 6 17.637T4 11.1V6.375q0-.625.363-1.125t.937-.725l6-2.25q.35-.125.7-.125t.7.125l6 2.25q.575.225.938.725T20 6.375V11.1q0 3.5-2 6.538T12.625 21.8q-.15.05-.3.075T12 21.9t-.325-.025\"/>"},"verified-user-rounded":{"body":"<path fill=\"currentColor\" d=\"m10.95 12.7l-1.4-1.4q-.3-.3-.7-.3t-.7.3t-.3.713t.3.712l2.1 2.125q.3.3.7.3t.7-.3l4.25-4.25q.3-.3.3-.712t-.3-.713t-.712-.3t-.713.3zm.725 9.175q-.15-.025-.3-.075Q8 20.675 6 17.637T4 11.1V6.375q0-.625.363-1.125t.937-.725l6-2.25q.35-.125.7-.125t.7.125l6 2.25q.575.225.938.725T20 6.375V11.1q0 3.5-2 6.538T12.625 21.8q-.15.05-.3.075T12 21.9t-.325-.025\"/>"},"gpp-maybe-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.713 15.713Q13 15.425 13 15t-.288-.712T12 14t-.712.288T11 15t.288.713T12 16t.713-.288m0-4Q13 11.426 13 11V8q0-.425-.288-.712T12 7t-.712.288T11 8v3q0 .425.288.713T12 12t.713-.288m-1.038 10.163q-.15-.025-.3-.075Q8 20.675 6 17.637T4 11.1V6.375q0-.625.363-1.125t.937-.725l6-2.25q.35-.125.7-.125t.7.125l6 2.25q.575.225.938.725T20 6.375V11.1q0 3.5-2 6.538T12.625 21.8q-.15.05-.3.075T12 21.9t-.325-.025\"/>"},"gpp-bad-rounded":{"body":"<path fill=\"currentColor\" d=\"m12 13.4l1.4 1.4q.275.275.7.275t.7-.275t.275-.7t-.275-.7L13.4 12l1.4-1.4q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275L12 10.6l-1.4-1.4q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7l1.4 1.4l-1.4 1.4q-.275.275-.275.7t.275.7t.7.275t.7-.275zm-.325 8.475q-.15-.025-.3-.075Q8 20.675 6 17.637T4 11.1V6.375q0-.625.363-1.125t.937-.725l6-2.25q.35-.125.7-.125t.7.125l6 2.25q.575.225.938.725T20 6.375V11.1q0 3.5-2 6.538T12.625 21.8q-.15.05-.3.075T12 21.9t-.325-.025\"/>"},"logout-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h6q.425 0 .713.288T12 4t-.288.713T11 5H5v14h6q.425 0 .713.288T12 20t-.288.713T11 21zm12.175-8H10q-.425 0-.712-.288T9 12t.288-.712T10 11h7.175L15.3 9.125q-.275-.275-.275-.675t.275-.7t.7-.313t.725.288L20.3 11.3q.3.3.3.7t-.3.7l-3.575 3.575q-.3.3-.712.288t-.713-.313q-.275-.3-.262-.712t.287-.688z\"/>"},"login-rounded":{"body":"<path fill=\"currentColor\" d=\"M13 21q-.425 0-.712-.288T12 20t.288-.712T13 19h6V5h-6q-.425 0-.712-.288T12 4t.288-.712T13 3h6q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm-1.825-8H4q-.425 0-.712-.288T3 12t.288-.712T4 11h7.175L9.3 9.125q-.275-.275-.275-.675t.275-.7t.7-.313t.725.288L14.3 11.3q.3.3.3.7t-.3.7l-3.575 3.575q-.3.3-.712.288T9.3 16.25q-.275-.3-.262-.712t.287-.688z\"/>"},"star-rounded":{"body":"<path fill=\"currentColor\" d=\"m12 17.275l-4.15 2.5q-.275.175-.575.15t-.525-.2t-.35-.437t-.05-.588l1.1-4.725L3.775 10.8q-.25-.225-.312-.513t.037-.562t.3-.45t.55-.225l4.85-.425l1.875-4.45q.125-.3.388-.45t.537-.15t.537.15t.388.45l1.875 4.45l4.85.425q.35.05.55.225t.3.45t.038.563t-.313.512l-3.675 3.175l1.1 4.725q.075.325-.05.588t-.35.437t-.525.2t-.575-.15z\"/>"},"flag-rounded":{"body":"<path fill=\"currentColor\" d=\"M7 14v6q0 .425-.288.713T6 21t-.712-.288T5 20V5q0-.425.288-.712T6 4h7.175q.35 0 .625.225t.35.575L14.4 6H19q.425 0 .713.288T20 7v8q0 .425-.288.713T19 16h-5.175q-.35 0-.625-.225t-.35-.575L12.6 14z\"/>"},"label-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h11q.475 0 .9.213t.7.587l4.5 6q.4.525.4 1.2t-.4 1.2l-4.5 6q-.275.375-.7.588T15 20z\"/>"},"light-mode-rounded":{"body":"<path fill=\"currentColor\" d=\"M8.463 15.538Q7 14.075 7 12t1.463-3.537T12 7t3.538 1.463T17 12t-1.463 3.538T12 17t-3.537-1.463M2 13q-.425 0-.712-.288T1 12t.288-.712T2 11h2q.425 0 .713.288T5 12t-.288.713T4 13zm18 0q-.425 0-.712-.288T19 12t.288-.712T20 11h2q.425 0 .713.288T23 12t-.288.713T22 13zm-8.712-8.287Q11 4.425 11 4V2q0-.425.288-.712T12 1t.713.288T13 2v2q0 .425-.288.713T12 5t-.712-.288m0 18Q11 22.426 11 22v-2q0-.425.288-.712T12 19t.713.288T13 20v2q0 .425-.288.713T12 23t-.712-.288M5.65 7.05L4.575 6q-.3-.275-.288-.7t.288-.725q.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7t-.275.7t-.687.288t-.713-.288M18 19.425l-1.05-1.075q-.275-.3-.275-.712t.275-.688q.275-.3.688-.287t.712.287L19.425 18q.3.275.288.7t-.288.725q-.3.3-.725.3t-.7-.3M16.95 7.05q-.3-.275-.288-.687t.288-.713L18 4.575q.275-.3.7-.288t.725.288q.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275t-.7-.275M4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.712-.275t.688.275q.3.275.288.688t-.288.712L6 19.425q-.275.3-.7.288t-.725-.288\"/>"},"dark-mode-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 21q-3.775 0-6.387-2.613T3 12q0-3.45 2.25-5.988T11 3.05q.325-.05.575.088t.4.362t.163.525t-.188.575q-.425.65-.638 1.375T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q.775 0 1.538-.225t1.362-.625q.275-.175.563-.162t.512.137q.25.125.388.375t.087.6q-.35 3.45-2.937 5.725T12 21\"/>"},"desktop-windows-rounded":{"body":"<path fill=\"currentColor\" d=\"M10 19v-2H4q-.825 0-1.412-.587T2 15V5q0-.825.588-1.412T4 3h16q.825 0 1.413.588T22 5v10q0 .825-.587 1.413T20 17h-6v2h1q.425 0 .713.288T16 20t-.288.713T15 21H9q-.425 0-.712-.288T8 20t.288-.712T9 19z\"/>"},"mobile":{"body":"<path fill=\"currentColor\" d=\"M7 23q-.825 0-1.412-.587T5 21V3q0-.825.588-1.412T7 1h10q.825 0 1.413.588T19 3v3.1q.45.175.725.55T20 7.5v2q0 .475-.275.85T19 10.9V21q0 .825-.587 1.413T17 23zm5.713-17.287Q13 5.424 13 5t-.288-.712T12 4t-.712.288T11 5t.288.713T12 6t.713-.288\"/>"},"home-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 19v-9q0-.475.213-.9t.587-.7l6-4.5q.525-.4 1.2-.4t1.2.4l6 4.5q.375.275.588.7T20 10v9q0 .825-.588 1.413T18 21h-3q-.425 0-.712-.288T14 20v-5q0-.425-.288-.712T13 14h-2q-.425 0-.712.288T10 15v5q0 .425-.288.713T9 21H6q-.825 0-1.412-.587T4 19\"/>"},"keyboard-command-key":{"body":"<path fill=\"currentColor\" d=\"M6.5 21q-1.45 0-2.475-1.025T3 17.5t1.025-2.475T6.5 14H8v-4H6.5q-1.45 0-2.475-1.025T3 6.5t1.025-2.475T6.5 3t2.475 1.025T10 6.5V8h4V6.5q0-1.45 1.025-2.475T17.5 3t2.475 1.025T21 6.5t-1.025 2.475T17.5 10H16v4h1.5q1.45 0 2.475 1.025T21 17.5t-1.025 2.475T17.5 21t-2.475-1.025T14 17.5V16h-4v1.5q0 1.45-1.025 2.475T6.5 21m0-2q.625 0 1.063-.437T8 17.5V16H6.5q-.625 0-1.062.438T5 17.5t.438 1.063T6.5 19m11 0q.625 0 1.063-.437T19 17.5t-.437-1.062T17.5 16H16v1.5q0 .625.438 1.063T17.5 19M10 14h4v-4h-4zM6.5 8H8V6.5q0-.625-.437-1.062T6.5 5t-1.062.438T5 6.5t.438 1.063T6.5 8M16 8h1.5q.625 0 1.063-.437T19 6.5t-.437-1.062T17.5 5t-1.062.438T16 6.5z\"/>"},"location-on-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.3 21.2q-.35-.125-.625-.375Q9.05 19.325 7.8 17.9t-2.087-2.762t-1.275-2.575T4 10.2q0-3.75 2.413-5.975T12 2t5.588 2.225T20 10.2q0 1.125-.437 2.363t-1.275 2.575T16.2 17.9t-2.875 2.925q-.275.25-.625.375t-.7.125t-.7-.125m2.113-9.787Q14 10.825 14 10t-.587-1.412T12 8t-1.412.588T10 10t.588 1.413T12 12t1.413-.587\"/>"},"work":{"body":"<path fill=\"currentColor\" d=\"M4 21q-.825 0-1.412-.587T2 19V8q0-.825.588-1.412T4 6h4V4q0-.825.588-1.412T10 2h4q.825 0 1.413.588T16 4v2h4q.825 0 1.413.588T22 8v11q0 .825-.587 1.413T20 21zm6-15h4V4h-4z\"/>"},"credit-card":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm0-8h16V8H4z\"/>"},"attach-money-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.025 21q-.425 0-.712-.288T11.025 20v-1.15Q9.9 18.6 9.05 17.975t-1.375-1.75q-.175-.35-.012-.737t.587-.563q.35-.15.725.013t.575.537q.425.75 1.075 1.138t1.6.387q1.025 0 1.737-.462t.713-1.438q0-.875-.55-1.387t-2.55-1.163q-2.15-.675-2.95-1.612t-.8-2.288q0-1.625 1.05-2.525t2.15-1.025V4q0-.425.288-.713T12.025 3t.713.288t.287.712v1.1q.95.15 1.65.613t1.15 1.137q.225.325.088.725t-.563.575q-.35.15-.725.013t-.7-.488t-.763-.537t-1.087-.188q-1.1 0-1.675.488T9.825 8.65q0 .825.75 1.3t2.6 1q1.725.5 2.613 1.588t.887 2.512q0 1.775-1.05 2.7t-2.6 1.15V20q0 .425-.288.713t-.712.287\"/>"},"thumb-up-rounded":{"body":"<path fill=\"currentColor\" d=\"M21 8q.8 0 1.4.6T23 10v2q0 .175-.038.375t-.112.375l-3 7.05q-.225.5-.75.85T18 21h-8q-.825 0-1.412-.587T8 19V8.825q0-.4.163-.762t.437-.638l5.425-5.4q.375-.35.888-.425t.987.175t.688.7t.087.925L15.55 8zM4 21q-.825 0-1.412-.587T2 19v-9q0-.825.588-1.412T4 8t1.413.588T6 10v9q0 .825-.587 1.413T4 21\"/>"},"stethoscope-rounded":{"body":"<path fill=\"currentColor\" d=\"M13.5 22q-2.7 0-4.6-1.9T7 15.5v-.575q-2.15-.35-3.575-2.013T2 9V4q0-.425.288-.712T3 3h2q0-.425.288-.712T6 2t.713.288T7 3v2q0 .425-.288.713T6 6t-.712-.288T5 5H4v4q0 1.65 1.175 2.825T8 13t2.825-1.175T12 9V5h-1q0 .425-.288.713T10 6t-.712-.288T9 5V3q0-.425.288-.712T10 2t.713.288T11 3h2q.425 0 .713.288T14 4v5q0 2.25-1.425 3.913T9 14.925v.575q0 1.875 1.313 3.188T13.5 20t3.188-1.312T18 15.5v-1.675q-.875-.325-1.437-1.088T16 11q0-1.25.875-2.125T19 8t2.125.875T22 11q0 .975-.562 1.738T20 13.825V15.5q0 2.7-1.9 4.6T13.5 22\"/>"},"palette":{"body":"<path fill=\"currentColor\" d=\"M12 22q-2.05 0-3.875-.788t-3.187-2.15t-2.15-3.187T2 12q0-2.075.813-3.9t2.2-3.175T8.25 2.788T12.2 2q2 0 3.775.688t3.113 1.9t2.125 2.875T22 11.05q0 2.875-1.75 4.413T16 17h-1.85q-.225 0-.312.125t-.088.275q0 .3.375.863t.375 1.287q0 1.25-.687 1.85T12 22m-4.425-9.425Q8 12.15 8 11.5t-.425-1.075T6.5 10t-1.075.425T5 11.5t.425 1.075T6.5 13t1.075-.425m3-4Q11 8.15 11 7.5t-.425-1.075T9.5 6t-1.075.425T8 7.5t.425 1.075T9.5 9t1.075-.425m5 0Q16 8.15 16 7.5t-.425-1.075T14.5 6t-1.075.425T13 7.5t.425 1.075T14.5 9t1.075-.425m3 4Q19 12.15 19 11.5t-.425-1.075T17.5 10t-1.075.425T16 11.5t.425 1.075T17.5 13t1.075-.425\"/>"},"manage-accounts-rounded":{"body":"<path fill=\"currentColor\" d=\"M2 18v-.8q0-.85.425-1.562T3.6 14.55q1.425-.725 2.963-1.15t3.137-.425q.35 0 .55.313t.075.662q-.15.525-.225 1.05t-.075 1.075q0 .725.15 1.4T10.6 18.8q.2.425-.037.813T9.9 20H4q-.825 0-1.412-.587T2 18m16.413-.587Q19 16.825 19 16t-.587-1.412T17 14t-1.412.588T15 16t.588 1.413T17 18t1.413-.587M7.175 10.825Q6 9.65 6 8t1.175-2.825T10 4t2.825 1.175T14 8t-1.175 2.825T10 12t-2.825-1.175M15.85 20.2l-.15-.7q-.3-.125-.562-.262T14.6 18.9l-.725.225q-.325.1-.637-.025t-.488-.4l-.2-.35q-.175-.3-.125-.65t.325-.575l.55-.475q-.05-.35-.05-.65t.05-.65l-.55-.475q-.275-.225-.325-.563t.125-.637l.225-.375q.175-.275.475-.4t.625-.025l.725.225q.275-.2.538-.338t.562-.262l.15-.725q.075-.35.338-.562T16.8 11h.4q.35 0 .613.225t.337.575l.15.7q.3.125.562.275t.538.375l.675-.225q.35-.125.675 0t.5.425l.2.35q.175.3.125.65t-.325.575l-.55.475q.05.3.05.625t-.05.625l.55.475q.275.225.325.563t-.125.637l-.225.375q-.175.275-.475.4t-.625.025L19.4 18.9q-.275.2-.538.337t-.562.263l-.15.725q-.075.35-.337.563T17.2 21h-.4q-.35 0-.612-.225t-.338-.575\"/>"},"person-search-rounded":{"body":"<path fill=\"currentColor\" d=\"M11 12q-1.65 0-2.825-1.175T7 8t1.175-2.825T11 4t2.825 1.175T15 8t-1.175 2.825T11 12m10.4 10.8l-2.5-2.5q-.525.3-1.125.5T16.5 21q-1.875 0-3.187-1.312T12 16.5t1.313-3.187T16.5 12t3.188 1.313T21 16.5q0 .675-.2 1.275t-.5 1.125l2.5 2.5q.275.275.275.7t-.275.7t-.7.275t-.7-.275m-3.125-4.525Q19 17.55 19 16.5t-.725-1.775T16.5 14t-1.775.725T14 16.5t.725 1.775T16.5 19t1.775-.725M5 20q-.825 0-1.412-.587T3 18v-.775q0-.85.425-1.575t1.175-1.1q1.125-.575 2.488-.987t2.987-.538q.3-.025.45.25t.025.575q-.275.625-.413 1.288T10 16.475q0 .65.113 1.313t.387 1.262q.15.35-.025.65t-.525.3z\"/>"},"add-box-rounded":{"body":"<path fill=\"currentColor\" d=\"M11 13v3q0 .425.288.713T12 17t.713-.288T13 16v-3h3q.425 0 .713-.288T17 12t-.288-.712T16 11h-3V8q0-.425-.288-.712T12 7t-.712.288T11 8v3H8q-.425 0-.712.288T7 12t.288.713T8 13zm-6 8q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21z\"/>"},"assignment-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h4.2q.325-.9 1.088-1.45T12 1t1.713.55T14.8 3H19q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm3-4h5q.425 0 .713-.288T14 16t-.288-.712T13 15H8q-.425 0-.712.288T7 16t.288.713T8 17m0-4h8q.425 0 .713-.288T17 12t-.288-.712T16 11H8q-.425 0-.712.288T7 12t.288.713T8 13m0-4h8q.425 0 .713-.288T17 8t-.288-.712T16 7H8q-.425 0-.712.288T7 8t.288.713T8 9m4.538-4.962q.212-.213.212-.538t-.213-.537T12 2.75t-.537.213t-.213.537t.213.538t.537.212t.538-.213\"/>"},"hub":{"body":"<path fill=\"currentColor\" d=\"M3.875 22.125Q3 21.25 3 20t.875-2.125T6 17q.35 0 .65.075t.575.2L8.65 15.5q-.7-.775-.975-1.75T7.55 11.8l-2.025-.675q-.425.625-1.075 1T3 12.5q-1.25 0-2.125-.875T0 9.5t.875-2.125T3 6.5t2.125.875T6 9.5v.2l2.025.7q.5-.9 1.338-1.525t1.887-.8V5.9q-.975-.275-1.612-1.063T9 3q0-1.25.875-2.125T12 0t2.125.875T15 3q0 1.05-.65 1.838T12.75 5.9v2.175q1.05.175 1.888.8t1.337 1.525L18 9.7v-.2q0-1.25.875-2.125T21 6.5t2.125.875T24 9.5t-.875 2.125T21 12.5q-.8 0-1.463-.375t-1.062-1l-2.025.675q.15.975-.125 1.938T15.35 15.5l1.425 1.75q.275-.125.575-.187T18 17q1.25 0 2.125.875T21 20t-.875 2.125T18 23t-2.125-.875T15 20q0-.5.163-.962t.437-.838l-1.425-1.775Q13.15 17 11.988 17T9.8 16.425L8.4 18.2q.275.375.438.838T9 20q0 1.25-.875 2.125T6 23t-2.125-.875\"/>"},"notifications-active-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 19q-.425 0-.712-.288T4 18t.288-.712T5 17h1v-7q0-2.075 1.25-3.687T10.5 4.2v-.7q0-.625.438-1.062T12 2t1.063.438T13.5 3.5v.7q2 .5 3.25 2.113T18 10v7h1q.425 0 .713.288T20 18t-.288.713T19 19zm7 3q-.825 0-1.412-.587T10 20h4q0 .825-.587 1.413T12 22M3 10q-.425 0-.712-.325t-.238-.75q.2-1.875 1.05-3.488t2.175-2.812q.325-.275.738-.25t.662.375t.2.75t-.375.7q-.975.925-1.6 2.15T4.075 9q-.05.425-.35.713T3 10m18 0q-.425 0-.725-.288T19.925 9q-.2-1.425-.825-2.65T17.5 4.2q-.325-.3-.375-.7t.2-.75t.663-.375t.737.25q1.325 1.2 2.175 2.812t1.05 3.488q.05.425-.237.75T21 10\"/>"},"campaign-rounded":{"body":"<path fill=\"currentColor\" d=\"M21 13h-2q-.425 0-.712-.288T18 12t.288-.712T19 11h2q.425 0 .713.288T22 12t-.288.713T21 13m-4.4 3.8q.25-.35.65-.4t.75.2l1.6 1.2q.35.25.4.65t-.2.75t-.65.4t-.75-.2l-1.6-1.2q-.35-.25-.4-.65t.2-.75m3-10.6L18 7.4q-.35.25-.75.2t-.65-.4t-.2-.75t.4-.65l1.6-1.2q.35-.25.75-.2t.65.4t.2.75t-.4.65M5 15H4q-.825 0-1.412-.587T2 13v-2q0-.825.588-1.412T4 9h4l3.475-2.1q.5-.3 1.013 0t.512.875v8.45q0 .575-.513.875t-1.012 0L8 15H7v3q0 .425-.288.713T6 19t-.712-.288T5 18zm9 .35v-6.7q.675.6 1.088 1.463T15.5 12t-.413 1.888T14 15.35\"/>"},"newspaper-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 21q-.825 0-1.412-.587T2 19V3.6q0-.175.15-.238t.275.063l1.25 1.25l1.3-1.325q.15-.15.35-.15t.35.15L7 4.675L8.325 3.35q.15-.15.35-.15t.35.15l1.3 1.325L11.65 3.35q.15-.15.35-.15t.35.15l1.325 1.325l1.3-1.325q.15-.15.35-.15t.35.15L17 4.675l1.325-1.325q.15-.15.35-.15t.35.15l1.3 1.325l1.25-1.25q.125-.125.275-.062T22 3.6V19q0 .825-.588 1.413T20 21zm0-2h7v-6H4zm9 0h7v-2h-7zm0-4h7v-2h-7zm-9-4h16V8H4z\"/>"},"handshake-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.1 21q-.425 0-.712-.288T11.1 20q0-.175.075-.363t.225-.337l4.275-4.275q.15-.15.15-.363t-.15-.362t-.363-.138t-.362.163l-4.25 4.25q-.15.15-.325.225t-.375.075q-.425 0-.712-.288T9 17.876q0-.25.075-.413t.2-.287L13.55 12.9q.15-.15.15-.35t-.15-.35t-.35-.15t-.35.15l-4.275 4.25q-.15.15-.325.225t-.4.075q-.4 0-.7-.3t-.3-.7q0-.2.075-.375t.225-.325l4.25-4.25q.15-.15.15-.363t-.15-.362t-.35-.15t-.35.15L6.45 14.35q-.125.125-.3.2t-.425.075q-.425 0-.712-.288t-.288-.712q0-.2.075-.375t.225-.325l4.9-4.9q.275-.275.688-.25t.687.3l3.05 3.05q.275.275.65.438t.75.162q.8 0 1.4-.562t.6-1.438q0-.35-.125-.725t-.45-.7L13.75 4.875q-.275-.275-.363-.6t.088-.625q.225-.375.575-.55t.775-.175q.525 0 1.075.25t1 .7l4.225 4.25q.45.45.663 1T22 10.4q0 .5-.225 1.013t-.65.937L12.8 20.7q-.2.2-.35.25t-.35.05m-9.2-8.875q-.475-.35-.712-.837T1.95 10.25q0-.575.238-1.125t.687-1L7.1 3.875q.425-.425.938-.65T9.125 3q.625 0 1.213.225t1.012.65L16.475 9q.125.125.213.313t.087.387q0 .425-.287.713t-.713.287q-.2 0-.387-.087t-.313-.213L12 7.35q-.575-.575-1.412-.575t-1.413.575l-4.7 4.7q-.325.325-.762.338t-.813-.263\"/>"},"account-balance-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 16v-5q0-.425.288-.712T6 10t.713.288T7 11v5q0 .425-.288.713T6 17t-.712-.288T5 16m6 0v-5q0-.425.288-.712T12 10t.713.288T13 11v5q0 .425-.288.713T12 17t-.712-.288T11 16m-8 5q-.425 0-.712-.288T2 20t.288-.712T3 19h18q.425 0 .713.288T22 20t-.288.713T21 21zm14-5v-5q0-.425.288-.712T18 10t.713.288T19 11v5q0 .425-.288.713T18 17t-.712-.288T17 16m4-8H2.9q-.375 0-.638-.262T2 7.1v-.55q0-.275.138-.475T2.5 5.75l8.6-4.3q.425-.2.9-.2t.9.2l8.55 4.275q.275.125.413.375t.137.525V7q0 .425-.287.713T21 8\"/>"},"receipt-rounded":{"body":"<path fill=\"currentColor\" d=\"M3 20.8V2.6q0-.175.15-.237t.275.062l.725.725q.15.15.35.15t.35-.15l.8-.8Q5.8 2.2 6 2.2t.35.15l.8.8q.15.15.35.15t.35-.15l.8-.8Q8.8 2.2 9 2.2t.35.15l.8.8q.15.15.35.15t.35-.15l.8-.8q.15-.15.35-.15t.35.15l.8.8q.15.15.35.15t.35-.15l.8-.8q.15-.15.35-.15t.35.15l.8.8q.15.15.35.15t.35-.15l.8-.8q.15-.15.35-.15t.35.15l.8.8q.15.15.35.15t.35-.15l.725-.725q.125-.125.275-.062T21 2.6v18.2q0 .35-.3.475t-.55-.125l-.3-.3q-.15-.15-.35-.15t-.35.15l-.8.8q-.15.15-.35.15t-.35-.15l-.8-.8q-.15-.15-.35-.15t-.35.15l-.8.8q-.15.15-.35.15t-.35-.15l-.8-.8q-.15-.15-.35-.15t-.35.15l-.8.8q-.15.15-.35.15t-.35-.15l-.8-.8q-.15-.15-.35-.15t-.35.15l-.8.8q-.15.15-.35.15t-.35-.15l-.8-.8q-.15-.15-.35-.15t-.35.15l-.8.8q-.15.15-.35.15t-.35-.15l-.8-.8q-.15-.15-.35-.15t-.35.15l-.3.3q-.25.25-.55.125T3 20.8M7 17h10q.425 0 .713-.288T18 16t-.288-.712T17 15H7q-.425 0-.712.288T6 16t.288.713T7 17m0-4h10q.425 0 .713-.288T18 12t-.288-.712T17 11H7q-.425 0-.712.288T6 12t.288.713T7 13m0-4h10q.425 0 .713-.288T18 8t-.288-.712T17 7H7q-.425 0-.712.288T6 8t.288.713T7 9\"/>"},"wallet":{"body":"<path fill=\"currentColor\" d=\"M6 20q-1.65 0-2.825-1.175T2 16V8q0-1.65 1.175-2.825T6 4h12q1.65 0 2.825 1.175T22 8v8q0 1.65-1.175 2.825T18 20zM6 8h12q.55 0 1.05.125t.95.4V8q0-.825-.587-1.412T18 6H6q-.825 0-1.412.588T4 8v.525q.45-.275.95-.4T6 8m-1.85 3.25l11.125 2.7q.225.05.45 0t.425-.2l3.475-2.9q-.275-.375-.7-.612T18 10H6q-.65 0-1.137.338t-.713.912\"/>"},"shopping-cart-rounded":{"body":"<path fill=\"currentColor\" d=\"M5.588 21.413Q5 20.825 5 20t.588-1.412T7 18t1.413.588T9 20t-.587 1.413T7 22t-1.412-.587m10 0Q15 20.825 15 20t.588-1.412T17 18t1.413.588T19 20t-.587 1.413T17 22t-1.412-.587M5.2 4h14.75q.575 0 .875.513t.025 1.037l-3.55 6.4q-.275.5-.737.775T15.55 13H8.1L7 15h11q.425 0 .713.288T19 16t-.288.713T18 17H7q-1.125 0-1.7-.987t-.05-1.963L6.6 11.6L3 4H2q-.425 0-.712-.288T1 3t.288-.712T2 2h1.625q.275 0 .525.15t.375.425z\"/>"},"local-shipping-rounded":{"body":"<path fill=\"currentColor\" d=\"M3.875 19.125Q3 18.25 3 17H2q-.425 0-.712-.288T1 16V6q0-.825.588-1.412T3 4h12q.825 0 1.413.588T17 6v2h2q.475 0 .9.213t.7.587l2.2 2.925q.1.125.15.275t.05.325V16q0 .425-.288.713T22 17h-1q0 1.25-.875 2.125T18 20t-2.125-.875T15 17H9q0 1.25-.875 2.125T6 20t-2.125-.875m2.838-1.412Q7 17.425 7 17t-.288-.712T6 16t-.712.288T5 17t.288.713T6 18t.713-.288m12 0Q19 17.426 19 17t-.288-.712T18 16t-.712.288T17 17t.288.713T18 18t.713-.288M17 13h4.25L19 10h-2z\"/>"},"factory-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 22q-.825 0-1.412-.587T2 20v-8.7q0-.6.325-1.1t.9-.75L7.6 7.6q.5-.2.95.075T9 8.5V9l3.625-1.45q.5-.2.937.1t.438.825V10h8v10q0 .825-.587 1.413T20 22zm7-4h2v-4h-2zm-4 0h2v-4H7zm8 0h2v-4h-2zm6.8-9.5h-4.625l.725-5.625q.05-.375.338-.625T18.9 2h1.225q.375 0 .65.25t.325.625z\"/>"},"support":{"body":"<path fill=\"currentColor\" d=\"M8.1 21.213q-1.825-.788-3.175-2.138T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22t-3.9-.788m1-1.762l1.2-2.75q-1.05-.375-1.812-1.162T7.3 13.7l-2.75 1.15q.575 1.6 1.775 2.8t2.775 1.8M7.3 10.3q.425-1.05 1.188-1.837T10.3 7.3L9.15 4.55q-1.6.6-2.8 1.8t-1.8 2.8zm6.825 3.825Q15 13.25 15 12t-.875-2.125T12 9t-2.125.875T9 12t.875 2.125T12 15t2.125-.875m.775 5.325q1.575-.6 2.763-1.787T19.45 14.9l-2.75-1.2q-.375 1.05-1.15 1.813t-1.8 1.187zm1.8-9.2l2.75-1.15q-.6-1.575-1.787-2.762T14.9 4.55l-1.15 2.8q1.025.375 1.775 1.138T16.7 10.25\"/>"}},"lastModified":1785497247,"aliases":{"progress-activity-rounded":{"parent":"progress-activity"},"filter-alt-rounded":{"parent":"filter-alt"},"share-rounded":{"parent":"share"},"more-horiz-rounded":{"parent":"more-horiz"},"more-vert-rounded":{"parent":"more-vert"},"view-sidebar-rounded":{"parent":"view-sidebar"},"call-rounded":{"parent":"call"},"table-chart-rounded":{"parent":"table-chart"},"view-column-rounded":{"parent":"view-column"},"circle-rounded":{"parent":"circle"},"radio-button-checked-rounded":{"parent":"radio-button-checked"},"cloud-rounded":{"parent":"cloud"},"hard-drive-rounded":{"parent":"hard-drive"},"dns-rounded":{"parent":"dns"},"database-rounded":{"parent":"database"},"power-rounded":{"parent":"power-settings-new-rounded"},"public-rounded":{"parent":"public"},"science-rounded":{"parent":"science"},"auto-fix-high":{"parent":"auto-fix"},"target-rounded":{"parent":"target"},"lock-rounded":{"parent":"lock"},"smartphone":{"parent":"mobile"},"keyboard-command-key-rounded":{"parent":"keyboard-command-key"},"work-rounded":{"parent":"work"},"credit-card-rounded":{"parent":"credit-card"},"palette-rounded":{"parent":"palette"},"hub-rounded":{"parent":"hub"},"wallet-rounded":{"parent":"wallet"},"support-rounded":{"parent":"support"}},"width":24,"height":24}
diff --git a/workbench/control_plane/src/lib/theme/icon-data/registry.json b/workbench/control_plane/src/lib/theme/icon-data/registry.json
new file mode 100644
index 00000000..e35b2de4
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/icon-data/registry.json
@@ -0,0 +1,750 @@
+{
+  "Loader2": {
+    "fluent": "spinner-ios-20-regular",
+    "material": "progress-activity-rounded"
+  },
+  "Loader": {
+    "fluent": "spinner-ios-20-regular",
+    "material": "progress-activity-rounded"
+  },
+  "Check": {
+    "fluent": "checkmark-20-regular",
+    "material": "check-rounded"
+  },
+  "CheckCircle2": {
+    "fluent": "checkmark-circle-20-regular",
+    "material": "check-circle-rounded"
+  },
+  "CheckCircle": {
+    "fluent": "checkmark-circle-20-regular",
+    "material": "check-circle-rounded"
+  },
+  "X": {
+    "fluent": "dismiss-20-regular",
+    "material": "close-rounded"
+  },
+  "XCircle": {
+    "fluent": "dismiss-circle-20-regular",
+    "material": "cancel-rounded"
+  },
+  "AlertTriangle": {
+    "fluent": "warning-20-regular",
+    "material": "warning-rounded"
+  },
+  "TriangleAlert": {
+    "fluent": "warning-20-regular",
+    "material": "warning-rounded"
+  },
+  "AlertCircle": {
+    "fluent": "error-circle-20-regular",
+    "material": "error-rounded"
+  },
+  "Info": {
+    "fluent": "info-20-regular",
+    "material": "info-rounded"
+  },
+  "HelpCircle": {
+    "fluent": "question-circle-20-regular",
+    "material": "help-rounded"
+  },
+  "Bell": {
+    "fluent": "alert-20-regular",
+    "material": "notifications-rounded"
+  },
+  "Activity": {
+    "fluent": "pulse-20-regular",
+    "material": "monitoring-rounded"
+  },
+  "Plus": {
+    "fluent": "add-20-regular",
+    "material": "add-rounded"
+  },
+  "Minus": {
+    "fluent": "subtract-20-regular",
+    "material": "remove-rounded"
+  },
+  "Trash2": {
+    "fluent": "delete-20-regular",
+    "material": "delete-rounded"
+  },
+  "Trash": {
+    "fluent": "delete-20-regular",
+    "material": "delete-rounded"
+  },
+  "Pencil": {
+    "fluent": "edit-20-regular",
+    "material": "edit-rounded"
+  },
+  "PenLine": {
+    "fluent": "edit-line-horizontal-3-20-regular",
+    "material": "edit-rounded"
+  },
+  "Edit": {
+    "fluent": "edit-20-regular",
+    "material": "edit-rounded"
+  },
+  "Save": {
+    "fluent": "save-20-regular",
+    "material": "save-rounded"
+  },
+  "Copy": {
+    "fluent": "copy-20-regular",
+    "material": "content-copy-rounded"
+  },
+  "Download": {
+    "fluent": "arrow-download-20-regular",
+    "material": "download-rounded"
+  },
+  "Upload": {
+    "fluent": "arrow-upload-20-regular",
+    "material": "upload-rounded"
+  },
+  "Undo2": {
+    "fluent": "arrow-undo-20-regular",
+    "material": "undo-rounded"
+  },
+  "RotateCcw": {
+    "fluent": "arrow-counterclockwise-20-regular",
+    "material": "undo-rounded"
+  },
+  "RefreshCw": {
+    "fluent": "arrow-sync-20-regular",
+    "material": "refresh-rounded"
+  },
+  "RefreshCcw": {
+    "fluent": "arrow-sync-20-regular",
+    "material": "refresh-rounded"
+  },
+  "Search": {
+    "fluent": "search-20-regular",
+    "material": "search-rounded"
+  },
+  "Filter": {
+    "fluent": "filter-20-regular",
+    "material": "filter-alt-rounded"
+  },
+  "SlidersHorizontal": {
+    "fluent": "options-20-regular",
+    "material": "tune-rounded"
+  },
+  "Settings": {
+    "fluent": "settings-20-regular",
+    "material": "settings-rounded"
+  },
+  "Settings2": {
+    "fluent": "settings-20-regular",
+    "material": "tune-rounded"
+  },
+  "Share2": {
+    "fluent": "share-20-regular",
+    "material": "share-rounded"
+  },
+  "Send": {
+    "fluent": "send-20-regular",
+    "material": "send-rounded"
+  },
+  "Eye": {
+    "fluent": "eye-20-regular",
+    "material": "visibility-rounded"
+  },
+  "EyeOff": {
+    "fluent": "eye-off-20-regular",
+    "material": "visibility-off-rounded"
+  },
+  "ChevronDown": {
+    "fluent": "chevron-down-20-regular",
+    "material": "keyboard-arrow-down-rounded"
+  },
+  "ChevronUp": {
+    "fluent": "chevron-up-20-regular",
+    "material": "keyboard-arrow-up-rounded"
+  },
+  "ChevronLeft": {
+    "fluent": "chevron-left-20-regular",
+    "material": "keyboard-arrow-left-rounded"
+  },
+  "ChevronRight": {
+    "fluent": "chevron-right-20-regular",
+    "material": "keyboard-arrow-right-rounded"
+  },
+  "ArrowLeft": {
+    "fluent": "arrow-left-20-regular",
+    "material": "arrow-back-rounded"
+  },
+  "ArrowRight": {
+    "fluent": "arrow-right-20-regular",
+    "material": "arrow-forward-rounded"
+  },
+  "ArrowUp": {
+    "fluent": "arrow-up-20-regular",
+    "material": "arrow-upward-rounded"
+  },
+  "ArrowDown": {
+    "fluent": "arrow-down-20-regular",
+    "material": "arrow-downward-rounded"
+  },
+  "CornerDownLeft": {
+    "fluent": "arrow-enter-left-20-regular",
+    "material": "subdirectory-arrow-left-rounded"
+  },
+  "ExternalLink": {
+    "fluent": "open-20-regular",
+    "material": "open-in-new-rounded"
+  },
+  "MoreHorizontal": {
+    "fluent": "more-horizontal-20-regular",
+    "material": "more-horiz-rounded"
+  },
+  "MoreVertical": {
+    "fluent": "more-vertical-20-regular",
+    "material": "more-vert-rounded"
+  },
+  "Menu": {
+    "fluent": "navigation-20-regular",
+    "material": "menu-rounded"
+  },
+  "PanelLeft": {
+    "fluent": "panel-left-20-regular",
+    "material": "view-sidebar-rounded"
+  },
+  "Maximize2": {
+    "fluent": "arrow-expand-20-regular",
+    "material": "open-in-full-rounded"
+  },
+  "Minimize2": {
+    "fluent": "arrow-minimize-20-regular",
+    "material": "close-fullscreen-rounded"
+  },
+  "Mail": {
+    "fluent": "mail-20-regular",
+    "material": "mail-rounded"
+  },
+  "MailOpen": {
+    "fluent": "mail-read-20-regular",
+    "material": "drafts-rounded"
+  },
+  "MailMinus": {
+    "fluent": "mail-dismiss-20-regular",
+    "material": "unsubscribe-rounded"
+  },
+  "Inbox": {
+    "fluent": "mail-inbox-20-regular",
+    "material": "inbox-rounded"
+  },
+  "Reply": {
+    "fluent": "arrow-reply-20-regular",
+    "material": "reply-rounded"
+  },
+  "ReplyAll": {
+    "fluent": "arrow-reply-all-20-regular",
+    "material": "reply-all-rounded"
+  },
+  "Forward": {
+    "fluent": "arrow-forward-20-regular",
+    "material": "forward-rounded"
+  },
+  "MessageCircle": {
+    "fluent": "chat-20-regular",
+    "material": "chat-rounded"
+  },
+  "MessageSquare": {
+    "fluent": "chat-20-regular",
+    "material": "chat-bubble-rounded"
+  },
+  "MessagesSquare": {
+    "fluent": "chat-multiple-20-regular",
+    "material": "forum-rounded"
+  },
+  "Phone": {
+    "fluent": "call-20-regular",
+    "material": "call-rounded"
+  },
+  "Paperclip": {
+    "fluent": "attach-20-regular",
+    "material": "attach-file-rounded"
+  },
+  "AtSign": {
+    "fluent": "mention-20-regular",
+    "material": "alternate-email-rounded"
+  },
+  "User": {
+    "fluent": "person-20-regular",
+    "material": "person-rounded"
+  },
+  "Users": {
+    "fluent": "people-20-regular",
+    "material": "group-rounded"
+  },
+  "UserPlus": {
+    "fluent": "person-add-20-regular",
+    "material": "person-add-rounded"
+  },
+  "UserMinus": {
+    "fluent": "person-subtract-20-regular",
+    "material": "person-remove-rounded"
+  },
+  "Building2": {
+    "fluent": "building-20-regular",
+    "material": "apartment-rounded"
+  },
+  "File": {
+    "fluent": "document-20-regular",
+    "material": "draft-rounded"
+  },
+  "FileText": {
+    "fluent": "document-text-20-regular",
+    "material": "description-rounded"
+  },
+  "FileCode": {
+    "fluent": "document-javascript-20-regular",
+    "material": "code-rounded"
+  },
+  "FileSpreadsheet": {
+    "fluent": "document-table-20-regular",
+    "material": "table-chart-rounded"
+  },
+  "FileImage": {
+    "fluent": "image-20-regular",
+    "material": "image-rounded"
+  },
+  "Folder": {
+    "fluent": "folder-20-regular",
+    "material": "folder-rounded"
+  },
+  "FolderOpen": {
+    "fluent": "folder-open-20-regular",
+    "material": "folder-open-rounded"
+  },
+  "FolderInput": {
+    "fluent": "folder-arrow-right-20-regular",
+    "material": "drive-file-move-rounded"
+  },
+  "FolderKanban": {
+    "fluent": "board-20-regular",
+    "material": "view-kanban-rounded"
+  },
+  "Archive": {
+    "fluent": "archive-20-regular",
+    "material": "archive-rounded"
+  },
+  "ArchiveRestore": {
+    "fluent": "archive-arrow-back-20-regular",
+    "material": "unarchive-rounded"
+  },
+  "Image": {
+    "fluent": "image-20-regular",
+    "material": "image-rounded"
+  },
+  "BookOpen": {
+    "fluent": "book-open-20-regular",
+    "material": "menu-book-rounded"
+  },
+  "StickyNote": {
+    "fluent": "note-20-regular",
+    "material": "sticky-note-2-rounded"
+  },
+  "ClipboardCheck": {
+    "fluent": "clipboard-checkmark-20-regular",
+    "material": "assignment-turned-in-rounded"
+  },
+  "LayoutGrid": {
+    "fluent": "grid-20-regular",
+    "material": "grid-view-rounded"
+  },
+  "LayoutList": {
+    "fluent": "apps-list-20-regular",
+    "material": "view-list-rounded"
+  },
+  "LayoutDashboard": {
+    "fluent": "board-20-regular",
+    "material": "dashboard-rounded"
+  },
+  "Columns3": {
+    "fluent": "column-triple-20-regular",
+    "material": "view-column-rounded"
+  },
+  "ListChecks": {
+    "fluent": "task-list-square-ltr-20-regular",
+    "material": "checklist-rounded"
+  },
+  "ListTree": {
+    "fluent": "text-bullet-list-tree-20-regular",
+    "material": "account-tree-rounded"
+  },
+  "CheckSquare": {
+    "fluent": "checkbox-checked-20-regular",
+    "material": "check-box-rounded"
+  },
+  "Square": {
+    "fluent": "square-20-regular",
+    "material": "square-rounded"
+  },
+  "Circle": {
+    "fluent": "circle-20-regular",
+    "material": "circle-rounded"
+  },
+  "Clock": {
+    "fluent": "clock-20-regular",
+    "material": "schedule-rounded"
+  },
+  "Timer": {
+    "fluent": "timer-20-regular",
+    "material": "timer-rounded"
+  },
+  "History": {
+    "fluent": "history-20-regular",
+    "material": "history-rounded"
+  },
+  "Calendar": {
+    "fluent": "calendar-20-regular",
+    "material": "calendar-today-rounded"
+  },
+  "CalendarDays": {
+    "fluent": "calendar-ltr-20-regular",
+    "material": "calendar-month-rounded"
+  },
+  "CalendarClock": {
+    "fluent": "calendar-clock-20-regular",
+    "material": "event-upcoming-rounded"
+  },
+  "CalendarPlus": {
+    "fluent": "calendar-add-20-regular",
+    "material": "calendar-add-on-rounded"
+  },
+  "Play": {
+    "fluent": "play-20-regular",
+    "material": "play-arrow-rounded"
+  },
+  "Pause": {
+    "fluent": "pause-20-regular",
+    "material": "pause-rounded"
+  },
+  "Mic": {
+    "fluent": "mic-20-regular",
+    "material": "mic-rounded"
+  },
+  "MicOff": {
+    "fluent": "mic-off-20-regular",
+    "material": "mic-off-rounded"
+  },
+  "Video": {
+    "fluent": "video-20-regular",
+    "material": "videocam-rounded"
+  },
+  "Camera": {
+    "fluent": "camera-20-regular",
+    "material": "photo-camera-rounded"
+  },
+  "Volume2": {
+    "fluent": "speaker-2-20-regular",
+    "material": "volume-up-rounded"
+  },
+  "Radio": {
+    "fluent": "radio-button-20-regular",
+    "material": "radio-button-checked-rounded"
+  },
+  "Zap": {
+    "fluent": "flash-20-regular",
+    "material": "bolt-rounded"
+  },
+  "Cloud": {
+    "fluent": "cloud-20-regular",
+    "material": "cloud-rounded"
+  },
+  "HardDrive": {
+    "fluent": "hard-drive-20-regular",
+    "material": "hard-drive-rounded"
+  },
+  "Server": {
+    "fluent": "server-20-regular",
+    "material": "dns-rounded"
+  },
+  "Database": {
+    "fluent": "database-20-regular",
+    "material": "database-rounded"
+  },
+  "Cpu": {
+    "fluent": "developer-board-20-regular",
+    "material": "memory-rounded"
+  },
+  "Terminal": {
+    "fluent": "window-console-20-regular",
+    "material": "terminal-rounded"
+  },
+  "Code": {
+    "fluent": "code-20-regular",
+    "material": "code-rounded"
+  },
+  "GitBranch": {
+    "fluent": "branch-20-regular",
+    "material": "fork-right-rounded"
+  },
+  "Workflow": {
+    "fluent": "flowchart-20-regular",
+    "material": "account-tree-rounded"
+  },
+  "Plug": {
+    "fluent": "plug-connected-20-regular",
+    "material": "power-rounded"
+  },
+  "Power": {
+    "fluent": "power-20-regular",
+    "material": "power-settings-new-rounded"
+  },
+  "Puzzle": {
+    "fluent": "puzzle-piece-20-regular",
+    "material": "extension-rounded"
+  },
+  "Boxes": {
+    "fluent": "cube-multiple-20-regular",
+    "material": "widgets-rounded"
+  },
+  "Package": {
+    "fluent": "box-20-regular",
+    "material": "inventory-2-rounded"
+  },
+  "Layers": {
+    "fluent": "layer-20-regular",
+    "material": "layers-rounded"
+  },
+  "Globe": {
+    "fluent": "globe-20-regular",
+    "material": "public-rounded"
+  },
+  "Link2": {
+    "fluent": "link-20-regular",
+    "material": "link-rounded"
+  },
+  "Link": {
+    "fluent": "link-20-regular",
+    "material": "link-rounded"
+  },
+  "Wrench": {
+    "fluent": "wrench-20-regular",
+    "material": "build-rounded"
+  },
+  "FlaskConical": {
+    "fluent": "beaker-20-regular",
+    "material": "science-rounded"
+  },
+  "Rocket": {
+    "fluent": "rocket-20-regular",
+    "material": "rocket-launch-rounded"
+  },
+  "Bot": {
+    "fluent": "bot-20-regular",
+    "material": "smart-toy-rounded"
+  },
+  "Brain": {
+    "fluent": "brain-circuit-20-regular",
+    "material": "psychology-rounded"
+  },
+  "Sparkles": {
+    "fluent": "sparkle-20-regular",
+    "material": "auto-awesome-rounded"
+  },
+  "Wand2": {
+    "fluent": "wand-20-regular",
+    "material": "auto-fix-high"
+  },
+  "Lightbulb": {
+    "fluent": "lightbulb-20-regular",
+    "material": "lightbulb-rounded"
+  },
+  "Target": {
+    "fluent": "target-20-regular",
+    "material": "target-rounded"
+  },
+  "TrendingUp": {
+    "fluent": "arrow-trending-lines-20-regular",
+    "material": "trending-up-rounded"
+  },
+  "BarChart3": {
+    "fluent": "data-bar-vertical-20-regular",
+    "material": "bar-chart-rounded"
+  },
+  "Waves": {
+    "fluent": "wifi-1-20-regular",
+    "material": "waves-rounded"
+  },
+  "Wind": {
+    "fluent": "weather-squalls-20-regular",
+    "material": "air-rounded"
+  },
+  "Lock": {
+    "fluent": "lock-closed-20-regular",
+    "material": "lock-rounded"
+  },
+  "Unlock": {
+    "fluent": "lock-open-20-regular",
+    "material": "lock-open-rounded"
+  },
+  "KeyRound": {
+    "fluent": "key-20-regular",
+    "material": "key-rounded"
+  },
+  "Shield": {
+    "fluent": "shield-20-regular",
+    "material": "shield-rounded"
+  },
+  "ShieldCheck": {
+    "fluent": "shield-checkmark-20-regular",
+    "material": "verified-user-rounded"
+  },
+  "ShieldAlert": {
+    "fluent": "shield-error-20-regular",
+    "material": "gpp-maybe-rounded"
+  },
+  "ShieldOff": {
+    "fluent": "shield-dismiss-20-regular",
+    "material": "gpp-bad-rounded"
+  },
+  "LogOut": {
+    "fluent": "sign-out-20-regular",
+    "material": "logout-rounded"
+  },
+  "LogIn": {
+    "fluent": "arrow-enter-20-regular",
+    "material": "login-rounded"
+  },
+  "Star": {
+    "fluent": "star-20-regular",
+    "material": "star-rounded"
+  },
+  "Flag": {
+    "fluent": "flag-20-regular",
+    "material": "flag-rounded"
+  },
+  "Tag": {
+    "fluent": "tag-20-regular",
+    "material": "label-rounded"
+  },
+  "Tags": {
+    "fluent": "tag-multiple-20-regular",
+    "material": "label-rounded"
+  },
+  "Sun": {
+    "fluent": "weather-sunny-20-regular",
+    "material": "light-mode-rounded"
+  },
+  "Moon": {
+    "fluent": "weather-moon-20-regular",
+    "material": "dark-mode-rounded"
+  },
+  "Monitor": {
+    "fluent": "desktop-20-regular",
+    "material": "desktop-windows-rounded"
+  },
+  "Smartphone": {
+    "fluent": "phone-20-regular",
+    "material": "smartphone"
+  },
+  "Home": {
+    "fluent": "home-20-regular",
+    "material": "home-rounded"
+  },
+  "Command": {
+    "fluent": "keyboard-shift-20-regular",
+    "material": "keyboard-command-key-rounded"
+  },
+  "MapPin": {
+    "fluent": "location-20-regular",
+    "material": "location-on-rounded"
+  },
+  "Briefcase": {
+    "fluent": "briefcase-20-regular",
+    "material": "work-rounded"
+  },
+  "CreditCard": {
+    "fluent": "payment-20-regular",
+    "material": "credit-card-rounded"
+  },
+  "DollarSign": {
+    "fluent": "currency-dollar-euro-20-regular",
+    "material": "attach-money-rounded"
+  },
+  "ThumbsUp": {
+    "fluent": "thumb-like-20-regular",
+    "material": "thumb-up-rounded"
+  },
+  "Stethoscope": {
+    "fluent": "stethoscope-20-regular",
+    "material": "stethoscope-rounded"
+  },
+  "Palette": {
+    "fluent": "color-20-regular",
+    "material": "palette-rounded"
+  },
+  "UserCog": {
+    "fluent": "person-settings-20-regular",
+    "material": "manage-accounts-rounded"
+  },
+  "UserSearch": {
+    "fluent": "person-search-20-regular",
+    "material": "person-search-rounded"
+  },
+  "PlusSquare": {
+    "fluent": "add-square-20-regular",
+    "material": "add-box-rounded"
+  },
+  "KanbanSquare": {
+    "fluent": "board-20-regular",
+    "material": "view-kanban-rounded"
+  },
+  "ClipboardList": {
+    "fluent": "clipboard-task-list-ltr-20-regular",
+    "material": "assignment-rounded"
+  },
+  "Cog": {
+    "fluent": "settings-20-regular",
+    "material": "settings-rounded"
+  },
+  "Network": {
+    "fluent": "organization-20-regular",
+    "material": "hub-rounded"
+  },
+  "BellRing": {
+    "fluent": "alert-badge-20-regular",
+    "material": "notifications-active-rounded"
+  },
+  "Megaphone": {
+    "fluent": "megaphone-20-regular",
+    "material": "campaign-rounded"
+  },
+  "Newspaper": {
+    "fluent": "news-20-regular",
+    "material": "newspaper-rounded"
+  },
+  "Handshake": {
+    "fluent": "handshake-20-regular",
+    "material": "handshake-rounded"
+  },
+  "Landmark": {
+    "fluent": "building-bank-20-regular",
+    "material": "account-balance-rounded"
+  },
+  "Receipt": {
+    "fluent": "receipt-20-regular",
+    "material": "receipt-rounded"
+  },
+  "Wallet": {
+    "fluent": "wallet-20-regular",
+    "material": "wallet-rounded"
+  },
+  "ShoppingCart": {
+    "fluent": "cart-20-regular",
+    "material": "shopping-cart-rounded"
+  },
+  "Truck": {
+    "fluent": "vehicle-truck-20-regular",
+    "material": "local-shipping-rounded"
+  },
+  "Factory": {
+    "fluent": "building-factory-20-regular",
+    "material": "factory-rounded"
+  },
+  "LifeBuoy": {
+    "fluent": "person-support-20-regular",
+    "material": "support-rounded"
+  }
+}
diff --git a/workbench/control_plane/src/lib/theme/icon-packs.ts b/workbench/control_plane/src/lib/theme/icon-packs.ts
new file mode 100644
index 00000000..fdd73103
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/icon-packs.ts
@@ -0,0 +1,87 @@
+"use client";
+
+/**
+ * Icon pack loading.
+ *
+ * Lucide is bundled with the app and always available. The Fluent and Material
+ * packs are pruned Iconify collections (~70 KB each, built by
+ * `scripts/build-icon-packs.mjs`) and are fetched only when a theme actually
+ * asks for them — a member on the default theme never downloads either.
+ *
+ * Loading is a module-level side effect rather than React state because the
+ * collections are global to Iconify: once registered they are available to
+ * every `<Icon>` on the page, so per-component ownership would be a lie.
+ * Components subscribe through `useIconPackReady` and re-render when a pack
+ * lands, falling back to Lucide until then.
+ */
+
+import { useSyncExternalStore } from "react";
+import { addCollection, type IconifyJSON } from "@iconify/react";
+import type { IconPackId } from "./types";
+
+type LoadState = "idle" | "loading" | "ready" | "failed";
+
+const state: Record<IconPackId, LoadState> = {
+  lucide: "ready",
+  fluent: "idle",
+  material: "idle",
+};
+
+const subscribers = new Set<() => void>();
+
+function notify(): void {
+  for (const fn of subscribers) fn();
+}
+
+const loaders: Record<Exclude<IconPackId, "lucide">, () => Promise<{ default: unknown }>> = {
+  fluent: () => import("./icon-data/fluent.json"),
+  material: () => import("./icon-data/material.json"),
+};
+
+/**
+ * Start loading a pack if it has not been started already. Safe to call on
+ * every render; repeat calls for a pack already in flight are no-ops.
+ */
+export function ensureIconPack(pack: IconPackId): void {
+  if (pack === "lucide" || state[pack] !== "idle") return;
+  state[pack] = "loading";
+  loaders[pack]()
+    .then((mod) => {
+      addCollection(mod.default as IconifyJSON);
+      state[pack] = "ready";
+    })
+    .catch(() => {
+      // A failed pack load is not fatal: `<Icon>` keeps rendering Lucide, so
+      // the app stays usable with the wrong icon style rather than blank.
+      state[pack] = "failed";
+    })
+    .finally(notify);
+}
+
+function subscribe(fn: () => void): () => void {
+  subscribers.add(fn);
+  return () => {
+    subscribers.delete(fn);
+  };
+}
+
+/**
+ * True when `pack`'s glyphs can be rendered. Always true for Lucide; for the
+ * Iconify packs it flips once the collection has been registered.
+ *
+ * Returns false during server rendering so the markup React produces on the
+ * server matches the client's first paint — the swap to themed glyphs happens
+ * in a later commit, after hydration.
+ */
+export function useIconPackReady(pack: IconPackId): boolean {
+  return useSyncExternalStore(
+    subscribe,
+    () => state[pack] === "ready",
+    () => false,
+  );
+}
+
+/** Current load state — exported for tests and diagnostics. */
+export function iconPackState(pack: IconPackId): LoadState {
+  return state[pack];
+}
diff --git a/workbench/control_plane/src/lib/theme/icon-registry.test.ts b/workbench/control_plane/src/lib/theme/icon-registry.test.ts
new file mode 100644
index 00000000..edfd9c56
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/icon-registry.test.ts
@@ -0,0 +1,98 @@
+/**
+ * Icon registry integrity.
+ *
+ * The generated `registry.json` and the pruned pack files must agree: a name
+ * the registry points at but the pack does not contain renders as a blank
+ * square, which no type-checker catches. These tests read the shipped data and
+ * check it end to end, including that the sidebar — the most visible surface
+ * in the app — is fully mapped in every pack.
+ */
+
+import { describe, expect, it } from "vitest";
+
+import fluentPack from "./icon-data/fluent.json";
+import materialPack from "./icon-data/material.json";
+import { ICON_REGISTRY, iconifyName, mappedIconCount } from "./icon-registry";
+import { NAV_SECTIONS } from "../nav";
+import { CENTERS } from "../centers";
+import { THEMES } from "./themes";
+
+type Pack = { prefix: string; icons: Record<string, unknown>; aliases?: Record<string, unknown> };
+
+const PACKS: Record<"fluent" | "material", Pack> = {
+  fluent: fluentPack as Pack,
+  material: materialPack as Pack,
+};
+
+/** Every icon name the navigation can ask for. */
+const NAV_ICONS = [
+  ...NAV_SECTIONS.flatMap((s) => s.items.map((i) => i.icon)),
+  ...CENTERS.flatMap((c) => [c.icon, ...c.apps.map((a) => a.icon)]),
+];
+
+describe("iconifyName", () => {
+  it("returns null for the lucide pack, which needs no mapping", () => {
+    expect(iconifyName("Plus", "lucide")).toBeNull();
+  });
+
+  it("qualifies mapped names with the pack's collection prefix", () => {
+    expect(iconifyName("Plus", "fluent")).toBe(`fluent:${ICON_REGISTRY.Plus.fluent}`);
+    expect(iconifyName("Plus", "material")).toBe(
+      `material-symbols:${ICON_REGISTRY.Plus.material}`,
+    );
+  });
+
+  it("returns null for unmapped names so the caller falls back to lucide", () => {
+    expect(iconifyName("NoSuchIconAnywhere", "fluent")).toBeNull();
+  });
+});
+
+describe("pruned packs", () => {
+  it.each(["fluent", "material"] as const)(
+    "%s contains every icon the registry points at",
+    (pack) => {
+      const collection = PACKS[pack];
+      const dangling = Object.entries(ICON_REGISTRY)
+        .map(([lucideName, mapping]) => [lucideName, mapping[pack]] as const)
+        .filter(([, name]) => name)
+        .filter(([, name]) => !(collection.icons[name!] || collection.aliases?.[name!]))
+        .map(([lucideName, name]) => `${lucideName} → ${name}`);
+
+      expect(dangling).toEqual([]);
+    },
+  );
+
+  it.each(["fluent", "material"] as const)("%s declares the expected prefix", (pack) => {
+    const expected = pack === "fluent" ? "fluent" : "material-symbols";
+    expect(PACKS[pack].prefix).toBe(expected);
+  });
+
+  it.each(["fluent", "material"] as const)(
+    "%s ships only what is mapped, not the full collection",
+    (pack) => {
+      // The upstream collections are 16k–20k icons. Shipping one whole would
+      // be several megabytes on a theme switch.
+      expect(Object.keys(PACKS[pack].icons).length).toBeLessThan(400);
+      expect(mappedIconCount(pack)).toBeGreaterThan(150);
+    },
+  );
+});
+
+describe("navigation coverage", () => {
+  it.each(["fluent", "material"] as const)(
+    "every sidebar icon has a %s equivalent",
+    (pack) => {
+      const unmapped = [...new Set(NAV_ICONS)].filter((name) => !iconifyName(name, pack));
+      expect(unmapped).toEqual([]);
+    },
+  );
+});
+
+describe("themes reference real packs", () => {
+  it("every theme names a pack that exists", () => {
+    const known = new Set(["lucide", "fluent", "material"]);
+    for (const theme of THEMES) {
+      expect(known.has(theme.iconPack), `${theme.id} → ${theme.iconPack}`).toBe(true);
+    }
+  });
+});
diff --git a/workbench/control_plane/src/lib/theme/icon-registry.ts b/workbench/control_plane/src/lib/theme/icon-registry.ts
new file mode 100644
index 00000000..a457068b
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/icon-registry.ts
@@ -0,0 +1,48 @@
+/**
+ * The icon vocabulary.
+ *
+ * Lucide names are the canonical vocabulary the whole app speaks — they are
+ * already used at ~160 call sites, they read semantically ("Trash2",
+ * "AlertTriangle"), and keeping them means migrating a call site is a
+ * one-token edit rather than learning a new naming scheme.
+ *
+ * Other packs map ONTO that vocabulary. `registry.json` is generated by
+ * `scripts/build-icon-packs.mjs`, which resolves each name against the real
+ * Fluent and Material Symbols collections so a mapping can never point at an
+ * icon that does not exist.
+ *
+ * A name with no mapping for the active pack falls back to Lucide. That is
+ * what makes the whole thing incrementally adoptable: agent-generated UI can
+ * name any of Lucide's ~1,600 icons and still render, it just renders in the
+ * base style until someone adds a mapping.
+ */
+
+import registryData from "./icon-data/registry.json";
+import type { IconPackId } from "./types";
+
+/** Per-pack icon name for one Lucide name. */
+export type IconMapping = Partial<Record<Exclude<IconPackId, "lucide">, string>>;
+
+export const ICON_REGISTRY = registryData as Record<string, IconMapping>;
+
+/** Iconify collection prefix for each non-Lucide pack. */
+const ICONIFY_PREFIX: Record<Exclude<IconPackId, "lucide">, string> = {
+  fluent: "fluent",
+  material: "material-symbols",
+};
+
+/**
+ * Fully-qualified Iconify name (`"fluent:add-20-regular"`) for a Lucide name
+ * in the given pack, or `null` when the pack is Lucide or has no mapping —
+ * in which case the caller renders the Lucide glyph.
+ */
+export function iconifyName(lucideName: string, pack: IconPackId): string | null {
+  if (pack === "lucide") return null;
+  const mapped = ICON_REGISTRY[lucideName]?.[pack];
+  return mapped ? `${ICONIFY_PREFIX[pack]}:${mapped}` : null;
+}
+
+/** Number of names carrying a mapping for `pack` — used by tests. */
+export function mappedIconCount(pack: Exclude<IconPackId, "lucide">): number {
+  return Object.values(ICON_REGISTRY).filter((m) => m[pack]).length;
+}
diff --git a/workbench/control_plane/src/lib/theme/storage.ts b/workbench/control_plane/src/lib/theme/storage.ts
new file mode 100644
index 00000000..3ba818a5
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/storage.ts
@@ -0,0 +1,76 @@
+/**
+ * Where appearance preferences live in the browser.
+ *
+ * Two readers share these keys: the React store, and the pre-paint boot script
+ * (`boot.ts`) which runs before hydration and cannot import anything. The key
+ * names are therefore defined once here and interpolated into the script
+ * source, so the two can never drift apart.
+ */
+
+import type { Density, ThemeMode } from "./types";
+import { DENSITY_SCALE } from "./types";
+
+export const STORAGE_KEYS = {
+  /** The member's own theme choice. Absent means "follow the org default". */
+  theme: "cc-theme",
+  /** The member's own density choice. Absent means "follow the org default". */
+  density: "cc-density",
+  /** Optional primary-colour override. */
+  accent: "cc-accent",
+  /**
+   * Last-known organisation defaults, cached so a member who has never opened
+   * Settings still gets the company look on first paint instead of a flash of
+   * the built-in default.
+   */
+  orgTheme: "cc-theme-org",
+  orgDensity: "cc-density-org",
+} as const;
+
+/** The DOM attribute carrying the active theme's id. */
+export const THEME_ATTRIBUTE = "data-theme";
+
+/** Custom property the density setting drives. */
+export const DENSITY_PROPERTY = "--ui-scale";
+
+/** Custom properties an accent override replaces. */
+export const ACCENT_PROPERTIES = ["--primary", "--ring", "--sidebar-primary"] as const;
+
+/** localStorage key next-themes uses for the colour mode. */
+export const MODE_STORAGE_KEY = "theme";
+
+function read(key: string): string | null {
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    // Private mode / blocked storage: fall back to defaults rather than crash.
+    return null;
+  }
+}
+
+function write(key: string, value: string | null): void {
+  try {
+    if (value === null) window.localStorage.removeItem(key);
+    else window.localStorage.setItem(key, value);
+  } catch {
+    // Preferences simply do not persist when storage is unavailable.
+  }
+}
+
+export const themeStorage = {
+  getTheme: () => read(STORAGE_KEYS.theme),
+  setTheme: (id: string | null) => write(STORAGE_KEYS.theme, id),
+  getDensity: () => read(STORAGE_KEYS.density) as Density | null,
+  setDensity: (d: Density | null) => write(STORAGE_KEYS.density, d),
+  getAccent: () => read(STORAGE_KEYS.accent),
+  setAccent: (c: string | null) => write(STORAGE_KEYS.accent, c),
+  getOrgTheme: () => read(STORAGE_KEYS.orgTheme),
+  setOrgTheme: (id: string) => write(STORAGE_KEYS.orgTheme, id),
+  getOrgDensity: () => read(STORAGE_KEYS.orgDensity) as Density | null,
+  setOrgDensity: (d: Density) => write(STORAGE_KEYS.orgDensity, d),
+  getMode: () => read(MODE_STORAGE_KEY) as ThemeMode | null,
+};
+
+/** Root font-size multiplier for a density setting. */
+export function densityScale(density: Density | null | undefined): number {
+  return density ? DENSITY_SCALE[density] : DENSITY_SCALE.default;
+}
diff --git a/workbench/control_plane/src/lib/theme/store.ts b/workbench/control_plane/src/lib/theme/store.ts
new file mode 100644
index 00000000..36a0bc3a
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/store.ts
@@ -0,0 +1,157 @@
+/**
+ * Appearance store.
+ *
+ * Holds the two-level preference model the theming engine is built around:
+ *
+ *   organisation default  — set by an admin, applies to everyone
+ *   member override       — optional, wins for that person only
+ *
+ * A `null` member value means "inherit", which is why overrides are stored as
+ * nullable rather than pre-resolved: clearing an override has to fall back to
+ * whatever the org default currently is, including later changes to it.
+ *
+ * Deliberately a store rather than a context: `<Icon>` reads the active icon
+ * pack and is rendered in well over a hundred places, several of them outside
+ * any provider we control. A store keeps that read provider-free.
+ */
+
+import { create } from "zustand";
+import type { Density, ThemeMode } from "./types";
+import { DEFAULT_THEME_ID, findTheme, resolveTheme } from "./themes";
+import {
+  ACCENT_PROPERTIES,
+  DENSITY_PROPERTY,
+  THEME_ATTRIBUTE,
+  densityScale,
+  themeStorage,
+} from "./storage";
+import { isSafeColor } from "./css";
+
+type AppearanceState = {
+  /** Member's theme override; `null` inherits the org default. */
+  userThemeId: string | null;
+  /** Member's density override; `null` inherits the org default. */
+  userDensity: Density | null;
+  /** Member's accent override; `null` keeps the theme's own primary. */
+  accent: string | null;
+
+  /** Organisation defaults, refreshed from the backend on mount. */
+  orgThemeId: string;
+  orgDensity: Density;
+  /** When false, members must use the org default. */
+  allowUserOverride: boolean;
+
+  /** True once local preferences have been read out of storage. */
+  hydrated: boolean;
+
+  setUserTheme: (id: string | null) => void;
+  setUserDensity: (density: Density | null) => void;
+  setAccent: (color: string | null) => void;
+  setOrgDefaults: (org: {
+    themeId: string;
+    density: Density;
+    allowUserOverride: boolean;
+  }) => void;
+  hydrate: () => void;
+};
+
+/** The theme actually in force, honouring the org's override policy. */
+export function effectiveThemeId(s: AppearanceState): string {
+  if (!s.allowUserOverride) return s.orgThemeId;
+  return s.userThemeId ?? s.orgThemeId;
+}
+
+/** The density actually in force, honouring the org's override policy. */
+export function effectiveDensity(s: AppearanceState): Density {
+  if (!s.allowUserOverride) return s.orgDensity;
+  return s.userDensity ?? s.orgDensity;
+}
+
+/**
+ * Push the resolved state onto the document. Every mutation funnels through
+ * here so the DOM can never disagree with the store.
+ *
+ * Values reach CSS through `setProperty`, never through generated stylesheet
+ * text, so a malformed stored value is rejected by the CSSOM instead of
+ * altering the stylesheet.
+ */
+function applyToDocument(state: AppearanceState): void {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+
+  root.setAttribute(THEME_ATTRIBUTE, resolveTheme(effectiveThemeId(state)).id);
+  root.style.setProperty(DENSITY_PROPERTY, String(densityScale(effectiveDensity(state))));
+
+  const accent = state.accent && isSafeColor(state.accent) ? state.accent : null;
+  for (const prop of ACCENT_PROPERTIES) {
+    if (accent) root.style.setProperty(prop, accent);
+    else root.style.removeProperty(prop);
+  }
+}
+
+export const useAppearanceStore = create<AppearanceState>((set, get) => ({
+  userThemeId: null,
+  userDensity: null,
+  accent: null,
+  orgThemeId: DEFAULT_THEME_ID,
+  orgDensity: "default",
+  allowUserOverride: true,
+  hydrated: false,
+
+  setUserTheme: (id) => {
+    // An unknown id would leave the document wearing an attribute no
+    // stylesheet matches, so treat it as "inherit" instead.
+    const next = id && findTheme(id) ? id : null;
+    themeStorage.setTheme(next);
+    set({ userThemeId: next });
+    applyToDocument(get());
+  },
+
+  setUserDensity: (density) => {
+    themeStorage.setDensity(density);
+    set({ userDensity: density });
+    applyToDocument(get());
+  },
+
+  setAccent: (color) => {
+    const next = color && isSafeColor(color) ? color : null;
+    themeStorage.setAccent(next);
+    set({ accent: next });
+    applyToDocument(get());
+  },
+
+  setOrgDefaults: ({ themeId, density, allowUserOverride }) => {
+    const resolved = resolveTheme(themeId).id;
+    themeStorage.setOrgTheme(resolved);
+    themeStorage.setOrgDensity(density);
+    set({ orgThemeId: resolved, orgDensity: density, allowUserOverride });
+    applyToDocument(get());
+  },
+
+  hydrate: () => {
+    if (get().hydrated) return;
+    const storedOrgTheme = themeStorage.getOrgTheme();
+    const storedOrgDensity = themeStorage.getOrgDensity();
+    set({
+      userThemeId: themeStorage.getTheme(),
+      userDensity: themeStorage.getDensity(),
+      accent: themeStorage.getAccent(),
+      orgThemeId: storedOrgTheme ? resolveTheme(storedOrgTheme).id : DEFAULT_THEME_ID,
+      orgDensity: storedOrgDensity ?? "default",
+      hydrated: true,
+    });
+    applyToDocument(get());
+  },
+}));
+
+/** The resolved `Theme` object currently in force. */
+export function useActiveTheme() {
+  return useAppearanceStore((s) => resolveTheme(effectiveThemeId(s)));
+}
+
+/** The icon pack the active theme asks for. */
+export function useIconPack() {
+  return useAppearanceStore((s) => resolveTheme(effectiveThemeId(s)).iconPack);
+}
+
+export type { AppearanceState, ThemeMode };
diff --git a/workbench/control_plane/src/lib/theme/themes.test.ts b/workbench/control_plane/src/lib/theme/themes.test.ts
new file mode 100644
index 00000000..49fd87d5
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/themes.test.ts
@@ -0,0 +1,123 @@
+/**
+ * Theme manifest integrity.
+ *
+ * The load-bearing test here is the drift guard: `globals.css` keeps a copy of
+ * the default theme as the no-JavaScript fallback, and a copy that silently
+ * disagrees with the manifest is worse than no copy at all — the app would
+ * render one set of colours before hydration and a different set after. This
+ * parses the stylesheet and fails if the two ever diverge.
+ */
+
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+import { DEFAULT_THEME_ID, THEMES, findTheme, resolveTheme } from "./themes";
+import { REQUIRED_COLOR_TOKENS } from "./types";
+import type { ColorTokens } from "./types";
+
+const GLOBALS = readFileSync(
+  fileURLToPath(new URL("../../app/globals.css", import.meta.url)),
+  "utf8",
+);
+
+/** Custom-property declarations inside the first block matching `selector`. */
+function declarationsIn(css: string, selector: string): Record<string, string> {
+  const start = css.indexOf(`${selector} {`);
+  if (start === -1) throw new Error(`No \`${selector}\` block in globals.css`);
+  const open = css.indexOf("{", start);
+  const close = css.indexOf("}", open);
+  const body = css.slice(open + 1, close);
+
+  const out: Record<string, string> = {};
+  for (const match of body.matchAll(/^\s*(--[\w-]+)\s*:\s*([^;]+);/gm)) {
+    out[match[1]] = match[2].trim();
+  }
+  return out;
+}
+
+/** `cardForeground` → `--card-foreground`. */
+function cssVar(token: string): string {
+  return `--${token.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}`;
+}
+
+describe("theme registry", () => {
+  it("exposes the default theme", () => {
+    expect(findTheme(DEFAULT_THEME_ID)).toBeDefined();
+  });
+
+  it("falls back to the default for unknown, empty and nullish ids", () => {
+    for (const bad of ["nope", "", null, undefined]) {
+      expect(resolveTheme(bad).id).toBe(DEFAULT_THEME_ID);
+    }
+  });
+
+  it("gives every theme a unique id", () => {
+    const ids = THEMES.map((t) => t.id);
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+
+  it.each(THEMES.map((t) => [t.id, t] as const))(
+    "%s defines every required colour token in both modes",
+    (_id, theme) => {
+      for (const mode of ["dark", "light"] as const) {
+        const colors = theme.colors[mode];
+        const missing = REQUIRED_COLOR_TOKENS.filter(
+          (token) => !colors[token as keyof ColorTokens],
+        );
+        expect(missing).toEqual([]);
+      }
+    },
+  );
+
+  it.each(THEMES.map((t) => [t.id, t] as const))(
+    "%s uses distinct colours for dark and light",
+    (_id, theme) => {
+      // A theme whose two modes are identical is almost always a copy-paste
+      // slip; every real theme changes at least its background.
+      expect(theme.colors.dark.background).not.toBe(theme.colors.light.background);
+    },
+  );
+});
+
+describe("globals.css fallback matches the default manifest", () => {
+  const theme = resolveTheme(DEFAULT_THEME_ID);
+
+  it("mirrors every dark colour token in :root", () => {
+    const root = declarationsIn(GLOBALS, ":root");
+    for (const [token, value] of Object.entries(theme.colors.dark)) {
+      expect.soft(root[cssVar(token)], `:root ${cssVar(token)}`).toBe(value);
+    }
+  });
+
+  it("mirrors every light colour token in .light", () => {
+    const light = declarationsIn(GLOBALS, ".light");
+    for (const [token, value] of Object.entries(theme.colors.light)) {
+      expect.soft(light[cssVar(token)], `.light ${cssVar(token)}`).toBe(value);
+    }
+  });
+
+  it("mirrors the shape and effect tokens in :root", () => {
+    const root = declarationsIn(GLOBALS, ":root");
+    expect.soft(root["--radius"]).toBe(theme.shape.radius);
+    expect.soft(root["--border-width"]).toBe(theme.shape.borderWidth);
+    expect.soft(root["--glass-blur"]).toBe(theme.effects.glassBlur);
+    expect.soft(root["--glass-opacity"]).toBe(theme.effects.glassOpacity);
+    expect.soft(root["--glass-opacity-strong"]).toBe(theme.effects.glassOpacityStrong);
+    expect.soft(root["--glow-strength"]).toBe(theme.effects.glowStrength);
+    expect.soft(root["--elevation"]).toBe(theme.effects.shadow);
+    expect.soft(root["--motion-duration"]).toBe(theme.effects.motionDuration);
+    expect.soft(root["--motion-easing"]).toBe(theme.effects.motionEasing);
+    expect.soft(root["--heading-tracking"]).toBe(theme.typography.headingLetterSpacing);
+    expect.soft(root["--heading-weight"]).toBe(theme.typography.headingWeight);
+    expect.soft(root["--label-weight"]).toBe(theme.typography.labelWeight);
+  });
+
+  it("still declares the Tailwind bridge the tokens feed", () => {
+    // Every colour utility resolves through `@theme inline`; losing an entry
+    // there silently drops a whole family of classes.
+    expect(GLOBALS).toContain("--color-primary: var(--primary)");
+    expect(GLOBALS).toContain("--font-sans: var(--font-app)");
+    expect(GLOBALS).toContain("--radius-lg: var(--radius)");
+  });
+});
diff --git a/workbench/control_plane/src/lib/theme/themes.ts b/workbench/control_plane/src/lib/theme/themes.ts
new file mode 100644
index 00000000..63de4317
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/themes.ts
@@ -0,0 +1,415 @@
+/**
+ * Built-in themes.
+ *
+ * Adding a theme means adding an entry here — no component, CSS or Tailwind
+ * change is required. `buildThemeCss()` turns each manifest into the
+ * `html[data-theme="…"]` custom-property scope the app renders against.
+ *
+ * Font stacks reference `var(--font-*)` handles registered by `next/font` in
+ * `src/app/layout.tsx`; a theme that wants a font nobody has loaded yet must
+ * add it there too. Stacks may name platform fonts first (Segoe UI, Cascadia
+ * Code) so a theme looks native where the OS can supply the real thing, and
+ * falls back to a self-hosted face everywhere else.
+ */
+
+import type { Theme } from "./types";
+
+// Shared font handles, so a typo lands in one place rather than four.
+const GEIST = "var(--font-geist-sans)";
+const GEIST_MONO = "var(--font-geist-mono)";
+const INTER = "var(--font-inter)";
+const ROBOTO = "var(--font-roboto)";
+const ROBOTO_MONO = "var(--font-roboto-mono)";
+
+const SYSTEM_FALLBACK = "system-ui, -apple-system, BlinkMacSystemFont, sans-serif";
+const MONO_FALLBACK = "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+
+/**
+ * RapidTool — the Control Plane's original look, preserved token-for-token.
+ *
+ * These values are the contract with `globals.css`: the `:root` / `.light`
+ * blocks there are the no-JavaScript fallback and must stay in sync. A unit
+ * test (`themes.test.ts`) parses that stylesheet and fails if the two drift.
+ */
+const rapidtool: Theme = {
+  id: "rapidtool",
+  name: "RapidTool",
+  description: "The CommandCenter original — deep blue-gray surfaces, professional blue, soft glass.",
+  iconPack: "lucide",
+  typography: {
+    app: `${GEIST}, ${SYSTEM_FALLBACK}`,
+    mono: `${GEIST_MONO}, ${MONO_FALLBACK}`,
+    headingLetterSpacing: "0em",
+    headingWeight: "700",
+    labelWeight: "500",
+  },
+  shape: { radius: "0.75rem", borderWidth: "1px" },
+  effects: {
+    glassBlur: "16px",
+    glassOpacity: "0.65",
+    glassOpacityStrong: "0.92",
+    glowStrength: "1",
+    shadow: "0 4px 16px hsl(0 0% 0% / 0.25)",
+    motionDuration: "0.2s",
+    motionEasing: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+  },
+  colors: {
+    dark: {
+      background: "hsl(220 13% 8%)",
+      foreground: "hsl(210 40% 98%)",
+      card: "hsl(220 13% 10%)",
+      cardForeground: "hsl(210 40% 98%)",
+      popover: "hsl(220 13% 12%)",
+      popoverForeground: "hsl(210 40% 98%)",
+      primary: "hsl(198 89% 50%)",
+      primaryForeground: "hsl(220 13% 8%)",
+      secondary: "hsl(220 13% 14%)",
+      secondaryForeground: "hsl(210 40% 98%)",
+      muted: "hsl(220 13% 15%)",
+      mutedForeground: "hsl(215 20% 65%)",
+      accent: "hsl(27 96% 61%)",
+      accentForeground: "hsl(220 13% 8%)",
+      destructive: "hsl(0 63% 60%)",
+      destructiveForeground: "hsl(210 40% 98%)",
+      border: "hsl(220 13% 16%)",
+      input: "hsl(220 13% 16%)",
+      ring: "hsl(198 89% 50%)",
+      success: "hsl(142 76% 47%)",
+      successForeground: "hsl(220 13% 8%)",
+      warning: "hsl(47 96% 53%)",
+      warningForeground: "hsl(220 13% 8%)",
+      sidebarBackground: "hsl(220 13% 9%)",
+      sidebarForeground: "hsl(210 40% 98%)",
+      sidebarPrimary: "hsl(198 89% 50%)",
+      sidebarPrimaryForeground: "hsl(220 13% 8%)",
+      sidebarAccent: "hsl(220 13% 13%)",
+      sidebarAccentForeground: "hsl(210 40% 98%)",
+      sidebarBorder: "hsl(220 13% 16%)",
+      sidebarRing: "hsl(198 89% 50%)",
+    },
+    light: {
+      background: "hsl(0 0% 100%)",
+      foreground: "hsl(222.2 84% 4.9%)",
+      card: "hsl(0 0% 100%)",
+      cardForeground: "hsl(222.2 84% 4.9%)",
+      popover: "hsl(0 0% 100%)",
+      popoverForeground: "hsl(222.2 84% 4.9%)",
+      primary: "hsl(198 89% 35%)",
+      primaryForeground: "hsl(0 0% 100%)",
+      secondary: "hsl(210 40% 96%)",
+      secondaryForeground: "hsl(222.2 84% 4.9%)",
+      muted: "hsl(210 40% 96%)",
+      mutedForeground: "hsl(215.4 16.3% 46.9%)",
+      accent: "hsl(27 96% 61%)",
+      accentForeground: "hsl(210 40% 98%)",
+      destructive: "hsl(0 84.2% 60.2%)",
+      destructiveForeground: "hsl(210 40% 98%)",
+      border: "hsl(214.3 31.8% 91.4%)",
+      input: "hsl(214.3 31.8% 91.4%)",
+      ring: "hsl(198 89% 50%)",
+      success: "hsl(142 76% 47%)",
+      successForeground: "hsl(210 40% 98%)",
+      warning: "hsl(47 96% 53%)",
+      warningForeground: "hsl(210 40% 98%)",
+      sidebarBackground: "hsl(0 0% 98%)",
+      sidebarForeground: "hsl(222.2 84% 4.9%)",
+      sidebarPrimary: "hsl(198 89% 45%)",
+      sidebarPrimaryForeground: "hsl(210 40% 98%)",
+      sidebarAccent: "hsl(210 40% 95%)",
+      sidebarAccentForeground: "hsl(222.2 84% 4.9%)",
+      sidebarBorder: "hsl(214.3 31.8% 91.4%)",
+      sidebarRing: "hsl(198 89% 50%)",
+    },
+  },
+};
+
+/**
+ * Fluent — Microsoft's design language (Fluent 2, the Windows 11 / Lumia
+ * lineage). Near-square corners, Segoe UI where the OS has it, acrylic
+ * instead of glow, and the Fluent System Icons pack.
+ */
+const fluent: Theme = {
+  id: "fluent",
+  name: "Fluent",
+  description: "Microsoft's Fluent 2 — squared corners, Segoe UI, acrylic surfaces, Fluent icons.",
+  inspiration: "Microsoft Fluent 2 design system",
+  iconPack: "fluent",
+  typography: {
+    app: `"Segoe UI Variable Text", "Segoe UI", ${INTER}, ${SYSTEM_FALLBACK}`,
+    mono: `"Cascadia Code", "Cascadia Mono", Consolas, ${GEIST_MONO}, ${MONO_FALLBACK}`,
+    display: `"Segoe UI Variable Display", "Segoe UI", ${INTER}, ${SYSTEM_FALLBACK}`,
+    headingLetterSpacing: "-0.005em",
+    headingWeight: "600",
+    labelWeight: "600",
+  },
+  shape: { radius: "0.25rem", borderWidth: "1px" },
+  effects: {
+    // Acrylic: a heavier blur over a more opaque surface than our default glass.
+    glassBlur: "30px",
+    glassOpacity: "0.82",
+    glassOpacityStrong: "0.95",
+    glowStrength: "0",
+    shadow: "0 2px 4px hsl(0 0% 0% / 0.14), 0 0 2px hsl(0 0% 0% / 0.12)",
+    motionDuration: "0.15s",
+    motionEasing: "cubic-bezier(0.33, 0, 0.67, 1)",
+  },
+  colors: {
+    dark: {
+      background: "hsl(0 0% 13%)",
+      foreground: "hsl(0 0% 98%)",
+      card: "hsl(0 0% 17%)",
+      cardForeground: "hsl(0 0% 98%)",
+      popover: "hsl(0 0% 19%)",
+      popoverForeground: "hsl(0 0% 98%)",
+      // Windows dark-mode accent (#4CC2FF) — the light-mode #0078D4 fails
+      // contrast on a near-black surface.
+      primary: "hsl(197 100% 65%)",
+      primaryForeground: "hsl(0 0% 10%)",
+      secondary: "hsl(0 0% 22%)",
+      secondaryForeground: "hsl(0 0% 98%)",
+      muted: "hsl(0 0% 20%)",
+      mutedForeground: "hsl(0 0% 72%)",
+      accent: "hsl(263 37% 62%)",
+      accentForeground: "hsl(0 0% 10%)",
+      destructive: "hsl(353 100% 80%)",
+      destructiveForeground: "hsl(0 0% 10%)",
+      border: "hsl(0 0% 24%)",
+      input: "hsl(0 0% 24%)",
+      ring: "hsl(197 100% 65%)",
+      success: "hsl(113 51% 59%)",
+      successForeground: "hsl(0 0% 10%)",
+      warning: "hsl(53 100% 49%)",
+      warningForeground: "hsl(0 0% 10%)",
+      sidebarBackground: "hsl(0 0% 15%)",
+      sidebarAccent: "hsl(0 0% 21%)",
+      sidebarBorder: "hsl(0 0% 22%)",
+    },
+    light: {
+      background: "hsl(0 0% 95%)",
+      foreground: "hsl(0 0% 11%)",
+      card: "hsl(0 0% 100%)",
+      cardForeground: "hsl(0 0% 11%)",
+      popover: "hsl(0 0% 100%)",
+      popoverForeground: "hsl(0 0% 11%)",
+      primary: "hsl(206 100% 42%)",
+      primaryForeground: "hsl(0 0% 100%)",
+      secondary: "hsl(0 0% 92%)",
+      secondaryForeground: "hsl(0 0% 11%)",
+      muted: "hsl(0 0% 94%)",
+      mutedForeground: "hsl(0 0% 38%)",
+      accent: "hsl(263 37% 56%)",
+      accentForeground: "hsl(0 0% 100%)",
+      destructive: "hsl(6 75% 44%)",
+      destructiveForeground: "hsl(0 0% 100%)",
+      border: "hsl(0 0% 88%)",
+      input: "hsl(0 0% 88%)",
+      ring: "hsl(206 100% 42%)",
+      success: "hsl(120 78% 27%)",
+      successForeground: "hsl(0 0% 100%)",
+      warning: "hsl(36 100% 31%)",
+      warningForeground: "hsl(0 0% 100%)",
+      sidebarBackground: "hsl(0 0% 98%)",
+      sidebarAccent: "hsl(0 0% 92%)",
+      sidebarBorder: "hsl(0 0% 88%)",
+    },
+  },
+};
+
+/**
+ * Material — Google's Material 3. Generously rounded, Roboto, flat surfaces
+ * with elevation expressed through shadow rather than blur or glow. Colours
+ * follow the M3 baseline scheme (source colour #6750A4).
+ */
+const material: Theme = {
+  id: "material",
+  name: "Material",
+  description: "Google's Material 3 — rounded shapes, Roboto, flat surfaces with elevation shadows.",
+  inspiration: "Google Material Design 3 baseline scheme",
+  iconPack: "material",
+  typography: {
+    app: `${ROBOTO}, Roboto, ${SYSTEM_FALLBACK}`,
+    mono: `${ROBOTO_MONO}, "Roboto Mono", ${MONO_FALLBACK}`,
+    headingLetterSpacing: "0em",
+    headingWeight: "500",
+    labelWeight: "500",
+  },
+  shape: { radius: "1rem", borderWidth: "1px" },
+  effects: {
+    // Material is flat: no blur, no glow, depth comes entirely from elevation.
+    glassBlur: "0px",
+    glassOpacity: "1",
+    glassOpacityStrong: "1",
+    glowStrength: "0",
+    shadow: "0 1px 2px hsl(0 0% 0% / 0.3), 0 2px 6px 2px hsl(0 0% 0% / 0.15)",
+    motionDuration: "0.2s",
+    motionEasing: "cubic-bezier(0.2, 0, 0, 1)",
+  },
+  colors: {
+    dark: {
+      background: "hsl(270 12% 9%)",
+      foreground: "hsl(274 21% 90%)",
+      card: "hsl(266 11% 14%)",
+      cardForeground: "hsl(274 21% 90%)",
+      popover: "hsl(264 11% 18%)",
+      popoverForeground: "hsl(274 21% 90%)",
+      primary: "hsl(258 100% 87%)",
+      primaryForeground: "hsl(261 58% 28%)",
+      secondary: "hsl(263 8% 22%)",
+      secondaryForeground: "hsl(274 21% 90%)",
+      muted: "hsl(270 8% 12%)",
+      mutedForeground: "hsl(266 16% 80%)",
+      accent: "hsl(340 60% 83%)",
+      accentForeground: "hsl(338 33% 22%)",
+      destructive: "hsl(2 65% 83%)",
+      destructiveForeground: "hsl(4 70% 22%)",
+      border: "hsl(266 8% 29%)",
+      input: "hsl(266 8% 29%)",
+      ring: "hsl(258 100% 87%)",
+      success: "hsl(140 45% 75%)",
+      successForeground: "hsl(142 60% 14%)",
+      warning: "hsl(35 90% 78%)",
+      warningForeground: "hsl(30 70% 16%)",
+      sidebarBackground: "hsl(270 8% 12%)",
+      sidebarAccent: "hsl(263 8% 22%)",
+      sidebarBorder: "hsl(266 8% 24%)",
+    },
+    light: {
+      background: "hsl(293 100% 98%)",
+      foreground: "hsl(270 8% 12%)",
+      card: "hsl(0 0% 100%)",
+      cardForeground: "hsl(270 8% 12%)",
+      popover: "hsl(275 33% 95%)",
+      popoverForeground: "hsl(270 8% 12%)",
+      primary: "hsl(258 35% 48%)",
+      primaryForeground: "hsl(0 0% 100%)",
+      secondary: "hsl(270 27% 92%)",
+      secondaryForeground: "hsl(270 8% 12%)",
+      muted: "hsl(274 21% 94%)",
+      mutedForeground: "hsl(266 8% 29%)",
+      accent: "hsl(339 21% 41%)",
+      accentForeground: "hsl(0 0% 100%)",
+      destructive: "hsl(3 71% 41%)",
+      destructiveForeground: "hsl(0 0% 100%)",
+      border: "hsl(266 16% 80%)",
+      input: "hsl(266 16% 80%)",
+      ring: "hsl(258 35% 48%)",
+      success: "hsl(139 68% 25%)",
+      successForeground: "hsl(0 0% 100%)",
+      warning: "hsl(43 100% 24%)",
+      warningForeground: "hsl(0 0% 100%)",
+      sidebarBackground: "hsl(280 43% 96%)",
+      sidebarAccent: "hsl(270 27% 92%)",
+      sidebarBorder: "hsl(266 16% 84%)",
+    },
+  },
+};
+
+/**
+ * Graphite — a quiet, near-monochrome workspace. Sharp corners, monospace
+ * headings, effects dialled off. Useful as a low-distraction mode and as
+ * proof that the font and effect axes are real and not colour-only.
+ */
+const graphite: Theme = {
+  id: "graphite",
+  name: "Graphite",
+  description: "Low-distraction monochrome — sharp corners, monospace headings, no glass or glow.",
+  iconPack: "lucide",
+  typography: {
+    app: `${GEIST}, ${SYSTEM_FALLBACK}`,
+    mono: `${GEIST_MONO}, ${MONO_FALLBACK}`,
+    display: `${GEIST_MONO}, ${MONO_FALLBACK}`,
+    headingLetterSpacing: "-0.02em",
+    headingWeight: "600",
+    labelWeight: "500",
+  },
+  shape: { radius: "0.125rem", borderWidth: "1px" },
+  effects: {
+    glassBlur: "8px",
+    glassOpacity: "0.94",
+    glassOpacityStrong: "0.98",
+    glowStrength: "0",
+    shadow: "0 1px 2px hsl(0 0% 0% / 0.2)",
+    motionDuration: "0.12s",
+    motionEasing: "ease-out",
+  },
+  colors: {
+    dark: {
+      background: "hsl(0 0% 7%)",
+      foreground: "hsl(0 0% 93%)",
+      card: "hsl(0 0% 10%)",
+      cardForeground: "hsl(0 0% 93%)",
+      popover: "hsl(0 0% 12%)",
+      popoverForeground: "hsl(0 0% 93%)",
+      primary: "hsl(0 0% 88%)",
+      primaryForeground: "hsl(0 0% 8%)",
+      secondary: "hsl(0 0% 15%)",
+      secondaryForeground: "hsl(0 0% 93%)",
+      muted: "hsl(0 0% 14%)",
+      mutedForeground: "hsl(0 0% 60%)",
+      accent: "hsl(35 90% 60%)",
+      accentForeground: "hsl(0 0% 8%)",
+      destructive: "hsl(0 70% 65%)",
+      destructiveForeground: "hsl(0 0% 8%)",
+      border: "hsl(0 0% 18%)",
+      input: "hsl(0 0% 18%)",
+      ring: "hsl(0 0% 70%)",
+      success: "hsl(140 55% 55%)",
+      successForeground: "hsl(0 0% 8%)",
+      warning: "hsl(45 90% 58%)",
+      warningForeground: "hsl(0 0% 8%)",
+      sidebarBackground: "hsl(0 0% 9%)",
+      sidebarAccent: "hsl(0 0% 14%)",
+      sidebarBorder: "hsl(0 0% 17%)",
+    },
+    light: {
+      background: "hsl(0 0% 99%)",
+      foreground: "hsl(0 0% 10%)",
+      card: "hsl(0 0% 100%)",
+      cardForeground: "hsl(0 0% 10%)",
+      popover: "hsl(0 0% 100%)",
+      popoverForeground: "hsl(0 0% 10%)",
+      primary: "hsl(0 0% 16%)",
+      primaryForeground: "hsl(0 0% 100%)",
+      secondary: "hsl(0 0% 95%)",
+      secondaryForeground: "hsl(0 0% 10%)",
+      muted: "hsl(0 0% 96%)",
+      mutedForeground: "hsl(0 0% 42%)",
+      accent: "hsl(30 90% 42%)",
+      accentForeground: "hsl(0 0% 100%)",
+      destructive: "hsl(0 70% 42%)",
+      destructiveForeground: "hsl(0 0% 100%)",
+      border: "hsl(0 0% 89%)",
+      input: "hsl(0 0% 89%)",
+      ring: "hsl(0 0% 40%)",
+      success: "hsl(140 65% 26%)",
+      successForeground: "hsl(0 0% 100%)",
+      warning: "hsl(35 95% 32%)",
+      warningForeground: "hsl(0 0% 100%)",
+      sidebarBackground: "hsl(0 0% 97%)",
+      sidebarAccent: "hsl(0 0% 94%)",
+      sidebarBorder: "hsl(0 0% 89%)",
+    },
+  },
+};
+
+/** Every built-in theme, in the order Settings presents them. */
+export const THEMES: Theme[] = [rapidtool, fluent, material, graphite];
+
+/** The theme used when nothing has been chosen and no org default is set. */
+export const DEFAULT_THEME_ID = rapidtool.id;
+
+const THEMES_BY_ID = new Map(THEMES.map((t) => [t.id, t]));
+
+/** Look up a theme by id, or `undefined` when the id is unknown. */
+export function findTheme(id: string | null | undefined): Theme | undefined {
+  return id ? THEMES_BY_ID.get(id) : undefined;
+}
+
+/**
+ * Resolve an id to a real theme, falling back to the default. Used on every
+ * boundary where an id arrives from outside the app (stored preference, API
+ * response, URL) and may name a theme that has since been removed.
+ */
+export function resolveTheme(id: string | null | undefined): Theme {
+  return findTheme(id) ?? THEMES_BY_ID.get(DEFAULT_THEME_ID)!;
+}
diff --git a/workbench/control_plane/src/lib/theme/types.ts b/workbench/control_plane/src/lib/theme/types.ts
new file mode 100644
index 00000000..90b3d195
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/types.ts
@@ -0,0 +1,227 @@
+/**
+ * Theming engine — manifest types.
+ *
+ * A theme is DATA, not code. Every visual decision the Control Plane makes is
+ * a design token, and a theme is a bundle of token values plus a choice of
+ * icon pack and font stacks. Swapping themes therefore restyles the whole app
+ * without touching a single component.
+ *
+ * Two axes, deliberately independent:
+ *   • style — "rapidtool" | "fluent" | "material" | …  (the theme identity)
+ *   • mode  — "dark" | "light"                          (per-theme variant)
+ *
+ * The style axis lives on `<html data-theme="…">`; the mode axis stays on the
+ * `.light` / `.dark` class managed by next-themes. Every theme MUST supply
+ * both modes, so the two axes never interfere.
+ */
+
+/**
+ * Semantic colour tokens. Names mirror the shadcn/ui convention already used
+ * across the app, which keeps us compatible with the wider ecosystem of theme
+ * generators (tweakcn and friends export exactly this vocabulary).
+ *
+ * Values are raw CSS colours — `hsl(…)`, `oklch(…)` or hex all work, because
+ * Tailwind v4 consumes them through `var()` without parsing.
+ */
+export type ColorTokens = {
+  background: string;
+  foreground: string;
+  card: string;
+  cardForeground: string;
+  popover: string;
+  popoverForeground: string;
+  primary: string;
+  primaryForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  muted: string;
+  mutedForeground: string;
+  accent: string;
+  accentForeground: string;
+  destructive: string;
+  destructiveForeground: string;
+  border: string;
+  input: string;
+  ring: string;
+  success: string;
+  successForeground: string;
+  warning: string;
+  warningForeground: string;
+
+  /**
+   * Sidebar surface overrides. Optional — when a theme omits one it falls back
+   * to the matching core token, so a theme only spells out what it wants to
+   * differ from the main surface.
+   */
+  sidebarBackground?: string;
+  sidebarForeground?: string;
+  sidebarPrimary?: string;
+  sidebarPrimaryForeground?: string;
+  sidebarAccent?: string;
+  sidebarAccentForeground?: string;
+  sidebarBorder?: string;
+  sidebarRing?: string;
+};
+
+/** Which colour tokens every theme must define (used by validation + tests). */
+export const REQUIRED_COLOR_TOKENS = [
+  "background",
+  "foreground",
+  "card",
+  "cardForeground",
+  "popover",
+  "popoverForeground",
+  "primary",
+  "primaryForeground",
+  "secondary",
+  "secondaryForeground",
+  "muted",
+  "mutedForeground",
+  "accent",
+  "accentForeground",
+  "destructive",
+  "destructiveForeground",
+  "border",
+  "input",
+  "ring",
+  "success",
+  "successForeground",
+  "warning",
+  "warningForeground",
+] as const satisfies readonly (keyof ColorTokens)[];
+
+/**
+ * Shape tokens — the geometry half of a theme's personality. Fluent is nearly
+ * square (2–4px), Material is heavily rounded (16–20px), our default sits in
+ * between at 12px.
+ */
+export type ShapeTokens = {
+  /** Base corner radius; drives `rounded-sm/md/lg` through `@theme inline`. */
+  radius: string;
+  /** Default border width for cards, inputs and outline buttons. */
+  borderWidth: string;
+};
+
+/**
+ * Typography tokens. Font *stacks* rather than family names, so a theme can
+ * prefer a platform font it can't bundle (Segoe UI on Windows) and fall back
+ * to a self-hosted one. The `var(--font-*)` handles are registered by
+ * `next/font` in the root layout.
+ */
+export type TypographyTokens = {
+  /** UI font stack → `--font-app`, consumed by Tailwind's `font-sans`. */
+  app: string;
+  /** Monospace stack → `--font-mono`, for code and metrics. */
+  mono: string;
+  /** Optional display stack for headings; defaults to `app`. */
+  display?: string;
+  /** Tracking applied to headings — Material runs tight, Fluent neutral. */
+  headingLetterSpacing: string;
+  /** Font weight used for headings and emphasised labels. */
+  headingWeight: string;
+  /** Font weight used for buttons and interactive labels. */
+  labelWeight: string;
+};
+
+/**
+ * Effect tokens — the "material" half of the personality: how surfaces blur,
+ * whether things glow, how motion feels. A flat design system (Material)
+ * switches glass and glow off and expresses depth with shadow instead.
+ */
+export type EffectTokens = {
+  /** Backdrop blur radius for `.tech-glass`; `0px` disables the effect. */
+  glassBlur: string;
+  /** Opacity of glass surfaces — 1 renders them fully opaque (flat themes). */
+  glassOpacity: string;
+  /**
+   * Opacity for glass that sits over page content — modals, drawers, popovers.
+   * Always at or above `glassOpacity`: these surfaces carry text that has to
+   * stay readable against whatever happens to be behind them.
+   */
+  glassOpacityStrong: string;
+  /** Strength multiplier for `.tech-glow`; `0` switches glowing off. */
+  glowStrength: string;
+  /** Elevation shadow used by cards and popovers. */
+  shadow: string;
+  /** Duration for `.tech-transition`. */
+  motionDuration: string;
+  /** Easing curve for `.tech-transition`. */
+  motionEasing: string;
+};
+
+/** Identifier of an icon pack understood by `<Icon>`. */
+export type IconPackId = "lucide" | "fluent" | "material";
+
+/** A complete theme definition. */
+export type Theme = {
+  /** URL/attribute-safe identifier — the `data-theme` value. */
+  id: string;
+  /** Human-readable name shown in Settings. */
+  name: string;
+  /** One-line description of the look, shown under the name in the gallery. */
+  description: string;
+  /** Attribution for themes derived from a public design system. */
+  inspiration?: string;
+  /** Icon pack this theme renders `<Icon>` with. */
+  iconPack: IconPackId;
+  typography: TypographyTokens;
+  shape: ShapeTokens;
+  effects: EffectTokens;
+  colors: {
+    dark: ColorTokens;
+    light: ColorTokens;
+  };
+};
+
+/** Colour mode, orthogonal to the theme's style identity. */
+export type ThemeMode = "dark" | "light";
+
+/** UI density — a user preference, not a theme property. */
+export type Density = "compact" | "default" | "comfortable";
+
+/** Scale factor applied to the root font size for each density setting. */
+export const DENSITY_SCALE: Record<Density, number> = {
+  compact: 0.92,
+  default: 1,
+  comfortable: 1.08,
+};
+
+/**
+ * The user's resolved appearance preferences. Persisted per user, with an
+ * org-wide default supplied by the backend so a company can standardise on
+ * one look while individuals opt out.
+ */
+export type AppearancePreferences = {
+  /** Theme id; `null` means "inherit the organisation default". */
+  themeId: string | null;
+  /** Colour mode; `null` means "inherit the organisation default". */
+  mode: ThemeMode | null;
+  /** UI density; `null` means "inherit the organisation default". */
+  density: Density | null;
+  /**
+   * Optional primary-colour override applied on top of the chosen theme.
+   * Any CSS colour; `null` keeps the theme's own primary.
+   */
+  accent: string | null;
+};
+
+/** Appearance settings as stored/served by the backend. */
+export type AppearanceSettings = {
+  /** Organisation-wide default, set by admins. */
+  org: {
+    themeId: string;
+    mode: ThemeMode;
+    density: Density;
+    /** When false, members may not deviate from the org default. */
+    allowUserOverride: boolean;
+  };
+  /** The signed-in member's personal overrides. */
+  user: AppearancePreferences;
+  /**
+   * False when the gateway has no appearance store, so `org` is the built-in
+   * default rather than something an admin chose. Settings uses this to
+   * explain why the org controls are unavailable instead of silently
+   * accepting edits that cannot be saved.
+   */
+  orgManaged: boolean;
+};

From 08c697d77ef8534fb9624f92dac3122b438c2d52 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 6 Aug 2026 08:21:00 +0000
Subject: [PATCH 03/10] feat(theming): persist the org-wide default, and gate
 themes on contrast

Two follow-ups to the theming engine: the company-wide switch now has a
backend, and a theme can no longer ship unreadable.

Org-wide default
- New org_settings table (145_org_settings.sql): a generic key -> JSON
  store for settings owned by the organisation rather than a person or a
  subsystem. Separate from model_config because appearance is not model
  configuration, and filing it there would make that table mean "any
  config we needed a row for".
- acb_common.org_settings mirrors acb_llm.model_config: sync psycopg, so
  it works from both sync helpers and async handlers. Reads degrade to a
  default (a preference that will not load should not break the page);
  writes raise (a silent no-op would tell an admin their change to
  everyone's UI had applied when it had not).
- GET/PUT /settings/appearance on the gateway. Reading is open to any
  signed-in member, since every client needs it on load; writing requires
  admin:settings:manage, since it changes everyone's UI. The row records
  who changed it and when, and Settings surfaces that.

The gateway deliberately does not know which themes exist. themeId is
stored as an opaque, selector-safe string, because validating it against
a copy of the frontend's THEMES list would mean a backend deploy for
every new theme, and a mismatch between the two lists would reject a
theme the app can actually render. Both layers validate independently and
both fall back per field, so a blob written by a different version of the
app degrades one key at a time rather than resetting the company's look.

Contrast gate
- contrast.ts implements WCAG 2.1 ratios over the colour forms the
  manifests use, returning null rather than a wrong number for anything
  it cannot parse, so an unchecked colour cannot masquerade as a pass.
- contrast.test.ts measures every theme x mode x text-bearing pair and
  fails below AA. Verified in both directions: an injected bad colour
  fails with the offending pair and ratio named, and fixing a recorded
  shortfall fails until its entry is deleted.
- Two shortfalls in the new themes are FIXED, not recorded: Fluent light
  primary (4.44:1) and Graphite light accent (3.71:1).
- Seven pairs in the original RapidTool palette are below AA. Those are
  the app's shipped colours, and changing them is a brand decision rather
  than a side effect of adding a test, so they are recorded as a ratchet
  with their measured ratios: they may improve, never regress. New themes
  get no such latitude.

Verified: 172 frontend unit tests, 22 new gateway tests, 3932 existing
python tests unaffected, production build clean. The migration and the
full store -> route round trip were exercised against a real Postgres 16,
including idempotent re-apply, upsert, an unknown-but-valid theme id
surviving, and a corrupt row degrading to defaults.

NOT done: infra/postgres/schema.generated.sql is unchanged. Replaying all
145 migrations needs the pgvector and age extensions, unavailable in this
environment, and the file must never be hand-edited. Run
scripts/apply_migrations.sh then scripts/dump_schema.sh on a real
deployment and commit the refreshed snapshot.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SyTtr9JJXCS8xNkzW5Fny5
---
 .../gateway/gateway/routes/settings.py        | 167 ++++++++++++++
 docs/THEMING_ENGINE_SCOPE.md                  |  40 +++-
 infra/postgres/145_org_settings.sql           |  41 ++++
 packages/acb_common/acb_common/__init__.py    |   3 +
 .../acb_common/acb_common/org_settings.py     |  93 ++++++++
 tests/unit/test_settings_appearance.py        | 206 ++++++++++++++++++
 workbench/control_plane/DESIGN_SYSTEM.md      |  25 ++-
 .../src/app/api/settings/appearance/route.ts  |  12 +-
 .../src/app/settings/appearance/page.tsx      |  20 +-
 .../src/lib/theme/contrast.test.ts            | 178 +++++++++++++++
 .../control_plane/src/lib/theme/contrast.ts   |  82 +++++++
 .../control_plane/src/lib/theme/themes.ts     |   8 +-
 .../control_plane/src/lib/theme/types.ts      |   7 +
 13 files changed, 858 insertions(+), 24 deletions(-)
 create mode 100644 infra/postgres/145_org_settings.sql
 create mode 100644 packages/acb_common/acb_common/org_settings.py
 create mode 100644 tests/unit/test_settings_appearance.py
 create mode 100644 workbench/control_plane/src/lib/theme/contrast.test.ts
 create mode 100644 workbench/control_plane/src/lib/theme/contrast.ts

diff --git a/apps/services/gateway/gateway/routes/settings.py b/apps/services/gateway/gateway/routes/settings.py
index 12168a47..71503200 100644
--- a/apps/services/gateway/gateway/routes/settings.py
+++ b/apps/services/gateway/gateway/routes/settings.py
@@ -1719,3 +1719,170 @@ async def get_cache_info(
             seen.add(c.provider)
             deduped.append(c)
     return deduped
+
+
+# ---------------------------------------------------------------------------
+# GET  /settings/appearance — the organisation's default look
+# PUT  /settings/appearance — change it (admin only)
+#
+# The theming engine (workbench/control_plane/src/lib/theme/) lets each member
+# pick a theme, but the ORG DEFAULT is what everyone who has not chosen sees,
+# and it is the only way to move the whole company onto one look at once.
+# That decision has to outlive a browser, so it lives here.
+#
+# WHAT THIS ROUTE DELIBERATELY DOES NOT KNOW
+# ------------------------------------------
+# Which themes exist. That list is `THEMES` in the frontend's themes.ts, and
+# the whole point of the engine is that adding a theme is one manifest entry —
+# if the gateway validated `theme_id` against a copy of that list, every new
+# theme would need a backend deploy too, and a mismatch between the two lists
+# would reject a theme the app can actually render.
+#
+# So `theme_id` is stored as an opaque identifier, constrained only to the
+# shape that is safe to put in a CSS attribute selector (the same rule
+# `buildThemeCss` enforces). The frontend re-validates on read and falls back
+# to its default for an id it does not recognise — which it must do anyway,
+# since a theme can be removed from the app long after this row named it.
+#
+# Personal preferences are NOT stored here. They are per-device, they change
+# often, and round-tripping them would add a request to every page load to
+# render something the pre-paint boot script has already applied from
+# localStorage.
+# ---------------------------------------------------------------------------
+
+_APPEARANCE_KEY = "appearance"
+
+#: Same rule as SAFE_ID in the frontend's css.ts: a theme id ends up inside
+#: `html[data-theme="…"]`, so restrict it to characters needing no escaping.
+_THEME_ID_RE = re.compile(r"^[a-z0-9][a-z0-9-]*$")
+
+_MODES = ("dark", "light")
+_DENSITIES = ("compact", "default", "comfortable")
+
+_APPEARANCE_DEFAULTS: dict[str, Any] = {
+    "themeId": "rapidtool",
+    "mode": "dark",
+    "density": "default",
+    "allowUserOverride": True,
+}
+
+
+class OrgAppearance(BaseModel):
+    """The organisation-wide default look."""
+
+    themeId: str = _APPEARANCE_DEFAULTS["themeId"]
+    mode: str = _APPEARANCE_DEFAULTS["mode"]
+    density: str = _APPEARANCE_DEFAULTS["density"]
+    allowUserOverride: bool = True
+
+
+class AppearanceResponse(BaseModel):
+    org: OrgAppearance
+    #: Who last changed it and when — an org-wide setting affects everybody,
+    #: so "who did this" is the first question when the company's UI changes.
+    updatedBy: str = ""
+    updatedAt: str = ""
+
+
+def _coerce_appearance(raw: Any) -> tuple[OrgAppearance, str, str]:
+    """Normalise a stored blob into a usable default.
+
+    Every field falls back independently: a row written by an older or newer
+    version of the app should degrade one key at a time rather than reset the
+    whole organisation's look.
+    """
+    blob = raw if isinstance(raw, dict) else {}
+    org = blob.get("org") if isinstance(blob.get("org"), dict) else blob
+
+    theme_id = str(org.get("themeId") or "")
+    if not _THEME_ID_RE.match(theme_id) or len(theme_id) > 64:
+        theme_id = _APPEARANCE_DEFAULTS["themeId"]
+
+    mode = org.get("mode")
+    if mode not in _MODES:
+        mode = _APPEARANCE_DEFAULTS["mode"]
+
+    density = org.get("density")
+    if density not in _DENSITIES:
+        density = _APPEARANCE_DEFAULTS["density"]
+
+    allow = org.get("allowUserOverride")
+    if not isinstance(allow, bool):
+        allow = _APPEARANCE_DEFAULTS["allowUserOverride"]
+
+    return (
+        OrgAppearance(
+            themeId=theme_id, mode=mode, density=density, allowUserOverride=allow
+        ),
+        str(blob.get("updatedBy") or ""),
+        str(blob.get("updatedAt") or ""),
+    )
+
+
+@router.get("/appearance", response_model=AppearanceResponse)
+async def get_appearance(
+    _user: UserContext = Depends(get_current_user),
+) -> AppearanceResponse:
+    """Return the org's default theme, mode and density.
+
+    Readable by any signed-in member, not just admins: every client needs it on
+    load to know what to render for someone who has not picked a theme.
+    """
+    from acb_common import load_org_setting  # noqa: PLC0415
+
+    org, updated_by, updated_at = _coerce_appearance(
+        load_org_setting(_APPEARANCE_KEY, default={})
+    )
+    return AppearanceResponse(org=org, updatedBy=updated_by, updatedAt=updated_at)
+
+
+@router.put(
+    "/appearance",
+    response_model=AppearanceResponse,
+    dependencies=[require_permission("admin:settings:manage")],
+)
+async def put_appearance(
+    body: OrgAppearance,
+    user: UserContext = Depends(get_current_user),
+) -> AppearanceResponse:
+    """Set the org's default look. Admin-gated — this changes everyone's UI."""
+    from datetime import datetime, timezone  # noqa: PLC0415
+
+    from acb_common import save_org_setting  # noqa: PLC0415
+
+    # Re-validate rather than trusting the model: pydantic types `mode` and
+    # `density` as plain strings (they are open vocabularies on the frontend),
+    # so the enum check has to happen here or an arbitrary value reaches every
+    # member's browser.
+    if body.mode not in _MODES:
+        raise HTTPException(status_code=400, detail=f"mode must be one of {list(_MODES)}")
+    if body.density not in _DENSITIES:
+        raise HTTPException(
+            status_code=400, detail=f"density must be one of {list(_DENSITIES)}"
+        )
+    if not _THEME_ID_RE.match(body.themeId) or len(body.themeId) > 64:
+        raise HTTPException(
+            status_code=400,
+            detail="themeId must be lowercase alphanumeric with hyphens",
+        )
+
+    updated_at = datetime.now(timezone.utc).isoformat()
+    save_org_setting(
+        _APPEARANCE_KEY,
+        {
+            "org": body.model_dump(),
+            "updatedBy": user.email or "",
+            "updatedAt": updated_at,
+        },
+        updated_by=user.email or "",
+    )
+    _log.info(
+        "settings.appearance.updated",
+        theme_id=body.themeId,
+        mode=body.mode,
+        allow_user_override=body.allowUserOverride,
+        by=user.email,
+    )
+    return AppearanceResponse(
+        org=body, updatedBy=user.email or "", updatedAt=updated_at
+    )
diff --git a/docs/THEMING_ENGINE_SCOPE.md b/docs/THEMING_ENGINE_SCOPE.md
index 56e08644..f9b2940a 100644
--- a/docs/THEMING_ENGINE_SCOPE.md
+++ b/docs/THEMING_ENGINE_SCOPE.md
@@ -41,18 +41,40 @@ rendered offline. All 28 sidebar glyphs swap; unmigrated call sites keep
 rendering Lucide, so the migration is incremental and never breaks.
 
 **Preferences** resolve member override → org default → built-in. Personal
-choices are per-browser; the org default comes from
-`GET/PUT /api/settings/appearance` and is cached locally so it survives first
-paint. Admins can lock the org to one theme. The route validates every field
-before forwarding, and falls back to built-in defaults with `orgManaged:
-false` when the gateway has no appearance store — so the feature works today
-without backend changes, and the UI says so rather than silently dropping edits.
-
-**Verified.** 37 unit tests (`src/lib/theme/*.test.ts`) plus 14 browser tests
+choices are per-browser. The **org default persists in Postgres** —
+`org_settings` (migration `145_org_settings.sql`), served by the gateway at
+`GET/PUT /settings/appearance` — and is cached locally so it survives first
+paint. Reading is open to any member (every client needs it on load); writing
+requires `admin:settings:manage`, since it changes everyone's UI. Admins can
+lock the org to one theme. Both layers validate independently, and the frontend
+still falls back with `orgManaged: false` if the migration has not been applied
+or the gateway is down.
+
+The gateway deliberately does **not** know which themes exist: `themeId` is an
+opaque, selector-safe string. Validating it against a copy of `THEMES` would
+mean a backend deploy for every new theme, and a mismatch would reject a theme
+the app can render.
+
+**Contrast is gated.** Every theme × mode × text pair is measured against WCAG
+AA and the build fails below it. Seven pairs in the original RapidTool palette
+predate the gate and are recorded as a ratchet — they may improve, never
+regress, and fixing one forces its entry to be deleted so the list cannot go
+stale. New themes must meet AA outright. Two shortfalls introduced by the new
+Fluent and Material themes were fixed rather than recorded.
+
+**Verified.** 172 frontend unit tests (manifests, CSS generation, icon
+registry, contrast), 22 gateway tests, and 14 browser tests
 (`e2e/theming.spec.ts`) asserting computed styles and real glyph swapping —
 the only place CSS cascade order can actually be checked. A drift guard parses
 `globals.css` and fails if its no-JavaScript fallback diverges from the default
-manifest.
+manifest. The migration and the full store→route round trip were exercised
+against a real Postgres 16.
+
+⚠️ **Deploy step:** `infra/postgres/schema.generated.sql` was NOT regenerated —
+replaying all 145 migrations needs the `pgvector` and `age` extensions, which
+were unavailable here, and the file must never be hand-edited. Run
+`scripts/apply_migrations.sh` then `scripts/dump_schema.sh` on a real
+deployment and commit the refreshed snapshot.
 
 **Not done (Phase 5).** Shared `<Button>` / `<Input>` primitives, and migrating
 the remaining ~155 files that still import `lucide-react` directly. Neither
diff --git a/infra/postgres/145_org_settings.sql b/infra/postgres/145_org_settings.sql
new file mode 100644
index 00000000..44bc03be
--- /dev/null
+++ b/infra/postgres/145_org_settings.sql
@@ -0,0 +1,41 @@
+-- ============================================================================
+-- 145_org_settings.sql — organisation-wide preference blobs
+-- ============================================================================
+-- A generic key → JSON store for settings that belong to the ORGANISATION
+-- rather than to a person or a subsystem. First consumer is the theming
+-- engine's org default (key 'appearance'), which decides what every member
+-- sees before they choose a theme for themselves.
+--
+-- Why a new table rather than reusing `model_config` (35_model_config.sql):
+-- that table is the LLM subsystem's store — its name, its migration and every
+-- caller are about tier overrides and enabled models. Appearance is not model
+-- configuration, and filing it there would make `model_config` mean "any
+-- config we happened to need a row for", which is how a table stops being
+-- searchable. Same shape, different subject.
+--
+-- Why blobs rather than typed columns: these are small, read-whole,
+-- written-whole preference documents whose shape is owned by the frontend
+-- (the set of themes lives in src/lib/theme/themes.ts). A typed column per
+-- field would mean a migration every time a theme gains a knob, to buy
+-- constraints the reader re-validates anyway — it treats an unknown theme id
+-- as "use the default", because a theme can be removed from the app long
+-- after a row naming it was written.
+--
+-- Bounded by construction: rows are keyed by a fixed vocabulary of setting
+-- names written by admin-gated routes, so this table holds a handful of rows,
+-- not one per user or per event.
+--
+-- Idempotent. Depends on: nothing (additive, standalone table).
+-- ============================================================================
+
+CREATE TABLE IF NOT EXISTS org_settings (
+    -- Setting name, e.g. 'appearance'. A closed vocabulary defined by the
+    -- routes that write it; there is no per-tenant key namespace because this
+    -- deployment is one organisation.
+    key        TEXT PRIMARY KEY,
+    value      JSONB NOT NULL DEFAULT '{}'::jsonb,
+    -- Who last changed it. Org-wide settings affect everybody, so "who set
+    -- this" is the first question asked when the whole company's UI changes.
+    updated_by TEXT NOT NULL DEFAULT '',
+    updated_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
diff --git a/packages/acb_common/acb_common/__init__.py b/packages/acb_common/acb_common/__init__.py
index 21269ddc..be778648 100644
--- a/packages/acb_common/acb_common/__init__.py
+++ b/packages/acb_common/acb_common/__init__.py
@@ -14,6 +14,7 @@
     recent_activity,
     refresh_run_presence,
 )
+from acb_common.org_settings import load_org_setting, save_org_setting
 from acb_common.settings import Settings, get_settings
 
 __all__ = [
@@ -26,8 +27,10 @@
     "get_logger",
     "get_run_context",
     "get_settings",
+    "load_org_setting",
     "publish_activity",
     "read_activity_since",
     "recent_activity",
     "refresh_run_presence",
+    "save_org_setting",
 ]
diff --git a/packages/acb_common/acb_common/org_settings.py b/packages/acb_common/acb_common/org_settings.py
new file mode 100644
index 00000000..3c1c6bba
--- /dev/null
+++ b/packages/acb_common/acb_common/org_settings.py
@@ -0,0 +1,93 @@
+"""DB-backed store for organisation-wide preference blobs.
+
+Settings that belong to the *organisation* rather than to a person or a
+subsystem — currently the theming engine's default look (key ``appearance``),
+which decides what every member sees before choosing a theme for themselves.
+
+Blobs are JSON, keyed by setting name, in the ``org_settings`` Postgres table
+(migration ``145_org_settings.sql``). Storing them in Postgres rather than a
+git-tracked file is the lesson of ``35_model_config.sql``: a config file is
+wiped by ``git reset --hard origin/main`` on every deploy, which is how hidden
+models kept reappearing. An org-wide theme reverting on deploy would be the
+same bug wearing different clothes.
+
+Uses a synchronous psycopg connection — no event loop and no extra dependency —
+so it can be called from both sync helpers and FastAPI async handlers, matching
+``acb_llm.model_config``.
+"""
+from __future__ import annotations
+
+import json
+import re
+from typing import Any
+from urllib.parse import unquote
+
+from acb_common._log import get_logger
+from acb_common.settings import get_settings
+
+_log = get_logger("org_settings")
+
+
+def _conninfo() -> str:
+    """Translate the SQLAlchemy ``database_url`` into a psycopg conninfo string."""
+    db_url = str(get_settings().database_url)
+    m = re.match(
+        r"postgresql(?:\+\w+)?://([^:]+):([^@]+)@([^:/]+):?(\d+)?/(.+)",
+        db_url,
+    )
+    if not m:
+        raise RuntimeError(f"Cannot parse database_url: {db_url[:50]}...")
+    user, password, host, port, dbname = m.groups()
+    return (
+        f"host={host} port={port or 5432} dbname={dbname} "
+        f"user={user} password={unquote(password)}"
+    )
+
+
+def load_org_setting(key: str, default: Any = None) -> Any:
+    """Return the JSON blob stored under ``key``.
+
+    Returns ``default`` when the row is absent or the database is unreachable.
+    Read failures are deliberately soft: an org-wide *preference* that cannot
+    be loaded should leave the app on its built-in default, not break the page
+    that asked for it.
+    """
+    import psycopg  # noqa: PLC0415
+
+    try:
+        with psycopg.connect(_conninfo(), connect_timeout=5) as conn:
+            with conn.cursor() as cur:
+                cur.execute("SELECT value FROM org_settings WHERE key = %s", (key,))
+                row = cur.fetchone()
+        if row is None or row[0] is None:
+            return default
+        val = row[0]
+        # psycopg adapts jsonb → dict/list, but tolerate a text value too.
+        return json.loads(val) if isinstance(val, str) else val
+    except Exception as exc:  # noqa: BLE001
+        _log.warning("org_settings.load_failed", key=key, error=str(exc))
+        return default
+
+
+def save_org_setting(key: str, value: Any, updated_by: str = "") -> None:
+    """Upsert a JSON blob under ``key``.
+
+    Raises on failure, unlike :func:`load_org_setting`. A write that silently
+    did nothing would tell an admin their change to everyone's UI had been
+    applied when it had not.
+    """
+    import psycopg  # noqa: PLC0415
+
+    with psycopg.connect(_conninfo(), connect_timeout=5) as conn:
+        with conn.cursor() as cur:
+            cur.execute(
+                "INSERT INTO org_settings (key, value, updated_by, updated_at) "
+                "VALUES (%s, %s::jsonb, %s, now()) "
+                "ON CONFLICT (key) DO UPDATE "
+                "SET value = EXCLUDED.value, "
+                "    updated_by = EXCLUDED.updated_by, "
+                "    updated_at = now()",
+                (key, json.dumps(value), updated_by),
+            )
+        conn.commit()
+    _log.info("org_settings.saved", key=key, updated_by=updated_by)
diff --git a/tests/unit/test_settings_appearance.py b/tests/unit/test_settings_appearance.py
new file mode 100644
index 00000000..739a09db
--- /dev/null
+++ b/tests/unit/test_settings_appearance.py
@@ -0,0 +1,206 @@
+"""Tests for the organisation-wide appearance default (Settings → Appearance).
+
+This endpoint decides what EVERY member's UI looks like, so the interesting
+cases are all about degrading safely: a blob written by a different version of
+the app, a theme that has since been removed, or a value that would end up
+inside a CSS attribute selector.
+
+The deliberate non-behaviour pinned here is that the gateway does not know
+which themes exist — that list lives in the frontend, and validating against a
+copy of it would mean a backend deploy for every new theme.
+"""
+from __future__ import annotations
+
+import pytest
+from fastapi import HTTPException
+from gateway.routes import settings as st
+
+
+# ── Reading a stored blob ───────────────────────────────────────────────────
+
+def test_absent_row_yields_the_built_in_default() -> None:
+    """A deployment that has never set an org default still renders."""
+    org, updated_by, updated_at = st._coerce_appearance({})
+    assert org.themeId == "rapidtool"
+    assert org.mode == "dark"
+    assert org.density == "default"
+    assert org.allowUserOverride is True
+    assert updated_by == ""
+    assert updated_at == ""
+
+
+def test_stored_values_round_trip() -> None:
+    org, updated_by, updated_at = st._coerce_appearance(
+        {
+            "org": {
+                "themeId": "fluent",
+                "mode": "light",
+                "density": "compact",
+                "allowUserOverride": False,
+            },
+            "updatedBy": "someone@fracktal.in",
+            "updatedAt": "2026-08-06T00:00:00+00:00",
+        }
+    )
+    assert org.themeId == "fluent"
+    assert org.mode == "light"
+    assert org.density == "compact"
+    assert org.allowUserOverride is False
+    assert updated_by == "someone@fracktal.in"
+    assert updated_at == "2026-08-06T00:00:00+00:00"
+
+
+def test_a_bare_blob_without_the_org_wrapper_is_accepted() -> None:
+    """Tolerates the flat shape so an older row is not read as empty."""
+    org, _, _ = st._coerce_appearance({"themeId": "material", "mode": "light"})
+    assert org.themeId == "material"
+    assert org.mode == "light"
+
+
+@pytest.mark.parametrize("raw", [None, [], "nonsense", 42])
+def test_a_non_dict_blob_degrades_to_defaults(raw) -> None:
+    org, _, _ = st._coerce_appearance(raw)
+    assert org.themeId == "rapidtool"
+
+
+def test_each_field_falls_back_independently() -> None:
+    """One unrecognised key must not reset the whole organisation's look."""
+    org, _, _ = st._coerce_appearance(
+        {"themeId": "fluent", "mode": "sideways", "density": "enormous"}
+    )
+    assert org.themeId == "fluent"  # kept
+    assert org.mode == "dark"  # defaulted
+    assert org.density == "default"  # defaulted
+
+
+@pytest.mark.parametrize(
+    "theme_id",
+    [
+        'a"b',  # would close the attribute selector
+        "a b",
+        "Fluent",  # uppercase needs escaping in the generated selector
+        "-leading",
+        "a{b}",
+        "",
+        "x" * 65,  # over the length cap
+    ],
+)
+def test_unsafe_theme_ids_are_rejected_on_read(theme_id: str) -> None:
+    """A stored id reaches `html[data-theme="…"]`; anything needing escaping
+    must not survive the read."""
+    org, _, _ = st._coerce_appearance({"themeId": theme_id})
+    assert org.themeId == "rapidtool"
+
+
+def test_an_unknown_but_well_formed_theme_id_is_preserved() -> None:
+    """The gateway does NOT own the theme list.
+
+    A theme the frontend added without a backend deploy has to survive this
+    round trip, or shipping a theme would require changing two services. The
+    frontend re-validates and falls back for an id it cannot render.
+    """
+    org, _, _ = st._coerce_appearance({"themeId": "some-future-theme"})
+    assert org.themeId == "some-future-theme"
+
+
+# ── Writing ─────────────────────────────────────────────────────────────────
+
+class _User:
+    email = "admin@fracktal.in"
+
+
+def _saved(monkeypatch) -> list[tuple]:
+    calls: list[tuple] = []
+    import acb_common
+
+    monkeypatch.setattr(
+        acb_common,
+        "save_org_setting",
+        lambda key, value, updated_by="": calls.append((key, value, updated_by)),
+    )
+    return calls
+
+
+async def _put(body):
+    return await st.put_appearance(body, user=_User())
+
+
+@pytest.mark.asyncio
+async def test_put_persists_the_default_with_attribution(monkeypatch) -> None:
+    calls = _saved(monkeypatch)
+    body = st.OrgAppearance(
+        themeId="material", mode="light", density="comfortable", allowUserOverride=False
+    )
+
+    result = await _put(body)
+
+    assert len(calls) == 1
+    key, value, updated_by = calls[0]
+    assert key == "appearance"
+    assert value["org"]["themeId"] == "material"
+    assert value["org"]["allowUserOverride"] is False
+    # Org-wide settings affect everybody, so who changed it is part of the row.
+    assert value["updatedBy"] == "admin@fracktal.in"
+    assert updated_by == "admin@fracktal.in"
+    assert result.org.themeId == "material"
+    assert result.updatedBy == "admin@fracktal.in"
+    assert result.updatedAt
+
+
+@pytest.mark.asyncio
+@pytest.mark.parametrize(
+    "field,value",
+    [
+        ("mode", "sideways"),
+        ("density", "enormous"),
+        ("themeId", 'evil"]{--x:1}'),
+        ("themeId", ""),
+    ],
+)
+async def test_put_rejects_invalid_values_before_they_reach_anyone(
+    monkeypatch, field: str, value: str
+) -> None:
+    """Pydantic types these as plain strings because they are open
+    vocabularies on the frontend, so the enum check has to happen in the
+    handler — otherwise an arbitrary value lands in every member's browser."""
+    calls = _saved(monkeypatch)
+    body = st.OrgAppearance(**{field: value})
+
+    with pytest.raises(HTTPException) as exc:
+        await _put(body)
+
+    assert exc.value.status_code == 400
+    assert calls == [], "a rejected write must not touch the store"
+
+
+def _required_permissions(route) -> set[str]:
+    """Permission strings a route's dependencies enforce.
+
+    `require_permission` closes over its arguments rather than exposing them,
+    so the only way to assert the gate from outside is to read the closure.
+    Worth the reach: the alternative is trusting that a decorator nobody
+    checked is still there.
+    """
+    found: set[str] = set()
+    for dep in getattr(route, "dependencies", []):
+        fn = getattr(dep, "dependency", None)
+        for cell in getattr(fn, "__closure__", None) or ():
+            value = cell.cell_contents
+            if isinstance(value, tuple) and all(isinstance(v, str) for v in value):
+                found.update(value)
+    return found
+
+
+def test_write_is_gated_on_admin_settings_manage() -> None:
+    """Anyone may READ the org default (every client needs it on load), but
+    changing everybody's UI is an admin action."""
+    routes = {
+        (r.path, tuple(sorted(r.methods))): r
+        for r in st.router.routes
+        if hasattr(r, "methods")
+    }
+    put = routes[("/settings/appearance", ("PUT",))]
+    get = routes[("/settings/appearance", ("GET",))]
+
+    assert "admin:settings:manage" in _required_permissions(put)
+    assert _required_permissions(get) == set()
diff --git a/workbench/control_plane/DESIGN_SYSTEM.md b/workbench/control_plane/DESIGN_SYSTEM.md
index e051a576..e8ffd0d9 100644
--- a/workbench/control_plane/DESIGN_SYSTEM.md
+++ b/workbench/control_plane/DESIGN_SYSTEM.md
@@ -304,9 +304,22 @@ session. They must stay identical to the `rapidtool` manifest —
 
 **Preference resolution:** member override → organisation default → built-in
 default. Members' choices are per-browser (localStorage); the org default is
-served by the gateway and cached locally so it survives the first paint. An
-admin can lock the org to one theme by turning off personal overrides.
-
-Coverage: `src/lib/theme/*.test.ts` (manifests, CSS generation, icon registry)
-and `e2e/theming.spec.ts` (computed styles and real glyph swapping in a
-browser — the only place cascade order can actually be verified).
+stored in Postgres (`org_settings`, migration 145) and served by the gateway at
+`GET/PUT /settings/appearance`, then cached locally so it survives the first
+paint. Writing it needs `admin:settings:manage` — it changes everyone's UI.
+An admin can lock the org to one theme by turning off personal overrides.
+
+The gateway deliberately does **not** know which themes exist. `themeId` is
+stored as an opaque, selector-safe string, because validating it against a copy
+of `THEMES` would mean a backend deploy for every new theme. The frontend
+re-validates on read and falls back for an id it cannot render.
+
+**Contrast is gated.** `contrast.test.ts` measures every theme × mode × text
+pair against WCAG AA and fails the build below it. Seven pairs in the original
+RapidTool palette predate the gate and are recorded in `KNOWN_SHORTFALLS` as a
+ratchet — they may improve, never regress, and fixing one forces its entry to
+be deleted. **New themes get no such latitude: they must meet AA outright.**
+
+Coverage: `src/lib/theme/*.test.ts` (manifests, CSS generation, icon registry,
+contrast) and `e2e/theming.spec.ts` (computed styles and real glyph swapping in
+a browser — the only place cascade order can actually be verified).
diff --git a/workbench/control_plane/src/app/api/settings/appearance/route.ts b/workbench/control_plane/src/app/api/settings/appearance/route.ts
index 1e3daca0..dad03649 100644
--- a/workbench/control_plane/src/app/api/settings/appearance/route.ts
+++ b/workbench/control_plane/src/app/api/settings/appearance/route.ts
@@ -7,10 +7,12 @@
  * server-side consequence, and round-tripping them would add a request to
  * every page load to render something the boot script has already applied.
  *
- * The gateway may not have an appearance store yet. Rather than failing the
- * page, GET falls back to the built-in defaults and reports `orgManaged:
- * false`, which is what Settings uses to explain that the org-wide controls
- * are unavailable in this deployment.
+ * The gateway serves the org half from the `org_settings` table (migration
+ * 145). A deployment that has not applied that migration, or whose gateway is
+ * down, still has to render: GET falls back to the built-in defaults and
+ * reports `orgManaged: false`, which is what Settings uses to explain that the
+ * org-wide controls are unavailable rather than silently accepting edits that
+ * cannot be saved.
  */
 
 import { NextRequest, NextResponse } from "next/server";
@@ -90,6 +92,8 @@ export async function GET(): Promise<NextResponse> {
         org: normaliseOrg(data?.org ?? data),
         user: EMPTY_USER,
         orgManaged: true,
+        updatedBy: typeof data?.updatedBy === "string" ? data.updatedBy : "",
+        updatedAt: typeof data?.updatedAt === "string" ? data.updatedAt : "",
       } satisfies AppearanceSettings);
     }
   } catch {
diff --git a/workbench/control_plane/src/app/settings/appearance/page.tsx b/workbench/control_plane/src/app/settings/appearance/page.tsx
index 06872e19..3b3e9af8 100644
--- a/workbench/control_plane/src/app/settings/appearance/page.tsx
+++ b/workbench/control_plane/src/app/settings/appearance/page.tsx
@@ -304,11 +304,20 @@ function OrganisationSettings() {
           const body = await res.json().catch(() => ({}));
           setMessage({
             kind: "error",
-            text: body?.error ?? `Could not save (${res.status}).`,
+            text:
+              res.status === 403
+                ? "Only an administrator can change the organisation default."
+                : (body?.error ?? body?.detail ?? `Could not save (${res.status}).`),
           });
           return;
         }
-        setSettings({ ...settings, org: next });
+        const saved = await res.json().catch(() => null);
+        setSettings({
+          ...settings,
+          org: next,
+          updatedBy: saved?.updatedBy ?? settings.updatedBy,
+          updatedAt: saved?.updatedAt ?? settings.updatedAt,
+        });
         // Push it into the live store too, so the admin sees the effect
         // immediately rather than on the next reload.
         setOrgDefaults(next);
@@ -398,6 +407,13 @@ function OrganisationSettings() {
           {message.text}
         </p>
       )}
+
+      {settings.orgManaged && settings.updatedBy && (
+        <p className="text-[11px] text-muted-foreground">
+          Last changed by {settings.updatedBy}
+          {settings.updatedAt && ` on ${new Date(settings.updatedAt).toLocaleString()}`}.
+        </p>
+      )}
     </div>
   );
 }
diff --git a/workbench/control_plane/src/lib/theme/contrast.test.ts b/workbench/control_plane/src/lib/theme/contrast.test.ts
new file mode 100644
index 00000000..0e27a2f0
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/contrast.test.ts
@@ -0,0 +1,178 @@
+/**
+ * Contrast gate — every theme, every mode.
+ *
+ * Themes are colours picked by eye, and the failure they invite is a pair that
+ * reads fine to the author and not at all to someone on a dimmer screen. This
+ * runs the arithmetic so a new theme cannot ship unreadable.
+ *
+ * The RapidTool exceptions
+ * ------------------------
+ * Seven pairs in the default theme are below AA. They are the app's ORIGINAL
+ * colours, preserved token-for-token when the theming engine was built, and
+ * fixing them means changing how the shipped product looks — a design decision
+ * for whoever owns the brand, not a side effect of adding a test.
+ *
+ * So they are recorded below with their measured ratios and treated as a
+ * ratchet: each may not get worse, and `every recorded shortfall is still a
+ * shortfall` fails once one is fixed, which forces the entry to be deleted
+ * rather than quietly outliving the problem. New themes get no such latitude.
+ */
+
+import { describe, expect, it } from "vitest";
+
+import { AA_LARGE_TEXT, AA_NORMAL_TEXT, contrast, parseColor } from "./contrast";
+import { THEMES } from "./themes";
+import type { ColorTokens } from "./types";
+
+type Pair = {
+  fg: keyof ColorTokens;
+  bg: keyof ColorTokens;
+  min: number;
+};
+
+/**
+ * Token pairs that actually carry text or convey state.
+ *
+ * `min` is AA for body text (4.5) where the pair renders words, and the
+ * large-text/UI threshold (3.0) where it renders a status dot, an icon or a
+ * chart mark against a surface.
+ */
+const PAIRS: Pair[] = [
+  { fg: "foreground", bg: "background", min: AA_NORMAL_TEXT },
+  { fg: "cardForeground", bg: "card", min: AA_NORMAL_TEXT },
+  { fg: "popoverForeground", bg: "popover", min: AA_NORMAL_TEXT },
+  { fg: "mutedForeground", bg: "background", min: AA_NORMAL_TEXT },
+  { fg: "mutedForeground", bg: "card", min: AA_NORMAL_TEXT },
+  { fg: "primaryForeground", bg: "primary", min: AA_NORMAL_TEXT },
+  { fg: "secondaryForeground", bg: "secondary", min: AA_NORMAL_TEXT },
+  { fg: "accentForeground", bg: "accent", min: AA_NORMAL_TEXT },
+  { fg: "destructiveForeground", bg: "destructive", min: AA_NORMAL_TEXT },
+  { fg: "successForeground", bg: "success", min: AA_NORMAL_TEXT },
+  { fg: "warningForeground", bg: "warning", min: AA_NORMAL_TEXT },
+  // Status colours used as text/dots directly on a surface.
+  { fg: "primary", bg: "background", min: AA_LARGE_TEXT },
+  { fg: "primary", bg: "card", min: AA_LARGE_TEXT },
+  { fg: "destructive", bg: "card", min: AA_LARGE_TEXT },
+  { fg: "success", bg: "card", min: AA_LARGE_TEXT },
+  { fg: "warning", bg: "card", min: AA_LARGE_TEXT },
+];
+
+const key = (themeId: string, mode: string, p: Pair) => `${themeId}/${mode}/${p.fg}-on-${p.bg}`;
+
+/**
+ * Pre-existing shortfalls in the original design, with the ratio measured when
+ * the gate was added. Values may improve; they may not regress.
+ *
+ * Every entry here is a real readability problem for someone. Removing one
+ * means picking a new colour — see the module comment.
+ */
+const KNOWN_SHORTFALLS: Record<string, number> = {
+  "rapidtool/dark/destructiveForeground-on-destructive": 3.63,
+  "rapidtool/light/accentForeground-on-accent": 2.16,
+  "rapidtool/light/destructiveForeground-on-destructive": 3.59,
+  "rapidtool/light/successForeground-on-success": 1.9,
+  "rapidtool/light/warningForeground-on-warning": 1.5,
+  "rapidtool/light/success-on-card": 1.99,
+  "rapidtool/light/warning-on-card": 1.57,
+};
+
+/** Float noise guard — ratios are compared to two decimal places. */
+const EPSILON = 0.01;
+
+type Measured = { id: string; ratio: number; min: number };
+
+const measurements: Measured[] = [];
+for (const theme of THEMES) {
+  for (const mode of ["dark", "light"] as const) {
+    for (const pair of PAIRS) {
+      const fg = theme.colors[mode][pair.fg];
+      const bg = theme.colors[mode][pair.bg];
+      if (!fg || !bg) continue;
+      const ratio = contrast(fg, bg);
+      if (ratio === null) continue;
+      measurements.push({ id: key(theme.id, mode, pair), ratio, min: pair.min });
+    }
+  }
+}
+
+describe("contrast maths", () => {
+  it("computes the reference ratios correctly", () => {
+    // Black on white is the WCAG maximum; a colour against itself is 1.
+    expect(contrast("#000000", "#ffffff")).toBeCloseTo(21, 1);
+    expect(contrast("#ffffff", "#ffffff")).toBeCloseTo(1, 5);
+    // hsl and hex forms of the same colour must agree.
+    expect(contrast("hsl(0 0% 0%)", "#ffffff")).toBeCloseTo(21, 1);
+  });
+
+  it("returns null rather than a wrong number for colours it cannot parse", () => {
+    // A silent 0 or 21 here would turn an unchecked colour into a pass.
+    expect(parseColor("var(--primary)")).toBeNull();
+    expect(contrast("color-mix(in srgb, red, blue)", "#fff")).toBeNull();
+  });
+
+  it("parses every colour form the manifests use", () => {
+    for (const theme of THEMES) {
+      for (const mode of ["dark", "light"] as const) {
+        for (const [token, value] of Object.entries(theme.colors[mode])) {
+          if (!value) continue;
+          expect(parseColor(value as string), `${theme.id}/${mode}/${token}`).not.toBeNull();
+        }
+      }
+    }
+  });
+});
+
+describe("theme contrast", () => {
+  it("checks a meaningful number of pairs", () => {
+    // Guards against a refactor that silently stops measuring anything.
+    expect(measurements.length).toBeGreaterThan(100);
+  });
+
+  it.each(measurements.map((m) => [m.id, m] as const))(
+    "%s meets WCAG AA",
+    (_id, m) => {
+      const allowance = KNOWN_SHORTFALLS[m.id];
+      if (allowance !== undefined) {
+        // Ratchet: a recorded shortfall may improve, never regress.
+        expect(
+          m.ratio,
+          `${m.id} regressed below its recorded ${allowance}:1`,
+        ).toBeGreaterThanOrEqual(allowance - EPSILON);
+        return;
+      }
+      expect(
+        m.ratio,
+        `${m.id} is ${m.ratio.toFixed(2)}:1, below the required ${m.min}:1`,
+      ).toBeGreaterThanOrEqual(m.min);
+    },
+  );
+
+  it("every recorded shortfall is still a shortfall", () => {
+    // Keeps the exception list honest: fix a colour and this fails until the
+    // entry is deleted, so the list can never grant latitude nobody needs.
+    const byId = new Map(measurements.map((m) => [m.id, m]));
+    const nowPassing = Object.keys(KNOWN_SHORTFALLS).filter((id) => {
+      const m = byId.get(id);
+      return m && m.ratio >= m.min;
+    });
+    expect(
+      nowPassing,
+      "these now pass — delete them from KNOWN_SHORTFALLS",
+    ).toEqual([]);
+  });
+
+  it("every recorded shortfall names a pair that is still measured", () => {
+    // A renamed token would otherwise leave a dead entry excusing nothing.
+    const ids = new Set(measurements.map((m) => m.id));
+    const stale = Object.keys(KNOWN_SHORTFALLS).filter((id) => !ids.has(id));
+    expect(stale, "these no longer correspond to a measured pair").toEqual([]);
+  });
+
+  it("confines the exception list to the original theme", () => {
+    // Themes added after the gate went in have no excuse for shipping below AA.
+    const offenders = Object.keys(KNOWN_SHORTFALLS).filter(
+      (id) => !id.startsWith("rapidtool/"),
+    );
+    expect(offenders, "new themes must meet AA outright").toEqual([]);
+  });
+});
diff --git a/workbench/control_plane/src/lib/theme/contrast.ts b/workbench/control_plane/src/lib/theme/contrast.ts
new file mode 100644
index 00000000..0f6dc471
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/contrast.ts
@@ -0,0 +1,82 @@
+/**
+ * WCAG contrast maths for theme validation.
+ *
+ * A theme is a few dozen colours chosen by eye, and the failure mode is
+ * specific: a pair that looks fine to the author is unreadable for someone
+ * else, on a worse screen, in sunlight. Checking it is arithmetic, so there is
+ * no reason for a theme to ship unchecked — see `contrast.test.ts`, which runs
+ * every shipped theme through this.
+ *
+ * Supports the colour forms the manifests actually use. Anything else returns
+ * `null` rather than a wrong number, so an unparseable colour shows up as
+ * "not checked" instead of silently passing.
+ */
+
+export type Rgb = { r: number; g: number; b: number };
+
+/** WCAG 2.1 AA thresholds. */
+export const AA_NORMAL_TEXT = 4.5;
+export const AA_LARGE_TEXT = 3;
+
+function hslToRgb(h: number, s: number, l: number): Rgb {
+  const sat = s / 100;
+  const lig = l / 100;
+  const a = sat * Math.min(lig, 1 - lig);
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12;
+    return lig - a * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)));
+  };
+  return { r: f(0), g: f(8), b: f(4) };
+}
+
+/**
+ * Parse a CSS colour into normalised 0–1 RGB, or `null` when the form is not
+ * one this checker understands.
+ */
+export function parseColor(value: string): Rgb | null {
+  const v = value.trim().toLowerCase();
+
+  const hsl = v.match(
+    /^hsla?\(\s*([\d.]+)(?:deg)?\s*[, ]\s*([\d.]+)%\s*[, ]\s*([\d.]+)%/,
+  );
+  if (hsl) return hslToRgb(Number(hsl[1]), Number(hsl[2]), Number(hsl[3]));
+
+  const rgb = v.match(/^rgba?\(\s*([\d.]+)\s*[, ]\s*([\d.]+)\s*[, ]\s*([\d.]+)/);
+  if (rgb) {
+    return { r: Number(rgb[1]) / 255, g: Number(rgb[2]) / 255, b: Number(rgb[3]) / 255 };
+  }
+
+  const hex = v.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/);
+  if (hex) {
+    const h = hex[1].length === 3 ? [...hex[1]].map((c) => c + c).join("") : hex[1];
+    return {
+      r: parseInt(h.slice(0, 2), 16) / 255,
+      g: parseInt(h.slice(2, 4), 16) / 255,
+      b: parseInt(h.slice(4, 6), 16) / 255,
+    };
+  }
+
+  return null;
+}
+
+/** Relative luminance, per WCAG 2.1. */
+export function luminance({ r, g, b }: Rgb): number {
+  const channel = (c: number) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+
+/** Contrast ratio between two colours, 1–21. Order does not matter. */
+export function contrastRatio(a: Rgb, b: Rgb): number {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+/**
+ * Ratio between two CSS colour strings, or `null` if either cannot be parsed.
+ */
+export function contrast(fg: string, bg: string): number | null {
+  const a = parseColor(fg);
+  const b = parseColor(bg);
+  if (!a || !b) return null;
+  return contrastRatio(a, b);
+}
diff --git a/workbench/control_plane/src/lib/theme/themes.ts b/workbench/control_plane/src/lib/theme/themes.ts
index 63de4317..d76e0efa 100644
--- a/workbench/control_plane/src/lib/theme/themes.ts
+++ b/workbench/control_plane/src/lib/theme/themes.ts
@@ -191,7 +191,9 @@ const fluent: Theme = {
       cardForeground: "hsl(0 0% 11%)",
       popover: "hsl(0 0% 100%)",
       popoverForeground: "hsl(0 0% 11%)",
-      primary: "hsl(206 100% 42%)",
+      // 41% rather than Fluent's nominal 42%: white on 42% measures
+      // 4.44:1, a hair under AA. See contrast.test.ts.
+      primary: "hsl(206 100% 41%)",
       primaryForeground: "hsl(0 0% 100%)",
       secondary: "hsl(0 0% 92%)",
       secondaryForeground: "hsl(0 0% 11%)",
@@ -203,7 +205,7 @@ const fluent: Theme = {
       destructiveForeground: "hsl(0 0% 100%)",
       border: "hsl(0 0% 88%)",
       input: "hsl(0 0% 88%)",
-      ring: "hsl(206 100% 42%)",
+      ring: "hsl(206 100% 41%)",
       success: "hsl(120 78% 27%)",
       successForeground: "hsl(0 0% 100%)",
       warning: "hsl(36 100% 31%)",
@@ -374,7 +376,7 @@ const graphite: Theme = {
       secondaryForeground: "hsl(0 0% 10%)",
       muted: "hsl(0 0% 96%)",
       mutedForeground: "hsl(0 0% 42%)",
-      accent: "hsl(30 90% 42%)",
+      accent: "hsl(30 90% 37%)",
       accentForeground: "hsl(0 0% 100%)",
       destructive: "hsl(0 70% 42%)",
       destructiveForeground: "hsl(0 0% 100%)",
diff --git a/workbench/control_plane/src/lib/theme/types.ts b/workbench/control_plane/src/lib/theme/types.ts
index 90b3d195..d4d1c0d4 100644
--- a/workbench/control_plane/src/lib/theme/types.ts
+++ b/workbench/control_plane/src/lib/theme/types.ts
@@ -224,4 +224,11 @@ export type AppearanceSettings = {
    * accepting edits that cannot be saved.
    */
   orgManaged: boolean;
+  /**
+   * Who last changed the org default, and when. An org-wide setting changes
+   * everyone's UI at once, so "who did this" is the first question asked when
+   * the company's app suddenly looks different.
+   */
+  updatedBy?: string;
+  updatedAt?: string;
 };

From fa4ec674f5e0947a0c7242f6cf7c0f0d06f6c0f1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 6 Aug 2026 10:12:28 +0000
Subject: [PATCH 04/10] feat(theming): migrate every icon call site to the
 themed Icon component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Completes the icon half of the theming engine. Before this, the icon pack
swapped in the sidebar and landing page only; everywhere else icons stayed
Lucide regardless of theme. Now 158 files render through <Icon>, and the
only two modules still importing lucide-react are the two that must:
Icon.tsx (the primitive, which falls back to Lucide) and lib/icons.tsx
(the resolver used by server components and by iconSvg.ts's static-string
rendering, neither of which can run hooks).

Registry
- 88 more icons mapped, so all 251 Lucide icons used anywhere in the app
  resolve in both the Fluent and Material packs. Packs are still pruned:
  275 icons, ~115 KB and ~106 KB, fetched only when a theme needs them.

New API
- themedIcon(name) returns a memoised component bound to one name, for the
  many places that keep icons in a lookup table rather than rendering them
  inline. Memoised because the return value is a component TYPE: a fresh
  function per call would remount the icon every render.
- ThemedIcon is the type those tables annotate with. `typeof` on a call
  expression is not valid TypeScript, so the 15 `typeof SomeIcon` type
  positions became this instead.
- IconProps gained fill/color/onClick, which lucide forwarded and call
  sites rely on (a filled star renders hollow without `fill`).

Leaky APIs fixed
- Tabs took `icon?: LucideIcon`, which pinned every caller's tabs to one
  pack. It now takes an icon NAME, matching the documented pattern.
- Nine other components typed icon props as LucideIcon; they store icons
  in tables, so they take ThemedIcon.
- Meta tables in the tool-card, agent, integrations and email-automation
  screens now hold icon NAMES rather than bound components. Those tables
  were built inside render functions, which is indistinguishable from
  creating a component per render — a name is simpler and the lint rule
  agrees.

How this was done, and two failed attempts worth recording
- The migration ran as an AST codemod over the TypeScript parser. Two
  earlier regex versions were written, run, and reverted, because both
  produced code that LOOKED migrated:
    * masking "JSX text" as `>…<` blanked real statements, since `>` is
      also a comparison operator — `now > prev` opened a bogus region that
      swallowed everything to the next brace;
    * masking string literals by quote blanked whole JSX blocks, since an
      apostrophe in prose ("don't") opens a fake string.
  Both hid references from the rewrite AND from the leftover check, so the
  damage was silent. An AST cannot confuse code with prose.
- The codemod also handles aliased imports (`Workflow as WorkflowIcon`
  must emit the lucide name, not the alias) and files with their own
  `Icon` binding (imported as `AppIcon` instead of skipped).

Verified: typecheck clean; 350 unit tests pass; production build clean;
14 browser tests confirm all 28 sidebar glyphs swap to Fluent's 20px grid
and Material's 24px grid and back. Lint is better than baseline on both
counts (118 errors vs 120, 83 warnings vs 85).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SyTtr9JJXCS8xNkzW5Fny5
---
 workbench/control_plane/e2e/theming.spec.ts   |   4 +-
 .../scripts/build-icon-packs.mjs              | 104 ++++++
 .../control_plane/src/app/agents/page.tsx     |  99 ++---
 .../control_plane/src/app/artifacts/page.tsx  |  71 ++--
 .../src/app/build/apps/[slug]/edit/page.tsx   | 143 +++----
 .../src/app/build/apps/[slug]/page.tsx        |  50 +--
 .../control_plane/src/app/build/apps/page.tsx |  43 +--
 workbench/control_plane/src/app/chat/page.tsx |  14 +-
 .../app/email/components/AccountSidebar.tsx   |  51 ++-
 .../email/components/ArtifactAttachPicker.tsx |   8 +-
 .../app/email/components/AttachmentList.tsx   |  10 +-
 .../app/email/components/CommandPalette.tsx   |   4 +-
 .../src/app/email/components/ComposePanel.tsx |  16 +-
 .../src/app/email/components/ComposerAI.tsx   |   6 +-
 .../src/app/email/components/ContactCard.tsx  |  27 +-
 .../app/email/components/ConversationView.tsx |  27 +-
 .../app/email/components/DraftAssistant.tsx   |  30 +-
 .../email/components/EmailAssistantChat.tsx   |  14 +-
 .../src/app/email/components/EmailDetail.tsx  |  65 ++--
 .../src/app/email/components/EmailList.tsx    |  98 +++--
 .../email/components/EmailPreviewModal.tsx    |   8 +-
 .../src/app/email/components/EmailToolbar.tsx |  46 ++-
 .../src/app/email/components/LabelChip.tsx    |   6 +-
 .../src/app/email/components/LabelMenu.tsx    |   6 +-
 .../app/email/components/MailboxActions.tsx   |  18 +-
 .../app/email/components/MessageContent.tsx   |   6 +-
 .../email/components/MessageTimelineModal.tsx |  18 +-
 .../src/app/email/components/QuickFilters.tsx |   4 +-
 .../src/app/email/components/SearchBar.tsx    |  18 +-
 .../app/email/components/SignatureEditor.tsx  |  46 ++-
 .../app/email/components/TaskCaptureModal.tsx |  22 +-
 .../components/automation/AISettingsView.tsx  |  21 +-
 .../components/automation/AnalyticsView.tsx   |  37 +-
 .../components/automation/AutomationView.tsx  |  17 +-
 .../automation/BulkUnsubscribeView.tsx        | 122 +++---
 .../components/automation/DashboardView.tsx   |  60 ++-
 .../automation/DigestSettingsDialog.tsx       |   6 +-
 .../automation/ai-settings/HistoryTab.tsx     |   4 +-
 .../automation/ai-settings/RulesTab.tsx       |  97 +++--
 .../automation/ai-settings/SettingsTab.tsx    |  63 ++--
 .../automation/ai-settings/TestTab.tsx        |  16 +-
 .../ai-settings/VoiceProfileDialog.tsx        |  41 +-
 .../automation/ai-settings/actionFormat.tsx   |  33 +-
 .../automation/ai-settings/common.tsx         |  12 +-
 .../automation/ai-settings/fixDialog.tsx      |  10 +-
 .../app/email/components/automation/ui.tsx    |   4 +-
 .../src/app/email/oauth/callback/page.tsx     |  14 +-
 .../control_plane/src/app/email/page.tsx      |  42 +--
 .../src/app/integrations/page.tsx             | 247 ++++++------
 .../src/app/notes/components/ActiveBots.tsx   |  14 +-
 .../src/app/notes/components/AskPanel.tsx     |   8 +-
 .../notes/components/BotIdentitySection.tsx   |  18 +-
 .../notes/components/FollowupEmailModal.tsx   |  10 +-
 .../app/notes/components/GlossaryModal.tsx    |  12 +-
 .../app/notes/components/JoinCallModal.tsx    |  14 +-
 .../app/notes/components/LiveCopilotStrip.tsx |   6 +-
 .../src/app/notes/components/LiveDock.tsx     |   6 +-
 .../app/notes/components/MeetingOutcomes.tsx  |   8 +-
 .../src/app/notes/components/MeetingPrep.tsx  |  37 +-
 .../src/app/notes/components/MicPicker.tsx    |  14 +-
 .../notes/components/NotesSettingsModal.tsx   |  12 +-
 .../app/notes/components/RecordingDock.tsx    |  12 +-
 .../src/app/notes/live/[id]/page.tsx          |  40 +-
 .../src/app/notes/meeting/[id]/page.tsx       | 106 +++---
 .../control_plane/src/app/notes/page.tsx      |  42 +--
 .../src/app/notes/session/[id]/page.tsx       |  32 +-
 .../src/app/observability/office-topdown.tsx  |  74 ++--
 .../src/app/observability/page.tsx            |  28 +-
 .../src/app/settings/groups/page.tsx          |  45 +--
 .../src/app/settings/members/[email]/page.tsx |  38 +-
 .../src/app/settings/members/page.tsx         |  61 ++-
 .../src/app/settings/roles/page.tsx           |  18 +-
 .../app/tasks/components/AiTaskActions.tsx    |  20 +-
 .../app/tasks/components/AssistantRail.tsx    |  14 +-
 .../tasks/components/AttachmentComposer.tsx   |  14 +-
 .../src/app/tasks/components/CalendarView.tsx |  40 +-
 .../src/app/tasks/components/CaptureBar.tsx   |   6 +-
 .../src/app/tasks/components/ClarifyModal.tsx |   6 +-
 .../src/app/tasks/components/ClarifyPanel.tsx | 167 ++++-----
 .../src/app/tasks/components/ContextMenu.tsx  |   7 +-
 .../app/tasks/components/DelegateDialog.tsx   |  26 +-
 .../app/tasks/components/DelegatePopup.tsx    |  14 +-
 .../tasks/components/DeleteConfirmModal.tsx   |  10 +-
 .../app/tasks/components/EliminatePopup.tsx   |  10 +-
 .../src/app/tasks/components/EngageView.tsx   |  18 +-
 .../src/app/tasks/components/FocusMode.tsx    |  51 +--
 .../src/app/tasks/components/InboxCard.tsx    |  88 ++---
 .../src/app/tasks/components/InboxTable.tsx   |  12 +-
 .../src/app/tasks/components/InboxView.tsx    |  93 ++---
 .../src/app/tasks/components/ItemDetail.tsx   | 128 +++----
 .../src/app/tasks/components/ItemList.tsx     |  75 ++--
 .../src/app/tasks/components/ListColumns.tsx  |  12 +-
 .../src/app/tasks/components/ListsSidebar.tsx |  66 ++--
 .../src/app/tasks/components/PeopleView.tsx   |  16 +-
 .../src/app/tasks/components/PersonEditor.tsx |  16 +-
 .../app/tasks/components/PriorityControls.tsx |  14 +-
 .../app/tasks/components/ProjectTasksView.tsx |  25 +-
 .../src/app/tasks/components/ProjectsList.tsx |  46 +--
 .../src/app/tasks/components/QuickCapture.tsx |  44 +--
 .../app/tasks/components/ReclarifyModal.tsx   |   6 +-
 .../app/tasks/components/SchedulePopup.tsx    |  12 +-
 .../src/app/tasks/components/SourceBadge.tsx  |   6 +-
 .../app/tasks/components/StartupRitual.tsx    |  32 +-
 .../src/app/tasks/components/StatusPill.tsx   |   6 +-
 .../src/app/tasks/components/TaskCard.tsx     |  41 +-
 .../app/tasks/components/TaskFocusModal.tsx   |   4 +-
 .../app/tasks/components/TaskListGrouped.tsx  |  16 +-
 .../tasks/components/TaskSettingsModal.tsx    |  35 +-
 .../src/app/tasks/components/TaskToolbar.tsx  |  41 +-
 .../src/app/tasks/components/UndoToast.tsx    |   6 +-
 .../app/tasks/components/WaitingForView.tsx   |  12 +-
 .../app/tasks/components/WorkspacesModal.tsx  |  40 +-
 .../components/calendar/CalendarSettings.tsx  |  22 +-
 .../components/calendar/EndOfDayReview.tsx    |  18 +-
 .../tasks/components/calendar/NowNextBar.tsx  |   9 +-
 .../components/calendar/PlanDayPanel.tsx      |  39 +-
 .../components/calendar/ScheduleSheet.tsx     |  28 +-
 .../tasks/components/calendar/TimeGrid.tsx    |  43 +--
 .../components/calendar/UnscheduledRail.tsx   |  39 +-
 .../src/app/tasks/lib/priorityIcons.ts        |  44 +--
 .../control_plane/src/app/tasks/page.tsx      |  12 +-
 .../src/app/whatsapp/calls/page.tsx           |  74 ++--
 .../src/app/whatsapp/connect/page.tsx         |  80 ++--
 .../src/app/whatsapp/insights/page.tsx        |   8 +-
 .../control_plane/src/app/whatsapp/layout.tsx |  38 +-
 .../src/app/whatsapp/lib/types.ts             |  22 +-
 .../src/app/whatsapp/numbers/page.tsx         |  18 +-
 .../control_plane/src/app/whatsapp/page.tsx   |  71 ++--
 .../app/whatsapp/settings/categories/page.tsx |   8 +-
 .../app/whatsapp/settings/replies/page.tsx    |  12 +-
 .../src/app/whatsapp/settings/rules/page.tsx  |   6 +-
 .../src/app/workflows/[id]/page.tsx           |  59 ++-
 .../app/workflows/components/CopilotPanel.tsx |  12 +-
 .../app/workflows/components/ModuleStudio.tsx |  32 +-
 .../workflows/components/NodeInspector.tsx    |   4 +-
 .../app/workflows/components/NodePalette.tsx  |  34 +-
 .../app/workflows/components/RunConsole.tsx   |  38 +-
 .../app/workflows/components/TriggerPanel.tsx |   8 +-
 .../app/workflows/components/WorkflowEdge.tsx |   4 +-
 .../app/workflows/components/WorkflowNode.tsx |   6 +-
 .../src/app/workflows/lib/nodeVisuals.ts      |  32 +-
 .../control_plane/src/app/workflows/page.tsx  |  46 +--
 .../src/components/AccessGate.tsx             |   4 +-
 .../src/components/AgentChat.tsx              |  28 +-
 .../control_plane/src/components/AppShell.tsx |  59 ++-
 .../src/components/ArtifactCard.tsx           |  33 +-
 .../src/components/ArtifactSidebar.tsx        |  55 +--
 .../src/components/DocumentPane.tsx           |  20 +-
 .../src/components/FileUploadButton.tsx       |  18 +-
 .../control_plane/src/components/Icon.tsx     |  50 +++
 .../src/components/MessageBubble.tsx          |   8 +-
 .../src/components/SidePanelEditor.tsx        |  14 +-
 .../control_plane/src/components/Sidebar.tsx  |  14 +-
 .../control_plane/src/components/Tabs.tsx     |  17 +-
 .../src/components/ThemeToggle.tsx            |   6 +-
 .../src/components/ThinkingContainer.tsx      |  44 +--
 .../src/components/ToolCardShell.tsx          |   8 +-
 .../src/components/email/EmailToolCards.tsx   | 270 +++++++-------
 .../src/components/room/PresenceRail.tsx      |  30 +-
 .../src/components/room/RoomHeader.tsx        |  10 +-
 .../src/components/room/ShareSheet.tsx        |  37 +-
 .../src/components/tasks/TaskToolCards.tsx    | 102 +++--
 .../src/lib/theme/icon-data/fluent.json       |   2 +-
 .../src/lib/theme/icon-data/material.json     |   2 +-
 .../src/lib/theme/icon-data/registry.json     | 352 ++++++++++++++++++
 165 files changed, 2802 insertions(+), 3125 deletions(-)

diff --git a/workbench/control_plane/e2e/theming.spec.ts b/workbench/control_plane/e2e/theming.spec.ts
index a83bd850..2016cbfe 100644
--- a/workbench/control_plane/e2e/theming.spec.ts
+++ b/workbench/control_plane/e2e/theming.spec.ts
@@ -119,7 +119,9 @@ test.describe("theme tokens", () => {
 test.describe("colour mode is independent of theme", () => {
   test("light mode swaps colours but keeps the theme's structure", async ({ page }) => {
     await loadWithTheme(page, "fluent", "light");
-    expect(await readVar(page, "--primary")).toBe("hsl(206 100% 42%)");
+    // 41%, not Fluent's nominal 42%: white-on-42% measures 4.44:1, just under
+    // WCAG AA. See src/lib/theme/contrast.test.ts.
+    expect(await readVar(page, "--primary")).toBe("hsl(206 100% 41%)");
     expect(await readVar(page, "--background")).toBe("hsl(0 0% 95%)");
     // Structural tokens live only on the base scope; light inherits them.
     expect(await readVar(page, "--radius")).toBe("0.25rem");
diff --git a/workbench/control_plane/scripts/build-icon-packs.mjs b/workbench/control_plane/scripts/build-icon-packs.mjs
index 61c08f54..7fb0cc0f 100644
--- a/workbench/control_plane/scripts/build-icon-packs.mjs
+++ b/workbench/control_plane/scripts/build-icon-packs.mjs
@@ -248,6 +248,110 @@ const MAP = {
   Truck: { fluent: ["vehicle-truck"], material: ["local-shipping"] },
   Factory: { fluent: ["building-factory"], material: ["factory"] },
   LifeBuoy: { fluent: ["person-support"], material: ["support"] },
+
+  // ── Rich-text editor toolbar (SignatureEditor, notes) ────────────────────
+  Bold: { fluent: ["text-bold"], material: ["format-bold"] },
+  Italic: { fluent: ["text-italic"], material: ["format-italic"] },
+  Underline: { fluent: ["text-underline"], material: ["format-underlined"] },
+  Strikethrough: { fluent: ["text-strikethrough"], material: ["format-strikethrough"] },
+  RemoveFormatting: { fluent: ["text-clear-formatting"], material: ["format-clear"] },
+  AlignLeft: { fluent: ["text-align-left"], material: ["format-align-left"] },
+  AlignCenter: { fluent: ["text-align-center"], material: ["format-align-center"] },
+  AlignRight: { fluent: ["text-align-right"], material: ["format-align-right"] },
+  List: { fluent: ["text-bullet-list-ltr"], material: ["format-list-bulleted"] },
+  ListOrdered: { fluent: ["text-number-list-ltr"], material: ["format-list-numbered"] },
+  Table: { fluent: ["table"], material: ["table"] },
+  Redo2: { fluent: ["arrow-redo"], material: ["redo"] },
+  Link2Off: { fluent: ["link-dismiss"], material: ["link-off"] },
+  ImageOff: { fluent: ["image-off", "image-prohibited"], material: ["hide-image"] },
+  Eraser: { fluent: ["eraser"], material: ["ink-eraser"] },
+  PenTool: { fluent: ["pen"], material: ["draw"] },
+  PencilLine: { fluent: ["edit"], material: ["edit"] },
+  SquarePen: { fluent: ["edit"], material: ["edit-square"] },
+  Code2: { fluent: ["code"], material: ["code"] },
+
+  // ── Panels / layout affordances ──────────────────────────────────────────
+  PanelLeftClose: { fluent: ["panel-left-contract"], material: ["left-panel-close"] },
+  PanelLeftOpen: { fluent: ["panel-left-expand"], material: ["left-panel-open"] },
+  PanelRight: { fluent: ["panel-right"], material: ["view-sidebar"] },
+  Columns2: { fluent: ["column-double-compare", "column"], material: ["view-column-2", "view-column"] },
+  Rows3: { fluent: ["row-triple"], material: ["table-rows"] },
+  LayoutTemplate: { fluent: ["slide-layout"], material: ["dashboard"] },
+  AppWindow: { fluent: ["window"], material: ["web-asset"] },
+  GripVertical: { fluent: ["re-order-dots-vertical"], material: ["drag-indicator"] },
+  StretchHorizontal: { fluent: ["auto-fit-width", "arrow-expand"], material: ["width-full", "height"] },
+  ChevronsUpDown: { fluent: ["chevron-up-down"], material: ["unfold-more"] },
+
+  // ── Sorting / filtering ──────────────────────────────────────────────────
+  ListFilter: { fluent: ["filter"], material: ["filter-list"] },
+  ArrowDownUp: { fluent: ["arrow-sort"], material: ["swap-vert"] },
+  ArrowUpNarrowWide: { fluent: ["arrow-sort-up"], material: ["sort"] },
+  ArrowDownWideNarrow: { fluent: ["arrow-sort-down"], material: ["sort"] },
+  SearchX: { fluent: ["search-info", "dismiss-circle"], material: ["search-off"] },
+
+  // ── Arrows / movement ────────────────────────────────────────────────────
+  ArrowUpRight: { fluent: ["arrow-up-right"], material: ["north-east"] },
+  ArrowDownRight: { fluent: ["arrow-down-right"], material: ["south-east"] },
+  ArrowUpToLine: { fluent: ["arrow-export-up", "arrow-up"], material: ["vertical-align-top"] },
+  CornerDownRight: { fluent: ["arrow-turn-right-down", "arrow-enter"], material: ["subdirectory-arrow-right"] },
+  SkipForward: { fluent: ["next"], material: ["skip-next"] },
+  RotateCw: { fluent: ["arrow-clockwise"], material: ["refresh"] },
+
+  // ── Status / progress ────────────────────────────────────────────────────
+  LoaderCircle: { fluent: ["spinner-ios"], material: ["progress-activity"] },
+  Hourglass: { fluent: ["hourglass"], material: ["hourglass-empty"] },
+  CheckCheck: { fluent: ["checkmark-starburst", "checkmark"], material: ["done-all"] },
+  BadgeCheck: { fluent: ["checkmark-starburst"], material: ["verified"] },
+  CircleDot: { fluent: ["radio-button"], material: ["radio-button-checked"] },
+  MinusCircle: { fluent: ["subtract-circle"], material: ["do-not-disturb-on"] },
+  PauseCircle: { fluent: ["pause-circle"], material: ["pause-circle"] },
+  Gauge: { fluent: ["gauge"], material: ["speed"] },
+  Milestone: { fluent: ["flag"], material: ["flag"] },
+  ShieldX: { fluent: ["shield-dismiss"], material: ["gpp-bad"] },
+
+  // ── Lists / tasks ────────────────────────────────────────────────────────
+  ListTodo: { fluent: ["task-list-square-ltr"], material: ["checklist"] },
+  ListPlus: { fluent: ["text-bullet-list-add"], material: ["playlist-add"] },
+  CopyX: { fluent: ["clipboard-error", "copy"], material: ["content-paste-off"] },
+  FolderPlus: { fluent: ["folder-add"], material: ["create-new-folder"] },
+  FolderClosed: { fluent: ["folder"], material: ["folder"] },
+  BookMarked: { fluent: ["book-star", "bookmark"], material: ["bookmark"] },
+  Pin: { fluent: ["pin"], material: ["push-pin"] },
+  PinOff: { fluent: ["pin-off"], material: ["keep-off"] },
+
+  // ── Comms / calls ────────────────────────────────────────────────────────
+  Mails: { fluent: ["mail-multiple"], material: ["mail"] },
+  MessageSquareText: { fluent: ["comment-text", "chat"], material: ["chat"] },
+  MessageCircleQuestion: { fluent: ["chat-help"], material: ["contact-support"] },
+  PhoneIncoming: { fluent: ["call-inbound"], material: ["phone-callback"] },
+  PhoneOff: { fluent: ["call-dismiss"], material: ["phone-disabled"] },
+  Headphones: { fluent: ["headphones"], material: ["headphones"] },
+  AudioLines: { fluent: ["sound-wave-circle", "speaker-2"], material: ["graphic-eq"] },
+
+  // ── Misc ─────────────────────────────────────────────────────────────────
+  UserRound: { fluent: ["person"], material: ["person"] },
+  Keyboard: { fluent: ["keyboard"], material: ["keyboard"] },
+  Printer: { fluent: ["print"], material: ["print"] },
+  QrCode: { fluent: ["qr-code"], material: ["qr-code"] },
+  Webhook: { fluent: ["link-square", "plug-connected"], material: ["webhook"] },
+  GitFork: { fluent: ["branch-fork"], material: ["fork-right"] },
+  Hammer: { fluent: ["hammer", "wrench"], material: ["hardware", "build"] },
+  Box: { fluent: ["box"], material: ["inventory-2"] },
+  Sliders: { fluent: ["options"], material: ["tune"] },
+  BarChart2: { fluent: ["data-bar-vertical"], material: ["bar-chart"] },
+  UploadCloud: { fluent: ["cloud-arrow-up"], material: ["cloud-upload"] },
+  Coins: { fluent: ["money"], material: ["payments"] },
+  Gem: { fluent: ["diamond"], material: ["diamond"] },
+  Coffee: { fluent: ["drink-coffee"], material: ["coffee"] },
+  Footprints: { fluent: ["shoe-print", "run"], material: ["footprint", "directions-walk"] },
+  Mountain: { fluent: ["mountain-location-top", "mountain-trail"], material: ["landscape"] },
+  DoorOpen: { fluent: ["door"], material: ["door-open"] },
+  MoonStar: { fluent: ["weather-moon"], material: ["bedtime"] },
+  CalendarX: { fluent: ["calendar-cancel"], material: ["event-busy"] },
+  AlarmClockOff: { fluent: ["alert-off"], material: ["alarm-off"] },
+  Battery: { fluent: ["battery-10"], material: ["battery-full"] },
+  BatteryLow: { fluent: ["battery-2"], material: ["battery-2-bar"] },
+  BatteryMedium: { fluent: ["battery-5"], material: ["battery-5-bar"] },
 };
 
 /**
diff --git a/workbench/control_plane/src/app/agents/page.tsx b/workbench/control_plane/src/app/agents/page.tsx
index 88560ab8..669e2aee 100644
--- a/workbench/control_plane/src/app/agents/page.tsx
+++ b/workbench/control_plane/src/app/agents/page.tsx
@@ -12,28 +12,9 @@
  *   3. Register → agent appears in picker on the Chat page
  */
 
+import AppIcon from "@/components/Icon";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import Link from "next/link";
-import {
-  AlertTriangle,
-  Bot,
-  CheckSquare,
-  ChevronRight,
-  ExternalLink,
-  Filter,
-  FolderOpen,
-  Lightbulb,
-  Loader2,
-  MessageCircle,
-  Package,
-  Plug,
-  Plus,
-  Receipt,
-  RefreshCw,
-  Trash2,
-  TrendingUp,
-  X,
-} from "lucide-react";
 import type { AgentEntry } from "@/app/api/agent/list/route";
 import type { MutationEntry } from "@/app/api/agent/mutations/route";
 import type { IntegrationStatus } from "@/app/api/integrations/status/route";
@@ -1239,15 +1220,15 @@ function GithubIcon({ size = 16, className = "" }: { size?: number; className?:
 // Agent icons + colors by name
 // ---------------------------------------------------------------------------
 
-const AGENT_ICONS: Record<string, React.ElementType> = {
-  "task-manager": CheckSquare,
-  "sales":        TrendingUp,
-  "delivery":     Package,
-  "triage":       Filter,
-  "reconciler":   RefreshCw,
-  "billing":      Receipt,
-  "strategy":     Lightbulb,
-  "apis-config":  Plug,
+const AGENT_ICONS: Record<string, string> = {
+  "task-manager": "CheckSquare",
+  "sales":        "TrendingUp",
+  "delivery":     "Package",
+  "triage":       "Filter",
+  "reconciler":   "RefreshCw",
+  "billing":      "Receipt",
+  "strategy":     "Lightbulb",
+  "apis-config":  "Plug",
 };
 
 const AGENT_COLORS: Record<string, string> = {
@@ -1261,8 +1242,8 @@ const AGENT_COLORS: Record<string, string> = {
   "apis-config":  "text-primary",
 };
 
-function getAgentIcon(agent: AgentEntry): React.ElementType {
-  return AGENT_ICONS[agent.name] ?? Bot;
+function getAgentIcon(agent: AgentEntry): string {
+  return AGENT_ICONS[agent.name] ?? "Bot";
 }
 
 function getAgentColor(agent: AgentEntry): string {
@@ -1303,7 +1284,7 @@ function AgentTile({
   onRefresh?: () => void;
   avatarLibraryId?: string | null;
 }) {
-  const Icon      = getAgentIcon(agent);
+  const iconName  = getAgentIcon(agent);
   const color     = getAgentColor(agent);
   const readiness = agentReadiness(agent, statuses);
   const behindBy  = (agent as any).behind_by as number | undefined;
@@ -1375,7 +1356,7 @@ function AgentTile({
               <AgentAvatar
                 libraryId={avatarLibraryId}
                 size={34}
-                fallback={<Icon size={26} className={`${color} shrink-0`} />}
+                fallback={<AppIcon name={iconName} size={26} className={`${color} shrink-0`} />}
               />
             }
           />
@@ -1538,7 +1519,7 @@ function AgentAvatarPicker({ agentName }: { agentName: string }) {
           {current ? (
             <LibBreathingSprite char={current} box={44} />
           ) : (
-            <Bot size={20} className="text-muted-foreground" />
+            <AppIcon name="Bot" size={20} className="text-muted-foreground" />
           )}
         </span>
         <span className="min-w-0 flex-1">
@@ -1553,7 +1534,7 @@ function AgentAvatarPicker({ agentName }: { agentName: string }) {
             Tap to choose from the library
           </span>
         </span>
-        <ChevronRight size={15} className="shrink-0 text-muted-foreground" />
+        <AppIcon name="ChevronRight" size={15} className="shrink-0 text-muted-foreground" />
       </button>
 
       {/* Popup picker — bottom sheet on mobile, centered dialog on desktop */}
@@ -1575,7 +1556,7 @@ function AgentAvatarPicker({ agentName }: { agentName: string }) {
                 onClick={() => setOpen(false)}
                 className="rounded-md p-1 text-muted-foreground hover:bg-secondary transition-colors"
               >
-                <X size={16} />
+                <AppIcon name="X" size={16} />
               </button>
             </div>
             <div className="overflow-y-auto p-4">
@@ -1612,7 +1593,7 @@ function AgentAvatarPicker({ agentName }: { agentName: string }) {
                       style={{ width: 104, height: 104 }}
                       className={`${tileCls(libraryId === null)} flex-col gap-1 disabled:opacity-60`}
                     >
-                      <Bot size={26} className="text-muted-foreground" />
+                      <AppIcon name="Bot" size={26} className="text-muted-foreground" />
                       <span className="text-[10px] text-muted-foreground">Default</span>
                     </button>
                     {shown.map((c) => (
@@ -1664,7 +1645,7 @@ function AgentSidePanel({
   compact?: boolean;
   avatarLibraryId?: string | null;
 }) {
-  const Icon  = getAgentIcon(agent);
+  const iconName  = getAgentIcon(agent);
   const color = getAgentColor(agent);
   const [confirming, setConfirming] = useState(false);
   const [removing, setRemoving]     = useState(false);
@@ -1793,7 +1774,7 @@ function AgentSidePanel({
                   <AgentAvatar
                     libraryId={avatarLibraryId}
                     size={48}
-                    fallback={<Icon size={40} className={`${color} shrink-0`} />}
+                    fallback={<AppIcon name={iconName} size={40} className={`${color} shrink-0`} />}
                   />
                 }
               />
@@ -1822,7 +1803,7 @@ function AgentSidePanel({
             </div>
           </div>
           <button onClick={onClose} className="self-start m-3 text-muted-foreground hover:text-foreground p-1 rounded transition-colors">
-            <X className="w-4 h-4" />
+            <AppIcon name="X" className="w-4 h-4" />
           </button>
         </div>
       )}
@@ -1874,7 +1855,7 @@ function AgentSidePanel({
 
         {missingDeps.length > 0 && (
           <div className="flex items-start gap-2 rounded-lg border border-warning/20 bg-warning/5 px-3 py-2.5">
-            <AlertTriangle className="w-3.5 h-3.5 text-warning mt-0.5 shrink-0" />
+            <AppIcon name="AlertTriangle" className="w-3.5 h-3.5 text-warning mt-0.5 shrink-0" />
             <div className="text-xs text-warning">
               <span className="font-medium">Agent blocked</span> — needs{" "}
               <Link href="/integrations" className="underline hover:opacity-80">
@@ -1886,7 +1867,7 @@ function AgentSidePanel({
 
         {agent.dep_status?.ok === false && (
           <div className="flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2.5">
-            <AlertTriangle className="w-3.5 h-3.5 text-destructive mt-0.5 shrink-0" />
+            <AppIcon name="AlertTriangle" className="w-3.5 h-3.5 text-destructive mt-0.5 shrink-0" />
             <div className="text-xs text-destructive min-w-0">
               <span className="font-medium">Dependencies failed to install</span>
               {(agent.dep_status.needs_system_packages?.length ?? 0) > 0 ? (
@@ -1928,7 +1909,7 @@ function AgentSidePanel({
                         state === "ok" ? "bg-success" : state === "missing" ? "bg-warning" : "bg-muted"
                       }`} />
                       {intg?.label ?? i}
-                      {state === "missing" && <ExternalLink className="w-2.5 h-2.5" />}
+                      {state === "missing" && <AppIcon name="ExternalLink" className="w-2.5 h-2.5" />}
                     </span>
                   </Link>
                 );
@@ -1964,7 +1945,7 @@ function AgentSidePanel({
             <div className="text-[10px] text-muted uppercase tracking-wider mb-1.5">Source</div>
             {agent.local_path ? (
               <div className="flex items-center gap-1.5 text-xs text-muted-foreground font-mono bg-secondary rounded-lg px-2.5 py-1.5">
-                <FolderOpen className="w-3.5 h-3.5 shrink-0" />
+                <AppIcon name="FolderOpen" className="w-3.5 h-3.5 shrink-0" />
                 <span className="truncate">{agent.local_path}</span>
               </div>
             ) : (
@@ -1980,7 +1961,7 @@ function AgentSidePanel({
               >
                 <GithubIcon size={14} className="shrink-0" />
                 <span className="truncate">{agent.repo_name ?? agent.repo_url}</span>
-                <ExternalLink className="w-2.5 h-2.5 shrink-0 ml-auto" />
+                <AppIcon name="ExternalLink" className="w-2.5 h-2.5 shrink-0 ml-auto" />
               </a>
             )}
           </div>
@@ -2006,7 +1987,7 @@ function AgentSidePanel({
                   className="rounded-lg border border-border px-2.5 py-1.5 text-xs text-muted-foreground hover:border-primary/30 hover:text-foreground disabled:opacity-50 transition-colors"
                   title="Force-check for remote updates"
                 >
-                  <RefreshCw className={`w-3 h-3 ${checking ? "animate-spin" : ""}`} />
+                  <AppIcon name="RefreshCw" className={`w-3 h-3 ${checking ? "animate-spin" : ""}`} />
                 </button>
               </div>
             )}
@@ -2018,7 +1999,7 @@ function AgentSidePanel({
                 disabled={pulling}
                 className="flex items-center justify-center gap-2 w-full rounded-lg bg-amber-500/10 border border-amber-500/20 px-3 py-2 text-xs font-medium text-amber-600 hover:bg-amber-500/20 disabled:opacity-50 transition-colors"
               >
-                <RefreshCw className={`w-3.5 h-3.5 ${pulling ? "animate-spin" : ""}`} />
+                <AppIcon name="RefreshCw" className={`w-3.5 h-3.5 ${pulling ? "animate-spin" : ""}`} />
                 {pulling
                   ? "Pulling…"
                   : `Pull ${behindBy} update${behindBy !== 1 ? "s" : ""}`}
@@ -2028,7 +2009,7 @@ function AgentSidePanel({
             {/* Pulling spinner */}
             {pulling && (
               <div className="flex items-center gap-2 text-xs text-muted-foreground animate-pulse">
-                <RefreshCw className="w-3.5 h-3.5 animate-spin" />
+                <AppIcon name="RefreshCw" className="w-3.5 h-3.5 animate-spin" />
                 Pulling latest commits…
               </div>
             )}
@@ -2106,7 +2087,7 @@ function AgentSidePanel({
             href={`/chat?agent=${encodeURIComponent(agent.name)}`}
             className="flex-1 flex items-center justify-center gap-1.5 py-2.5 rounded-lg bg-primary hover:opacity-90 text-sm font-medium text-primary-foreground transition-colors"
           >
-            <MessageCircle className="w-4 h-4" /> Chat
+            <AppIcon name="MessageCircle" className="w-4 h-4" /> Chat
           </Link>
           {agent.dynamic && (
             confirming ? (
@@ -2124,7 +2105,7 @@ function AgentSidePanel({
               <button onClick={() => setConfirming(true)}
                 className="p-2.5 rounded-lg border border-border text-muted-foreground hover:border-destructive/40 hover:text-destructive transition-colors"
                 title="Remove agent">
-                <Trash2 className="w-4 h-4" />
+                <AppIcon name="Trash2" className="w-4 h-4" />
               </button>
             )
           )}
@@ -2242,7 +2223,7 @@ export default function AgentsPage() {
                   : "Check all for updates"
               }
             >
-              <RefreshCw className={`w-3.5 h-3.5 ${checkingAll ? "animate-spin" : ""}`} />
+              <AppIcon name="RefreshCw" className={`w-3.5 h-3.5 ${checkingAll ? "animate-spin" : ""}`} />
               <span className="hidden sm:inline">
                 {checkingAll
                   ? "Checking…"
@@ -2254,11 +2235,11 @@ export default function AgentsPage() {
           )}
           <button onClick={() => void load()} title="Refresh agent list"
             className="p-2 rounded-lg border border-border text-muted-foreground hover:bg-secondary transition-colors">
-            <RefreshCw className="w-4 h-4" />
+            <AppIcon name="RefreshCw" className="w-4 h-4" />
           </button>
           <button onClick={() => setShowAdd(true)}
             className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-primary hover:opacity-90 text-sm font-medium text-primary-foreground transition-colors">
-            <Plus className="w-4 h-4" /><span className="hidden sm:inline">Add Agent</span>
+            <AppIcon name="Plus" className="w-4 h-4" /><span className="hidden sm:inline">Add Agent</span>
           </button>
         </div>
       </div>
@@ -2274,13 +2255,13 @@ export default function AgentsPage() {
         <div className={`flex-1 p-4 overflow-y-auto ${selectedAgent ? "sm:min-w-0" : ""}`}>
           {loading ? (
             <div className="flex items-center justify-center h-48 gap-3 text-muted-foreground text-sm">
-              <Loader2 className="w-4 h-4 animate-spin" /> Loading agents…
+              <AppIcon name="Loader2" className="w-4 h-4 animate-spin" /> Loading agents…
             </div>
           ) : filtered.length === 0 ? (
             <div className="flex flex-col items-center justify-center h-48 gap-3 text-muted-foreground text-sm">
               <p>No {filter !== "all" ? filter : ""} agents found.</p>
               <button onClick={() => setShowAdd(true)} className="flex items-center gap-1.5 text-xs text-primary hover:opacity-80">
-                <Plus className="w-3.5 h-3.5" /> Add agent
+                <AppIcon name="Plus" className="w-3.5 h-3.5" /> Add agent
               </button>
             </div>
           ) : (
@@ -2300,7 +2281,7 @@ export default function AgentsPage() {
                 onClick={() => setShowAdd(true)}
                 className="p-4 rounded-xl border-2 border-dashed border-border text-muted-foreground hover:border-primary/40 hover:text-primary hover:bg-primary/5 transition-all flex flex-col items-center justify-center gap-2 min-h-[120px]"
               >
-                <Plus className="w-5 h-5" /><span className="text-xs">Add Agent</span>
+                <AppIcon name="Plus" className="w-5 h-5" /><span className="text-xs">Add Agent</span>
               </button>
             </div>
           )}
@@ -2315,20 +2296,20 @@ export default function AgentsPage() {
                 <div className="flex items-center justify-between px-4 py-2 border-b border-border shrink-0">
                   <div className="flex items-center gap-2 min-w-0">
                     {(() => {
-                      const Icon = getAgentIcon(selectedAgent);
+                      const iconName = getAgentIcon(selectedAgent);
                       const color = getAgentColor(selectedAgent);
                       return (
                         <AgentAvatar
                           libraryId={agentAvatars[selectedAgent.name]}
                           size={20}
-                          fallback={<Icon size={20} className={color} />}
+                          fallback={<AppIcon name={iconName} size={20} className={color} />}
                         />
                       );
                     })()}
                     <span className="text-sm font-semibold truncate">{selectedAgent.display_name || selectedAgent.name}</span>
                   </div>
                   <button onClick={() => setSelected(null)} className="p-1 rounded-md hover:bg-secondary text-muted-foreground shrink-0">
-                    <X size={16} />
+                    <AppIcon name="X" size={16} />
                   </button>
                 </div>
                 <div className="flex-1 min-h-0 overflow-y-auto pb-safe">
diff --git a/workbench/control_plane/src/app/artifacts/page.tsx b/workbench/control_plane/src/app/artifacts/page.tsx
index eb5c8aa6..38885a73 100644
--- a/workbench/control_plane/src/app/artifacts/page.tsx
+++ b/workbench/control_plane/src/app/artifacts/page.tsx
@@ -9,27 +9,8 @@
  * Grid / List views change how the current directory's contents appear.
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import {
-  Search,
-  Download,
-  Eye,
-  FolderOpen,
-  FolderClosed,
-  File,
-  FileCode,
-  FileText,
-  FileImage,
-  FileSpreadsheet,
-  X,
-  LayoutGrid,
-  List,
-  ChevronDown,
-  ChevronRight,
-  Sparkles,
-  RefreshCw,
-  Bot,
-} from "lucide-react";
 import ArtifactViewerModal from "@/components/ArtifactViewerModal";
 import type { FileEntry } from "@/components/ArtifactSidebar";
 
@@ -101,23 +82,23 @@ function formatRelative(iso: string): string {
 
 function fileIconEl(entry: ArtifactEntry | { name: string; mime_type: string; is_dir?: boolean }, size = 16) {
   if ((entry as ArtifactEntry).is_dir) {
-    return <FolderClosed size={size} className="shrink-0 text-amber-400" />;
+    return <Icon name="FolderClosed" size={size} className="shrink-0 text-amber-400" />;
   }
   const ext = entry.name.split(".").pop()?.toLowerCase() ?? "";
   const mime = entry.mime_type;
   if (["png","jpg","jpeg","gif","webp","svg","ico"].includes(ext) || mime.startsWith("image/"))
-    return <FileImage size={size} className="shrink-0 text-purple-400" />;
+    return <Icon name="FileImage" size={size} className="shrink-0 text-purple-400" />;
   if (["py","ts","tsx","js","jsx","sh","yaml","yml","toml","json","sql","rs","go","java"].includes(ext))
-    return <FileCode size={size} className="shrink-0 text-blue-400" />;
+    return <Icon name="FileCode" size={size} className="shrink-0 text-blue-400" />;
   if (["md","txt","log","rst"].includes(ext) || mime.startsWith("text/"))
-    return <FileText size={size} className="shrink-0 text-green-400" />;
+    return <Icon name="FileText" size={size} className="shrink-0 text-green-400" />;
   if (["pdf"].includes(ext) || mime === "application/pdf")
-    return <FileText size={size} className="shrink-0 text-red-400" />;
+    return <Icon name="FileText" size={size} className="shrink-0 text-red-400" />;
   if (["docx","doc"].includes(ext))
-    return <FileText size={size} className="shrink-0 text-cyan-400" />;
+    return <Icon name="FileText" size={size} className="shrink-0 text-cyan-400" />;
   if (["xlsx","xls","csv"].includes(ext))
-    return <FileSpreadsheet size={size} className="shrink-0 text-emerald-400" />;
-  return <File size={size} className="shrink-0 text-muted-foreground" />;
+    return <Icon name="FileSpreadsheet" size={size} className="shrink-0 text-emerald-400" />;
+  return <Icon name="File" size={size} className="shrink-0 text-muted-foreground" />;
 }
 
 function isImage(entry: ArtifactEntry): boolean {
@@ -237,7 +218,7 @@ function FileCard({ artifact, onView, index }: { artifact: ArtifactEntry; onView
       </div>
       <div className="absolute inset-0 bg-background/80 opacity-0 group-hover:opacity-100 tech-transition flex items-center justify-center gap-3">
         <button onClick={(e) => { e.stopPropagation(); onView(); }} className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 tech-transition shadow-lg">
-          <Eye size={13} /> View
+          <Icon name="Eye" size={13} /> View
         </button>
       </div>
     </div>
@@ -255,7 +236,7 @@ function FolderCard({ item, onNavigate, index }: { item: ExplorerItem; onNavigat
       title={`${item.name}\nClick to open`}
     >
       <div className="flex items-center justify-center h-28 bg-amber-500/5 border-b border-border/30">
-        <FolderClosed size={40} className="text-amber-400/70" />
+        <Icon name="FolderClosed" size={40} className="text-amber-400/70" />
       </div>
       <div className="p-3">
         <p className="text-xs font-medium text-foreground truncate leading-tight mb-1">{item.name}</p>
@@ -278,7 +259,7 @@ function ListRow({ item, onNavigate, onView, index }: {
     >
       <div className="flex items-center gap-2.5 min-w-0">
         {item.isDir
-          ? <FolderClosed size={15} className="shrink-0 text-amber-400" />
+          ? <Icon name="FolderClosed" size={15} className="shrink-0 text-amber-400" />
           : fileIconEl(item.entry ?? { name: item.name, mime_type: "" }, 15)}
         <div className="min-w-0">
           <div className="truncate text-xs font-medium text-foreground">{item.name}</div>
@@ -422,7 +403,7 @@ export default function ArtifactsPage() {
         <div className="flex items-center justify-between mb-3">
           <div className="flex items-center gap-3">
             <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary/15">
-              <FolderOpen size={20} className="text-primary" />
+              <Icon name="FolderOpen" size={20} className="text-primary" />
             </div>
             <div>
               <h1 className="text-lg font-semibold text-foreground">Artifacts</h1>
@@ -432,7 +413,7 @@ export default function ArtifactsPage() {
             </div>
           </div>
           <button onClick={fetchArtifacts} className="rounded-lg p-2 text-muted-foreground hover:text-foreground hover:bg-secondary tech-transition" title="Refresh">
-            <RefreshCw size={15} className={loading ? "animate-spin" : ""} />
+            <Icon name="RefreshCw" size={15} className={loading ? "animate-spin" : ""} />
           </button>
         </div>
 
@@ -471,17 +452,17 @@ export default function ArtifactsPage() {
           <div className="flex-1" />
 
           <div className="relative w-full sm:w-56">
-            <Search size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
+            <Icon name="Search" size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
             <input type="text" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder="Search files…"
               className="w-full rounded-lg border border-border bg-secondary pl-8 pr-8 py-1.5 text-[11px] text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50" />
             {searchQuery && (
-              <button onClick={() => setSearchQuery("")} className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"><X size={12} /></button>
+              <button onClick={() => setSearchQuery("")} className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"><Icon name="X" size={12} /></button>
             )}
           </div>
 
           {hasFilters && (
             <button onClick={clearFilters} className="rounded-lg border border-border px-2.5 py-1.5 text-[11px] text-muted-foreground hover:text-foreground hover:bg-secondary tech-transition flex items-center gap-1">
-              <X size={11} /> Clear
+              <Icon name="X" size={11} /> Clear
             </button>
           )}
         </div>
@@ -491,14 +472,14 @@ export default function ArtifactsPage() {
       <div className="flex-1 overflow-auto">
         {loading && (
           <div className="flex flex-col items-center justify-center h-48 gap-3">
-            <RefreshCw size={18} className="animate-spin text-muted-foreground" />
+            <Icon name="RefreshCw" size={18} className="animate-spin text-muted-foreground" />
             <p className="text-sm text-muted-foreground animate-pulse">Loading artifacts…</p>
           </div>
         )}
 
         {error && !loading && (
           <div className="flex flex-col items-center justify-center h-48 gap-3">
-            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-red-500/10"><X size={18} className="text-red-400" /></div>
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-red-500/10"><Icon name="X" size={18} className="text-red-400" /></div>
             <p className="text-sm text-red-400">{error}</p>
             <button onClick={fetchArtifacts} className="text-xs text-muted-foreground hover:text-foreground underline">Retry</button>
           </div>
@@ -506,7 +487,7 @@ export default function ArtifactsPage() {
 
         {!loading && !error && filteredFiles.length === 0 && availableAgents.length === 0 && (
           <div className="flex flex-col items-center justify-center h-64 gap-4">
-            <Sparkles size={28} className="text-muted-foreground/40" />
+            <Icon name="Sparkles" size={28} className="text-muted-foreground/40" />
             <p className="text-sm font-medium text-foreground">No artifacts yet</p>
             <p className="text-xs text-muted-foreground mt-1 max-w-xs">Files appear here as agents create them.</p>
           </div>
@@ -530,8 +511,8 @@ export default function ArtifactsPage() {
                     }}
                     className={`w-full flex items-center gap-3 px-4 py-3 bg-card hover:bg-secondary/40 tech-transition text-left border-l-2 ${accent}`}
                   >
-                    {isOpen ? <ChevronDown size={15} className="text-muted-foreground shrink-0" /> : <ChevronRight size={15} className="text-muted-foreground shrink-0" />}
-                    <Bot size={16} className="text-muted-foreground shrink-0" />
+                    {isOpen ? <Icon name="ChevronDown" size={15} className="text-muted-foreground shrink-0" /> : <Icon name="ChevronRight" size={15} className="text-muted-foreground shrink-0" />}
+                    <Icon name="Bot" size={16} className="text-muted-foreground shrink-0" />
                     <div className="min-w-0 flex-1">
                       <div className="text-sm font-medium text-foreground truncate">{name}</div>
                       <div className="text-[11px] text-muted-foreground">{agentFiles.length} file{agentFiles.length !== 1 ? "s" : ""}</div>
@@ -549,7 +530,7 @@ export default function ArtifactsPage() {
                         </button>
                         {currentPath && currentPath.split("/").map((seg, i, arr) => (
                           <span key={i} className="flex items-center gap-1.5">
-                            <ChevronRight size={12} className="text-muted-foreground" />
+                            <Icon name="ChevronRight" size={12} className="text-muted-foreground" />
                             {i === arr.length - 1 ? (
                               <span className="text-xs font-semibold text-foreground px-1.5 py-0.5 rounded bg-secondary">{seg}</span>
                             ) : (
@@ -568,10 +549,10 @@ export default function ArtifactsPage() {
                         <div className="flex items-center rounded-md border border-border/60 bg-secondary/40 p-0.5">
                           <button onClick={() => setViewMode("grid")}
                             className={`rounded p-1 tech-transition ${viewMode === "grid" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`}
-                            title="Grid view"><LayoutGrid size={12} /></button>
+                            title="Grid view"><Icon name="LayoutGrid" size={12} /></button>
                           <button onClick={() => setViewMode("list")}
                             className={`rounded p-1 tech-transition ${viewMode === "list" ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`}
-                            title="List view"><List size={12} /></button>
+                            title="List view"><Icon name="List" size={12} /></button>
                         </div>
                       </div>
 
@@ -579,7 +560,7 @@ export default function ArtifactsPage() {
                       <div className="p-3 max-h-[60vh] overflow-auto">
                         {items.length === 0 ? (
                           <div className="flex flex-col items-center justify-center h-24 gap-2 text-muted-foreground">
-                            <FolderOpen size={20} className="opacity-30" />
+                            <Icon name="FolderOpen" size={20} className="opacity-30" />
                             <p className="text-xs">This folder is empty</p>
                           </div>
                         ) : viewMode === "grid" ? (
diff --git a/workbench/control_plane/src/app/build/apps/[slug]/edit/page.tsx b/workbench/control_plane/src/app/build/apps/[slug]/edit/page.tsx
index 0078d197..760df621 100644
--- a/workbench/control_plane/src/app/build/apps/[slug]/edit/page.tsx
+++ b/workbench/control_plane/src/app/build/apps/[slug]/edit/page.tsx
@@ -11,6 +11,7 @@
  * (onActivity → debounce → refetch + POST /sync), and a fallback poll.
  */
 
+import Icon from "@/components/Icon";
 import {
   Suspense,
   use,
@@ -23,34 +24,6 @@ import {
 import { useRouter, useSearchParams } from "next/navigation";
 import { useTheme } from "next-themes";
 import Editor from "@monaco-editor/react";
-import {
-  AlertTriangle,
-  ArrowLeft,
-  CheckCircle2,
-  ChevronDown,
-  ChevronRight,
-  Clock,
-  FileCode,
-  FlaskConical,
-  Folder,
-  FolderOpen,
-  History,
-  Loader2,
-  Lock,
-  Monitor,
-  Play,
-  Plug,
-  Plus,
-  RefreshCw,
-  Rocket,
-  Save,
-  Smartphone,
-  Sparkles,
-  Trash2,
-  Wrench,
-  X,
-  XCircle,
-} from "lucide-react";
 import AgentChat from "@/components/AgentChat";
 import SandboxedHtml from "@/components/SandboxedHtml";
 import Tabs from "@/components/Tabs";
@@ -132,7 +105,7 @@ function CheckpointsPanel({
   if (checkpoints === null) {
     return (
       <div className="px-2 py-1.5">
-        <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />
+        <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin text-muted-foreground" />
       </div>
     );
   }
@@ -184,7 +157,7 @@ function CheckpointsPanel({
                 className="text-[10px] rounded-md bg-primary px-2 py-1 font-medium text-primary-foreground hover:opacity-90 tech-transition disabled:opacity-50 flex items-center gap-1"
               >
                 {restoringSha === c.sha && (
-                  <Loader2 className="w-3 h-3 animate-spin" />
+                  <Icon name="Loader2" className="w-3 h-3 animate-spin" />
                 )}
                 Confirm
               </button>
@@ -321,9 +294,9 @@ function FileTreeView({
               className="w-full flex items-center gap-1.5 px-2 py-1 rounded-lg text-left font-mono text-[11.5px] text-muted-foreground hover:bg-secondary tech-transition"
             >
               {collapsed ? (
-                <Folder className="w-3.5 h-3.5 shrink-0" />
+                <Icon name="Folder" className="w-3.5 h-3.5 shrink-0" />
               ) : (
-                <FolderOpen className="w-3.5 h-3.5 shrink-0" />
+                <Icon name="FolderOpen" className="w-3.5 h-3.5 shrink-0" />
               )}
               <span className="truncate">{name}</span>
             </button>
@@ -357,7 +330,7 @@ function FileTreeView({
             title={`${f.path} · ${formatBytes(f.size)}`}
             className="flex-1 min-w-0 flex items-center gap-2 px-2 py-1.5 text-left font-mono text-[11.5px]"
           >
-            <FileCode className="w-3.5 h-3.5 shrink-0" />
+            <Icon name="FileCode" className="w-3.5 h-3.5 shrink-0" />
             <span className="truncate">{f.path.split("/").pop()}</span>
           </button>
           <button
@@ -365,7 +338,7 @@ function FileTreeView({
             title={`Delete ${f.path}`}
             className="p-1 mr-1 rounded opacity-0 group-hover:opacity-100 hover:text-destructive tech-transition shrink-0"
           >
-            <Trash2 className="w-3 h-3" />
+            <Icon name="Trash2" className="w-3 h-3" />
           </button>
         </div>
       ))}
@@ -633,7 +606,7 @@ function PublishModal({
       >
         <div className="w-full max-w-md rounded-2xl border border-border bg-card shadow-lg p-5 flex flex-col items-center gap-3 text-center">
           <div className="w-11 h-11 rounded-xl bg-warning/10 flex items-center justify-center">
-            <Clock className="w-5 h-5 text-warning" />
+            <Icon name="Clock" className="w-5 h-5 text-warning" />
           </div>
           <div>
             <h2 className="text-base font-bold text-foreground">
@@ -665,7 +638,7 @@ function PublishModal({
       >
         <div className="w-full max-w-md rounded-2xl border border-border bg-card shadow-lg p-5 flex flex-col items-center gap-3 text-center">
           <div className="w-11 h-11 rounded-xl bg-warning/10 flex items-center justify-center">
-            <AlertTriangle className="w-5 h-5 text-warning" />
+            <Icon name="AlertTriangle" className="w-5 h-5 text-warning" />
           </div>
           <div>
             <h2 className="text-base font-bold text-foreground">
@@ -777,7 +750,7 @@ function PublishModal({
                         aria-label={`Remove ${email}`}
                         className="rounded-full p-0.5 text-muted-foreground hover:text-foreground tech-transition"
                       >
-                        <X className="w-3 h-3" />
+                        <Icon name="X" className="w-3 h-3" />
                       </button>
                     </span>
                   ))}
@@ -809,9 +782,9 @@ function PublishModal({
             }`}
           >
             {testStatus.passed === testStatus.total ? (
-              <CheckCircle2 className="w-3.5 h-3.5 shrink-0" />
+              <Icon name="CheckCircle2" className="w-3.5 h-3.5 shrink-0" />
             ) : (
-              <AlertTriangle className="w-3.5 h-3.5 shrink-0" />
+              <Icon name="AlertTriangle" className="w-3.5 h-3.5 shrink-0" />
             )}
             <span>
               {testStatus.passed === testStatus.total
@@ -827,7 +800,7 @@ function PublishModal({
 
         {error && (
           <div className="flex items-start gap-1.5 text-xs text-destructive whitespace-pre-line">
-            <X className="w-3.5 h-3.5 shrink-0 mt-0.5" /> <span>{error}</span>
+            <Icon name="X" className="w-3.5 h-3.5 shrink-0 mt-0.5" /> <span>{error}</span>
           </div>
         )}
 
@@ -844,9 +817,9 @@ function PublishModal({
             className="rounded-lg bg-primary px-3 sm:px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 tech-transition flex items-center gap-1.5 disabled:opacity-50"
           >
             {busy ? (
-              <Loader2 className="w-4 h-4 animate-spin" />
+              <Icon name="Loader2" className="w-4 h-4 animate-spin" />
             ) : (
-              <Rocket className="w-4 h-4" />
+              <Icon name="Rocket" className="w-4 h-4" />
             )}
             Publish
           </button>
@@ -1672,7 +1645,7 @@ function Workshop({ slug }: { slug: string }) {
   if (!app) {
     return (
       <div className="flex flex-col items-center justify-center h-full gap-3">
-        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+        <Icon name="Loader2" className="w-5 h-5 animate-spin text-muted-foreground" />
         <p className="text-sm text-muted-foreground">Opening Workshop…</p>
       </div>
     );
@@ -1686,7 +1659,7 @@ function Workshop({ slug }: { slug: string }) {
           onClick={() => router.push("/build/apps")}
           className="flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-sm text-muted-foreground hover:text-foreground hover:bg-secondary tech-transition"
         >
-          <ArrowLeft className="w-4 h-4" /> Apps
+          <Icon name="ArrowLeft" className="w-4 h-4" /> Apps
         </button>
         <div className="flex items-center gap-2 min-w-0">
           <div className="w-7 h-7 rounded-lg border border-border bg-gradient-to-br from-primary/20 to-accent/15 flex items-center justify-center text-sm shrink-0">
@@ -1711,7 +1684,7 @@ function Workshop({ slug }: { slug: string }) {
                 ? [
                     { id: "preview", label: "Preview" },
                     { id: "code", label: "Code" },
-                    { id: "tests", label: "Tests", icon: FlaskConical },
+                    { id: "tests", label: "Tests", icon: "FlaskConical" },
                   ]
                 : [{ id: "preview", label: "Preview" }]
             }
@@ -1740,7 +1713,7 @@ function Workshop({ slug }: { slug: string }) {
               : "text-muted-foreground hover:bg-secondary"
           }`}
         >
-          <Wrench className="w-3.5 h-3.5" />
+          <Icon name="Wrench" className="w-3.5 h-3.5" />
           <span className="hidden sm:inline">
             {advanced ? "Advanced" : "Simple"}
           </span>
@@ -1757,7 +1730,7 @@ function Workshop({ slug }: { slug: string }) {
                 : "text-muted-foreground hover:bg-secondary"
             }`}
           >
-            <History className="w-4 h-4" />
+            <Icon name="History" className="w-4 h-4" />
           </button>
 
           {/* Desktop: a popover anchored to this button. On mobile this
@@ -1831,7 +1804,7 @@ function Workshop({ slug }: { slug: string }) {
           onClick={() => setShowPublish(true)}
           className="rounded-lg bg-primary px-3 sm:px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 tech-transition flex items-center gap-1.5 shrink-0"
         >
-          <Rocket className="w-4 h-4" /> Publish
+          <Icon name="Rocket" className="w-4 h-4" /> Publish
         </button>
       </div>
 
@@ -1856,7 +1829,7 @@ function Workshop({ slug }: { slug: string }) {
                   title="Reload preview"
                   className="p-1.5 rounded-lg border border-border text-muted-foreground hover:bg-secondary tech-transition"
                 >
-                  <RefreshCw
+                  <Icon name="RefreshCw"
                     className={`w-3.5 h-3.5 ${previewBusy ? "animate-spin" : ""}`}
                   />
                 </button>
@@ -1882,7 +1855,7 @@ function Workshop({ slug }: { slug: string }) {
                         : "text-muted-foreground hover:text-foreground"
                     }`}
                   >
-                    <Monitor className="w-3.5 h-3.5" />
+                    <Icon name="Monitor" className="w-3.5 h-3.5" />
                   </button>
                   <button
                     onClick={() => setPreviewDevice("mobile")}
@@ -1893,7 +1866,7 @@ function Workshop({ slug }: { slug: string }) {
                         : "text-muted-foreground hover:text-foreground"
                     }`}
                   >
-                    <Smartphone className="w-3.5 h-3.5" />
+                    <Icon name="Smartphone" className="w-3.5 h-3.5" />
                   </button>
                 </div>
                 <span className="font-mono text-[10px] text-muted-foreground hidden sm:block">
@@ -1915,7 +1888,7 @@ function Workshop({ slug }: { slug: string }) {
                   )
                 ) : (
                   <div className="flex flex-col items-center justify-center flex-1 gap-3 text-center px-6">
-                    <Sparkles className="w-6 h-6 text-muted-foreground/50" />
+                    <Icon name="Sparkles" className="w-6 h-6 text-muted-foreground/50" />
                     <p className="text-sm font-medium text-foreground">
                       No preview yet
                     </p>
@@ -1935,9 +1908,9 @@ function Workshop({ slug }: { slug: string }) {
                     className="flex items-center gap-1.5 font-mono text-[11px] text-muted-foreground hover:text-foreground tech-transition"
                   >
                     {consoleOpen ? (
-                      <ChevronDown className="w-3 h-3 shrink-0" />
+                      <Icon name="ChevronDown" className="w-3 h-3 shrink-0" />
                     ) : (
-                      <ChevronRight className="w-3 h-3 shrink-0" />
+                      <Icon name="ChevronRight" className="w-3 h-3 shrink-0" />
                     )}
                     {consoleEvents.length === 0 ? (
                       <span className="text-success">Console · clean</span>
@@ -2004,7 +1977,7 @@ function Workshop({ slug }: { slug: string }) {
                     title="New file"
                     className="p-1 rounded hover:bg-secondary text-muted-foreground hover:text-foreground tech-transition shrink-0"
                   >
-                    <Plus className="w-3.5 h-3.5" />
+                    <Icon name="Plus" className="w-3.5 h-3.5" />
                   </button>
                 </div>
                 {showNewFile && (
@@ -2079,13 +2052,13 @@ function Workshop({ slug }: { slug: string }) {
                       title="Files"
                       className="flex items-center gap-1.5 text-[11px] rounded-md border border-border px-2 py-1 text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition shrink-0"
                     >
-                      <Folder className="w-3 h-3" />
+                      <Icon name="Folder" className="w-3 h-3" />
                       Files
                     </button>
                   )}
                   {selectedPath ? (
                     <>
-                      <FileCode className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+                      <Icon name="FileCode" className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
                       <span className="font-mono text-[11.5px] text-foreground truncate">
                         {selectedPath}
                       </span>
@@ -2104,7 +2077,7 @@ function Workshop({ slug }: { slug: string }) {
                   <div className="flex-1" />
                   {buildStatus === "building" && (
                     <span className="flex items-center gap-1.5 text-[11px] text-muted-foreground shrink-0">
-                      <Loader2 className="w-3 h-3 animate-spin" /> Building…
+                      <Icon name="Loader2" className="w-3 h-3 animate-spin" /> Building…
                     </span>
                   )}
                   {selectedPath && (
@@ -2115,9 +2088,9 @@ function Workshop({ slug }: { slug: string }) {
                       className="flex items-center gap-1.5 text-[11px] rounded-md border border-border px-2 py-1 text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition disabled:opacity-40 shrink-0"
                     >
                       {savingFile ? (
-                        <Loader2 className="w-3 h-3 animate-spin" />
+                        <Icon name="Loader2" className="w-3 h-3 animate-spin" />
                       ) : (
-                        <Save className="w-3 h-3" />
+                        <Icon name="Save" className="w-3 h-3" />
                       )}
                       Save
                     </button>
@@ -2126,17 +2099,17 @@ function Workshop({ slug }: { slug: string }) {
                 <div className="flex-1 min-h-0">
                   {selectedPath === null ? (
                     <div className="flex flex-col items-center justify-center h-full gap-2 text-center px-6">
-                      <FileCode className="w-6 h-6 text-muted-foreground/50" />
+                      <Icon name="FileCode" className="w-6 h-6 text-muted-foreground/50" />
                       <p className="text-xs text-muted-foreground max-w-xs">
                         Select a file to edit, or use{" "}
-                        <Plus className="w-3 h-3 inline" /> to create one.
+                        <Icon name="Plus" className="w-3 h-3 inline" /> to create one.
                         Uploaded assets (via the chat&apos;s attach button)
                         land under <code>inputs/</code>.
                       </p>
                     </div>
                   ) : editedContent === null ? (
                     <div className="p-4">
-                      <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
+                      <Icon name="Loader2" className="w-4 h-4 animate-spin text-muted-foreground" />
                     </div>
                   ) : (
                     <Editor
@@ -2157,7 +2130,7 @@ function Workshop({ slug }: { slug: string }) {
                 </div>
                 {buildError && (
                   <div className="flex items-start gap-2 px-3 py-2 border-t border-border bg-destructive/5 text-[11px] text-destructive shrink-0">
-                    <AlertTriangle className="w-3.5 h-3.5 shrink-0 mt-0.5" />
+                    <Icon name="AlertTriangle" className="w-3.5 h-3.5 shrink-0 mt-0.5" />
                     <pre className="whitespace-pre-wrap break-words">
                       {buildError}
                     </pre>
@@ -2183,7 +2156,7 @@ function Workshop({ slug }: { slug: string }) {
                         onClick={() => deleteFile(deletePath)}
                         className="flex items-center gap-1.5 text-xs rounded-md bg-destructive px-3 py-1.5 font-medium text-destructive-foreground hover:opacity-90 tech-transition"
                       >
-                        <Trash2 className="w-3 h-3" /> Delete
+                        <Icon name="Trash2" className="w-3 h-3" /> Delete
                       </button>
                     </div>
                   </div>
@@ -2194,7 +2167,7 @@ function Workshop({ slug }: { slug: string }) {
             /* Tests — empty state. Authoring stays conversational (RFC
                §4.9) — no form/editor here, just a nudge toward chat. */
             <div className="flex flex-col items-center justify-center flex-1 gap-3 text-center px-6">
-              <FlaskConical className="w-6 h-6 text-muted-foreground/50" />
+              <Icon name="FlaskConical" className="w-6 h-6 text-muted-foreground/50" />
               <p className="text-sm font-medium text-foreground">
                 No test scenarios yet
               </p>
@@ -2218,9 +2191,9 @@ function Workshop({ slug }: { slug: string }) {
                   className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition disabled:opacity-50 shrink-0"
                 >
                   {runningTestIds.size > 0 ? (
-                    <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                    <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" />
                   ) : (
-                    <Play className="w-3.5 h-3.5" />
+                    <Icon name="Play" className="w-3.5 h-3.5" />
                   )}
                   Run all
                 </button>
@@ -2250,9 +2223,9 @@ function Workshop({ slug }: { slug: string }) {
                           className="flex items-center gap-1.5 flex-1 min-w-0 text-left"
                         >
                           {expanded ? (
-                            <ChevronDown className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+                            <Icon name="ChevronDown" className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
                           ) : (
-                            <ChevronRight className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+                            <Icon name="ChevronRight" className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
                           )}
                           <span className="text-sm text-foreground truncate">
                             {scenario.name}
@@ -2280,9 +2253,9 @@ function Workshop({ slug }: { slug: string }) {
                           className="flex items-center gap-1 rounded-md border border-border px-2 py-1 text-[10px] text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition disabled:opacity-50 shrink-0"
                         >
                           {running ? (
-                            <Loader2 className="w-3 h-3 animate-spin" />
+                            <Icon name="Loader2" className="w-3 h-3 animate-spin" />
                           ) : (
-                            <Play className="w-3 h-3" />
+                            <Icon name="Play" className="w-3 h-3" />
                           )}
                           Run
                         </button>
@@ -2295,7 +2268,7 @@ function Workshop({ slug }: { slug: string }) {
                             </p>
                           ) : result.passed ? (
                             <div className="flex items-center gap-1.5 text-success">
-                              <CheckCircle2 className="w-3.5 h-3.5 shrink-0" />
+                              <Icon name="CheckCircle2" className="w-3.5 h-3.5 shrink-0" />
                               All {result.steps.length} steps and{" "}
                               {result.assertions.length} assertions passed.
                             </div>
@@ -2314,7 +2287,7 @@ function Workshop({ slug }: { slug: string }) {
                                     key={`step-${i}`}
                                     className="flex items-start gap-1.5"
                                   >
-                                    <XCircle className="w-3 h-3 text-destructive shrink-0 mt-0.5" />
+                                    <Icon name="XCircle" className="w-3 h-3 text-destructive shrink-0 mt-0.5" />
                                     <span className="text-destructive break-words">
                                       {describeStep(s.step)}
                                       {s.error ? `: ${s.error}` : ""}
@@ -2328,7 +2301,7 @@ function Workshop({ slug }: { slug: string }) {
                                     key={`assertion-${i}`}
                                     className="flex items-start gap-1.5"
                                   >
-                                    <XCircle className="w-3 h-3 text-destructive shrink-0 mt-0.5" />
+                                    <Icon name="XCircle" className="w-3 h-3 text-destructive shrink-0 mt-0.5" />
                                     <span className="text-destructive break-words">
                                       {describeAssertion(a.assertion)} — got{" "}
                                       {JSON.stringify(a.actual)}
@@ -2338,7 +2311,7 @@ function Workshop({ slug }: { slug: string }) {
                                 ))}
                               {result.error && (
                                 <div className="flex items-start gap-1.5">
-                                  <XCircle className="w-3 h-3 text-destructive shrink-0 mt-0.5" />
+                                  <Icon name="XCircle" className="w-3 h-3 text-destructive shrink-0 mt-0.5" />
                                   <span className="text-destructive break-words">
                                     {result.error}
                                   </span>
@@ -2363,7 +2336,7 @@ function Workshop({ slug }: { slug: string }) {
           }`}
         >
           <div className="flex items-center gap-2 px-4 h-10 border-b border-border shrink-0">
-            <Sparkles className="w-4 h-4 text-accent" />
+            <Icon name="Sparkles" className="w-4 h-4 text-accent" />
             <div className="min-w-0">
               <div className="text-xs font-semibold text-foreground">
                 Build chat
@@ -2383,7 +2356,7 @@ function Workshop({ slug }: { slug: string }) {
                   key={scope}
                   className="flex items-start gap-2.5 rounded-lg border border-border bg-secondary px-3 py-2.5"
                 >
-                  <Plug className="w-4 h-4 text-primary shrink-0 mt-0.5" />
+                  <Icon name="Plug" className="w-4 h-4 text-primary shrink-0 mt-0.5" />
                   <div className="min-w-0 flex-1">
                     <p className="text-[12px] font-semibold text-foreground leading-snug">
                       New capability requested:{" "}
@@ -2401,7 +2374,7 @@ function Workshop({ slug }: { slug: string }) {
                     aria-label="Dismiss"
                     className="shrink-0 p-0.5 rounded text-muted-foreground hover:text-foreground tech-transition"
                   >
-                    <X className="w-3.5 h-3.5" />
+                    <Icon name="X" className="w-3.5 h-3.5" />
                   </button>
                 </div>
               ))}
@@ -2423,7 +2396,7 @@ function Workshop({ slug }: { slug: string }) {
                     key={result.scenarioId}
                     className="flex items-start gap-2.5 rounded-lg border border-border bg-secondary px-3 py-2.5"
                   >
-                    <FlaskConical className="w-4 h-4 text-destructive shrink-0 mt-0.5" />
+                    <Icon name="FlaskConical" className="w-4 h-4 text-destructive shrink-0 mt-0.5" />
                     <div className="min-w-0 flex-1">
                       <p className="text-[12px] font-semibold text-foreground leading-snug">
                         Test failing:{" "}
@@ -2446,7 +2419,7 @@ function Workshop({ slug }: { slug: string }) {
                       aria-label="Dismiss"
                       className="shrink-0 p-0.5 rounded text-muted-foreground hover:text-foreground tech-transition"
                     >
-                      <X className="w-3.5 h-3.5" />
+                      <Icon name="X" className="w-3.5 h-3.5" />
                     </button>
                   </div>
                 );
@@ -2457,7 +2430,7 @@ function Workshop({ slug }: { slug: string }) {
           <div className="flex-1 min-h-0">
             {!app.workspace_path ? (
               <div className="flex flex-col items-center justify-center h-full gap-3 px-6 text-center">
-                <Lock className="w-5 h-5 text-muted-foreground/60" />
+                <Icon name="Lock" className="w-5 h-5 text-muted-foreground/60" />
                 <p className="text-sm font-medium text-foreground">Read-only</p>
                 <p className="text-xs text-muted-foreground max-w-[16rem]">
                   You can browse this app&apos;s preview and code, but only its
@@ -2478,7 +2451,7 @@ function Workshop({ slug }: { slug: string }) {
               />
             ) : (
               <div className="flex items-center justify-center h-full">
-                <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
+                <Icon name="Loader2" className="w-4 h-4 animate-spin text-muted-foreground" />
               </div>
             )}
           </div>
@@ -2506,7 +2479,7 @@ function Workshop({ slug }: { slug: string }) {
       {pendingConfirm && (
         <div className="fixed bottom-5 right-5 z-40 w-[360px] rounded-2xl border border-border bg-popover shadow-lg p-3.5 flex flex-col gap-2.5">
           <div className="flex items-start gap-2.5">
-            <AlertTriangle className="w-4 h-4 text-warning shrink-0 mt-0.5" />
+            <Icon name="AlertTriangle" className="w-4 h-4 text-warning shrink-0 mt-0.5" />
             <div className="min-w-0">
               <p className="text-[12.5px] font-semibold text-foreground leading-snug">
                 Preview wants to use{" "}
@@ -2576,7 +2549,7 @@ export default function WorkshopPage({
     <Suspense
       fallback={
         <div className="flex items-center justify-center h-full">
-          <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+          <Icon name="Loader2" className="w-5 h-5 animate-spin text-muted-foreground" />
         </div>
       }
     >
diff --git a/workbench/control_plane/src/app/build/apps/[slug]/page.tsx b/workbench/control_plane/src/app/build/apps/[slug]/page.tsx
index ab525b34..fd7d12c0 100644
--- a/workbench/control_plane/src/app/build/apps/[slug]/page.tsx
+++ b/workbench/control_plane/src/app/build/apps/[slug]/page.tsx
@@ -8,24 +8,12 @@
  * user/storage/ai calls with the VIEWER's session (docs/app-workshop §4.4).
  */
 
+import AppIcon, { themedIcon } from "@/components/Icon";
+import type { ThemedIcon } from "@/components/Icon";
 import { use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useSession } from "next-auth/react";
 import { useTheme } from "next-themes";
-import {
-  AlertTriangle,
-  Database,
-  GitFork,
-  Hammer,
-  HelpCircle,
-  Info,
-  Loader2,
-  Plug,
-  Sparkles,
-  User,
-  Wrench,
-  type LucideIcon,
-} from "lucide-react";
 import SandboxedHtml from "@/components/SandboxedHtml";
 import {
   buildAppSrcDoc,
@@ -134,12 +122,12 @@ function describeScope(scope: string): string {
 }
 
 /** Icon per scope category — `HelpCircle` for anything unrecognized. */
-function scopeIcon(scope: string): LucideIcon {
-  if (scope === "identity:read") return User;
-  if (scope === "storage:app") return Database;
-  if (scope.startsWith("ai:")) return Sparkles;
-  if (scope.startsWith("tool:")) return Plug;
-  return HelpCircle;
+function scopeIcon(scope: string): ThemedIcon {
+  if (scope === "identity:read") return themedIcon("User");
+  if (scope === "storage:app") return themedIcon("Database");
+  if (scope.startsWith("ai:")) return themedIcon("Sparkles");
+  if (scope.startsWith("tool:")) return themedIcon("Plug");
+  return themedIcon("HelpCircle");
 }
 
 export default function AppRunPage({
@@ -413,7 +401,7 @@ export default function AppRunPage({
   if (loading) {
     return (
       <div className="flex flex-col items-center justify-center h-full gap-3">
-        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+        <AppIcon name="Loader2" className="w-5 h-5 animate-spin text-muted-foreground" />
         <p className="text-sm text-muted-foreground">Loading app…</p>
       </div>
     );
@@ -470,9 +458,9 @@ export default function AppRunPage({
           className="rounded-lg border border-border px-2 sm:px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition flex items-center gap-1.5 shrink-0 disabled:opacity-50"
         >
           {forking ? (
-            <Loader2 className="w-3.5 h-3.5 animate-spin" />
+            <AppIcon name="Loader2" className="w-3.5 h-3.5 animate-spin" />
           ) : (
-            <GitFork className="w-3.5 h-3.5" />
+            <AppIcon name="GitFork" className="w-3.5 h-3.5" />
           )}
           <span className="hidden sm:inline">Fork</span>
         </button>
@@ -482,7 +470,7 @@ export default function AppRunPage({
             title="Open in Workshop"
             className="rounded-lg border border-border px-2 sm:px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition flex items-center gap-1.5 shrink-0"
           >
-            <Wrench className="w-3.5 h-3.5" />
+            <AppIcon name="Wrench" className="w-3.5 h-3.5" />
             <span className="hidden sm:inline">Open in Workshop</span>
           </button>
         )}
@@ -496,7 +484,7 @@ export default function AppRunPage({
                 : "text-muted-foreground hover:bg-secondary"
             }`}
           >
-            <Info className="w-4 h-4" />
+            <AppIcon name="Info" className="w-4 h-4" />
           </button>
 
           {/* Info popover */}
@@ -521,7 +509,7 @@ export default function AppRunPage({
                   Versions
                 </span>
                 {versions === null ? (
-                  <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />
+                  <AppIcon name="Loader2" className="w-3.5 h-3.5 animate-spin text-muted-foreground" />
                 ) : versions.length === 0 ? (
                   <span className="text-muted-foreground">
                     No published versions.
@@ -565,7 +553,7 @@ export default function AppRunPage({
                               className="text-[10px] rounded-md bg-primary px-2 py-1 font-medium text-primary-foreground hover:opacity-90 tech-transition disabled:opacity-50 flex items-center gap-1"
                             >
                               {rollbackBusy && (
-                                <Loader2 className="w-3 h-3 animate-spin" />
+                                <AppIcon name="Loader2" className="w-3 h-3 animate-spin" />
                               )}
                               Confirm
                             </button>
@@ -589,7 +577,7 @@ export default function AppRunPage({
 
       {forkError && (
         <div className="flex items-center gap-2 px-4 py-2 border-b border-border bg-destructive/5 text-xs text-destructive shrink-0">
-          <AlertTriangle className="w-3.5 h-3.5 shrink-0" />
+          <AppIcon name="AlertTriangle" className="w-3.5 h-3.5 shrink-0" />
           {forkError}
           <button
             onClick={() => setForkError(null)}
@@ -607,7 +595,7 @@ export default function AppRunPage({
         ) : (
           <div className="flex flex-col items-center justify-center flex-1 gap-3 text-center px-6">
             <div className="w-11 h-11 rounded-xl bg-primary/10 flex items-center justify-center">
-              <Hammer className="w-5 h-5 text-primary" />
+              <AppIcon name="Hammer" className="w-5 h-5 text-primary" />
             </div>
             <p className="text-sm font-medium text-foreground">
               Not published yet
@@ -687,7 +675,7 @@ export default function AppRunPage({
                 disabled={consentBusy}
                 className="rounded-lg bg-primary px-3 sm:px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 tech-transition flex items-center gap-1.5 disabled:opacity-50"
               >
-                {consentBusy && <Loader2 className="w-4 h-4 animate-spin" />}
+                {consentBusy && <AppIcon name="Loader2" className="w-4 h-4 animate-spin" />}
                 Allow
               </button>
             </div>
@@ -700,7 +688,7 @@ export default function AppRunPage({
       {pendingConfirm && (
         <div className="fixed bottom-5 right-5 z-40 w-[360px] rounded-2xl border border-border bg-popover shadow-lg p-3.5 flex flex-col gap-2.5">
           <div className="flex items-start gap-2.5">
-            <AlertTriangle className="w-4 h-4 text-warning shrink-0 mt-0.5" />
+            <AppIcon name="AlertTriangle" className="w-4 h-4 text-warning shrink-0 mt-0.5" />
             <div className="min-w-0">
               <p className="text-[12.5px] font-semibold text-foreground leading-snug">
                 <span className="font-bold">{app.name}</span> wants to use{" "}
diff --git a/workbench/control_plane/src/app/build/apps/page.tsx b/workbench/control_plane/src/app/build/apps/page.tsx
index 80fad359..f7718f81 100644
--- a/workbench/control_plane/src/app/build/apps/page.tsx
+++ b/workbench/control_plane/src/app/build/apps/page.tsx
@@ -8,23 +8,10 @@
  * the published app full-page, drafts (and editors) jump into the Workshop.
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useSession } from "next-auth/react";
-import {
-  Clock,
-  GitFork,
-  Hammer,
-  LayoutTemplate,
-  Loader2,
-  Pin,
-  PinOff,
-  Plus,
-  RefreshCw,
-  Sparkles,
-  X,
-  Zap,
-} from "lucide-react";
 import FilterPills from "@/components/FilterPills";
 import type { AppMeta } from "./lib/types";
 
@@ -133,7 +120,7 @@ function AppCard({
                 : "text-muted-foreground opacity-0 group-hover:opacity-100 hover:text-foreground"
             }`}
           >
-            <LayoutTemplate className="w-3.5 h-3.5" />
+            <Icon name="LayoutTemplate" className="w-3.5 h-3.5" />
           </span>
         )}
         <span
@@ -157,9 +144,9 @@ function AppCard({
           }`}
         >
           {app.pinned ? (
-            <Pin className="w-3.5 h-3.5 fill-current" />
+            <Icon name="Pin" className="w-3.5 h-3.5 fill-current" />
           ) : (
-            <PinOff className="w-3.5 h-3.5" />
+            <Icon name="PinOff" className="w-3.5 h-3.5" />
           )}
         </span>
       </div>
@@ -185,7 +172,7 @@ function AppCard({
             {isLive && <span>·</span>}
             <span className="truncate">by {app.owner_email.split("@")[0]}</span>
             <span>·</span>
-            <Clock className="w-3 h-3 shrink-0" />
+            <Icon name="Clock" className="w-3 h-3 shrink-0" />
             <span>{formatRelative(app.updated_at)}</span>
           </div>
         </div>
@@ -213,7 +200,7 @@ function AppCard({
             title={`${app.month_calls} AI call${app.month_calls === 1 ? "" : "s"} this month`}
             className="flex items-center gap-1 text-[10.5px] text-muted-foreground"
           >
-            <Zap className="w-3 h-3 shrink-0" />
+            <Icon name="Zap" className="w-3 h-3 shrink-0" />
             {formatCost(app.month_cost_usd ?? 0)}
           </span>
         )}
@@ -235,7 +222,7 @@ function AppCard({
             }}
             className="flex items-center gap-1 text-[11px] font-semibold text-accent hover:opacity-80 tech-transition"
           >
-            <GitFork className="w-3 h-3" />
+            <Icon name="GitFork" className="w-3 h-3" />
             Use
           </span>
         )}
@@ -470,7 +457,7 @@ export default function CustomAppsPage() {
             title="Refresh"
             className="p-2 rounded-lg border border-border text-muted-foreground hover:bg-secondary tech-transition"
           >
-            <RefreshCw className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
+            <Icon name="RefreshCw" className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
           </button>
           <button
             onClick={() => createApp("")}
@@ -478,9 +465,9 @@ export default function CustomAppsPage() {
             className="rounded-lg bg-primary px-3 sm:px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 tech-transition flex items-center gap-1.5 disabled:opacity-50"
           >
             {creating ? (
-              <Loader2 className="w-4 h-4 animate-spin" />
+              <Icon name="Loader2" className="w-4 h-4 animate-spin" />
             ) : (
-              <Plus className="w-4 h-4" />
+              <Icon name="Plus" className="w-4 h-4" />
             )}
             New app
           </button>
@@ -502,7 +489,7 @@ export default function CustomAppsPage() {
 
       {forkError && (
         <div className="flex items-center gap-2 mx-4 sm:mx-6 mt-3 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive shrink-0">
-          <X className="w-3.5 h-3.5 shrink-0" />
+          <Icon name="X" className="w-3.5 h-3.5 shrink-0" />
           {forkError}
           <button
             onClick={() => setForkError(null)}
@@ -525,7 +512,7 @@ export default function CustomAppsPage() {
                 if (describe.trim()) createApp(describe);
               }}
             >
-              <Sparkles className="w-4 h-4 text-accent shrink-0" />
+              <Icon name="Sparkles" className="w-4 h-4 text-accent shrink-0" />
               <input
                 value={describe}
                 onChange={(e) => setDescribe(e.target.value)}
@@ -554,7 +541,7 @@ export default function CustomAppsPage() {
             </div>
             {createError && (
               <div className="flex items-center gap-1.5 text-xs text-destructive">
-                <X className="w-3.5 h-3.5" /> {createError}
+                <Icon name="X" className="w-3.5 h-3.5" /> {createError}
               </div>
             )}
           </div>
@@ -562,7 +549,7 @@ export default function CustomAppsPage() {
           {/* Loading / error / empty */}
           {loading && (
             <div className="flex flex-col items-center justify-center h-40 gap-3">
-              <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+              <Icon name="Loader2" className="w-5 h-5 animate-spin text-muted-foreground" />
               <p className="text-sm text-muted-foreground">Loading apps…</p>
             </div>
           )}
@@ -582,7 +569,7 @@ export default function CustomAppsPage() {
           {!loading && !error && visible.length === 0 && (
             <div className="flex flex-col items-center justify-center h-56 gap-3 text-center">
               <div className="w-11 h-11 rounded-xl bg-primary/10 flex items-center justify-center">
-                <Hammer className="w-5 h-5 text-primary" />
+                <Icon name="Hammer" className="w-5 h-5 text-primary" />
               </div>
               <p className="text-sm font-medium text-foreground">
                 {apps.length === 0 ? "No apps yet" : "Nothing matches this filter"}
diff --git a/workbench/control_plane/src/app/chat/page.tsx b/workbench/control_plane/src/app/chat/page.tsx
index 721b23d3..1ef71629 100644
--- a/workbench/control_plane/src/app/chat/page.tsx
+++ b/workbench/control_plane/src/app/chat/page.tsx
@@ -1,9 +1,9 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useState, useEffect, useCallback, useMemo, useRef, Suspense } from "react";
 import { useSearchParams } from "next/navigation";
 import { useSession } from "next-auth/react";
-import { Bot, MessagesSquare, Search, Trash2, Users } from "lucide-react";
 import BreathingCharacter, { characterForAgent } from "@/components/BreathingCharacter";
 import {
   getSessions,
@@ -91,7 +91,7 @@ function AgentPickerCard({
             <AgentAvatar
               libraryId={avatarId}
               size={34}
-              fallback={<Bot size={22} className="text-muted-foreground/70" />}
+              fallback={<Icon name="Bot" size={22} className="text-muted-foreground/70" />}
             />
           }
         />
@@ -398,7 +398,7 @@ function SessionList({
 
       {/* Search — client-side filter over titles, previews, and agent names. */}
       <div className="relative mb-1.5">
-        <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/60" />
+        <Icon name="Search" className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/60" />
         <input
           value={query}
           onChange={(e) => setQuery(e.target.value)}
@@ -434,7 +434,7 @@ function SessionList({
                 <AgentAvatar
                   libraryId={agentAvatars[agentName] ?? agentName}
                   size={18}
-                  fallback={<Bot size={14} className="text-muted-foreground/60" />}
+                  fallback={<Icon name="Bot" size={14} className="text-muted-foreground/60" />}
                 />
               </span>
               <span className="flex-1 text-xs font-medium truncate">
@@ -491,7 +491,7 @@ function SessionList({
                                   : `Shared · ${s.participantCount} in the room`
                               }
                             >
-                              <Users className="h-2.5 w-2.5" />
+                              <Icon name="Users" className="h-2.5 w-2.5" />
                               {s.participantCount}
                             </span>
                           )}
@@ -522,7 +522,7 @@ function SessionList({
                         title="Delete conversation"
                         aria-label="Delete conversation"
                       >
-                        <Trash2 className="w-3.5 h-3.5" />
+                        <Icon name="Trash2" className="w-3.5 h-3.5" />
                       </button>
                     </div>
                   );
@@ -989,7 +989,7 @@ function ChatPageInner() {
             className="flex w-full flex-1 cursor-pointer flex-col items-center py-2.5 text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-foreground transition-colors"
             title="Open conversations"
           >
-            <MessagesSquare size={15} />
+            <Icon name="MessagesSquare" size={15} />
             {sessions.length > 0 && (
               <span className="mt-1 rounded-full bg-secondary px-1 text-[10px]">
                 {sessions.length}
diff --git a/workbench/control_plane/src/app/email/components/AccountSidebar.tsx b/workbench/control_plane/src/app/email/components/AccountSidebar.tsx
index ee13b2a7..a4b50ef6 100644
--- a/workbench/control_plane/src/app/email/components/AccountSidebar.tsx
+++ b/workbench/control_plane/src/app/email/components/AccountSidebar.tsx
@@ -1,12 +1,7 @@
 "use client";
 
+import AppIcon, { themedIcon } from "@/components/Icon";
 import { useState } from "react";
-import {
-  Inbox, Send, FileText, Trash2, Star, Archive, Tag,
-  Plus, ChevronDown, ChevronRight, Check,
-  ShieldAlert, Folder, Mails, MailMinus, Sparkles,
-  BarChart3, Zap, LayoutDashboard, MessageSquare, Clock,
-} from "lucide-react";
 import { EmailAccount, EmailFolder, AutomationFeature } from "../lib/types";
 
 interface AccountSidebarProps {
@@ -36,11 +31,11 @@ const AUTOMATION_ITEMS: {
   label: string;
   icon: React.ElementType;
 }[] = [
-  { key: "chat", label: "Chat", icon: MessageSquare },
-  { key: "digest", label: "Dashboard", icon: LayoutDashboard },
-  { key: "unsubscribe", label: "Email Cleaner", icon: MailMinus },
-  { key: "ai-settings", label: "AI Settings", icon: Sparkles },
-  { key: "analytics", label: "Analytics", icon: BarChart3 },
+  { key: "chat", label: "Chat", icon: themedIcon("MessageSquare") },
+  { key: "digest", label: "Dashboard", icon: themedIcon("LayoutDashboard") },
+  { key: "unsubscribe", label: "Email Cleaner", icon: themedIcon("MailMinus") },
+  { key: "ai-settings", label: "AI Settings", icon: themedIcon("Sparkles") },
+  { key: "analytics", label: "Analytics", icon: themedIcon("BarChart3") },
 ];
 
 export function AccountSidebar({
@@ -73,7 +68,7 @@ export function AccountSidebar({
           title="Add email account"
           onClick={onAddAccount}
         >
-          <Plus size={14} />
+          <AppIcon name="Plus" size={14} />
         </button>
       </div>
 
@@ -83,7 +78,7 @@ export function AccountSidebar({
           onClick={() => setAccountsExpanded((v) => !v)}
           className="flex items-center gap-1.5 w-full px-2 py-1 text-xs text-muted-foreground hover:text-sidebar-foreground transition-colors"
         >
-          {accountsExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+          {accountsExpanded ? <AppIcon name="ChevronDown" size={12} /> : <AppIcon name="ChevronRight" size={12} />}
           <span>Email Accounts</span>
         </button>
 
@@ -116,7 +111,7 @@ export function AccountSidebar({
                     <div className="flex items-center gap-1">
                       <span className="text-xs font-medium truncate">{account.label}</span>
                       {account.isDefault && (
-                        <Star
+                        <AppIcon name="Star"
                           size={10}
                           className="text-amber-400 fill-amber-400 flex-shrink-0"
                           aria-label="Default mailbox"
@@ -138,11 +133,11 @@ export function AccountSidebar({
                     title="Set as default mailbox"
                     className="p-1 rounded opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-amber-400 transition-opacity flex-shrink-0"
                   >
-                    <Star size={11} />
+                    <AppIcon name="Star" size={11} />
                   </button>
                 )}
                 {selectedAccountId === account.id && (
-                  <Check size={11} className="text-primary flex-shrink-0" />
+                  <AppIcon name="Check" size={11} className="text-primary flex-shrink-0" />
                 )}
                 {account.unreadCount > 0 && selectedAccountId !== account.id && (
                   <span className="bg-primary text-primary-foreground text-[9px] rounded-full px-1.5 py-0.5 flex-shrink-0">
@@ -163,7 +158,7 @@ export function AccountSidebar({
       {showAutomation && (
         <div className="flex-shrink-0 px-2 py-2.5">
           <div className="flex items-center gap-1.5 px-2 py-1 text-[10px] tracking-widest uppercase text-muted-foreground font-semibold">
-            <Zap size={11} className="text-primary" />
+            <AppIcon name="Zap" size={11} className="text-primary" />
             <span>Email Automation</span>
           </div>
           <div className="mt-1 space-y-0.5">
@@ -229,18 +224,18 @@ export function AccountSidebar({
 // Helper to map folder key to Lucide icon component.
 function getFolderIcon(key: string, type?: "system" | "user"): React.ElementType {
   const map: Record<string, React.ElementType> = {
-    all: Mails,
-    inbox: Inbox,
-    starred: Star,
-    snoozed: Clock,
-    sent: Send,
-    drafts: FileText,
-    archive: Archive,
-    junk: ShieldAlert,
-    labels: Tag,
-    trash: Trash2,
+    all: themedIcon("Mails"),
+    inbox: themedIcon("Inbox"),
+    starred: themedIcon("Star"),
+    snoozed: themedIcon("Clock"),
+    sent: themedIcon("Send"),
+    drafts: themedIcon("FileText"),
+    archive: themedIcon("Archive"),
+    junk: themedIcon("ShieldAlert"),
+    labels: themedIcon("Tag"),
+    trash: themedIcon("Trash2"),
   };
   if (map[key]) return map[key];
   // User-created provider folders/labels get a generic folder icon.
-  return type === "user" ? Folder : Inbox;
+  return type === "user" ? themedIcon("Folder") : themedIcon("Inbox");
 }
diff --git a/workbench/control_plane/src/app/email/components/ArtifactAttachPicker.tsx b/workbench/control_plane/src/app/email/components/ArtifactAttachPicker.tsx
index 87a99fb7..50fa36c0 100644
--- a/workbench/control_plane/src/app/email/components/ArtifactAttachPicker.tsx
+++ b/workbench/control_plane/src/app/email/components/ArtifactAttachPicker.tsx
@@ -8,8 +8,8 @@
  * send time — no base64 round-trip in the browser).
  */
 
+import Icon from "@/components/Icon";
 import { useState, useEffect, useRef } from "react";
-import { Sparkles, Loader2, Paperclip } from "lucide-react";
 import { listEmailArtifacts, type EmailArtifact } from "../lib/api";
 
 export function ArtifactAttachPicker({
@@ -60,13 +60,13 @@ export function ArtifactAttachPicker({
       >
         {/* Icon-only on phones — composer footers must fit the whole action
             row (incl. Send) on a narrow screen. */}
-        <Sparkles size={13} /> <span className="hidden sm:inline">AI files</span>
+        <Icon name="Sparkles" size={13} /> <span className="hidden sm:inline">AI files</span>
       </button>
       {open && (
         <div className="absolute bottom-full right-0 mb-1.5 w-64 max-h-60 overflow-y-auto rounded-lg border border-border bg-popover shadow-xl z-[70] py-1">
           {loading ? (
             <div className="px-3 py-2 text-[11px] text-muted-foreground flex items-center gap-1.5">
-              <Loader2 size={12} className="animate-spin" /> Loading…
+              <Icon name="Loader2" size={12} className="animate-spin" /> Loading…
             </div>
           ) : available.length === 0 ? (
             <div className="px-3 py-2 text-[11px] text-muted-foreground">
@@ -83,7 +83,7 @@ export function ArtifactAttachPicker({
                 }}
                 className="w-full text-left px-3 py-1.5 hover:bg-secondary transition-colors flex items-center gap-2"
               >
-                <Paperclip size={12} className="text-muted-foreground flex-shrink-0" />
+                <Icon name="Paperclip" size={12} className="text-muted-foreground flex-shrink-0" />
                 <span className="text-[11px] text-foreground truncate flex-1" title={a.path}>
                   {a.name}
                 </span>
diff --git a/workbench/control_plane/src/app/email/components/AttachmentList.tsx b/workbench/control_plane/src/app/email/components/AttachmentList.tsx
index f1f70546..156c8f7f 100644
--- a/workbench/control_plane/src/app/email/components/AttachmentList.tsx
+++ b/workbench/control_plane/src/app/email/components/AttachmentList.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useState } from "react";
-import { ChevronDown, Download, Eye, FileText } from "lucide-react";
 import { Attachment } from "../lib/types";
 import { getAttachmentDownloadUrl } from "../lib/api";
 import { formatBytes } from "../lib/utils";
@@ -89,12 +89,12 @@ export function AttachmentList({
                       className="w-14 h-14 object-cover bg-background block"
                     />
                     <span className="absolute inset-0 hidden group-hover:flex items-center justify-center bg-black/40">
-                      <Eye size={14} className="text-white" />
+                      <Icon name="Eye" size={14} className="text-white" />
                     </span>
                   </>
                 ) : (
                   <span className="w-14 h-14 bg-background flex items-center justify-center group-hover:bg-secondary/60 transition-colors">
-                    <FileText size={18} className="text-muted-foreground group-hover:text-foreground" />
+                    <Icon name="FileText" size={18} className="text-muted-foreground group-hover:text-foreground" />
                   </span>
                 )}
               </button>
@@ -125,7 +125,7 @@ export function AttachmentList({
                 title={`Download ${att.filename}`}
                 className="px-2 self-stretch flex items-center text-muted-foreground hover:text-foreground hover:bg-secondary/60 transition-colors flex-shrink-0"
               >
-                <Download size={13} />
+                <Icon name="Download" size={13} />
               </a>
             </div>
           );
@@ -136,7 +136,7 @@ export function AttachmentList({
           onClick={() => setExpanded((e) => !e)}
           className="mt-2 inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-foreground transition-colors"
         >
-          <ChevronDown
+          <Icon name="ChevronDown"
             size={12}
             className={`transition-transform ${expanded ? "rotate-180" : ""}`}
           />
diff --git a/workbench/control_plane/src/app/email/components/CommandPalette.tsx b/workbench/control_plane/src/app/email/components/CommandPalette.tsx
index da4ecbea..48ebbbb2 100644
--- a/workbench/control_plane/src/app/email/components/CommandPalette.tsx
+++ b/workbench/control_plane/src/app/email/components/CommandPalette.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Search } from "lucide-react";
 
 export interface Command {
   id: string;
@@ -68,7 +68,7 @@ export function CommandPalette({
       <div className="absolute inset-0 bg-black/50" onClick={onClose} />
       <div className="relative w-full max-w-lg bg-card border border-border rounded-xl shadow-2xl overflow-hidden">
         <div className="flex items-center gap-2 px-3 py-2.5 border-b border-border">
-          <Search size={14} className="text-muted-foreground flex-shrink-0" />
+          <Icon name="Search" size={14} className="text-muted-foreground flex-shrink-0" />
           <input
             ref={inputRef}
             value={q}
diff --git a/workbench/control_plane/src/app/email/components/ComposePanel.tsx b/workbench/control_plane/src/app/email/components/ComposePanel.tsx
index 9823d480..9ba528fc 100644
--- a/workbench/control_plane/src/app/email/components/ComposePanel.tsx
+++ b/workbench/control_plane/src/app/email/components/ComposePanel.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useState, useEffect, useRef } from "react";
-import { X, Loader2, Paperclip } from "lucide-react";
 import { useEmailStore } from "../lib/emailStore";
 import {
   fileToSendAttachment,
@@ -263,7 +263,7 @@ export function ComposePanel({
             onClick={onClose}
             className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
           >
-            <X size={16} />
+            <Icon name="X" size={16} />
           </button>
         </div>
 
@@ -330,14 +330,14 @@ export function ComposePanel({
                   key={`f-${i}`}
                   className="inline-flex items-center gap-1 text-[10px] px-2 py-1 rounded-md border border-border bg-secondary text-muted-foreground"
                 >
-                  <Paperclip size={10} />
+                  <Icon name="Paperclip" size={10} />
                   <span className="truncate max-w-[160px]" title={a.filename}>{a.filename}</span>
                   <button
                     onClick={() => setAttachments((prev) => prev.filter((_, j) => j !== i))}
                     className="hover:text-foreground"
                     title="Remove attachment"
                   >
-                    <X size={10} />
+                    <Icon name="X" size={10} />
                   </button>
                 </span>
               ))}
@@ -347,14 +347,14 @@ export function ComposePanel({
                   className="inline-flex items-center gap-1 text-[10px] px-2 py-1 rounded-md border border-primary/40 bg-primary/5 text-primary"
                   title={a.path}
                 >
-                  <Paperclip size={10} />
+                  <Icon name="Paperclip" size={10} />
                   <span className="truncate max-w-[160px]">{a.name || a.path}</span>
                   <button
                     onClick={() => setArtifacts((prev) => prev.filter((_, j) => j !== i))}
                     className="hover:text-foreground"
                     title="Remove attachment"
                   >
-                    <X size={10} />
+                    <Icon name="X" size={10} />
                   </button>
                 </span>
               ))}
@@ -402,7 +402,7 @@ export function ComposePanel({
               className="px-2 py-1.5 text-xs rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors cursor-pointer flex items-center"
               title="Attach files"
             >
-              <Paperclip size={14} />
+              <Icon name="Paperclip" size={14} />
               <input
                 type="file"
                 multiple
@@ -431,7 +431,7 @@ export function ComposePanel({
               disabled={sending || !to.trim()}
               className="px-4 py-1.5 text-xs rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
             >
-              {sending && <Loader2 size={12} className="animate-spin" />}
+              {sending && <Icon name="Loader2" size={12} className="animate-spin" />}
               {sending ? "Sending…" : "Send"}
             </button>
           </div>
diff --git a/workbench/control_plane/src/app/email/components/ComposerAI.tsx b/workbench/control_plane/src/app/email/components/ComposerAI.tsx
index f26f1980..41e229d1 100644
--- a/workbench/control_plane/src/app/email/components/ComposerAI.tsx
+++ b/workbench/control_plane/src/app/email/components/ComposerAI.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useState } from "react";
-import { Sparkles, MoreHorizontal } from "lucide-react";
 
 /**
  * The quoted trailing email shown in a COMPOSE box — collapsed behind an
@@ -31,7 +31,7 @@ export function ComposerQuote({
             : "border-border bg-secondary text-muted-foreground hover:bg-secondary/70 hover:text-foreground"
         }`}
       >
-        <MoreHorizontal size={14} />
+        <Icon name="MoreHorizontal" size={14} />
       </button>
       {open && (
         <div className="mt-1 border-l-2 border-border pl-3">
@@ -66,7 +66,7 @@ export function AiButton({
           : "text-muted-foreground hover:text-foreground hover:bg-secondary"
       }`}
     >
-      <Sparkles size={13} />
+      <Icon name="Sparkles" size={13} />
     </button>
   );
 }
diff --git a/workbench/control_plane/src/app/email/components/ContactCard.tsx b/workbench/control_plane/src/app/email/components/ContactCard.tsx
index a7b4b8c7..9a37b458 100644
--- a/workbench/control_plane/src/app/email/components/ContactCard.tsx
+++ b/workbench/control_plane/src/app/email/components/ContactCard.tsx
@@ -19,12 +19,9 @@
  * above / to the left near an edge, and becomes a bottom sheet on mobile).
  */
 
+import AppIcon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import {
-  AtSign, Building2, Copy, Check, ExternalLink, Loader2, Mail, Paperclip,
-  Phone, Search, X,
-} from "lucide-react";
 import { getContactCard } from "../lib/api";
 import { useEmailStore } from "../lib/emailStore";
 import {
@@ -183,7 +180,7 @@ function CopyButton({ value, label }: { value: string; label: string }) {
           : "text-muted-foreground opacity-45 group-hover:opacity-80 hover:!opacity-100 hover:text-foreground hover:bg-secondary"
       }`}
     >
-      {done ? <Check size={12} /> : <Copy size={12} />}
+      {done ? <AppIcon name="Check" size={12} /> : <AppIcon name="Copy" size={12} />}
     </button>
   );
 }
@@ -196,7 +193,7 @@ function DetailRow({
   href,
   display,
 }: {
-  icon: typeof Phone;
+  icon: ThemedIcon;
   value: string;
   label: string;
   href?: string;
@@ -437,7 +434,7 @@ function ContactPopover({
           aria-label="Close contact card"
           className="p-1 rounded-lg text-muted-foreground hover:bg-secondary tech-transition shrink-0"
         >
-          <X size={14} />
+          <AppIcon name="X" size={14} />
         </button>
       </div>
 
@@ -448,14 +445,14 @@ function ContactPopover({
           onClick={mailTo}
           className="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 tech-transition"
         >
-          <Mail size={12} /> Email
+          <AppIcon name="Mail" size={12} /> Email
         </button>
         <button
           type="button"
           onClick={searchTheirMail}
           className="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition"
         >
-          <Search size={12} /> All mail
+          <AppIcon name="Search" size={12} /> All mail
         </button>
       </div>
 
@@ -465,7 +462,7 @@ function ContactPopover({
         </div>
       ) : !card ? (
         <div className="flex items-center gap-2 px-4 pb-4 text-xs text-muted-foreground">
-          <Loader2 size={13} className="animate-spin" /> Loading contact…
+          <AppIcon name="Loader2" size={13} className="animate-spin" /> Loading contact…
         </div>
       ) : (
         <>
@@ -475,7 +472,7 @@ function ContactPopover({
               {details?.phones.map((phone) => (
                 <DetailRow
                   key={phone}
-                  icon={Phone}
+                  icon={themedIcon("Phone")}
                   value={phone}
                   label="phone number"
                   href={`tel:${phone.replace(/[^\d+]/g, "")}`}
@@ -483,18 +480,18 @@ function ContactPopover({
               ))}
               {details?.organization && (
                 <DetailRow
-                  icon={Building2}
+                  icon={themedIcon("Building2")}
                   value={details.organization}
                   label="organization"
                 />
               )}
               {card.domain && !details?.organization && (
-                <DetailRow icon={AtSign} value={card.domain} label="domain" />
+                <DetailRow icon={themedIcon("AtSign")} value={card.domain} label="domain" />
               )}
               {details?.links.map((link) => (
                 <DetailRow
                   key={link}
-                  icon={ExternalLink}
+                  icon={themedIcon("ExternalLink")}
                   value={link}
                   display={link.replace(/^https?:\/\//, "")}
                   label="link"
@@ -572,7 +569,7 @@ function ContactPopover({
                         {m.subject}
                       </span>
                       {m.hasAttachments && (
-                        <Paperclip size={10} className="text-muted-foreground shrink-0" />
+                        <AppIcon name="Paperclip" size={10} className="text-muted-foreground shrink-0" />
                       )}
                       {m.receivedAt && (
                         <span className="text-[10px] text-muted-foreground shrink-0">
diff --git a/workbench/control_plane/src/app/email/components/ConversationView.tsx b/workbench/control_plane/src/app/email/components/ConversationView.tsx
index eff98f6a..c148947b 100644
--- a/workbench/control_plane/src/app/email/components/ConversationView.tsx
+++ b/workbench/control_plane/src/app/email/components/ConversationView.tsx
@@ -1,10 +1,7 @@
 "use client";
 
+import AppIcon, { themedIcon } from "@/components/Icon";
 import { useEffect, useRef, useState } from "react";
-import {
-  ChevronDown, Paperclip, PenLine, Send, Loader2, Trash2,
-  Reply, ReplyAll, Forward,
-} from "lucide-react";
 import { Email } from "../lib/types";
 import { fullDateLabel, initials, buildOptimisticSent } from "../lib/utils";
 import { getEmail, fetchFullBody, detectReplyCommitment } from "../lib/api";
@@ -214,12 +211,12 @@ export function ConversationView({
                 )}
               </div>
               {m.hasAttachments && (
-                <Paperclip size={11} className="text-muted-foreground flex-shrink-0" />
+                <AppIcon name="Paperclip" size={11} className="text-muted-foreground flex-shrink-0" />
               )}
               <span className="text-[10px] text-muted-foreground whitespace-nowrap flex-shrink-0">
                 {fullDateLabel(m.receivedAt)}
               </span>
-              <ChevronDown
+              <AppIcon name="ChevronDown"
                 size={13}
                 className={`text-muted-foreground flex-shrink-0 transition-transform ${
                   isOpen ? "rotate-180" : ""
@@ -239,17 +236,17 @@ export function ConversationView({
                   {onReply && (
                     <div className="flex items-center gap-0.5 flex-shrink-0 -mt-0.5">
                       <CardAction
-                        icon={Reply}
+                        icon={themedIcon("Reply")}
                         label="Reply"
                         onClick={() => onReply(view, "reply")}
                       />
                       <CardAction
-                        icon={ReplyAll}
+                        icon={themedIcon("ReplyAll")}
                         label="Reply all"
                         onClick={() => onReply(view, "reply-all")}
                       />
                       <CardAction
-                        icon={Forward}
+                        icon={themedIcon("Forward")}
                         label="Forward"
                         onClick={() => onReply(view, "forward")}
                       />
@@ -593,7 +590,7 @@ export function DraftCard({
   return (
     <div className="border border-primary/40 rounded-lg bg-primary/5 px-3 py-3">
       <div className="flex items-center gap-1.5 mb-2">
-        <PenLine size={12} className="text-primary" />
+        <AppIcon name="PenLine" size={12} className="text-primary" />
         <span className="text-xs font-medium text-primary">Draft</span>
         {hasReplyTarget && (
           <div className="flex items-center bg-background border border-border rounded-md p-0.5 ml-1.5">
@@ -605,7 +602,7 @@ export function DraftCard({
                 !replyAll ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"
               }`}
             >
-              <Reply size={11} className="flex-shrink-0" /> Reply
+              <AppIcon name="Reply" size={11} className="flex-shrink-0" /> Reply
             </button>
             <button
               type="button"
@@ -615,7 +612,7 @@ export function DraftCard({
                 replyAll ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"
               }`}
             >
-              <ReplyAll size={11} className="flex-shrink-0" /> Reply All
+              <AppIcon name="ReplyAll" size={11} className="flex-shrink-0" /> Reply All
             </button>
           </div>
         )}
@@ -703,9 +700,9 @@ export function DraftCard({
           className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
         >
           {sending ? (
-            <Loader2 className="animate-spin" size={13} />
+            <AppIcon name="Loader2" className="animate-spin" size={13} />
           ) : (
-            <Send size={13} />
+            <AppIcon name="Send" size={13} />
           )}
           Send
         </button>
@@ -713,7 +710,7 @@ export function DraftCard({
           onClick={discard}
           className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-border text-xs text-muted-foreground hover:text-destructive hover:bg-secondary transition-colors"
         >
-          <Trash2 size={13} /> Discard
+          <AppIcon name="Trash2" size={13} /> Discard
         </button>
         <AiButton active={aiOpen} onClick={() => setAiOpen((v) => !v)} />
         <span className="text-[10px] text-muted-foreground ml-auto">
diff --git a/workbench/control_plane/src/app/email/components/DraftAssistant.tsx b/workbench/control_plane/src/app/email/components/DraftAssistant.tsx
index ebe7413e..35433498 100644
--- a/workbench/control_plane/src/app/email/components/DraftAssistant.tsx
+++ b/workbench/control_plane/src/app/email/components/DraftAssistant.tsx
@@ -1,17 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useEffect, useRef, useState } from "react";
-import {
-  Sparkles,
-  Loader2,
-  X,
-  CornerDownLeft,
-  Check,
-  ChevronDown,
-  ChevronUp,
-  AlertTriangle,
-  Undo2,
-} from "lucide-react";
 import type { DraftStep, DraftRevision } from "../lib/useDraftSession";
 
 /**
@@ -27,7 +17,7 @@ import type { DraftStep, DraftRevision } from "../lib/useDraftSession";
 function StepIcon({ state }: { state: DraftStep["state"] }) {
   if (state === "running") {
     return (
-      <Loader2
+      <Icon name="Loader2"
         size={11}
         className="text-primary animate-spin flex-shrink-0 mt-[3px]"
         aria-hidden
@@ -36,7 +26,7 @@ function StepIcon({ state }: { state: DraftStep["state"] }) {
   }
   if (state === "failed") {
     return (
-      <AlertTriangle
+      <Icon name="AlertTriangle"
         size={11}
         className="text-warning flex-shrink-0 mt-[3px]"
         aria-hidden
@@ -44,7 +34,7 @@ function StepIcon({ state }: { state: DraftStep["state"] }) {
     );
   }
   return (
-    <Check size={11} className="text-success flex-shrink-0 mt-[3px]" aria-hidden />
+    <Icon name="Check" size={11} className="text-success flex-shrink-0 mt-[3px]" aria-hidden />
   );
 }
 
@@ -248,7 +238,7 @@ export function DraftAssistant({
                 aria-expanded={expanded}
                 className="p-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-secondary tech-transition"
               >
-                {expanded ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+                {expanded ? <Icon name="ChevronUp" size={13} /> : <Icon name="ChevronDown" size={13} />}
               </button>
             )}
           </div>
@@ -278,7 +268,7 @@ export function DraftAssistant({
       )}
 
       <div className="px-4 py-2 flex items-center gap-2">
-        <Sparkles size={13} className="text-primary flex-shrink-0" aria-hidden />
+        <Icon name="Sparkles" size={13} className="text-primary flex-shrink-0" aria-hidden />
         <input
           ref={inputRef}
           type="text"
@@ -314,7 +304,7 @@ export function DraftAssistant({
             title="Go back to the previous version"
             className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary tech-transition flex-shrink-0"
           >
-            <Undo2 size={13} />
+            <Icon name="Undo2" size={13} />
           </button>
         )}
         <button
@@ -324,9 +314,9 @@ export function DraftAssistant({
           className="px-2.5 py-1 text-xs rounded-md bg-primary text-primary-foreground hover:bg-primary/90 tech-transition disabled:opacity-50 flex items-center gap-1 flex-shrink-0"
         >
           {busy ? (
-            <Loader2 size={12} className="animate-spin" aria-hidden />
+            <Icon name="Loader2" size={12} className="animate-spin" aria-hidden />
           ) : (
-            <CornerDownLeft size={12} aria-hidden />
+            <Icon name="CornerDownLeft" size={12} aria-hidden />
           )}
           {runLabel}
         </button>
@@ -338,7 +328,7 @@ export function DraftAssistant({
           title="Close"
           aria-label="Close AI drafting"
         >
-          <X size={14} />
+          <Icon name="X" size={14} />
         </button>
       </div>
       {/* Keeps the collapsed summary reachable for screen readers. */}
diff --git a/workbench/control_plane/src/app/email/components/EmailAssistantChat.tsx b/workbench/control_plane/src/app/email/components/EmailAssistantChat.tsx
index 2199d17a..43cc58b4 100644
--- a/workbench/control_plane/src/app/email/components/EmailAssistantChat.tsx
+++ b/workbench/control_plane/src/app/email/components/EmailAssistantChat.tsx
@@ -18,9 +18,9 @@
  *   3. Bridge the Assistant "Fix" flow (pendingChatPrompt → composer).
  */
 
+import Icon from "@/components/Icon";
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { useSession } from "next-auth/react";
-import { Sparkles, Plus, MessagesSquare, Trash2, X, ArrowLeft } from "lucide-react";
 import AgentChat from "@/components/AgentChat";
 import {
   getSessions, createSession, upsertSession, deleteSession,
@@ -252,11 +252,11 @@ export function EmailAssistantChat({
               aria-label="Back to inbox"
               className="p-1 -ml-1 rounded text-muted-foreground hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors"
             >
-              <ArrowLeft size={14} />
+              <Icon name="ArrowLeft" size={14} />
             </button>
           )}
           <div className="w-5 h-5 rounded-full bg-primary/20 text-primary flex items-center justify-center">
-            <Sparkles size={11} />
+            <Icon name="Sparkles" size={11} />
           </div>
           <span className="text-xs font-semibold text-sidebar-foreground">
             AI Assistant
@@ -272,14 +272,14 @@ export function EmailAssistantChat({
                 : "text-muted-foreground hover:text-sidebar-foreground hover:bg-sidebar-accent"
             }`}
           >
-            <MessagesSquare size={14} />
+            <Icon name="MessagesSquare" size={14} />
           </button>
           <button
             onClick={newSession}
             title="New chat"
             className="p-1 rounded text-muted-foreground hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors"
           >
-            <Plus size={15} />
+            <Icon name="Plus" size={15} />
           </button>
         </div>
       </div>
@@ -295,7 +295,7 @@ export function EmailAssistantChat({
               onClick={() => setShowSessions(false)}
               className="text-muted-foreground hover:text-foreground"
             >
-              <X size={12} />
+              <Icon name="X" size={12} />
             </button>
           </div>
           {emailSessions.length === 0 ? (
@@ -337,7 +337,7 @@ export function EmailAssistantChat({
                   title="Delete conversation"
                   className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive flex-shrink-0"
                 >
-                  <Trash2 size={12} />
+                  <Icon name="Trash2" size={12} />
                 </button>
               </div>
             ))
diff --git a/workbench/control_plane/src/app/email/components/EmailDetail.tsx b/workbench/control_plane/src/app/email/components/EmailDetail.tsx
index 1ad4ae0b..ba1444fa 100644
--- a/workbench/control_plane/src/app/email/components/EmailDetail.tsx
+++ b/workbench/control_plane/src/app/email/components/EmailDetail.tsx
@@ -1,12 +1,7 @@
 "use client";
 
+import AppIcon, { themedIcon } from "@/components/Icon";
 import { useState, useEffect, useRef } from "react";
-import {
-  Star, Reply, Forward, Trash2, Archive, MoreHorizontal,
-  Paperclip, ReplyAll, Flag, FolderInput,
-  MailOpen, Tag, Printer, ExternalLink, X, AlertTriangle, Loader2, Send,
-  ListChecks,
-} from "lucide-react";
 import { Email } from "../lib/types";
 import { fullDateLabel, initials, buildOptimisticSent, bodyMatchKey } from "../lib/utils";
 import { useEmailStore, isRealFolder } from "../lib/emailStore";
@@ -686,26 +681,26 @@ export function EmailDetail({ email }: EmailDetailProps) {
         {/* Left group */}
         <div className="flex items-center gap-0.5 flex-wrap">
           <TBtn
-            icon={ReplyAll}
+            icon={themedIcon("ReplyAll")}
             label="Reply All"
             onClick={() => startReply("reply-all")}
             active={replyMode === "reply-all"}
           />
           <TBtn
-            icon={Reply}
+            icon={themedIcon("Reply")}
             label="Reply"
             onClick={() => startReply("reply")}
             active={replyMode === "reply"}
           />
           <TBtn
-            icon={Forward}
+            icon={themedIcon("Forward")}
             label="Forward"
             onClick={() => startReply("forward")}
             active={replyMode === "forward"}
           />
 
           <TBtn
-            icon={ListChecks}
+            icon={themedIcon("ListChecks")}
             label="Add to Tasks"
             onClick={() => {
               if (email) captureEmailToTasks(email.id);
@@ -714,15 +709,15 @@ export function EmailDetail({ email }: EmailDetailProps) {
 
           <Divider />
 
-          <TBtn icon={Archive} label="Archive" onClick={() => {
+          <TBtn icon={themedIcon("Archive")} label="Archive" onClick={() => {
             if (email) updateEmail(email.id, { folder: "archive" });
           }} />
-          <TBtn icon={Trash2} label="Delete" onClick={() => {
+          <TBtn icon={themedIcon("Trash2")} label="Delete" onClick={() => {
             if (email) deleteEmail(email.id);
           }} />
           <div className="relative">
             <TBtn
-              icon={FolderInput}
+              icon={themedIcon("FolderInput")}
               label="Move to folder"
               onClick={() => setShowMoveMenu((v) => !v)}
               active={showMoveMenu}
@@ -759,7 +754,7 @@ export function EmailDetail({ email }: EmailDetailProps) {
           <Divider />
 
           <TBtn
-            icon={Flag}
+            icon={themedIcon("Flag")}
             label={flagged ? "Unflag" : "Flag"}
             onClick={() => {
               if (email) {
@@ -770,7 +765,7 @@ export function EmailDetail({ email }: EmailDetailProps) {
             active={flagged}
           />
           <TBtn
-            icon={Star}
+            icon={themedIcon("Star")}
             label={starred ? "Unstar" : "Star"}
             onClick={() => {
               if (email) {
@@ -781,7 +776,7 @@ export function EmailDetail({ email }: EmailDetailProps) {
             active={starred}
           />
           <TBtn
-            icon={MailOpen}
+            icon={themedIcon("MailOpen")}
             label={read ? "Mark as Unread" : "Mark as Read"}
             onClick={() => {
               if (email) {
@@ -793,7 +788,7 @@ export function EmailDetail({ email }: EmailDetailProps) {
           />
           <div className="relative">
             <TBtn
-              icon={Tag}
+              icon={themedIcon("Tag")}
               label="Label"
               onClick={() => setShowLabelMenu((v) => !v)}
               active={showLabelMenu}
@@ -813,13 +808,13 @@ export function EmailDetail({ email }: EmailDetailProps) {
 
           <Divider />
 
-          <TBtn icon={Printer} label="Print" onClick={() => window.print()} />
+          <TBtn icon={themedIcon("Printer")} label="Print" onClick={() => window.print()} />
         </div>
 
         {/* More menu */}
         <div className="relative">
           <TBtn
-            icon={MoreHorizontal}
+            icon={themedIcon("MoreHorizontal")}
             label="More options"
             onClick={() => setShowMoreMenu((v) => !v)}
             active={showMoreMenu}
@@ -881,12 +876,12 @@ export function EmailDetail({ email }: EmailDetailProps) {
           <div className="flex items-center gap-1 flex-shrink-0 mt-1">
             {view.importance === "high" && (
               <span className="inline-flex items-center gap-0.5 text-[9px] px-1.5 py-0.5 bg-red-500/15 text-red-400 rounded-full">
-                <AlertTriangle size={9} /> Important
+                <AppIcon name="AlertTriangle" size={9} /> Important
               </span>
             )}
             {flagged && (
               <span className="inline-flex items-center gap-0.5 text-[9px] px-1.5 py-0.5 bg-amber-500/15 text-amber-400 rounded-full">
-                <Flag size={9} /> Flagged
+                <AppIcon name="Flag" size={9} /> Flagged
               </span>
             )}
             {!read && (
@@ -971,7 +966,7 @@ export function EmailDetail({ email }: EmailDetailProps) {
             title="Add to Tasks — the assistant reads the thread and files a routed task (follow-up / delegated / next action) with a due date if implied."
             className="shrink-0 inline-flex items-center gap-1.5 rounded-lg border border-border px-2.5 py-1.5 text-xs text-muted-foreground hover:border-primary/40 hover:text-primary transition-colors"
           >
-            <ListChecks size={14} />
+            <AppIcon name="ListChecks" size={14} />
             <span className="hidden sm:inline">Add to Tasks</span>
           </button>
         </div>
@@ -979,7 +974,7 @@ export function EmailDetail({ email }: EmailDetailProps) {
         {/* Body */}
         {loadingDetail ? (
           <div className="flex items-center gap-2 text-xs text-muted-foreground py-6">
-            <Loader2 size={14} className="animate-spin" /> Loading message…
+            <AppIcon name="Loader2" size={14} className="animate-spin" /> Loading message…
           </div>
         ) : fullBodyText ? (
           <div className="text-sm text-foreground/85 leading-relaxed whitespace-pre-wrap max-w-2xl">
@@ -1027,7 +1022,7 @@ export function EmailDetail({ email }: EmailDetailProps) {
               disabled={loadingFullBody}
               className="flex items-center gap-1.5 text-xs text-primary hover:opacity-80 transition-opacity disabled:opacity-40"
             >
-              <ExternalLink size={12} />
+              <AppIcon name="ExternalLink" size={12} />
               {loadingFullBody ? "Loading…" : "Load full message from provider"}
             </button>
             <p className="text-[10px] text-muted-foreground mt-1">
@@ -1070,7 +1065,7 @@ export function EmailDetail({ email }: EmailDetailProps) {
                       }`}
                       title="Reply to all"
                     >
-                      <ReplyAll size={11} />
+                      <AppIcon name="ReplyAll" size={11} />
                     </button>
                     <button
                       onClick={() => switchReplyMode("reply")}
@@ -1079,7 +1074,7 @@ export function EmailDetail({ email }: EmailDetailProps) {
                       }`}
                       title="Reply to sender only"
                     >
-                      <Reply size={11} />
+                      <AppIcon name="Reply" size={11} />
                     </button>
                   </div>
                 )}
@@ -1088,7 +1083,7 @@ export function EmailDetail({ email }: EmailDetailProps) {
                 className="text-muted-foreground hover:text-foreground transition-colors"
                 onClick={() => setReplyMode(null)}
               >
-                <X size={14} />
+                <AppIcon name="X" size={14} />
               </button>
             </div>
             {/* Recipients */}
@@ -1160,7 +1155,7 @@ export function EmailDetail({ email }: EmailDetailProps) {
                     key={`f-${i}`}
                     className="inline-flex items-center gap-1 text-[10px] px-2 py-1 rounded-md border border-border bg-secondary text-muted-foreground"
                   >
-                    <Paperclip size={10} />
+                    <AppIcon name="Paperclip" size={10} />
                     <span className="truncate max-w-[140px]" title={a.filename}>
                       {a.filename}
                     </span>
@@ -1171,7 +1166,7 @@ export function EmailDetail({ email }: EmailDetailProps) {
                       className="hover:text-foreground"
                       title="Remove attachment"
                     >
-                      <X size={10} />
+                      <AppIcon name="X" size={10} />
                     </button>
                   </span>
                 ))}
@@ -1181,7 +1176,7 @@ export function EmailDetail({ email }: EmailDetailProps) {
                     className="inline-flex items-center gap-1 text-[10px] px-2 py-1 rounded-md border border-primary/40 bg-primary/5 text-primary"
                     title={a.path}
                   >
-                    <Paperclip size={10} />
+                    <AppIcon name="Paperclip" size={10} />
                     <span className="truncate max-w-[140px]">{a.name || a.path}</span>
                     <button
                       onClick={() =>
@@ -1190,7 +1185,7 @@ export function EmailDetail({ email }: EmailDetailProps) {
                       className="hover:text-foreground"
                       title="Remove attachment"
                     >
-                      <X size={10} />
+                      <AppIcon name="X" size={10} />
                     </button>
                   </span>
                 ))}
@@ -1238,7 +1233,7 @@ export function EmailDetail({ email }: EmailDetailProps) {
                   className="px-2 py-1 text-xs rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors cursor-pointer flex items-center"
                   title="Attach files"
                 >
-                  <Paperclip size={13} />
+                  <AppIcon name="Paperclip" size={13} />
                   <input
                     type="file"
                     multiple
@@ -1263,7 +1258,7 @@ export function EmailDetail({ email }: EmailDetailProps) {
                   title="Open in the full composer (Bcc, attachments)"
                   aria-label="Pop out to full composer"
                 >
-                  <ExternalLink size={13} />
+                  <AppIcon name="ExternalLink" size={13} />
                   <span className="hidden sm:inline">Pop out</span>
                 </button>
                 <button
@@ -1277,7 +1272,7 @@ export function EmailDetail({ email }: EmailDetailProps) {
                   title="Discard this draft"
                   aria-label="Discard this draft"
                 >
-                  <Trash2 size={13} />
+                  <AppIcon name="Trash2" size={13} />
                   <span className="hidden sm:inline">Discard</span>
                 </button>
                 <button
@@ -1285,7 +1280,7 @@ export function EmailDetail({ email }: EmailDetailProps) {
                   disabled={!replyTo.trim() || !replyBody.trim()}
                   onClick={handleInlineSend}
                 >
-                  <Send size={12} />
+                  <AppIcon name="Send" size={12} />
                   Send
                 </button>
               </div>
diff --git a/workbench/control_plane/src/app/email/components/EmailList.tsx b/workbench/control_plane/src/app/email/components/EmailList.tsx
index fabfb3ee..d2bcf84f 100644
--- a/workbench/control_plane/src/app/email/components/EmailList.tsx
+++ b/workbench/control_plane/src/app/email/components/EmailList.tsx
@@ -1,13 +1,7 @@
 "use client";
 
+import AppIcon, { themedIcon } from "@/components/Icon";
 import { useState, useRef, useEffect, useCallback } from "react";
-import {
-  Pencil, Trash2, Archive, Flag, FolderInput,
-  Reply, ReplyAll, Forward, MailOpen, Mail, Tag,
-  Paperclip, Star, AlertTriangle, ChevronRight, Loader2, Check, X,
-  MessagesSquare, RefreshCw, Minus, Plus,
-  ListChecks, Clock, AlarmClockOff, MessageCircle,
-} from "lucide-react";
 import { Email } from "../lib/types";
 import { timeLabel } from "../lib/utils";
 import { useEmailStore, isRealFolder } from "../lib/emailStore";
@@ -35,15 +29,15 @@ interface EmailListProps {
 // respond → dispose → organize. "move"/"label" open the context menu (folder &
 // label pickers); everything else routes through onToolbarAction.
 const TOOLBAR_ACTIONS = [
-  { icon: Reply, label: "Reply", key: "reply" },
-  { icon: ReplyAll, label: "Reply All", key: "reply-all" },
-  { icon: Forward, label: "Forward", key: "forward" },
-  { icon: Archive, label: "Archive", key: "archive" },
-  { icon: Trash2, label: "Delete", key: "delete" },
-  { icon: FolderInput, label: "Move", key: "move" },
-  { icon: MailOpen, label: "Mark as Read", key: "mark-read" },
-  { icon: Flag, label: "Flag", key: "flag" },
-  { icon: Tag, label: "Label", key: "label" },
+  { icon: themedIcon("Reply"), label: "Reply", key: "reply" },
+  { icon: themedIcon("ReplyAll"), label: "Reply All", key: "reply-all" },
+  { icon: themedIcon("Forward"), label: "Forward", key: "forward" },
+  { icon: themedIcon("Archive"), label: "Archive", key: "archive" },
+  { icon: themedIcon("Trash2"), label: "Delete", key: "delete" },
+  { icon: themedIcon("FolderInput"), label: "Move", key: "move" },
+  { icon: themedIcon("MailOpen"), label: "Mark as Read", key: "mark-read" },
+  { icon: themedIcon("Flag"), label: "Flag", key: "flag" },
+  { icon: themedIcon("Tag"), label: "Label", key: "label" },
 ];
 
 // Render a search highlight (ts_headline output) safely: the server wraps the
@@ -289,17 +283,17 @@ export function EmailList({
             {selected.size} selected
           </span>
           <div className="flex-1" />
-          <ToolbarBtn icon={MailOpen} label="Mark read" onClick={() => bulkUpdate({ isRead: true })} />
-          <ToolbarBtn icon={Mail} label="Mark unread" onClick={() => bulkUpdate({ isRead: false })} />
-          <ToolbarBtn icon={Flag} label="Flag" onClick={() => bulkUpdate({ isFlagged: true })} />
-          <ToolbarBtn icon={Archive} label="Archive" onClick={() => bulkUpdate({ folder: "archive" })} />
-          <ToolbarBtn icon={Trash2} label="Delete" onClick={bulkDelete} />
+          <ToolbarBtn icon={themedIcon("MailOpen")} label="Mark read" onClick={() => bulkUpdate({ isRead: true })} />
+          <ToolbarBtn icon={themedIcon("Mail")} label="Mark unread" onClick={() => bulkUpdate({ isRead: false })} />
+          <ToolbarBtn icon={themedIcon("Flag")} label="Flag" onClick={() => bulkUpdate({ isFlagged: true })} />
+          <ToolbarBtn icon={themedIcon("Archive")} label="Archive" onClick={() => bulkUpdate({ folder: "archive" })} />
+          <ToolbarBtn icon={themedIcon("Trash2")} label="Delete" onClick={bulkDelete} />
           <button
             onClick={clearSelection}
             title="Clear selection"
             className="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
           >
-            <X size={13} />
+            <AppIcon name="X" size={13} />
           </button>
         </div>
       ) : (
@@ -310,7 +304,7 @@ export function EmailList({
             onClick={onCompose}
             className="flex items-center gap-1 px-2.5 py-1.5 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex-shrink-0"
           >
-            <Pencil size={12} />
+            <AppIcon name="Pencil" size={12} />
             <span className="text-[10px] font-medium">New</span>
           </button>
 
@@ -352,7 +346,7 @@ export function EmailList({
       {/* Active label filter */}
       {selectedLabel && (
         <div className="flex items-center gap-1.5 px-2 py-1 border-b border-border flex-shrink-0 bg-primary/5 text-[11px]">
-          <Tag size={11} className="text-primary flex-shrink-0" />
+          <AppIcon name="Tag" size={11} className="text-primary flex-shrink-0" />
           <span className="text-foreground/70">
             Filtered by label <b className="text-primary">{selectedLabel}</b>
           </span>
@@ -361,7 +355,7 @@ export function EmailList({
             title="Clear label filter"
             className="ml-auto flex items-center gap-0.5 text-muted-foreground hover:text-foreground"
           >
-            <X size={11} /> Clear
+            <AppIcon name="X" size={11} /> Clear
           </button>
         </div>
       )}
@@ -397,7 +391,7 @@ export function EmailList({
             className="flex items-center justify-center text-muted-foreground overflow-hidden transition-[height]"
             style={{ height: syncing ? 36 : pullY }}
           >
-            <RefreshCw
+            <AppIcon name="RefreshCw"
               size={16}
               className={syncing ? "animate-spin" : ""}
               style={syncing ? undefined : { transform: `rotate(${pullY * 3}deg)` }}
@@ -411,7 +405,7 @@ export function EmailList({
           </div>
         ) : emails.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
-            <MailOpen size={24} className="opacity-40" />
+            <AppIcon name="MailOpen" size={24} className="opacity-40" />
             <p className="text-xs">No emails to show</p>
           </div>
         ) : (
@@ -474,21 +468,21 @@ export function EmailList({
                         className="inline-flex items-center gap-0.5 text-[9px] px-1 py-0.5 rounded-full bg-secondary text-muted-foreground"
                         title={`${email.threadCount} messages in this conversation`}
                       >
-                        <MessagesSquare size={9} />
+                        <AppIcon name="MessagesSquare" size={9} />
                         {email.threadCount}
                       </span>
                     )}
                     {email.importance === "high" && (
-                      <AlertTriangle size={10} className="text-red-400" />
+                      <AppIcon name="AlertTriangle" size={10} className="text-red-400" />
                     )}
                     {email.hasAttachments && (
-                      <Paperclip size={10} className="text-muted-foreground" />
+                      <AppIcon name="Paperclip" size={10} className="text-muted-foreground" />
                     )}
                     {email.isFlagged && (
-                      <Flag size={10} className="text-amber-400 fill-amber-400" />
+                      <AppIcon name="Flag" size={10} className="text-amber-400 fill-amber-400" />
                     )}
                     {email.isStarred && (
-                      <Star size={10} className="text-amber-400 fill-amber-400" />
+                      <AppIcon name="Star" size={10} className="text-amber-400 fill-amber-400" />
                     )}
                     <span className="text-[10px] text-muted-foreground whitespace-nowrap">
                       {timeLabel(email.receivedAt)}
@@ -581,7 +575,7 @@ export function EmailList({
                   className="w-full flex items-center justify-center gap-1.5 py-2 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-50"
                 >
                   {(loadingMore || backfilling) && (
-                    <Loader2 size={12} className="animate-spin" />
+                    <AppIcon name="Loader2" size={12} className="animate-spin" />
                   )}
                   {backfilling
                     ? "Fetching older messages…"
@@ -730,11 +724,11 @@ function ContextMenu({
           </div>
         ) : (
           <>
-            <CtxItem icon={Reply} label="Reply" onClick={() => run(() => onReply("reply"))} />
-            <CtxItem icon={ReplyAll} label="Reply All" onClick={() => run(() => onReply("reply-all"))} />
-            <CtxItem icon={Forward} label="Forward" onClick={() => run(() => onReply("forward"))} />
+            <CtxItem icon={themedIcon("Reply")} label="Reply" onClick={() => run(() => onReply("reply"))} />
+            <CtxItem icon={themedIcon("ReplyAll")} label="Reply All" onClick={() => run(() => onReply("reply-all"))} />
+            <CtxItem icon={themedIcon("Forward")} label="Forward" onClick={() => run(() => onReply("forward"))} />
             <CtxItem
-              icon={MessageCircle}
+              icon={themedIcon("MessageCircle")}
               label="Fix category…"
               onClick={() => run(onFix)}
             />
@@ -743,18 +737,18 @@ function ContextMenu({
         )}
 
         <CtxItem
-          icon={ListChecks}
+          icon={themedIcon("ListChecks")}
           label={bulk ? `Add ${count} to Tasks` : "Add to Tasks"}
           onClick={() => run(onAddToTasks)}
         />
         {snoozedView ? (
           <CtxItem
-            icon={AlarmClockOff}
+            icon={themedIcon("AlarmClockOff")}
             label={bulk ? `Unsnooze ${count}` : "Unsnooze"}
             onClick={() => run(() => onSnooze(null))}
           />
         ) : (
-          <CtxSubmenu icon={Clock} label="Snooze until…" flipLeft={flipLeft}>
+          <CtxSubmenu icon={themedIcon("Clock")} label="Snooze until…" flipLeft={flipLeft}>
             {snoozePresets().map((p) => (
               <button
                 key={p.label}
@@ -775,22 +769,22 @@ function ContextMenu({
         )}
         <CtxDivider />
         <CtxItem
-          icon={MailOpen}
+          icon={themedIcon("MailOpen")}
           label="Mark as read"
           onClick={() => run(() => update({ isRead: true }))}
         />
         <CtxItem
-          icon={Mail}
+          icon={themedIcon("Mail")}
           label="Mark as unread"
           onClick={() => run(() => update({ isRead: false }))}
         />
         <CtxItem
-          icon={Flag}
+          icon={themedIcon("Flag")}
           label={bulk ? "Flag" : email.isFlagged ? "Clear flag" : "Flag / mark important"}
           onClick={() => run(() => update({ isFlagged: bulk ? true : !email.isFlagged }))}
         />
         <CtxItem
-          icon={Star}
+          icon={themedIcon("Star")}
           label={bulk ? "Add star" : email.isStarred ? "Remove star" : "Add star"}
           onClick={() => run(() => update({ isStarred: bulk ? true : !email.isStarred }))}
         />
@@ -798,7 +792,7 @@ function ContextMenu({
         <CtxDivider />
 
         {/* Move to → (Windows-style flyout submenu) */}
-        <CtxSubmenu icon={FolderInput} label="Move to…" flipLeft={flipLeft}>
+        <CtxSubmenu icon={themedIcon("FolderInput")} label="Move to…" flipLeft={flipLeft}>
           {moveTargets.length === 0 ? (
             <div className="px-3 py-1.5 text-muted-foreground">No other folders</div>
           ) : (
@@ -816,7 +810,7 @@ function ContextMenu({
 
         {/* Categories → add (single + bulk), with checkmarks for the single case */}
         <CtxSubmenu
-          icon={Tag}
+          icon={themedIcon("Tag")}
           label={bulk ? "Add category…" : "Categories…"}
           flipLeft={flipLeft}
           bare
@@ -832,14 +826,14 @@ function ContextMenu({
         {/* Clear all categories on the target (single or selection) */}
         {hasCategories && (
           <CtxItem
-            icon={Tag}
+            icon={themedIcon("Tag")}
             label={bulk ? `Clear categories on ${count}` : "Clear categories"}
             onClick={() => run(onClearCategories)}
           />
         )}
 
         <CtxItem
-          icon={Archive}
+          icon={themedIcon("Archive")}
           label="Archive"
           onClick={() => run(() => update({ folder: "archive" }))}
         />
@@ -847,7 +841,7 @@ function ContextMenu({
         <CtxDivider />
 
         <CtxItem
-          icon={Trash2}
+          icon={themedIcon("Trash2")}
           label={bulk ? `Delete ${count}` : "Delete"}
           danger
           onClick={() => run(del)}
@@ -887,7 +881,7 @@ function CtxSubmenu({
         <span className="flex items-center gap-2">
           <Icon size={13} /> {label}
         </span>
-        <ChevronRight size={12} className={flipLeft ? "rotate-180" : ""} />
+        <AppIcon name="ChevronRight" size={12} className={flipLeft ? "rotate-180" : ""} />
       </button>
       {open && (
         <div
@@ -989,7 +983,7 @@ function CtxLabelMenu({
             title="Add category"
             className="text-primary hover:opacity-80 disabled:opacity-40"
           >
-            <Plus size={13} />
+            <AppIcon name="Plus" size={13} />
           </button>
         </div>
       </div>
@@ -1020,7 +1014,7 @@ function CheckboxSquare({
               }`
       }`}
     >
-      {checked ? <Check size={11} /> : indeterminate ? <Minus size={11} /> : null}
+      {checked ? <AppIcon name="Check" size={11} /> : indeterminate ? <AppIcon name="Minus" size={11} /> : null}
     </span>
   );
 }
diff --git a/workbench/control_plane/src/app/email/components/EmailPreviewModal.tsx b/workbench/control_plane/src/app/email/components/EmailPreviewModal.tsx
index a4c647bb..4f5ea12e 100644
--- a/workbench/control_plane/src/app/email/components/EmailPreviewModal.tsx
+++ b/workbench/control_plane/src/app/email/components/EmailPreviewModal.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useEffect, useState } from "react";
-import { Loader2, Paperclip, X } from "lucide-react";
 import { Email } from "../lib/types";
 import { getEmail } from "../lib/api";
 import { fullDateLabel } from "../lib/utils";
@@ -87,13 +87,13 @@ export function EmailPreviewModal({
             className="text-muted-foreground hover:text-foreground flex-shrink-0"
             title="Close (Esc)"
           >
-            <X size={16} />
+            <Icon name="X" size={16} />
           </button>
         </div>
         <div className="overflow-y-auto px-4 py-3 flex-1">
           {loading && !e ? (
             <div className="flex items-center gap-2 text-xs text-muted-foreground py-6">
-              <Loader2 className="animate-spin" size={14} /> Loading…
+              <Icon name="Loader2" className="animate-spin" size={14} /> Loading…
             </div>
           ) : err ? (
             <div className="text-xs text-destructive">{err}</div>
@@ -111,7 +111,7 @@ export function EmailPreviewModal({
                   key={a.id}
                   className="inline-flex items-center gap-1 text-[10px] px-2 py-1 rounded-md border border-border text-muted-foreground"
                 >
-                  <Paperclip size={10} /> {a.filename}
+                  <Icon name="Paperclip" size={10} /> {a.filename}
                 </span>
               ))}
             </div>
diff --git a/workbench/control_plane/src/app/email/components/EmailToolbar.tsx b/workbench/control_plane/src/app/email/components/EmailToolbar.tsx
index 2e771a1d..7c0f958b 100644
--- a/workbench/control_plane/src/app/email/components/EmailToolbar.tsx
+++ b/workbench/control_plane/src/app/email/components/EmailToolbar.tsx
@@ -1,11 +1,7 @@
 "use client";
 
+import AppIcon, { themedIcon } from "@/components/Icon";
 import { useState } from "react";
-import {
-  Pencil, Reply, ReplyAll, Forward, Archive, Trash2, FolderInput,
-  Flag, Star, MailOpen, Mail, Tag, Printer, MoreHorizontal, X,
-  ListChecks,
-} from "lucide-react";
 import { useEmailStore, isRealFolder } from "../lib/emailStore";
 import { LabelMenu } from "./LabelMenu";
 
@@ -45,12 +41,12 @@ export function EmailToolbar() {
           {selectedIds.size} selected
         </span>
         <div className="flex-1" />
-        <TBtn icon={MailOpen} label="Mark read" onClick={() => bulkUpdateSelected({ isRead: true })} />
-        <TBtn icon={Mail} label="Mark unread" onClick={() => bulkUpdateSelected({ isRead: false })} />
-        <TBtn icon={Flag} label="Flag" onClick={() => bulkUpdateSelected({ isFlagged: true })} />
-        <TBtn icon={Archive} label="Archive" onClick={() => bulkUpdateSelected({ folder: "archive" })} />
-        <TBtn icon={Trash2} label="Delete" onClick={() => bulkDeleteSelected()} />
-        <TBtn icon={X} label="Clear selection" onClick={() => clearEmailSelection()} />
+        <TBtn icon={themedIcon("MailOpen")} label="Mark read" onClick={() => bulkUpdateSelected({ isRead: true })} />
+        <TBtn icon={themedIcon("Mail")} label="Mark unread" onClick={() => bulkUpdateSelected({ isRead: false })} />
+        <TBtn icon={themedIcon("Flag")} label="Flag" onClick={() => bulkUpdateSelected({ isFlagged: true })} />
+        <TBtn icon={themedIcon("Archive")} label="Archive" onClick={() => bulkUpdateSelected({ folder: "archive" })} />
+        <TBtn icon={themedIcon("Trash2")} label="Delete" onClick={() => bulkDeleteSelected()} />
+        <TBtn icon={themedIcon("X")} label="Clear selection" onClick={() => clearEmailSelection()} />
       </div>
     );
   }
@@ -63,30 +59,30 @@ export function EmailToolbar() {
         onClick={() => openCompose()}
         className="flex items-center gap-1.5 px-3 py-2 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex-shrink-0"
       >
-        <Pencil size={15} />
+        <AppIcon name="Pencil" size={15} />
         <span className="text-xs font-medium">New</span>
       </button>
 
       {selectedEmail ? (
         <>
           <Divider />
-          <TBtn icon={ReplyAll} label="Reply All" onClick={() => setViewerCommand("reply-all")} />
-          <TBtn icon={Reply} label="Reply" onClick={() => setViewerCommand("reply")} />
-          <TBtn icon={Forward} label="Forward" onClick={() => setViewerCommand("forward")} />
+          <TBtn icon={themedIcon("ReplyAll")} label="Reply All" onClick={() => setViewerCommand("reply-all")} />
+          <TBtn icon={themedIcon("Reply")} label="Reply" onClick={() => setViewerCommand("reply")} />
+          <TBtn icon={themedIcon("Forward")} label="Forward" onClick={() => setViewerCommand("forward")} />
 
           <TBtn
-            icon={ListChecks}
+            icon={themedIcon("ListChecks")}
             label="Add to Tasks"
             onClick={() => captureEmailToTasks(selectedEmail.id)}
           />
 
           <Divider />
 
-          <TBtn icon={Archive} label="Archive" onClick={() => updateEmail(selectedEmail.id, { folder: "archive" })} />
-          <TBtn icon={Trash2} label="Delete" onClick={() => deleteEmail(selectedEmail.id)} />
+          <TBtn icon={themedIcon("Archive")} label="Archive" onClick={() => updateEmail(selectedEmail.id, { folder: "archive" })} />
+          <TBtn icon={themedIcon("Trash2")} label="Delete" onClick={() => deleteEmail(selectedEmail.id)} />
           {/* Move to folder */}
           <div className="relative flex-shrink-0">
-            <TBtn icon={FolderInput} label="Move to folder" active={showMove} onClick={() => setShowMove((v) => !v)} />
+            <TBtn icon={themedIcon("FolderInput")} label="Move to folder" active={showMove} onClick={() => setShowMove((v) => !v)} />
             {showMove && (
               <>
                 <div className="fixed inset-0 z-10" onClick={() => setShowMove(false)} />
@@ -114,26 +110,26 @@ export function EmailToolbar() {
           <Divider />
 
           <TBtn
-            icon={Flag}
+            icon={themedIcon("Flag")}
             label={selectedEmail.isFlagged ? "Unflag" : "Flag"}
             active={selectedEmail.isFlagged}
             onClick={() => updateEmail(selectedEmail.id, { isFlagged: !selectedEmail.isFlagged })}
           />
           <TBtn
-            icon={Star}
+            icon={themedIcon("Star")}
             label={selectedEmail.isStarred ? "Unstar" : "Star"}
             active={selectedEmail.isStarred}
             onClick={() => updateEmail(selectedEmail.id, { isStarred: !selectedEmail.isStarred })}
           />
           <TBtn
-            icon={MailOpen}
+            icon={themedIcon("MailOpen")}
             label={selectedEmail.isRead ? "Mark as Unread" : "Mark as Read"}
             active={!selectedEmail.isRead}
             onClick={() => updateEmail(selectedEmail.id, { isRead: !selectedEmail.isRead })}
           />
           {/* Label */}
           <div className="relative flex-shrink-0">
-            <TBtn icon={Tag} label="Label" active={showLabel} onClick={() => setShowLabel((v) => !v)} />
+            <TBtn icon={themedIcon("Tag")} label="Label" active={showLabel} onClick={() => setShowLabel((v) => !v)} />
             {showLabel && (
               <>
                 <div className="fixed inset-0 z-10" onClick={() => setShowLabel(false)} />
@@ -146,10 +142,10 @@ export function EmailToolbar() {
 
           <Divider />
 
-          <TBtn icon={Printer} label="Print" onClick={() => window.print()} />
+          <TBtn icon={themedIcon("Printer")} label="Print" onClick={() => window.print()} />
           {/* More */}
           <div className="relative flex-shrink-0">
-            <TBtn icon={MoreHorizontal} label="More options" active={showMore} onClick={() => setShowMore((v) => !v)} />
+            <TBtn icon={themedIcon("MoreHorizontal")} label="More options" active={showMore} onClick={() => setShowMore((v) => !v)} />
             {showMore && (
               <>
                 <div className="fixed inset-0 z-10" onClick={() => setShowMore(false)} />
diff --git a/workbench/control_plane/src/app/email/components/LabelChip.tsx b/workbench/control_plane/src/app/email/components/LabelChip.tsx
index d6d85ab8..cdc81a42 100644
--- a/workbench/control_plane/src/app/email/components/LabelChip.tsx
+++ b/workbench/control_plane/src/app/email/components/LabelChip.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Check, Tag } from "lucide-react";
+import Icon from "@/components/Icon";
 import {
   LABEL_PALETTE,
   chipColors,
@@ -63,7 +63,7 @@ export function LabelChip({
         interactive ? "cursor-pointer hover:opacity-90" : ""
       } ${className}`}
     >
-      {icon && <Tag size={11} />}
+      {icon && <Icon name="Tag" size={11} />}
       {name}
     </span>
   );
@@ -122,7 +122,7 @@ export function LabelColorGrid({
             }}
             className="w-5 h-5 rounded-full flex items-center justify-center hover:scale-110 transition-transform"
           >
-            {selected && <Check size={11} />}
+            {selected && <Icon name="Check" size={11} />}
           </button>
         );
       })}
diff --git a/workbench/control_plane/src/app/email/components/LabelMenu.tsx b/workbench/control_plane/src/app/email/components/LabelMenu.tsx
index 917bde42..5180abb4 100644
--- a/workbench/control_plane/src/app/email/components/LabelMenu.tsx
+++ b/workbench/control_plane/src/app/email/components/LabelMenu.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useState } from "react";
-import { Check, Plus } from "lucide-react";
 import { Email } from "../lib/types";
 import { useEmailStore } from "../lib/emailStore";
 import { presetForLabel, presetHex, deterministicPreset } from "../lib/labelColors";
@@ -82,7 +82,7 @@ export function LabelMenu({
                           : "border-muted-foreground/40"
                       }`}
                     >
-                      {on && <Check size={11} />}
+                      {on && <Icon name="Check" size={11} />}
                     </span>
                     <span className="truncate">{name}</span>
                   </button>
@@ -135,7 +135,7 @@ export function LabelMenu({
             title="Create label"
             className="text-primary hover:opacity-80 disabled:opacity-40"
           >
-            <Plus size={13} />
+            <Icon name="Plus" size={13} />
           </button>
         </div>
         {pickNew && (
diff --git a/workbench/control_plane/src/app/email/components/MailboxActions.tsx b/workbench/control_plane/src/app/email/components/MailboxActions.tsx
index 2a517425..a8ddb8eb 100644
--- a/workbench/control_plane/src/app/email/components/MailboxActions.tsx
+++ b/workbench/control_plane/src/app/email/components/MailboxActions.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useState } from "react";
-import { AlertTriangle, RefreshCw, Settings2, RotateCw, Eraser, Loader2 } from "lucide-react";
 import { Email } from "../lib/types";
 import { useEmailStore } from "../lib/emailStore";
 import { resyncAccount } from "../lib/api";
@@ -58,7 +58,7 @@ export function MailboxActions({ selectedEmail }: { selectedEmail: Email | null
             : "Refresh — sync new mail, drafts & changes from the server"
         }
       >
-        <RefreshCw size={15} className={syncing ? "animate-spin" : ""} />
+        <Icon name="RefreshCw" size={15} className={syncing ? "animate-spin" : ""} />
       </button>
 
       <button
@@ -69,7 +69,7 @@ export function MailboxActions({ selectedEmail }: { selectedEmail: Email | null
         className="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-40"
         title="Mark as spam"
       >
-        <AlertTriangle size={15} />
+        <Icon name="AlertTriangle" size={15} />
       </button>
 
       {/* Mailbox settings (gear) */}
@@ -83,7 +83,7 @@ export function MailboxActions({ selectedEmail }: { selectedEmail: Email | null
           }`}
           title="Mailbox settings"
         >
-          <Settings2 size={15} />
+          <Icon name="Settings2" size={15} />
         </button>
         {showSettings && (
           <>
@@ -101,9 +101,9 @@ export function MailboxActions({ selectedEmail }: { selectedEmail: Email | null
                 className="w-full flex items-start gap-2 px-3 py-2 text-left hover:bg-secondary transition-colors disabled:opacity-50"
               >
                 {resyncing === "full" ? (
-                  <Loader2 size={13} className="animate-spin mt-0.5 flex-shrink-0" />
+                  <Icon name="Loader2" size={13} className="animate-spin mt-0.5 flex-shrink-0" />
                 ) : (
-                  <RotateCw size={13} className="mt-0.5 flex-shrink-0 text-muted-foreground" />
+                  <Icon name="RotateCw" size={13} className="mt-0.5 flex-shrink-0 text-muted-foreground" />
                 )}
                 <span>
                   <span className="block text-xs text-foreground">Resync mailbox</span>
@@ -118,9 +118,9 @@ export function MailboxActions({ selectedEmail }: { selectedEmail: Email | null
                 className="w-full flex items-start gap-2 px-3 py-2 text-left hover:bg-secondary transition-colors disabled:opacity-50"
               >
                 {resyncing === "purge" ? (
-                  <Loader2 size={13} className="animate-spin mt-0.5 flex-shrink-0" />
+                  <Icon name="Loader2" size={13} className="animate-spin mt-0.5 flex-shrink-0" />
                 ) : (
-                  <Eraser size={13} className="mt-0.5 flex-shrink-0 text-muted-foreground" />
+                  <Icon name="Eraser" size={13} className="mt-0.5 flex-shrink-0 text-muted-foreground" />
                 )}
                 <span>
                   <span className="block text-xs text-foreground">Hard resync</span>
@@ -137,7 +137,7 @@ export function MailboxActions({ selectedEmail }: { selectedEmail: Email | null
                 disabled={!selectedAccountId || syncing}
                 className="w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-secondary transition-colors disabled:opacity-50"
               >
-                <RefreshCw size={13} className={`flex-shrink-0 text-muted-foreground ${syncing ? "animate-spin" : ""}`} />
+                <Icon name="RefreshCw" size={13} className={`flex-shrink-0 text-muted-foreground ${syncing ? "animate-spin" : ""}`} />
                 <span className="text-xs text-foreground">Sync new mail now</span>
               </button>
               {resyncMsg && (
diff --git a/workbench/control_plane/src/app/email/components/MessageContent.tsx b/workbench/control_plane/src/app/email/components/MessageContent.tsx
index 186f4cf2..68d8ba25 100644
--- a/workbench/control_plane/src/app/email/components/MessageContent.tsx
+++ b/workbench/control_plane/src/app/email/components/MessageContent.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useEffect, useMemo, useRef, useState } from "react";
 import DOMPurify from "dompurify";
-import { ImageOff, MoreHorizontal } from "lucide-react";
 import { splitQuotedHtml, splitQuotedText } from "../lib/quoting";
 
 interface MessageContentProps {
@@ -95,7 +95,7 @@ function QuoteToggle({
           : "border-border bg-secondary text-muted-foreground hover:bg-secondary/70 hover:text-foreground"
       }`}
     >
-      <MoreHorizontal size={14} />
+      <Icon name="MoreHorizontal" size={14} />
     </button>
   );
 }
@@ -224,7 +224,7 @@ function HtmlFrame({ html, quoted = false }: { html: string; quoted?: boolean })
       {sanitized?.hasRemote && !showImages && (
         <div className="flex items-center justify-between gap-2 mb-2 px-3 py-2 rounded-md bg-secondary border border-border text-xs">
           <span className="flex items-center gap-2 text-muted-foreground">
-            <ImageOff size={13} />
+            <Icon name="ImageOff" size={13} />
             Remote images are blocked to protect your privacy.
           </span>
           <button
diff --git a/workbench/control_plane/src/app/email/components/MessageTimelineModal.tsx b/workbench/control_plane/src/app/email/components/MessageTimelineModal.tsx
index 787f6a60..c4a31bee 100644
--- a/workbench/control_plane/src/app/email/components/MessageTimelineModal.tsx
+++ b/workbench/control_plane/src/app/email/components/MessageTimelineModal.tsx
@@ -6,10 +6,8 @@
 // each rule run that classified, labelled, drafted, moved, or failed on it.
 // Reuses the same audit rows (email_executed_rules), scoped to this one message.
 
+import AppIcon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import { useEffect, useState } from "react";
-import {
-  AlertTriangle, CheckCircle2, Inbox, Loader2, MinusCircle, X,
-} from "lucide-react";
 import type { MessageTimeline, MessageTimelineEvent } from "../lib/types";
 import { getMessageTimeline } from "../lib/api";
 import { fullDateLabel } from "../lib/utils";
@@ -78,14 +76,14 @@ export function MessageTimelineModal({
             className="text-muted-foreground hover:text-foreground flex-shrink-0"
             title="Close (Esc)"
           >
-            <X size={16} />
+            <AppIcon name="X" size={16} />
           </button>
         </div>
 
         <div className="overflow-y-auto px-4 py-4 flex-1">
           {loading ? (
             <div className="flex items-center gap-2 text-xs text-muted-foreground py-6">
-              <Loader2 className="animate-spin" size={14} /> Loading…
+              <AppIcon name="Loader2" className="animate-spin" size={14} /> Loading…
             </div>
           ) : err ? (
             <div className="text-xs text-destructive">{err}</div>
@@ -166,15 +164,15 @@ function TimelineRow({
 }
 
 function rowIcon(ev: MessageTimelineEvent): {
-  icon: typeof Inbox;
+  icon: ThemedIcon;
   tint: string;
 } {
-  if (ev.kind === "received") return { icon: Inbox, tint: "text-primary" };
+  if (ev.kind === "received") return { icon: themedIcon("Inbox"), tint: "text-primary" };
   if (ev.kind === "skipped")
-    return { icon: MinusCircle, tint: "text-muted-foreground" };
+    return { icon: themedIcon("MinusCircle"), tint: "text-muted-foreground" };
   if (ev.status === "FAILED" || (ev.action_errors?.length ?? 0) > 0)
-    return { icon: AlertTriangle, tint: "text-destructive" };
-  return { icon: CheckCircle2, tint: "text-emerald-500" };
+    return { icon: themedIcon("AlertTriangle"), tint: "text-destructive" };
+  return { icon: themedIcon("CheckCircle2"), tint: "text-emerald-500" };
 }
 
 function rowTitle(ev: MessageTimelineEvent): string {
diff --git a/workbench/control_plane/src/app/email/components/QuickFilters.tsx b/workbench/control_plane/src/app/email/components/QuickFilters.tsx
index 3eee9c6e..173756e6 100644
--- a/workbench/control_plane/src/app/email/components/QuickFilters.tsx
+++ b/workbench/control_plane/src/app/email/components/QuickFilters.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useEffect, useState } from "react";
-import { ListFilter } from "lucide-react";
 import { useEmailStore } from "../lib/emailStore";
 import { SearchFilter, addFilter, filterKey } from "../lib/searchFilters";
 import { chipColors } from "../lib/labelColors";
@@ -149,7 +149,7 @@ export function QuickFilters() {
 
   return (
     <div className="flex items-center gap-1.5 px-3 sm:px-4 py-1.5 border-b border-border overflow-x-auto scrollbar-hide flex-shrink-0 bg-card/40">
-      <ListFilter size={13} className="text-muted-foreground flex-shrink-0" />
+      <Icon name="ListFilter" size={13} className="text-muted-foreground flex-shrink-0" />
       {visible.map(({ label, facet, f }) => {
         const active = isActive(f);
         const c = f.kind === "tag" ? chipColors(f.value, labelColors) : null;
diff --git a/workbench/control_plane/src/app/email/components/SearchBar.tsx b/workbench/control_plane/src/app/email/components/SearchBar.tsx
index 5c510077..cbf72bc0 100644
--- a/workbench/control_plane/src/app/email/components/SearchBar.tsx
+++ b/workbench/control_plane/src/app/email/components/SearchBar.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Search, X, ChevronDown, SlidersHorizontal, Sparkles, Check } from "lucide-react";
 import { useEmailStore, FOLDER_ALL } from "../lib/emailStore";
 import {
   SearchFilter,
@@ -120,7 +120,7 @@ export function SearchBar() {
             className="flex items-center gap-1 pl-2.5 pr-2 py-1.5 rounded-l-md text-[11px] text-muted-foreground hover:text-foreground transition-colors max-w-[140px]"
           >
             <span className="truncate">{scopeName}</span>
-            <ChevronDown size={11} className="flex-shrink-0" />
+            <Icon name="ChevronDown" size={11} className="flex-shrink-0" />
           </button>
           {scopeOpen && (
             <>
@@ -148,7 +148,7 @@ export function SearchBar() {
                   >
                     <span className="truncate">{o.label}</span>
                     {scope === o.key && (
-                      <Check size={11} className="text-primary flex-shrink-0" />
+                      <Icon name="Check" size={11} className="text-primary flex-shrink-0" />
                     )}
                   </button>
                 ))}
@@ -158,7 +158,7 @@ export function SearchBar() {
         </div>
 
         <div className="w-px h-4 bg-border flex-shrink-0" />
-        <Search size={13} className="text-muted-foreground flex-shrink-0 ml-0.5" />
+        <Icon name="Search" size={13} className="text-muted-foreground flex-shrink-0 ml-0.5" />
 
         {/* ── Pills + input share a scrollable row ── */}
         <div className="flex items-center gap-1 flex-1 min-w-0 overflow-x-auto scrollbar-hide py-1">
@@ -182,7 +182,7 @@ export function SearchBar() {
                     c ? "hover:bg-black/15" : "hover:bg-primary/20"
                   }`}
                 >
-                  <X size={9} />
+                  <Icon name="X" size={9} />
                 </button>
               </span>
             );
@@ -207,7 +207,7 @@ export function SearchBar() {
             title="Results ranked by meaning, not just keywords"
             className="flex-shrink-0 inline-flex items-center gap-0.5 text-[9px] font-medium text-primary bg-primary/10 rounded px-1 py-0.5"
           >
-            <Sparkles size={9} /> Smart
+            <Icon name="Sparkles" size={9} /> Smart
           </span>
         )}
 
@@ -218,7 +218,7 @@ export function SearchBar() {
             aria-label="Clear search"
             className="p-1 rounded text-muted-foreground hover:text-foreground transition-colors flex-shrink-0"
           >
-            <X size={13} />
+            <Icon name="X" size={13} />
           </button>
         )}
 
@@ -234,7 +234,7 @@ export function SearchBar() {
                 : "text-muted-foreground hover:text-foreground hover:bg-secondary"
             }`}
           >
-            <SlidersHorizontal size={13} />
+            <Icon name="SlidersHorizontal" size={13} />
           </button>
           {filterOpen && (
             <>
@@ -433,7 +433,7 @@ function FilterMenu({
                     />
                     <span className="truncate">{name}</span>
                   </span>
-                  {has(f) && <Check size={11} className="text-primary flex-shrink-0" />}
+                  {has(f) && <Icon name="Check" size={11} className="text-primary flex-shrink-0" />}
                 </button>
               );
             })
diff --git a/workbench/control_plane/src/app/email/components/SignatureEditor.tsx b/workbench/control_plane/src/app/email/components/SignatureEditor.tsx
index 9e970bc4..ed5fa0bc 100644
--- a/workbench/control_plane/src/app/email/components/SignatureEditor.tsx
+++ b/workbench/control_plane/src/app/email/components/SignatureEditor.tsx
@@ -1,12 +1,8 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useRef } from "react";
 import DOMPurify from "dompurify";
-import {
-  AlignCenter, AlignLeft, AlignRight, Bold, Code2, Eye, Image as ImageIcon,
-  Italic, Link2, Link2Off, List, ListOrdered, Minus, Redo2, RemoveFormatting,
-  Strikethrough, Table as TableIcon, Underline as UnderlineIcon, Undo2, Upload,
-} from "lucide-react";
 import {
   EditorContent, ReactNodeViewRenderer, NodeViewWrapper, useEditor,
   useEditorState, type Editor, type NodeViewProps,
@@ -287,23 +283,23 @@ export function SignatureEditor({
       {/* Toolbar */}
       <div className="flex flex-wrap items-center gap-0.5 px-2 py-1.5 border-b border-border bg-secondary/40">
         <TBtn title="Undo" disabled={!s?.canUndo} onClick={() => chain().undo().run()}>
-          <Undo2 size={14} />
+          <Icon name="Undo2" size={14} />
         </TBtn>
         <TBtn title="Redo" disabled={!s?.canRedo} onClick={() => chain().redo().run()}>
-          <Redo2 size={14} />
+          <Icon name="Redo2" size={14} />
         </TBtn>
         <Divider />
         <TBtn title="Bold" active={s?.bold} onClick={() => chain().toggleBold().run()}>
-          <Bold size={14} />
+          <Icon name="Bold" size={14} />
         </TBtn>
         <TBtn title="Italic" active={s?.italic} onClick={() => chain().toggleItalic().run()}>
-          <Italic size={14} />
+          <Icon name="Italic" size={14} />
         </TBtn>
         <TBtn title="Underline" active={s?.underline} onClick={() => chain().toggleUnderline().run()}>
-          <UnderlineIcon size={14} />
+          <Icon name="Underline" size={14} />
         </TBtn>
         <TBtn title="Strikethrough" active={s?.strike} onClick={() => chain().toggleStrike().run()}>
-          <Strikethrough size={14} />
+          <Icon name="Strikethrough" size={14} />
         </TBtn>
         <Divider />
         {/* Font size + colour ride on <span style> — email-client-safe. */}
@@ -342,35 +338,35 @@ export function SignatureEditor({
         </label>
         <Divider />
         <TBtn title="Align left" active={s?.alignLeft} onClick={() => chain().setTextAlign("left").run()}>
-          <AlignLeft size={14} />
+          <Icon name="AlignLeft" size={14} />
         </TBtn>
         <TBtn title="Align centre" active={s?.alignCenter} onClick={() => chain().setTextAlign("center").run()}>
-          <AlignCenter size={14} />
+          <Icon name="AlignCenter" size={14} />
         </TBtn>
         <TBtn title="Align right" active={s?.alignRight} onClick={() => chain().setTextAlign("right").run()}>
-          <AlignRight size={14} />
+          <Icon name="AlignRight" size={14} />
         </TBtn>
         <Divider />
         <TBtn title="Bulleted list" active={s?.bullet} onClick={() => chain().toggleBulletList().run()}>
-          <List size={14} />
+          <Icon name="List" size={14} />
         </TBtn>
         <TBtn title="Numbered list" active={s?.ordered} onClick={() => chain().toggleOrderedList().run()}>
-          <ListOrdered size={14} />
+          <Icon name="ListOrdered" size={14} />
         </TBtn>
         <Divider />
         <TBtn title={s?.link ? "Edit link" : "Link selected text"} active={s?.link} onClick={addLink}>
-          <Link2 size={14} />
+          <Icon name="Link2" size={14} />
         </TBtn>
         {s?.link && (
           <TBtn title="Remove link" onClick={() => chain().extendMarkRange("link").unsetLink().run()}>
-            <Link2Off size={14} />
+            <Icon name="Link2Off" size={14} />
           </TBtn>
         )}
         <TBtn title="Insert image by URL" onClick={addImageByUrl}>
-          <ImageIcon size={14} />
+          <Icon name="Image" size={14} />
         </TBtn>
         <TBtn title="Upload an image (embedded)" onClick={() => fileRef.current?.click()}>
-          <Upload size={14} />
+          <Icon name="Upload" size={14} />
         </TBtn>
         <input
           ref={fileRef}
@@ -385,13 +381,13 @@ export function SignatureEditor({
           onClick={() =>
             chain().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}
         >
-          <TableIcon size={14} />
+          <Icon name="Table" size={14} />
         </TBtn>
         <TBtn title="Horizontal rule" onClick={() => chain().setHorizontalRule().run()}>
-          <Minus size={14} />
+          <Icon name="Minus" size={14} />
         </TBtn>
         <TBtn title="Clear formatting" onClick={() => chain().unsetAllMarks().unsetTextAlign().run()}>
-          <RemoveFormatting size={14} />
+          <Icon name="RemoveFormatting" size={14} />
         </TBtn>
       </div>
 
@@ -450,8 +446,8 @@ export function SignatureEditor({
         }}
       >
         <summary className="flex cursor-pointer items-center gap-1 px-2 py-1 text-[11px] text-muted-foreground hover:text-foreground select-none">
-          <Code2 size={12} /> Edit HTML source
-          <Eye size={12} className="ml-auto opacity-60" />
+          <Icon name="Code2" size={12} /> Edit HTML source
+          <Icon name="Eye" size={12} className="ml-auto opacity-60" />
         </summary>
         <textarea
           value={value}
diff --git a/workbench/control_plane/src/app/email/components/TaskCaptureModal.tsx b/workbench/control_plane/src/app/email/components/TaskCaptureModal.tsx
index dbe85b79..295c7600 100644
--- a/workbench/control_plane/src/app/email/components/TaskCaptureModal.tsx
+++ b/workbench/control_plane/src/app/email/components/TaskCaptureModal.tsx
@@ -1,9 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useState } from "react";
-import {
-  AlertTriangle, ArrowRight, CheckCircle2, Loader2, Sparkles, X,
-} from "lucide-react";
 import {
   createEmailCapture, createReplyCommitment, detectReplyCommitment,
   enhanceEmailCapture, previewEmailCapture,
@@ -233,21 +231,21 @@ export function TaskCaptureModal({
             className="text-muted-foreground hover:text-foreground flex-shrink-0 disabled:opacity-40"
             title="Close (Esc)"
           >
-            <X size={16} />
+            <Icon name="X" size={16} />
           </button>
         </div>
 
         <div className="overflow-y-auto px-4 py-3 flex-1 space-y-3">
           {loading ? (
             <div className="flex items-center gap-2 text-xs text-muted-foreground py-8 justify-center">
-              <Loader2 className="animate-spin" size={14} /> Preparing task…
+              <Icon name="Loader2" className="animate-spin" size={14} /> Preparing task…
             </div>
           ) : (
             <>
               {/* Already captured — offer to open instead of duplicating. */}
               {already && (
                 <div className="flex items-start gap-2 rounded-lg border border-primary/30 bg-primary/5 px-3 py-2 text-xs">
-                  <CheckCircle2 size={14} className="text-primary mt-0.5 flex-shrink-0" />
+                  <Icon name="CheckCircle2" size={14} className="text-primary mt-0.5 flex-shrink-0" />
                   <div className="min-w-0">
                     <div className="text-foreground">
                       This email is already in Tasks: &ldquo;{already.title}&rdquo;
@@ -263,7 +261,7 @@ export function TaskCaptureModal({
               {similar.length > 0 && (
                 <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 px-3 py-2 text-xs">
                   <div className="flex items-center gap-1.5 text-amber-600 dark:text-amber-500 font-medium mb-1">
-                    <AlertTriangle size={13} /> You may already have this
+                    <Icon name="AlertTriangle" size={13} /> You may already have this
                   </div>
                   <ul className="space-y-0.5">
                     {similar.map((s) => (
@@ -300,9 +298,9 @@ export function TaskCaptureModal({
                 className="inline-flex items-center gap-1.5 rounded-lg border border-border px-2.5 py-1.5 text-xs text-muted-foreground hover:border-primary/40 hover:text-primary transition-colors disabled:opacity-50"
               >
                 {enhancing ? (
-                  <Loader2 size={13} className="animate-spin" />
+                  <Icon name="Loader2" size={13} className="animate-spin" />
                 ) : (
-                  <Sparkles size={13} />
+                  <Icon name="Sparkles" size={13} />
                 )}
                 {enhancing
                   ? commitment
@@ -482,7 +480,7 @@ export function TaskCaptureModal({
                               className="flex-shrink-0 text-muted-foreground/50 hover:text-destructive"
                               title="Remove step"
                             >
-                              <X size={12} />
+                              <Icon name="X" size={12} />
                             </button>
                           </li>
                         ))}
@@ -512,9 +510,9 @@ export function TaskCaptureModal({
             className="inline-flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
           >
             {saving ? (
-              <Loader2 size={13} className="animate-spin" />
+              <Icon name="Loader2" size={13} className="animate-spin" />
             ) : (
-              <ArrowRight size={13} />
+              <Icon name="ArrowRight" size={13} />
             )}
             {already ? "Add anyway" : "Add task"}
           </button>
diff --git a/workbench/control_plane/src/app/email/components/automation/AISettingsView.tsx b/workbench/control_plane/src/app/email/components/automation/AISettingsView.tsx
index 4b0ad352..395cc9ff 100644
--- a/workbench/control_plane/src/app/email/components/automation/AISettingsView.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/AISettingsView.tsx
@@ -1,10 +1,7 @@
 "use client";
 
+import AppIcon, { themedIcon } from "@/components/Icon";
 import { useEffect, useState, useCallback } from "react";
-import {
-  Loader2, Check, X, FlaskConical,
-  History as HistoryIcon, Settings2, Sparkles, AlertTriangle,
-} from "lucide-react";
 import { getProcessPastStatus } from "../../lib/api";
 import type { ProcessPastStatus } from "../../lib/api";
 import { TestTab } from "./ai-settings/TestTab";
@@ -20,10 +17,10 @@ interface AISettingsViewProps {
 type Tab = "rules" | "test" | "history" | "settings";
 
 const TABS: { key: Tab; label: string; icon: React.ElementType }[] = [
-  { key: "rules", label: "Rules", icon: Sparkles },
-  { key: "test", label: "Test", icon: FlaskConical },
-  { key: "history", label: "History", icon: HistoryIcon },
-  { key: "settings", label: "Advanced Settings", icon: Settings2 },
+  { key: "rules", label: "Rules", icon: themedIcon("Sparkles") },
+  { key: "test", label: "Test", icon: themedIcon("FlaskConical") },
+  { key: "history", label: "History", icon: themedIcon("History") },
+  { key: "settings", label: "Advanced Settings", icon: themedIcon("Settings2") },
 ];
 
 /**
@@ -115,11 +112,11 @@ function PastJobBanner({
       <div className="max-w-3xl mx-auto w-full px-3 sm:px-5 py-2">
         <div className="flex items-center gap-2">
           {running ? (
-            <Loader2 className="animate-spin text-primary flex-shrink-0" size={14} />
+            <AppIcon name="Loader2" className="animate-spin text-primary flex-shrink-0" size={14} />
           ) : job.status === "error" ? (
-            <AlertTriangle className="text-destructive flex-shrink-0" size={14} />
+            <AppIcon name="AlertTriangle" className="text-destructive flex-shrink-0" size={14} />
           ) : (
-            <Check className="text-emerald-500 flex-shrink-0" size={14} />
+            <AppIcon name="Check" className="text-emerald-500 flex-shrink-0" size={14} />
           )}
           <span className="text-xs text-foreground min-w-0 truncate">
             {running
@@ -142,7 +139,7 @@ function PastJobBanner({
               className="text-muted-foreground hover:text-foreground flex-shrink-0"
               title="Dismiss"
             >
-              <X size={13} />
+              <AppIcon name="X" size={13} />
             </button>
           )}
         </div>
diff --git a/workbench/control_plane/src/app/email/components/automation/AnalyticsView.tsx b/workbench/control_plane/src/app/email/components/automation/AnalyticsView.tsx
index 97688e55..074291ba 100644
--- a/workbench/control_plane/src/app/email/components/automation/AnalyticsView.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/AnalyticsView.tsx
@@ -14,11 +14,8 @@
  * Every list here ends in a button.
  */
 
+import AppIcon, { themedIcon } from "@/components/Icon";
 import { useEffect, useMemo, useState } from "react";
-import {
-  ArrowDownRight, ArrowUpRight, BarChart3, Clock, Inbox, Loader2, MailMinus,
-  Sparkles, TriangleAlert, Users, Minus, ArrowRight, CheckCheck, RotateCcw,
-} from "lucide-react";
 import { getAnalyticsOverview, retryFailedRuleActions } from "../../lib/api";
 import { AnalyticsOverview, AutomationFeature, NoisySender } from "../../lib/types";
 
@@ -107,7 +104,7 @@ export function AnalyticsView({ accountId, onNavigate }: AnalyticsViewProps) {
   if (error) {
     return (
       <div className="h-full flex flex-col items-center justify-center gap-3 px-6 text-center">
-        <TriangleAlert size={20} className="text-destructive" />
+        <AppIcon name="TriangleAlert" size={20} className="text-destructive" />
         <p className="text-sm text-foreground">{error}</p>
         <button
           onClick={() => setRefresh((n) => n + 1)}
@@ -189,7 +186,7 @@ function KeepingUp({ data }: { data: AnalyticsOverview }) {
   return (
     <section>
       <SectionHead
-        icon={Clock}
+        icon={themedIcon("Clock")}
         title="Keeping up"
         note="Measured per conversation, not per message — five emails in one thread are one thing to answer."
       />
@@ -303,12 +300,12 @@ function Delta({
   if (now === prev) {
     return (
       <span className="flex items-center gap-0.5 text-[11px] text-muted-foreground">
-        <Minus size={11} /> flat
+        <AppIcon name="Minus" size={11} /> flat
       </span>
     );
   }
   const up = now > prev;
-  const Icon = up ? ArrowUpRight : ArrowDownRight;
+  const arrow = up ? "ArrowUpRight" : "ArrowDownRight";
   const color =
     better === "neutral"
       ? "var(--muted-foreground)"
@@ -326,7 +323,7 @@ function Delta({
       style={{ color }}
       title={`${up ? "Up" : "Down"} from ${prev.toLocaleString()} in the previous period`}
     >
-      <Icon size={11} />
+      <AppIcon name={arrow} size={11} />
       {shown}
     </span>
   );
@@ -345,7 +342,7 @@ function Backlog({
   return (
     <section>
       <SectionHead
-        icon={Users}
+        icon={themedIcon("Users")}
         title="Open threads right now"
         note="Not affected by the range above — a conversation left hanging in March is the whole point."
       />
@@ -361,7 +358,7 @@ function Backlog({
       <div className="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px]">
         {blind ? (
           <>
-            <TriangleAlert size={11} className="text-accent flex-shrink-0" />
+            <AppIcon name="TriangleAlert" size={11} className="text-accent flex-shrink-0" />
             <span className="text-foreground/80">
               {`Reply Zero has read ${coverage.classified.toLocaleString()} of ${coverage.total.toLocaleString()} conversations (${Math.round(coverage.rate * 100)}%).`}
             </span>
@@ -371,7 +368,7 @@ function Backlog({
           </>
         ) : (
           <>
-            <CheckCheck size={11} className="text-success flex-shrink-0" />
+            <AppIcon name="CheckCheck" size={11} className="text-success flex-shrink-0" />
             <span className="text-muted-foreground">
               {`Reply Zero has classified all ${coverage.total.toLocaleString()} conversations, so these counts are complete.`}
             </span>
@@ -494,7 +491,7 @@ function Volume({ data, days }: { data: AnalyticsOverview; days: number }) {
 
   return (
     <section>
-      <SectionHead icon={BarChart3} title="Mail in and out" />
+      <SectionHead icon={themedIcon("BarChart3")} title="Mail in and out" />
       {bars.length === 0 ? (
         <Empty>No mail arrived in this period.</Empty>
       ) : (
@@ -573,7 +570,7 @@ function NeverReplied({
   return (
     <section>
       <SectionHead
-        icon={MailMinus}
+        icon={themedIcon("MailMinus")}
         title="You have never replied to these"
         note="Ranked by unread, not volume — the loudest sender is usually a colleague, and that is not a problem you can fix."
         action={
@@ -582,7 +579,7 @@ function NeverReplied({
               onClick={() => onNavigate("unsubscribe")}
               className="flex items-center gap-1 text-xs text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded"
             >
-              Clean these up <ArrowRight size={12} />
+              Clean these up <AppIcon name="ArrowRight" size={12} />
             </button>
           ) : null
         }
@@ -655,7 +652,7 @@ function Arrivals({ data }: { data: AnalyticsOverview }) {
 
   return (
     <section>
-      <SectionHead icon={Inbox} title="What arrived" />
+      <SectionHead icon={themedIcon("Inbox")} title="What arrived" />
       {cats.length === 0 ? (
         <Empty>No mail arrived in this period.</Empty>
       ) : (
@@ -723,7 +720,7 @@ function Assistant({
   return (
     <section className="pb-4">
       <SectionHead
-        icon={Sparkles}
+        icon={themedIcon("Sparkles")}
         title="The assistant"
         note="Not just how much it did — whether it is doing it correctly."
         action={
@@ -732,7 +729,7 @@ function Assistant({
               onClick={() => onNavigate("ai-settings")}
               className="flex items-center gap-1 text-xs text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded"
             >
-              AI Settings <ArrowRight size={12} />
+              AI Settings <AppIcon name="ArrowRight" size={12} />
             </button>
           ) : null
         }
@@ -888,7 +885,7 @@ function RetryFailed({ accountId }: { accountId: string }) {
         title="Re-applies the label and folder move only — never drafts, sends or forwards"
         className="flex items-center gap-1 text-[10px] text-primary hover:underline disabled:opacity-60 disabled:cursor-default focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded"
       >
-        {busy ? <Loader2 className="animate-spin" size={10} /> : <RotateCcw size={10} />}
+        {busy ? <AppIcon name="Loader2" className="animate-spin" size={10} /> : <AppIcon name="RotateCcw" size={10} />}
         {busy ? "Re-applying…" : "Re-apply them (no drafts or sends)"}
       </button>
       {result && (
@@ -949,7 +946,7 @@ function Skeleton() {
       </div>
       <div className="h-[190px] rounded-xl border border-border bg-card animate-pulse" />
       <div className="flex items-center justify-center gap-2 text-[11px] text-muted-foreground">
-        <Loader2 className="animate-spin" size={12} />
+        <AppIcon name="Loader2" className="animate-spin" size={12} />
         Crunching your mailbox…
       </div>
     </div>
diff --git a/workbench/control_plane/src/app/email/components/automation/AutomationView.tsx b/workbench/control_plane/src/app/email/components/automation/AutomationView.tsx
index cd93509a..919cd119 100644
--- a/workbench/control_plane/src/app/email/components/automation/AutomationView.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/AutomationView.tsx
@@ -1,9 +1,6 @@
 "use client";
 
-import {
-  ArrowLeft, Sparkles, MailMinus, BarChart3, LayoutDashboard,
-  MessageSquare,
-} from "lucide-react";
+import AppIcon, { themedIcon } from "@/components/Icon";
 import { AutomationFeature } from "../../lib/types";
 import { AISettingsView } from "./AISettingsView";
 import { DashboardView } from "./DashboardView";
@@ -41,29 +38,29 @@ const META: Record<
   chat: {
     title: "Chat",
     subtitle: "Conversational AI assistant",
-    icon: MessageSquare,
+    icon: themedIcon("MessageSquare"),
   },
   "ai-settings": {
     title: "AI Settings",
     subtitle: "Rules, testing & history",
-    icon: Sparkles,
+    icon: themedIcon("Sparkles"),
   },
   digest: {
     // The feature KEY stays "digest" (routing/state churn for zero gain); the
     // surface is the mailbox dashboard — open loops, promises, and traffic.
     title: "Dashboard",
     subtitle: "Open loops, commitments & daily traffic — act from here",
-    icon: LayoutDashboard,
+    icon: themedIcon("LayoutDashboard"),
   },
   unsubscribe: {
     title: "Email Cleaner",
     subtitle: "Unsubscribe, auto-archive & clear out your whole mailbox",
-    icon: MailMinus,
+    icon: themedIcon("MailMinus"),
   },
   analytics: {
     title: "Analytics",
     subtitle: "Inbox trends & activity",
-    icon: BarChart3,
+    icon: themedIcon("BarChart3"),
   },
 };
 
@@ -92,7 +89,7 @@ export function AutomationView({
           className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
           aria-label="Back to inbox"
         >
-          <ArrowLeft size={16} />
+          <AppIcon name="ArrowLeft" size={16} />
         </button>
         <div className="w-7 h-7 rounded-lg bg-primary/15 text-primary flex items-center justify-center flex-shrink-0">
           <Icon size={15} />
diff --git a/workbench/control_plane/src/app/email/components/automation/BulkUnsubscribeView.tsx b/workbench/control_plane/src/app/email/components/automation/BulkUnsubscribeView.tsx
index db5c465b..c6606fe9 100644
--- a/workbench/control_plane/src/app/email/components/automation/BulkUnsubscribeView.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/BulkUnsubscribeView.tsx
@@ -1,11 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useEffect, useState, useCallback, useMemo, useRef } from "react";
-import {
-  Loader2, Archive, ArchiveRestore, Check, ExternalLink, Search,
-  ShieldX, Mail, X, MoreHorizontal, Trash2, RotateCcw, Clock,
-  ChevronDown, ChevronRight, Sparkles, HelpCircle,
-} from "lucide-react";
 import {
   listSenders, upsertNewsletter, unsubscribeSender, bulkAction,
   searchEmails, previewAutoCategorize, runAutoCategorize, getCleanupStatus,
@@ -803,7 +799,7 @@ export function BulkUnsubscribeView({
   if (loading) {
     return (
       <div className="flex items-center justify-center h-full text-muted-foreground gap-2 text-sm">
-        <Loader2 className="animate-spin" size={16} /> Analyzing senders…
+        <Icon name="Loader2" className="animate-spin" size={16} /> Analyzing senders…
       </div>
     );
   }
@@ -813,7 +809,7 @@ export function BulkUnsubscribeView({
       {/* Toolbar */}
       <div className="flex items-center gap-2 px-3 sm:px-5 py-3 border-b border-border flex-shrink-0">
         <div className="flex items-center gap-2 bg-secondary rounded-md px-2.5 py-1.5 flex-1 max-w-xs">
-          <Search size={13} className="text-muted-foreground" />
+          <Icon name="Search" size={13} className="text-muted-foreground" />
           <input
             value={filter}
             onChange={(e) => setFilter(e.target.value)}
@@ -857,11 +853,11 @@ export function BulkUnsubscribeView({
               : "bg-secondary text-muted-foreground hover:text-foreground"
           }`}
         >
-          <Archive size={12} /> Include archived
+          <Icon name="Archive" size={12} /> Include archived
         </button>
         {categorizing && (
           <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground ml-auto whitespace-nowrap">
-            <Loader2 className="animate-spin" size={13} /> Categorizing…
+            <Icon name="Loader2" className="animate-spin" size={13} /> Categorizing…
           </div>
         )}
       </div>
@@ -921,7 +917,7 @@ export function BulkUnsubscribeView({
                 : "border-border text-muted-foreground hover:text-foreground hover:bg-secondary"
             }`}
           >
-            <HelpCircle size={10} />
+            <Icon name="HelpCircle" size={10} />
             Uncategorized
             <span className="opacity-60">{categoryCounts[UNCATEGORIZED]}</span>
           </button>
@@ -939,7 +935,7 @@ export function BulkUnsubscribeView({
       {!loading && senders.length > 0 &&
         senders.every((s) => !(s.labelled ?? 0)) && (
         <div className="flex items-center flex-wrap gap-2 px-3 sm:px-5 py-2 border-b border-border bg-amber-500/10 flex-shrink-0">
-          <RotateCcw size={13} className="text-amber-500 flex-shrink-0" />
+          <Icon name="RotateCcw" size={13} className="text-amber-500 flex-shrink-0" />
           <span className="text-[11px] text-foreground">
             None of your email is categorized here yet — your labels may not have
             synced down from your mail provider.
@@ -951,9 +947,9 @@ export function BulkUnsubscribeView({
             className="ml-auto flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-amber-500 text-white text-[11px] font-medium hover:bg-amber-500/90 transition-colors disabled:opacity-50"
           >
             {categorizing ? (
-              <Loader2 className="animate-spin" size={12} />
+              <Icon name="Loader2" className="animate-spin" size={12} />
             ) : (
-              <RotateCcw size={12} />
+              <Icon name="RotateCcw" size={12} />
             )}
             Restore labels
           </button>
@@ -968,7 +964,7 @@ export function BulkUnsubscribeView({
           cleaner having got worse. */}
       {pending && (
         <div className="flex items-center flex-wrap gap-2 px-3 sm:px-5 py-2 border-b border-border bg-amber-500/10 flex-shrink-0">
-          <HelpCircle size={13} className="text-amber-500 flex-shrink-0" />
+          <Icon name="HelpCircle" size={13} className="text-amber-500 flex-shrink-0" />
           <span className="text-[11px] text-foreground">
             <strong className="font-semibold">{pending.n}</strong>
             {pending.n === 1
@@ -990,7 +986,7 @@ export function BulkUnsubscribeView({
 
       {preview && preview.categorized > 0 && (
         <div className="flex items-center flex-wrap gap-2 px-3 sm:px-5 py-2 border-b border-border bg-primary/5 flex-shrink-0">
-          <Sparkles size={13} className="text-primary flex-shrink-0" />
+          <Icon name="Sparkles" size={13} className="text-primary flex-shrink-0" />
           <span className="text-[11px] text-foreground">
             {/* Built as explicit strings rather than JSX text nodes. Word
                 fragments split across source lines around {expressions} depend
@@ -1019,9 +1015,9 @@ export function BulkUnsubscribeView({
             className="ml-auto flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-primary text-primary-foreground text-[11px] font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
           >
             {categorizing ? (
-              <Loader2 className="animate-spin" size={12} />
+              <Icon name="Loader2" className="animate-spin" size={12} />
             ) : (
-              <Sparkles size={12} />
+              <Icon name="Sparkles" size={12} />
             )}
             Categorize
           </button>
@@ -1053,7 +1049,7 @@ export function BulkUnsubscribeView({
       )}
       {notice && (
         <div className="px-3 sm:px-5 py-2 text-xs text-primary bg-primary/10 border-b border-border flex items-center gap-1.5">
-          <Check size={12} className="flex-shrink-0" />
+          <Icon name="Check" size={12} className="flex-shrink-0" />
           {notice}
         </div>
       )}
@@ -1069,16 +1065,16 @@ export function BulkUnsubscribeView({
             <ActionMenu
               label="Actions"
               items={[
-                { label: "Unsubscribe", icon: <ShieldX size={13} />,
+                { label: "Unsubscribe", icon: <Icon name="ShieldX" size={13} />,
                   onClick: () => bulkUnsubscribe() },
-                { label: "Auto-archive future", icon: <ArchiveRestore size={13} />,
+                { label: "Auto-archive future", icon: <Icon name="ArchiveRestore" size={13} />,
                   onClick: () => bulkAct("AUTO_ARCHIVED") },
-                { label: "Keep", icon: <Check size={13} />,
+                { label: "Keep", icon: <Icon name="Check" size={13} />,
                   onClick: () => bulkAct("APPROVED") },
                 { sep: true },
-                { label: "Archive all existing", icon: <Archive size={13} />,
+                { label: "Archive all existing", icon: <Icon name="Archive" size={13} />,
                   onClick: () => bulkMessagesAction("archive") },
-                { label: "Delete all", icon: <Trash2 size={13} />, danger: true,
+                { label: "Delete all", icon: <Icon name="Trash2" size={13} />, danger: true,
                   onClick: () => bulkMessagesAction("trash") },
               ]}
             />
@@ -1089,21 +1085,21 @@ export function BulkUnsubscribeView({
                 onClick={() => bulkUnsubscribe()}
                 className="hover:bg-red-500/10 hover:text-red-400"
               >
-                <ShieldX size={13} /> Unsubscribe
+                <Icon name="ShieldX" size={13} /> Unsubscribe
               </ActionBtn>
               <ActionBtn
                 title="Auto-archive future mail (provider filter)"
                 onClick={() => bulkAct("AUTO_ARCHIVED")}
                 className="hover:bg-amber-500/10 hover:text-amber-400"
               >
-                <ArchiveRestore size={13} /> Auto-archive
+                <Icon name="ArchiveRestore" size={13} /> Auto-archive
               </ActionBtn>
               <ActionBtn
                 title="Keep — approve"
                 onClick={() => bulkAct("APPROVED")}
                 className="hover:bg-emerald-500/10 hover:text-emerald-400"
               >
-                <Check size={13} /> Keep
+                <Icon name="Check" size={13} /> Keep
               </ActionBtn>
               <div className="w-px h-4 bg-border mx-0.5" />
               <ActionBtn
@@ -1111,14 +1107,14 @@ export function BulkUnsubscribeView({
                 onClick={() => bulkMessagesAction("archive")}
                 className="hover:bg-secondary"
               >
-                <Archive size={13} /> Archive all
+                <Icon name="Archive" size={13} /> Archive all
               </ActionBtn>
               <ActionBtn
                 title="Move all existing mail from the selected senders to Trash"
                 onClick={() => bulkMessagesAction("trash")}
                 className="hover:bg-red-500/10 hover:text-red-400"
               >
-                <Trash2 size={13} /> Delete
+                <Icon name="Trash2" size={13} /> Delete
               </ActionBtn>
             </>
           )}
@@ -1127,7 +1123,7 @@ export function BulkUnsubscribeView({
             title="Clear selection"
             className="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
           >
-            <X size={13} />
+            <Icon name="X" size={13} />
           </button>
         </div>
       )}
@@ -1196,34 +1192,34 @@ export function BulkUnsubscribeView({
                 s.status === "UNSUBSCRIBED" || s.status === "AUTO_ARCHIVED";
               const approved = s.status === "APPROVED";
               const unsubIcon = isMailto ? (
-                <Mail size={13} />
+                <Icon name="Mail" size={13} />
               ) : s.unsubscribe_link ? (
-                <ExternalLink size={13} />
+                <Icon name="ExternalLink" size={13} />
               ) : (
-                <ShieldX size={13} />
+                <Icon name="ShieldX" size={13} />
               );
               // One-off existing-mail cleanup (the desktop kebab + part of the
               // mobile "Actions" menu).
               const cleanupItems: MenuItem[] = [
-                { label: "Archive all existing", icon: <Archive size={13} />,
+                { label: "Archive all existing", icon: <Icon name="Archive" size={13} />,
                   onClick: () => messagesAction(s, "archive") },
-                { label: "Delete all", icon: <Trash2 size={13} />, danger: true,
+                { label: "Delete all", icon: <Icon name="Trash2" size={13} />, danger: true,
                   onClick: () => messagesAction(s, "trash") },
               ];
               // Full action set for the mobile single "Actions" button.
               const rowItems: MenuItem[] = [
                 ...(blocked
-                  ? [{ label: "Resubscribe", icon: <RotateCcw size={13} />,
+                  ? [{ label: "Resubscribe", icon: <Icon name="RotateCcw" size={13} />,
                        onClick: () => act(s, "APPROVED") }]
                   : [
                       { label: s.unsubscribe_link ? "Unsubscribe" : "Block",
                         icon: unsubIcon, onClick: () => doUnsubscribe(s) },
                       { label: "Auto-archive future",
-                        icon: <ArchiveRestore size={13} />,
+                        icon: <Icon name="ArchiveRestore" size={13} />,
                         onClick: () => act(s, "AUTO_ARCHIVED") },
                       ...(approved
                         ? []
-                        : [{ label: "Keep", icon: <Check size={13} />,
+                        : [{ label: "Keep", icon: <Icon name="Check" size={13} />,
                             onClick: () => act(s, "APPROVED") }]),
                     ]),
                 { sep: true },
@@ -1258,9 +1254,9 @@ export function BulkUnsubscribeView({
                     className="p-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors flex-shrink-0"
                   >
                     {expanded === s.email ? (
-                      <ChevronDown size={13} />
+                      <Icon name="ChevronDown" size={13} />
                     ) : (
-                      <ChevronRight size={13} />
+                      <Icon name="ChevronRight" size={13} />
                     )}
                   </button>
                   <div
@@ -1294,7 +1290,7 @@ export function BulkUnsubscribeView({
                           title="Future mail blocked at the source by a provider filter"
                           className="text-[9px] px-1.5 py-0.5 rounded-full bg-sky-500/15 text-sky-400 flex items-center gap-0.5"
                         >
-                          <ShieldX size={9} /> Filtered
+                          <Icon name="ShieldX" size={9} /> Filtered
                         </span>
                       )}
                       {/* Category chips — the rule-labelled cleanup categories on
@@ -1380,7 +1376,7 @@ export function BulkUnsubscribeView({
                       action is surfaced inline (there's room for the icons). */}
                   <div className="flex items-center gap-1 flex-shrink-0">
                     {busy === s.email ? (
-                      <Loader2 className="animate-spin text-muted-foreground" size={14} />
+                      <Icon name="Loader2" className="animate-spin text-muted-foreground" size={14} />
                     ) : isMobile ? (
                       <ActionMenu label="Actions" items={rowItems} />
                     ) : blocked ? (
@@ -1390,21 +1386,21 @@ export function BulkUnsubscribeView({
                           onClick={() => act(s, "APPROVED")}
                           className="hover:bg-emerald-500/10 hover:text-emerald-400"
                         >
-                          <RotateCcw size={13} /> Resubscribe
+                          <Icon name="RotateCcw" size={13} /> Resubscribe
                         </ActionBtn>
                         <ActionBtn
                           title="Archive all existing mail from this sender"
                           onClick={() => messagesAction(s, "archive")}
                           className="hover:bg-secondary"
                         >
-                          <Archive size={13} />
+                          <Icon name="Archive" size={13} />
                         </ActionBtn>
                         <ActionBtn
                           title="Delete all mail from this sender (move to Trash)"
                           onClick={() => messagesAction(s, "trash")}
                           className="hover:bg-red-500/10 hover:text-red-400"
                         >
-                          <Trash2 size={13} />
+                          <Icon name="Trash2" size={13} />
                         </ActionBtn>
                       </>
                     ) : (
@@ -1428,7 +1424,7 @@ export function BulkUnsubscribeView({
                           onClick={() => act(s, "AUTO_ARCHIVED")}
                           className="hover:bg-amber-500/10 hover:text-amber-400"
                         >
-                          <ArchiveRestore size={13} /> Auto-archive
+                          <Icon name="ArchiveRestore" size={13} /> Auto-archive
                         </ActionBtn>
                         {!approved && (
                           <ActionBtn
@@ -1436,7 +1432,7 @@ export function BulkUnsubscribeView({
                             onClick={() => act(s, "APPROVED")}
                             className="hover:bg-emerald-500/10 hover:text-emerald-400"
                           >
-                            <Check size={13} /> Keep
+                            <Icon name="Check" size={13} /> Keep
                           </ActionBtn>
                         )}
                         <ActionBtn
@@ -1444,14 +1440,14 @@ export function BulkUnsubscribeView({
                           onClick={() => messagesAction(s, "archive")}
                           className="hover:bg-secondary"
                         >
-                          <Archive size={13} />
+                          <Icon name="Archive" size={13} />
                         </ActionBtn>
                         <ActionBtn
                           title="Delete all mail from this sender (move to Trash)"
                           onClick={() => messagesAction(s, "trash")}
                           className="hover:bg-red-500/10 hover:text-red-400"
                         >
-                          <Trash2 size={13} />
+                          <Icon name="Trash2" size={13} />
                         </ActionBtn>
                       </>
                     )}
@@ -1480,7 +1476,7 @@ export function BulkUnsubscribeView({
                   disabled={loadingMore}
                   className="flex items-center gap-1.5 px-3 py-1.5 rounded-md border border-border text-[11px] text-foreground hover:bg-secondary transition-colors disabled:opacity-50"
                 >
-                  {loadingMore && <Loader2 className="animate-spin" size={12} />}
+                  {loadingMore && <Icon name="Loader2" className="animate-spin" size={12} />}
                   Load more senders ({totalSenders - senders.length} left)
                 </button>
               </div>
@@ -1496,7 +1492,7 @@ export function BulkUnsubscribeView({
           fetched history is held back from the AI rule run server-side, which
           is what keeps a 40,000-message backfill from costing anything. */}
       <div className="flex-shrink-0 flex items-center flex-wrap gap-2 px-3 sm:px-5 py-2 border-t border-border bg-card/40">
-        <Sparkles size={12} className="text-primary flex-shrink-0" />
+        <Icon name="Sparkles" size={12} className="text-primary flex-shrink-0" />
         <span className="text-[11px] text-muted-foreground">
           Only mail synced to Command Center can be cleaned — fetch and
           categorize older mail, without using AI
@@ -1523,7 +1519,7 @@ export function BulkUnsubscribeView({
               className="px-1.5 py-0.5 text-muted-foreground hover:text-foreground"
               title="Cancel"
             >
-              <X size={11} />
+              <Icon name="X" size={11} />
             </button>
           </div>
         ) : (
@@ -1534,9 +1530,9 @@ export function BulkUnsubscribeView({
             className="ml-auto flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-primary text-primary-foreground text-[11px] font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
           >
             {categorizing ? (
-              <Loader2 className="animate-spin" size={12} />
+              <Icon name="Loader2" className="animate-spin" size={12} />
             ) : (
-              <Clock size={12} />
+              <Icon name="Clock" size={12} />
             )}
             Clean older mail
           </button>
@@ -1545,7 +1541,7 @@ export function BulkUnsubscribeView({
       {/* Archive old mail — age-based bulk archive across ALL senders. Pinned to the
           bottom: it's a standalone sweep, independent of the sender list above. */}
       <div className="flex-shrink-0 flex items-center flex-wrap gap-2 px-3 sm:px-5 py-2 border-t border-border bg-card/40">
-        <Clock size={12} className="text-primary flex-shrink-0" />
+        <Icon name="Clock" size={12} className="text-primary flex-shrink-0" />
         <span className="text-[11px] text-muted-foreground">
           Archive {onlyRead ? "read " : ""}inbox mail older than
         </span>
@@ -1580,9 +1576,9 @@ export function BulkUnsubscribeView({
           className="flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-primary text-primary-foreground text-[11px] font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 ml-auto"
         >
           {busy === "__sweep__" ? (
-            <Loader2 className="animate-spin" size={12} />
+            <Icon name="Loader2" className="animate-spin" size={12} />
           ) : (
-            <Archive size={12} />
+            <Icon name="Archive" size={12} />
           )}
           Archive old mail
         </button>
@@ -1714,7 +1710,7 @@ function SenderMessages({
   if (!msgs) {
     return (
       <div className="px-10 py-3 text-[11px] text-muted-foreground flex items-center gap-1.5">
-        <Loader2 className="animate-spin" size={12} /> Loading messages…
+        <Icon name="Loader2" className="animate-spin" size={12} /> Loading messages…
       </div>
     );
   }
@@ -1780,7 +1776,7 @@ function SenderMessages({
               : ""}
           </span>
           {busyId === m.id ? (
-            <Loader2
+            <Icon name="Loader2"
               className="animate-spin text-muted-foreground flex-shrink-0"
               size={12}
             />
@@ -1791,14 +1787,14 @@ function SenderMessages({
                 title="Archive this message"
                 className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors flex-shrink-0"
               >
-                <Archive size={12} />
+                <Icon name="Archive" size={12} />
               </button>
               <button
                 onClick={() => act(m.id, "trash")}
                 title="Delete this message (move to Trash)"
                 className="p-1 rounded text-muted-foreground hover:text-red-400 hover:bg-red-500/10 transition-colors flex-shrink-0"
               >
-                <Trash2 size={12} />
+                <Icon name="Trash2" size={12} />
               </button>
             </>
           )}
@@ -1810,7 +1806,7 @@ function SenderMessages({
           disabled={loadingMore}
           className="flex items-center gap-1.5 py-1.5 text-[10px] text-primary hover:opacity-80 disabled:opacity-50"
         >
-          {loadingMore && <Loader2 className="animate-spin" size={11} />}
+          {loadingMore && <Icon name="Loader2" className="animate-spin" size={11} />}
           Show {Math.min(DRILL_PAGE, total - msgs.length)} more
           <span className="text-muted-foreground">
             ({msgs.length} of {total})
@@ -1905,10 +1901,10 @@ function ActionMenu({ items, label }: { items: MenuItem[]; label?: string }) {
         {label ? (
           <>
             {label}
-            <ChevronDown size={12} />
+            <Icon name="ChevronDown" size={12} />
           </>
         ) : (
-          <MoreHorizontal size={13} />
+          <Icon name="MoreHorizontal" size={13} />
         )}
       </button>
       {open && (
diff --git a/workbench/control_plane/src/app/email/components/automation/DashboardView.tsx b/workbench/control_plane/src/app/email/components/automation/DashboardView.tsx
index 1b24b236..c8c9c220 100644
--- a/workbench/control_plane/src/app/email/components/automation/DashboardView.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/DashboardView.tsx
@@ -11,12 +11,8 @@
  * projections) — the email is the snapshot, this is the live ledger.
  */
 
+import AppIcon, { themedIcon } from "@/components/Icon";
 import { useEffect, useState, useCallback } from "react";
-import {
-  Loader2, Send, Mail, MailOpen, Reply, Paperclip, Check, Newspaper,
-  Settings2, Hourglass, ExternalLink, Clock, CheckCheck, XCircle,
-  AlertTriangle, ChevronRight, PenLine, BellRing, Sparkles,
-} from "lucide-react";
 import { getDigest, resolveThread, sendDigest, snoozeEmail } from "../../lib/api";
 import { DigestData, DigestThread } from "../../lib/types";
 import { DigestSettingsDialog } from "./DigestSettingsDialog";
@@ -152,14 +148,14 @@ export function DashboardView({
           onClick={() => setShowConfig(true)}
           className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-border text-xs text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors ml-auto"
         >
-          <Settings2 size={13} /> Configure
+          <AppIcon name="Settings2" size={13} /> Configure
         </button>
         <button
           onClick={send}
           disabled={sending || loading}
           className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
         >
-          {sending ? <Loader2 className="animate-spin" size={13} /> : <Send size={13} />}
+          {sending ? <AppIcon name="Loader2" className="animate-spin" size={13} /> : <AppIcon name="Send" size={13} />}
           Send to my inbox
         </button>
       </div>
@@ -173,7 +169,7 @@ export function DashboardView({
 
       {sentTo && (
         <div className="px-3 sm:px-5 py-2 text-xs text-emerald-400 bg-emerald-500/10 border-b border-border flex items-center gap-1.5">
-          <Check size={12} /> Digest sent to {sentTo}
+          <AppIcon name="Check" size={12} /> Digest sent to {sentTo}
         </div>
       )}
       {error && (
@@ -185,7 +181,7 @@ export function DashboardView({
       <div className="flex-1 overflow-y-auto px-4 sm:px-5 py-4 space-y-5">
         {loading ? (
           <div className="flex items-center justify-center h-40 text-muted-foreground gap-2 text-sm">
-            <Loader2 className="animate-spin" size={16} /> Building dashboard…
+            <AppIcon name="Loader2" className="animate-spin" size={16} /> Building dashboard…
           </div>
         ) : !data ? null : (
           <>
@@ -193,7 +189,7 @@ export function DashboardView({
                 present when the setting is on (empty string otherwise). */}
             {data.brief && (
               <div className="flex items-start gap-2 rounded-xl border border-primary/30 bg-primary/5 px-4 py-3">
-                <Sparkles size={15} className="text-primary flex-shrink-0 mt-0.5" />
+                <AppIcon name="Sparkles" size={15} className="text-primary flex-shrink-0 mt-0.5" />
                 <p className="text-sm text-foreground leading-snug">{data.brief}</p>
               </div>
             )}
@@ -204,15 +200,15 @@ export function DashboardView({
                 so "Waiting on them 104" under a "Last day" toggle stops reading
                 as one day's mail. */}
             <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
-              <Stat icon={Mail} label="In inbox" value={t!.inbox}
+              <Stat icon={themedIcon("Mail")} label="In inbox" value={t!.inbox}
                 sub={period === "day" ? "last day" : "last week"} />
-              <Stat icon={MailOpen} label="Unread" value={t!.unread}
+              <Stat icon={themedIcon("MailOpen")} label="Unread" value={t!.unread}
                 sub={period === "day" ? "last day" : "last week"} />
-              <Stat icon={Reply} label="Needs reply" value={t!.needs_reply}
+              <Stat icon={themedIcon("Reply")} label="Needs reply" value={t!.needs_reply}
                 sub="all open" accent />
-              <Stat icon={Hourglass} label="Waiting on them"
+              <Stat icon={themedIcon("Hourglass")} label="Waiting on them"
                 value={t!.awaiting ?? 0} sub="all open" />
-              <Stat icon={Paperclip} label="Attachments" value={t!.attachments}
+              <Stat icon={themedIcon("Paperclip")} label="Attachments" value={t!.attachments}
                 sub={period === "day" ? "last day" : "last week"} />
             </div>
 
@@ -221,7 +217,7 @@ export function DashboardView({
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
               <div className="bg-card border border-border rounded-xl p-4">
                 <h3 className="text-xs font-semibold text-foreground mb-3 flex items-center gap-1.5">
-                  <Reply size={13} className="text-primary" /> Needs your reply
+                  <AppIcon name="Reply" size={13} className="text-primary" /> Needs your reply
                   <span
                     className="text-[10px] font-normal text-muted-foreground"
                     title="Ranked by urgency — importance and unread lift a thread above older ones"
@@ -253,28 +249,28 @@ export function DashboardView({
                                 title="Draft a reply with AI — opens the thread with a draft ready"
                                 onClick={() => onDraftReply(b.message_id!)}
                               >
-                                <PenLine size={12} />
+                                <AppIcon name="PenLine" size={12} />
                               </RowBtn>
                             )}
                             <RowBtn
                               title="Mark done — this loop is closed"
                               onClick={() => markDone("backlog", b)}
                             >
-                              <CheckCheck size={12} />
+                              <AppIcon name="CheckCheck" size={12} />
                             </RowBtn>
                             {b.message_id && (
                               <RowBtn
                                 title="Snooze until tomorrow 8:00"
                                 onClick={() => snoozeDay(b)}
                               >
-                                <Clock size={12} />
+                                <AppIcon name="Clock" size={12} />
                               </RowBtn>
                             )}
                             <RowBtn
                               title="Dismiss — never mind this thread (files it as FYI without claiming it's done)"
                               onClick={() => dismiss("backlog", b)}
                             >
-                              <XCircle size={12} />
+                              <AppIcon name="XCircle" size={12} />
                             </RowBtn>
                           </>
                         }
@@ -286,7 +282,7 @@ export function DashboardView({
 
               <div className="bg-card border border-border rounded-xl p-4">
                 <h3 className="text-xs font-semibold text-foreground mb-3 flex items-center gap-1.5">
-                  <Hourglass size={13} className="text-primary" /> Waiting on them
+                  <AppIcon name="Hourglass" size={13} className="text-primary" /> Waiting on them
                   <CountBadge n={t!.awaiting ?? 0} />
                 </h3>
                 {!data.awaiting?.length ? (
@@ -313,20 +309,20 @@ export function DashboardView({
                                 title="Nudge — open the thread with an AI follow-up draft ready"
                                 onClick={() => onNudge(b.message_id!)}
                               >
-                                <BellRing size={12} />
+                                <AppIcon name="BellRing" size={12} />
                               </RowBtn>
                             )}
                             <RowBtn
                               title="Mark done — no longer waiting on this; closes the loop"
                               onClick={() => markDone("awaiting", b)}
                             >
-                              <CheckCheck size={12} />
+                              <AppIcon name="CheckCheck" size={12} />
                             </RowBtn>
                             <RowBtn
                               title="Dismiss — stop tracking this thread (files it as FYI)"
                               onClick={() => dismiss("awaiting", b)}
                             >
-                              <XCircle size={12} />
+                              <AppIcon name="XCircle" size={12} />
                             </RowBtn>
                           </>
                         }
@@ -341,7 +337,7 @@ export function DashboardView({
             {data.commitments && data.commitments.length > 0 && (
               <div className="bg-card border border-border rounded-xl p-4">
                 <h3 className="text-xs font-semibold text-foreground mb-3 flex items-center gap-1.5">
-                  <Check size={13} className="text-primary" /> Commitments
+                  <AppIcon name="Check" size={13} className="text-primary" /> Commitments
                   <CountBadge n={data.commitments.length} />
                 </h3>
                 <div className="space-y-1.5">
@@ -368,7 +364,7 @@ export function DashboardView({
                         <span className="text-foreground truncate flex items-center gap-1 min-w-0">
                           <span className="truncate">{c.title}</span>
                           {openable && (
-                            <ChevronRight
+                            <AppIcon name="ChevronRight"
                               size={11}
                               className="text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"
                             />
@@ -396,7 +392,7 @@ export function DashboardView({
               {/* By category */}
               <div className="bg-card border border-border rounded-xl p-4">
                 <h3 className="text-xs font-semibold text-foreground mb-3 flex items-center gap-1.5">
-                  <Newspaper size={13} className="text-primary" /> By category
+                  <AppIcon name="Newspaper" size={13} className="text-primary" /> By category
                 </h3>
                 <div className="space-y-1.5">
                   {data.by_category.length === 0 && (
@@ -421,7 +417,7 @@ export function DashboardView({
                       <span className="text-foreground flex items-center gap-1">
                         {c.category}
                         {onFilterLabel && (
-                          <ChevronRight
+                          <AppIcon name="ChevronRight"
                             size={11}
                             className="text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity"
                           />
@@ -438,7 +434,7 @@ export function DashboardView({
               {/* Noisy senders */}
               <div className="bg-card border border-border rounded-xl p-4">
                 <h3 className="text-xs font-semibold text-foreground mb-3 flex items-center gap-1.5">
-                  <Mail size={13} className="text-primary" /> Noisy senders you never answer
+                  <AppIcon name="Mail" size={13} className="text-primary" /> Noisy senders you never answer
                 </h3>
                 <div className="space-y-1.5">
                   {data.top_senders.length === 0 && (
@@ -463,7 +459,7 @@ export function DashboardView({
                       <span className="text-foreground truncate flex items-center gap-1 min-w-0">
                         <span className="truncate">{s.name || s.email}</span>
                         {onFilterSender && (
-                          <ChevronRight
+                          <AppIcon name="ChevronRight"
                             size={11}
                             className="text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"
                           />
@@ -511,7 +507,7 @@ function ThreadRow({
       title={openable ? "Open this conversation" : undefined}
     >
       {row.important && (
-        <AlertTriangle
+        <AppIcon name="AlertTriangle"
           size={11}
           className="text-amber-500 flex-shrink-0"
           aria-label="High importance"
@@ -549,7 +545,7 @@ function ThreadRow({
         {actions}
         {openable && (
           <RowBtn title="Open" onClick={() => onOpen!(row.message_id!)}>
-            <ExternalLink size={12} />
+            <AppIcon name="ExternalLink" size={12} />
           </RowBtn>
         )}
       </span>
diff --git a/workbench/control_plane/src/app/email/components/automation/DigestSettingsDialog.tsx b/workbench/control_plane/src/app/email/components/automation/DigestSettingsDialog.tsx
index 4c81a85b..e34fad41 100644
--- a/workbench/control_plane/src/app/email/components/automation/DigestSettingsDialog.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/DigestSettingsDialog.tsx
@@ -11,8 +11,8 @@
  * via `onSaved` so an embedding screen (AI-Settings) can sync its local copy.
  */
 
+import Icon from "@/components/Icon";
 import { useEffect, useState } from "react";
-import { Check, Loader2 } from "lucide-react";
 import {
   getAssistantSettings, listRules, saveAssistantSettings,
 } from "../../lib/api";
@@ -95,14 +95,14 @@ export function DigestSettingsDialog({
           disabled={saving || !s}
           className="ml-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
         >
-          {saving ? <Loader2 className="animate-spin" size={13} /> : <Check size={13} />}
+          {saving ? <Icon name="Loader2" className="animate-spin" size={13} /> : <Icon name="Check" size={13} />}
           Save
         </button>
       }
     >
       {!s ? (
         <div className="flex items-center gap-2 text-xs text-muted-foreground py-4">
-          <Loader2 className="animate-spin" size={14} /> Loading…
+          <Icon name="Loader2" className="animate-spin" size={14} /> Loading…
         </div>
       ) : (
         <div className="space-y-3">
diff --git a/workbench/control_plane/src/app/email/components/automation/ai-settings/HistoryTab.tsx b/workbench/control_plane/src/app/email/components/automation/ai-settings/HistoryTab.tsx
index 84387f0c..6c05ccdc 100644
--- a/workbench/control_plane/src/app/email/components/automation/ai-settings/HistoryTab.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/ai-settings/HistoryTab.tsx
@@ -5,8 +5,8 @@
 // rule, with per-row result pill + Fix. Can live-poll while a "Process past
 // emails" job runs. Extracted from AISettingsView.tsx.
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useState } from "react";
-import { Loader2 } from "lucide-react";
 import { getRulesHistory } from "../../../lib/api";
 import type { ExecutedRule, RuleAction } from "../../../lib/types";
 import { EmailPreviewModal } from "../../EmailPreviewModal";
@@ -99,7 +99,7 @@ export function HistoryTab({
         </select>
         {live && (
           <span className="flex items-center gap-1.5 text-[11px] text-primary">
-            <Loader2 className="animate-spin" size={12} /> Processing past emails…
+            <Icon name="Loader2" className="animate-spin" size={12} /> Processing past emails…
           </span>
         )}
         <button
diff --git a/workbench/control_plane/src/app/email/components/automation/ai-settings/RulesTab.tsx b/workbench/control_plane/src/app/email/components/automation/ai-settings/RulesTab.tsx
index 0f3b0055..e74e6258 100644
--- a/workbench/control_plane/src/app/email/components/automation/ai-settings/RulesTab.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/ai-settings/RulesTab.tsx
@@ -4,13 +4,8 @@
 // actions), the action-config sub-editors, and the Rules-tab dialogs (Add rule,
 // Process past emails, artifact picker). Extracted from AISettingsView.tsx.
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useRef, useState } from "react";
-import {
-  Check, ChevronDown, ChevronRight, Cloud, Copy, FolderOpen, FolderPlus,
-  History as HistoryIcon, Inbox, Loader2, MoreHorizontal, MoreVertical,
-  Paperclip, Pencil, Play, Plus, Shield, Sparkles, Tag, Trash2, Upload, Wand2,
-  X, Zap,
-} from "lucide-react";
 import {
   createEmailFolder, createRule, deleteRule, deleteRulePattern, generateRules,
   getRulePolicies, installPresetRules, listEmailArtifacts, listRulePatterns,
@@ -440,7 +435,7 @@ export function RulesTab({
               disabled={installing}
               className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-border text-xs text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-50 whitespace-nowrap"
             >
-              {installing ? <Loader2 className="animate-spin" size={13} /> : <Sparkles size={13} />}
+              {installing ? <Icon name="Loader2" className="animate-spin" size={13} /> : <Icon name="Sparkles" size={13} />}
               Add defaults
             </button>
           )}
@@ -449,14 +444,14 @@ export function RulesTab({
               onClick={() => setShowPast(true)}
               className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-border text-xs text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors whitespace-nowrap"
             >
-              <HistoryIcon size={13} /> Past emails
+              <Icon name="History" size={13} /> Past emails
             </button>
           )}
           <button
             onClick={() => setShowAdd(true)}
             className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors whitespace-nowrap"
           >
-            <Plus size={13} /> Add rule
+            <Icon name="Plus" size={13} /> Add rule
           </button>
         </div>
       </div>
@@ -491,7 +486,7 @@ export function RulesTab({
       <div className="flex-1 overflow-y-auto px-5 py-3 space-y-2">
         {rules.length === 0 && (
           <div className="flex flex-col items-center text-center py-10 gap-3">
-            <Sparkles size={22} className="text-primary/60" />
+            <Icon name="Sparkles" size={22} className="text-primary/60" />
             <div className="text-sm text-muted-foreground max-w-xs">
               No rules yet. Install the recommended set (Needs Reply, FYI,
               Newsletter, Marketing, Calendar, Receipt, Notification, Cold Email)
@@ -503,9 +498,9 @@ export function RulesTab({
               className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
             >
               {installing ? (
-                <Loader2 className="animate-spin" size={13} />
+                <Icon name="Loader2" className="animate-spin" size={13} />
               ) : (
-                <Sparkles size={13} />
+                <Icon name="Sparkles" size={13} />
               )}
               Install default rules
             </button>
@@ -565,7 +560,7 @@ export function RulesTab({
                           : "text-muted-foreground hover:text-foreground"
                       }`}
                     >
-                      <Zap size={11} />
+                      <Icon name="Zap" size={11} />
                       {rp.length === 1
                         ? "1 learned pattern"
                         : `${rp.length} learned patterns`}
@@ -604,7 +599,7 @@ export function RulesTab({
                 title="More"
                 onClick={() => setMenuFor(menuFor === rule.id ? null : rule.id ?? null)}
               >
-                <MoreVertical size={14} />
+                <Icon name="MoreVertical" size={14} />
               </IconAction>
               {menuFor === rule.id && (
                 <>
@@ -615,7 +610,7 @@ export function RulesTab({
                   />
                   <div className="absolute right-0 top-7 z-50 w-44 rounded-lg border border-border bg-card shadow-lg py-1 text-xs">
                     <RuleMenuItem
-                      icon={<Pencil size={13} />}
+                      icon={<Icon name="Pencil" size={13} />}
                       label="Edit"
                       onClick={() => {
                         setMenuFor(null);
@@ -623,17 +618,17 @@ export function RulesTab({
                       }}
                     />
                     <RuleMenuItem
-                      icon={<Wand2 size={13} />}
+                      icon={<Icon name="Wand2" size={13} />}
                       label="Edit with AI"
                       onClick={() => editWithAI(rule)}
                     />
                     <RuleMenuItem
-                      icon={<Copy size={13} />}
+                      icon={<Icon name="Copy" size={13} />}
                       label="Duplicate"
                       onClick={() => duplicate(rule)}
                     />
                     <RuleMenuItem
-                      icon={<HistoryIcon size={13} />}
+                      icon={<Icon name="History" size={13} />}
                       label="See history"
                       onClick={() => {
                         setMenuFor(null);
@@ -642,7 +637,7 @@ export function RulesTab({
                     />
                     <div className="my-1 h-px bg-border" />
                     <RuleMenuItem
-                      icon={<Trash2 size={13} />}
+                      icon={<Icon name="Trash2" size={13} />}
                       label="Delete"
                       destructive
                       onClick={() => {
@@ -676,7 +671,7 @@ export function RulesTab({
               </p>
             </div>
             <div className="flex items-center gap-2.5 bg-card border border-border rounded-xl px-4 py-2.5">
-              <Shield
+              <Icon name="Shield"
                 size={14}
                 className={
                   policies.cold_email_blocker === "OFF"
@@ -702,7 +697,7 @@ export function RulesTab({
             </div>
             {Object.values(policies.dispositions).some((n) => n > 0) && (
               <div className="flex items-center gap-2.5 bg-card border border-border rounded-xl px-4 py-2.5">
-                <Inbox size={14} className="text-muted-foreground" />
+                <Icon name="Inbox" size={14} className="text-muted-foreground" />
                 <div className="flex-1 min-w-0 text-xs">
                   <span className="font-medium text-foreground">
                     Sender dispositions
@@ -731,7 +726,7 @@ export function RulesTab({
               policies.provider_rules.length > 0 && (
                 <details className="bg-card border border-border rounded-xl px-4 py-2.5">
                   <summary className="cursor-pointer select-none text-xs flex items-center gap-2.5 text-foreground hover:text-primary transition-colors">
-                    <Cloud size={14} className="text-muted-foreground" />
+                    <Icon name="Cloud" size={14} className="text-muted-foreground" />
                     <span className="font-medium">
                       {policies.provider_rules.length === 1
                         ? "1 inbox rule at your mail provider"
@@ -900,7 +895,7 @@ function RuleEditor({
             disabled={!valid}
             className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
           >
-            <Check size={13} /> {rule.id ? "Save" : "Create"}
+            <Icon name="Check" size={13} /> {rule.id ? "Save" : "Create"}
           </button>
         </>
       }
@@ -925,7 +920,7 @@ function RuleEditor({
       <div className="bg-card border border-border rounded-xl p-3.5 space-y-3">
         <div className="flex items-center justify-between">
           <span className="flex items-center gap-2 text-sm font-semibold text-foreground">
-            <Inbox size={16} className="text-blue-500" />
+            <Icon name="Inbox" size={16} className="text-blue-500" />
             When I get an email
           </span>
           {shown.length > 1 && (
@@ -987,7 +982,7 @@ function RuleEditor({
                   title="Remove condition"
                   className="p-1.5 text-muted-foreground hover:text-destructive flex-shrink-0 mt-0.5"
                 >
-                  <X size={13} />
+                  <Icon name="X" size={13} />
                 </button>
               )}
             </div>
@@ -999,7 +994,7 @@ function RuleEditor({
             onClick={addCondition}
             className="flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-lg border border-dashed border-border text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
           >
-            <Plus size={13} /> Add Condition
+            <Icon name="Plus" size={13} /> Add Condition
           </button>
         )}
       </div>
@@ -1007,7 +1002,7 @@ function RuleEditor({
       {/* Then — actions */}
       <div className="bg-card border border-border rounded-xl p-3.5 space-y-3">
         <span className="flex items-center gap-2 text-sm font-semibold text-foreground">
-          <Zap size={16} className="text-emerald-500" />
+          <Icon name="Zap" size={16} className="text-emerald-500" />
           Then
         </span>
         <div className="space-y-2.5">
@@ -1047,7 +1042,7 @@ function RuleEditor({
           onClick={() => set({ actions: [...draft.actions, { type: "LABEL" }] })}
           className="flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-lg border border-dashed border-border text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
         >
-          <Plus size={13} /> Add Action
+          <Icon name="Plus" size={13} /> Add Action
         </button>
       </div>
 
@@ -1057,7 +1052,7 @@ function RuleEditor({
           onClick={() => setAdvancedOpen((o) => !o)}
           className="w-full flex items-center gap-1.5 px-3.5 py-2.5 text-sm font-medium text-foreground hover:bg-secondary/40 transition-colors"
         >
-          <ChevronRight
+          <Icon name="ChevronRight"
             size={14}
             className={`transition-transform ${advancedOpen ? "rotate-90" : ""}`}
           />
@@ -1158,7 +1153,7 @@ function MoveFolderField({
           disabled={creating || !accountId}
           className="flex items-center gap-1.5 text-[11px] px-2 py-1 rounded-md border border-dashed border-border text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-50"
         >
-          {creating ? <Loader2 size={12} className="animate-spin" /> : <FolderPlus size={12} />}
+          {creating ? <Icon name="Loader2" size={12} className="animate-spin" /> : <Icon name="FolderPlus" size={12} />}
           Create folder “{typed}”
         </button>
       )}
@@ -1204,20 +1199,20 @@ function ActionConfig({
   if (action.type === "LABEL") {
     menuItems.push(
       action.label_ai
-        ? { icon: <Tag size={13} />, label: "Use a fixed label", onClick: () => set({ label_ai: false }) }
-        : { icon: <Sparkles size={13} />, label: "Use an AI prompt", onClick: () => set({ label_ai: true }) },
+        ? { icon: <Icon name="Tag" size={13} />, label: "Use a fixed label", onClick: () => set({ label_ai: false }) }
+        : { icon: <Icon name="Sparkles" size={13} />, label: "Use an AI prompt", onClick: () => set({ label_ai: true }) },
     );
   }
   if (isDraftReply) {
     menuItems.push(
       manual
-        ? { icon: <Sparkles size={13} />, label: "Use AI draft", onClick: () => set({ content_manual: false }) }
-        : { icon: <Pencil size={13} />, label: "Set content manually", onClick: () => set({ content_manual: true }) },
+        ? { icon: <Icon name="Sparkles" size={13} />, label: "Use AI draft", onClick: () => set({ content_manual: false }) }
+        : { icon: <Icon name="Pencil" size={13} />, label: "Set content manually", onClick: () => set({ content_manual: true }) },
     );
   }
   if (draftLike) {
     menuItems.push({
-      icon: <Paperclip size={13} />,
+      icon: <Icon name="Paperclip" size={13} />,
       label: showAttach ? "Hide attachments" : "Configure attachments",
       onClick: () => setShowAttach((v) => !v),
     });
@@ -1225,8 +1220,8 @@ function ActionConfig({
   if (delayable) {
     menuItems.push(
       action.delay_minutes != null
-        ? { icon: <X size={13} />, label: "Remove delay", onClick: () => set({ delay_minutes: null }) }
-        : { icon: <ChevronDown size={13} />, label: "Add delay", onClick: () => set({ delay_minutes: 60 }) },
+        ? { icon: <Icon name="X" size={13} />, label: "Remove delay", onClick: () => set({ delay_minutes: null }) }
+        : { icon: <Icon name="ChevronDown" size={13} />, label: "Add delay", onClick: () => set({ delay_minutes: 60 }) },
     );
   }
 
@@ -1249,7 +1244,7 @@ function ActionConfig({
                 title="More options"
                 className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary"
               >
-                <MoreHorizontal size={14} />
+                <Icon name="MoreHorizontal" size={14} />
               </button>
               {menuOpen && (
                 <>
@@ -1278,7 +1273,7 @@ function ActionConfig({
             title="Delete action"
             className="p-1 rounded text-muted-foreground hover:text-destructive"
           >
-            <Trash2 size={14} />
+            <Icon name="Trash2" size={14} />
           </button>
         </div>
       </div>
@@ -1662,7 +1657,7 @@ function ProcessPastEmailsDialog({
           disabled={busy || tooWide || !start}
           className="ml-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-emerald-600 text-white text-xs font-medium hover:bg-emerald-700 transition-colors disabled:opacity-50"
         >
-          {busy ? <Loader2 className="animate-spin" size={13} /> : <Play size={13} />}
+          {busy ? <Icon name="Loader2" className="animate-spin" size={13} /> : <Icon name="Play" size={13} />}
           {estimate && estimate.will_process > 0
             ? `Process ${estimate.will_process.toLocaleString()} email${
                 estimate.will_process === 1 ? "" : "s"
@@ -1887,7 +1882,7 @@ function ActionAttachments({
               key={i}
               className="inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded-md border border-border bg-secondary/40 text-foreground"
             >
-              <Paperclip size={9} className="text-muted-foreground" />
+              <Icon name="Paperclip" size={9} className="text-muted-foreground" />
               {att.name || att.path || "attachment"}
               {att.ai_selected && (
                 <span className="text-primary" title="AI-selected source">✨</span>
@@ -1896,7 +1891,7 @@ function ActionAttachments({
                 onClick={() => onChange(attachments.filter((_, j) => j !== i))}
                 className="text-muted-foreground hover:text-destructive"
               >
-                <X size={9} />
+                <Icon name="X" size={9} />
               </button>
             </span>
           ))}
@@ -1924,11 +1919,11 @@ function ActionAttachments({
       >
         {uploading ? (
           <>
-            <Loader2 size={13} className="animate-spin" /> Uploading…
+            <Icon name="Loader2" size={13} className="animate-spin" /> Uploading…
           </>
         ) : (
           <>
-            <Upload size={13} /> Drag &amp; drop files, or click to upload
+            <Icon name="Upload" size={13} /> Drag &amp; drop files, or click to upload
           </>
         )}
       </div>
@@ -1948,7 +1943,7 @@ function ActionAttachments({
           onClick={() => setShowPicker(true)}
           className="flex items-center gap-1 text-[11px] text-primary hover:opacity-80"
         >
-          <FolderOpen size={12} /> Choose from artifacts
+          <Icon name="FolderOpen" size={12} /> Choose from artifacts
         </button>
         {attachments.some((a) => !a.ai_selected) && (
           <button
@@ -2021,7 +2016,7 @@ function ArtifactPickerDialog({
       <div className="max-h-72 overflow-y-auto space-y-1">
         {artifacts === null ? (
           <div className="flex items-center gap-2 text-xs text-muted-foreground py-3">
-            <Loader2 size={14} className="animate-spin" /> Loading…
+            <Icon name="Loader2" size={14} className="animate-spin" /> Loading…
           </div>
         ) : visible.length === 0 ? (
           <div className="text-xs text-muted-foreground py-3">
@@ -2037,7 +2032,7 @@ function ArtifactPickerDialog({
                 disabled={picked}
                 className="w-full flex items-center gap-2 px-2.5 py-2 rounded-lg border border-border text-left hover:border-primary/40 hover:bg-secondary/40 transition-colors disabled:opacity-50"
               >
-                <Paperclip size={12} className="text-muted-foreground flex-shrink-0" />
+                <Icon name="Paperclip" size={12} className="text-muted-foreground flex-shrink-0" />
                 <span className="flex-1 min-w-0">
                   <span className="block text-xs text-foreground truncate">
                     {a.name}
@@ -2046,7 +2041,7 @@ function ArtifactPickerDialog({
                     {a.category} · {(a.size / 1024).toFixed(0)} KB
                   </span>
                 </span>
-                {picked && <Check size={12} className="text-emerald-500" />}
+                {picked && <Icon name="Check" size={12} className="text-emerald-500" />}
               </button>
             );
           })
@@ -2207,7 +2202,7 @@ function AddRuleDialog({
             disabled={busy || !text.trim()}
             className="ml-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
           >
-            {busy ? <Loader2 className="animate-spin" size={13} /> : <Wand2 size={13} />}
+            {busy ? <Icon name="Loader2" className="animate-spin" size={13} /> : <Icon name="Wand2" size={13} />}
             Create rules
           </button>
         </>
@@ -2236,7 +2231,7 @@ function AddRuleDialog({
           onClick={() => setShowExamples((v) => !v)}
           className="flex items-center gap-1.5 text-[11px] font-medium text-primary hover:opacity-80"
         >
-          <Sparkles size={12} />
+          <Icon name="Sparkles" size={12} />
           {showExamples ? "Hide examples" : "Choose from examples"}
         </button>
         {showExamples && (
@@ -2273,7 +2268,7 @@ function AddRuleDialog({
                       <ActionIcon type={at} size={12} />
                     </span>
                     <span className="flex-1">{ex}</span>
-                    <Plus size={11} className="text-muted-foreground/50 mt-0.5 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
+                    <Icon name="Plus" size={11} className="text-muted-foreground/50 mt-0.5 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
                   </button>
                 );
               })}
diff --git a/workbench/control_plane/src/app/email/components/automation/ai-settings/SettingsTab.tsx b/workbench/control_plane/src/app/email/components/automation/ai-settings/SettingsTab.tsx
index 04aa4854..b8589c66 100644
--- a/workbench/control_plane/src/app/email/components/automation/ai-settings/SettingsTab.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/ai-settings/SettingsTab.tsx
@@ -5,11 +5,8 @@
 // knowledge base, learned preferences/patterns, cold senders, org domains).
 // Extracted from AISettingsView.tsx.
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useState } from "react";
-import {
-  AlertTriangle, BookOpen, Check, Loader2, Pencil, Plus, RefreshCcw,
-  RotateCcw, Settings, Sparkles, Trash2, Wand2, X,
-} from "lucide-react";
 import {
   approveKnowledge, createKnowledge, deleteKnowledge, deleteLearnedPattern,
   deleteRulePattern,
@@ -93,7 +90,7 @@ function OrgDomainsCard({
               className="text-muted-foreground hover:text-destructive transition-colors"
               aria-label={`Remove ${d}`}
             >
-              <X size={11} />
+              <Icon name="X" size={11} />
             </button>
           </span>
         ))}
@@ -121,7 +118,7 @@ function OrgDomainsCard({
           disabled={!input.trim()}
           className="flex items-center gap-1 px-2.5 py-2 rounded-lg border border-border text-xs text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-40"
         >
-          <Plus size={12} /> Add
+          <Icon name="Plus" size={12} /> Add
         </button>
       </div>
     </SettingCard>
@@ -269,7 +266,7 @@ export function SettingsTab({ accountId }: { accountId: string | null }) {
               <div className="flex items-center gap-2">
                 {followUpOn && (
                   <button onClick={() => setDialog("followup")} className={CONFIGURE_BTN}>
-                    <Settings size={12} /> Configure
+                    <Icon name="Settings" size={12} /> Configure
                   </button>
                 )}
                 <Toggle
@@ -292,7 +289,7 @@ export function SettingsTab({ accountId }: { accountId: string | null }) {
               <div className="flex items-center gap-2">
                 {digestOn && (
                   <button onClick={() => setDialog("digest")} className={CONFIGURE_BTN}>
-                    <Settings size={12} /> Configure
+                    <Icon name="Settings" size={12} /> Configure
                   </button>
                 )}
                 <Toggle
@@ -530,7 +527,7 @@ export function SettingsTab({ accountId }: { accountId: string | null }) {
                 onClick={() => setDialog("resetrules")}
                 className="flex flex-shrink-0 items-center gap-1.5 px-3 py-1.5 rounded-lg border border-destructive/40 text-xs font-medium text-destructive hover:bg-destructive/10 transition-colors"
               >
-                <RotateCcw size={13} /> Reset rules
+                <Icon name="RotateCcw" size={13} /> Reset rules
               </button>
             </div>
           </div>
@@ -540,7 +537,7 @@ export function SettingsTab({ accountId }: { accountId: string | null }) {
         <div className="flex items-center gap-2 pb-2 h-5">
           {saving && (
             <span className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
-              <Loader2 className="animate-spin" size={12} /> Saving…
+              <Icon name="Loader2" className="animate-spin" size={12} /> Saving…
             </span>
           )}
           {saved && <span className="text-[11px] text-emerald-400">Saved ✓</span>}
@@ -683,7 +680,7 @@ function EditBtn({
 }) {
   return (
     <button onClick={onClick} className={CONFIGURE_BTN}>
-      <Settings size={12} /> {label ?? (set ? "Edit" : "Set up")}
+      <Icon name="Settings" size={12} /> {label ?? (set ? "Edit" : "Set up")}
     </button>
   );
 }
@@ -711,7 +708,7 @@ function WritingStyleDialog({
           onClick={() => onSave(draft)}
           className="ml-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors"
         >
-          <Check size={13} /> Save
+          <Icon name="Check" size={13} /> Save
         </button>
       }
     >
@@ -750,7 +747,7 @@ function PersonalInstructionsDialog({
           onClick={() => onSave(draft)}
           className="ml-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors"
         >
-          <Check size={13} /> Save
+          <Icon name="Check" size={13} /> Save
         </button>
       }
     >
@@ -796,7 +793,7 @@ function SignatureDialog({
           onClick={() => onSave(draft)}
           className="ml-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors"
         >
-          <Check size={13} /> Save
+          <Icon name="Check" size={13} /> Save
         </button>
       }
     >
@@ -858,7 +855,7 @@ function ResetRulesDialog({
             disabled={busy}
             className="ml-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-destructive text-destructive-foreground text-xs font-medium hover:bg-destructive/90 transition-colors disabled:opacity-50"
           >
-            {busy ? <Loader2 className="animate-spin" size={13} /> : <RotateCcw size={13} />}
+            {busy ? <Icon name="Loader2" className="animate-spin" size={13} /> : <Icon name="RotateCcw" size={13} />}
             Reset rules
           </button>
         </>
@@ -866,7 +863,7 @@ function ResetRulesDialog({
     >
       <div className="flex items-start gap-3">
         <span className="mt-0.5 flex-shrink-0 text-destructive">
-          <AlertTriangle size={18} />
+          <Icon name="AlertTriangle" size={18} />
         </span>
         <div className="space-y-2 text-xs text-muted-foreground leading-relaxed">
           <p>
@@ -933,14 +930,14 @@ function FollowUpDialog({
             disabled={scanning}
             className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border text-xs text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-50"
           >
-            {scanning ? <Loader2 className="animate-spin" size={13} /> : <RefreshCcw size={13} />}
+            {scanning ? <Icon name="Loader2" className="animate-spin" size={13} /> : <Icon name="RefreshCcw" size={13} />}
             Find follow-ups now
           </button>
           <button
             onClick={() => onSave(draft)}
             className="ml-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors"
           >
-            <Check size={13} /> Save
+            <Icon name="Check" size={13} /> Save
           </button>
         </>
       }
@@ -1029,9 +1026,9 @@ function WritingStyleGenerator({
         className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-border text-[11px] text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-50"
       >
         {busy ? (
-          <Loader2 className="animate-spin" size={12} />
+          <Icon name="Loader2" className="animate-spin" size={12} />
         ) : (
-          <Wand2 size={12} />
+          <Icon name="Wand2" size={12} />
         )}
         Generate from my sent mail
       </button>
@@ -1105,14 +1102,14 @@ function KnowledgeBase({ accountId }: { accountId: string | null }) {
     <div className="bg-card border border-border rounded-xl p-4">
       <div className="flex items-center justify-between mb-2">
         <h3 className="flex items-center gap-1.5 text-sm font-medium text-foreground">
-          <BookOpen size={14} className="text-primary" /> Knowledge base
+          <Icon name="BookOpen" size={14} className="text-primary" /> Knowledge base
         </h3>
         {!editing && (
           <button
             onClick={() => setEditing({ account_id: accountId, title: "", content: "" })}
             className="flex items-center gap-1 text-xs text-primary hover:opacity-80"
           >
-            <Plus size={12} /> Add entry
+            <Icon name="Plus" size={12} /> Add entry
           </button>
         )}
       </div>
@@ -1142,7 +1139,7 @@ function KnowledgeBase({ accountId }: { accountId: string | null }) {
               disabled={busy || !editing.title.trim()}
               className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
             >
-              {busy ? <Loader2 className="animate-spin" size={13} /> : <Check size={13} />}
+              {busy ? <Icon name="Loader2" className="animate-spin" size={13} /> : <Icon name="Check" size={13} />}
               Save
             </button>
             <button
@@ -1196,18 +1193,18 @@ function KnowledgeBase({ accountId }: { accountId: string | null }) {
                     onClick={() => approve(entry)}
                     className="hover:text-emerald-400"
                   >
-                    <Check size={12} />
+                    <Icon name="Check" size={12} />
                   </IconAction>
                 )}
                 <IconAction title="Edit" onClick={() => setEditing(entry)}>
-                  <Pencil size={12} />
+                  <Icon name="Pencil" size={12} />
                 </IconAction>
                 <IconAction
                   title="Delete"
                   onClick={() => remove(entry)}
                   className="hover:text-destructive"
                 >
-                  <Trash2 size={12} />
+                  <Icon name="Trash2" size={12} />
                 </IconAction>
               </div>
             </div>
@@ -1250,7 +1247,7 @@ function LearnedPreferences({ accountId }: { accountId: string | null }) {
   return (
     <div className="bg-card border border-border rounded-xl p-4">
       <div className="flex items-center gap-1.5 mb-1">
-        <Sparkles size={14} className="text-primary" />
+        <Icon name="Sparkles" size={14} className="text-primary" />
         <h3 className="text-sm font-medium text-foreground">Learned preferences</h3>
       </div>
       <p className="text-[11px] text-muted-foreground mb-3">
@@ -1286,7 +1283,7 @@ function LearnedPreferences({ accountId }: { accountId: string | null }) {
               title="Forget this"
               className="text-muted-foreground hover:text-destructive flex-shrink-0"
             >
-              <X size={13} />
+              <Icon name="X" size={13} />
             </button>
           </div>
           );
@@ -1447,7 +1444,7 @@ function LearnedPatternsList({ accountId }: { accountId: string | null }) {
                     title="Withdraw this correction"
                     className="ml-auto p-1 rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors flex-shrink-0"
                   >
-                    <Trash2 size={12} />
+                    <Icon name="Trash2" size={12} />
                   </button>
                 </div>
                 <p className="mt-1 text-xs text-foreground/90 break-words">
@@ -1680,7 +1677,7 @@ export function PatternRow({
                 : "Approve — let the cleaner use this"}
               className="text-emerald-500 hover:text-emerald-400 disabled:opacity-50"
             >
-              <Check size={14} />
+              <Icon name="Check" size={14} />
             </button>
           )}
           {onReject && (
@@ -1690,7 +1687,7 @@ export function PatternRow({
               title="Reject — this pattern is wrong (and won't be re-learned)"
               className="text-muted-foreground hover:text-destructive disabled:opacity-50"
             >
-              <X size={14} />
+              <Icon name="X" size={14} />
             </button>
           )}
           {onForget && (
@@ -1700,7 +1697,7 @@ export function PatternRow({
               title="Forget this"
               className="text-muted-foreground hover:text-destructive disabled:opacity-50"
             >
-              <Trash2 size={13} />
+              <Icon name="Trash2" size={13} />
             </button>
           )}
         </span>
@@ -1797,7 +1794,7 @@ function ColdSendersList({ accountId }: { accountId: string | null }) {
                 Not cold
               </span>
             ) : busy === c.from_email ? (
-              <Loader2 className="animate-spin text-muted-foreground" size={13} />
+              <Icon name="Loader2" className="animate-spin text-muted-foreground" size={13} />
             ) : (
               <button
                 onClick={() => whitelist(c.from_email)}
diff --git a/workbench/control_plane/src/app/email/components/automation/ai-settings/TestTab.tsx b/workbench/control_plane/src/app/email/components/automation/ai-settings/TestTab.tsx
index ded8668b..3e39f8f7 100644
--- a/workbench/control_plane/src/app/email/components/automation/ai-settings/TestTab.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/ai-settings/TestTab.tsx
@@ -5,8 +5,8 @@
 // The bulk-run sweep state lives in the email store so it survives unmount.
 // Extracted from AISettingsView.tsx.
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useState } from "react";
-import { ArrowDown, Loader2, Play, RefreshCcw, Sparkles, Square } from "lucide-react";
 import { listEmails } from "../../../lib/api";
 import type { Email, RuleAction } from "../../../lib/types";
 import { useEmailStore } from "../../../lib/emailStore";
@@ -131,7 +131,7 @@ export function TestTab({ accountId }: { accountId: string | null }) {
             onClick={stopTestRun}
             className="flex items-center gap-1.5 whitespace-nowrap px-3 py-1.5 rounded-lg bg-rose-600 text-white text-xs font-medium hover:bg-rose-700 transition-colors"
           >
-            <Square size={12} /> {applyMode ? "Stop run" : "Stop test"}
+            <Icon name="Square" size={12} /> {applyMode ? "Stop run" : "Stop test"}
           </button>
         ) : (
           <button
@@ -139,7 +139,7 @@ export function TestTab({ accountId }: { accountId: string | null }) {
             disabled={visible.length === 0}
             className="flex items-center gap-1.5 whitespace-nowrap px-3 py-1.5 rounded-lg bg-emerald-600 text-white text-xs font-medium hover:bg-emerald-700 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
           >
-            <Play size={12} /> {applyMode ? "Run on all" : "Test all"}
+            <Icon name="Play" size={12} /> {applyMode ? "Run on all" : "Test all"}
           </button>
         )}
         <input
@@ -228,17 +228,17 @@ export function TestTab({ accountId }: { accountId: string | null }) {
                         title={applyMode ? "Rerun" : "Retest"}
                         className="p-1.5 rounded-md text-muted-foreground border border-border hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-50"
                       >
-                        <RefreshCcw size={12} />
+                        <Icon name="RefreshCcw" size={12} />
                       </button>
                     </>
                   ) : isRunning ? (
-                    <Loader2 className="animate-spin text-muted-foreground" size={14} />
+                    <Icon name="Loader2" className="animate-spin text-muted-foreground" size={14} />
                   ) : (
                     <button
                       onClick={() => runOne(e.id)}
                       className="flex items-center gap-1 px-2.5 py-1 rounded-md bg-primary text-primary-foreground text-[11px] font-medium hover:bg-primary/90 transition-colors"
                     >
-                      <Sparkles size={12} /> {applyMode ? "Run" : "Test"}
+                      <Icon name="Sparkles" size={12} /> {applyMode ? "Run" : "Test"}
                     </button>
                   )}
                 </div>
@@ -254,9 +254,9 @@ export function TestTab({ accountId }: { accountId: string | null }) {
             className="w-full flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg border border-border text-xs text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-50"
           >
             {loadingMore ? (
-              <Loader2 className="animate-spin" size={13} />
+              <Icon name="Loader2" className="animate-spin" size={13} />
             ) : (
-              <ArrowDown size={13} />
+              <Icon name="ArrowDown" size={13} />
             )}
             Load more ({emails.length} of {total})
           </button>
diff --git a/workbench/control_plane/src/app/email/components/automation/ai-settings/VoiceProfileDialog.tsx b/workbench/control_plane/src/app/email/components/automation/ai-settings/VoiceProfileDialog.tsx
index 499ef260..235abbd4 100644
--- a/workbench/control_plane/src/app/email/components/automation/ai-settings/VoiceProfileDialog.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/ai-settings/VoiceProfileDialog.tsx
@@ -12,11 +12,8 @@
 //              generator, and the knowledge entries the builder suggested
 //              (approve / dismiss).
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useRef, useState } from "react";
-import {
-  AudioLines, Check, ChevronLeft, Loader2, Pencil, RefreshCcw, Sparkles,
-  Trash2, Wand2, X,
-} from "lucide-react";
 import {
   approveKnowledge, buildVoiceProfile, deleteKnowledge, deleteVoiceProfile,
   getVoiceProfile, getVoiceProfileStatus, listKnowledge, previewVoiceProfile,
@@ -208,7 +205,7 @@ function BuilderView({
     <div className="space-y-4">
       {onBack && (
         <button onClick={onBack} className={BTN_SECONDARY}>
-          <ChevronLeft size={12} /> Back to profile
+          <Icon name="ChevronLeft" size={12} /> Back to profile
         </button>
       )}
       {profile.status === "FAILED" && profile.last_error && (
@@ -306,7 +303,7 @@ function BuilderView({
           "Pick at least one source."
         ) : previewLoading || !preview ? (
           <>
-            <Loader2 className="animate-spin" size={11} /> Counting emails in
+            <Icon name="Loader2" className="animate-spin" size={11} /> Counting emails in
             this range…
           </>
         ) : preview.total === 0 ? (
@@ -363,9 +360,9 @@ function BuilderView({
           className={BTN_PRIMARY}
         >
           {starting ? (
-            <Loader2 className="animate-spin" size={13} />
+            <Icon name="Loader2" className="animate-spin" size={13} />
           ) : (
-            <Wand2 size={13} />
+            <Icon name="Wand2" size={13} />
           )}
           {profile.status === "READY" ? "Rebuild profile" : "Build my profile"}
         </button>
@@ -429,12 +426,12 @@ function BuildingView({
     <div className="py-6 flex flex-col items-center gap-3 text-center">
       {job?.status === "error" ? (
         <>
-          <X size={20} className="text-destructive" />
+          <Icon name="X" size={20} className="text-destructive" />
           <p className="text-xs text-destructive max-w-sm">{job.error}</p>
         </>
       ) : (
         <>
-          <Loader2 className="animate-spin text-primary" size={22} />
+          <Icon name="Loader2" className="animate-spin text-primary" size={22} />
           <p className="text-xs text-foreground">
             {PHASE_LABELS[phase] || "Working…"}
           </p>
@@ -539,7 +536,7 @@ function OverviewView({
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0">
           <div className="flex items-center gap-1.5 text-xs text-foreground font-medium">
-            <AudioLines size={13} className="text-primary" /> Learned from{" "}
+            <Icon name="AudioLines" size={13} className="text-primary" /> Learned from{" "}
             {meta}
           </div>
           {!profile.enabled && (
@@ -550,7 +547,7 @@ function OverviewView({
         </div>
         <div className="flex items-center gap-2 flex-shrink-0">
           <button onClick={onRebuild} className={BTN_SECONDARY} disabled={busy}>
-            <RefreshCcw size={12} /> Rebuild
+            <Icon name="RefreshCcw" size={12} /> Rebuild
           </button>
           <Toggle
             enabled={profile.enabled}
@@ -626,7 +623,7 @@ function OverviewView({
               }}
               className="flex items-center gap-1 text-[11px] text-primary hover:opacity-80"
             >
-              <Pencil size={11} /> Edit
+              <Icon name="Pencil" size={11} /> Edit
             </button>
           )}
         </div>
@@ -648,9 +645,9 @@ function OverviewView({
                 className={BTN_PRIMARY}
               >
                 {busy ? (
-                  <Loader2 className="animate-spin" size={13} />
+                  <Icon name="Loader2" className="animate-spin" size={13} />
                 ) : (
-                  <Check size={13} />
+                  <Icon name="Check" size={13} />
                 )}
                 Save
               </button>
@@ -690,7 +687,7 @@ function OverviewView({
           disabled={busy}
           className="flex items-center gap-1.5 text-[11px] text-muted-foreground hover:text-destructive transition-colors pt-2 disabled:opacity-50"
         >
-          <Trash2 size={12} /> Remove profile
+          <Icon name="Trash2" size={12} /> Remove profile
         </button>
       </div>
     </div>
@@ -725,7 +722,7 @@ function TryItSection({ accountId }: { accountId: string }) {
   return (
     <section className="border border-border rounded-lg px-3 py-2.5">
       <h4 className="flex items-center gap-1.5 text-xs font-semibold text-foreground mb-1">
-        <Sparkles size={12} className="text-primary" /> Try it
+        <Icon name="Sparkles" size={12} className="text-primary" /> Try it
       </h4>
       <p className="text-[11px] text-muted-foreground mb-2">
         Generate a sample email in this voice to judge the profile before it
@@ -746,9 +743,9 @@ function TryItSection({ accountId }: { accountId: string }) {
         </select>
         <button onClick={generate} disabled={busy} className={BTN_SECONDARY}>
           {busy ? (
-            <Loader2 className="animate-spin" size={12} />
+            <Icon name="Loader2" className="animate-spin" size={12} />
           ) : (
-            <Wand2 size={12} />
+            <Icon name="Wand2" size={12} />
           )}
           Generate
         </button>
@@ -845,7 +842,7 @@ function SuggestedKnowledge({
             </div>
             <div className="flex items-center gap-1.5 flex-shrink-0 pt-0.5">
               {busy === e.id ? (
-                <Loader2 className="animate-spin text-muted-foreground" size={13} />
+                <Icon name="Loader2" className="animate-spin text-muted-foreground" size={13} />
               ) : (
                 <>
                   <button
@@ -853,14 +850,14 @@ function SuggestedKnowledge({
                     title="Approve — add to the knowledge base"
                     className="text-emerald-500 hover:text-emerald-400"
                   >
-                    <Check size={14} />
+                    <Icon name="Check" size={14} />
                   </button>
                   <button
                     onClick={() => act(e, false)}
                     title="Dismiss"
                     className="text-muted-foreground hover:text-destructive"
                   >
-                    <X size={14} />
+                    <Icon name="X" size={14} />
                   </button>
                 </>
               )}
diff --git a/workbench/control_plane/src/app/email/components/automation/ai-settings/actionFormat.tsx b/workbench/control_plane/src/app/email/components/automation/ai-settings/actionFormat.tsx
index ad467d2d..cc621b44 100644
--- a/workbench/control_plane/src/app/email/components/automation/ai-settings/actionFormat.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/ai-settings/actionFormat.tsx
@@ -5,10 +5,7 @@
 // from AISettingsView.tsx so the same action → {label, icon, color, text} mapping
 // is defined ONCE and every surface renders actions identically.
 
-import {
-  Archive, Tag, MailOpen, Star, ShieldAlert, Trash2, FolderInput,
-  Reply, Forward, PenLine, Webhook, Zap,
-} from "lucide-react";
+import AppIcon from "@/components/Icon";
 import type { RuleAction, RuleActionType, RuleConditions } from "../../../lib/types";
 
 export const ACTION_TYPES: RuleActionType[] = [
@@ -40,23 +37,23 @@ export const ACTION_META: Record<RuleActionType, { label: string; description: s
  * the action chips under a rule, the Test/History result popovers, the action
  * editor card, and the inferred icon on each Add-rule example.
  */
-export const ACTION_ICON: Record<RuleActionType, React.ElementType> = {
-  ARCHIVE: Archive,
-  LABEL: Tag,
-  MARK_READ: MailOpen,
-  STAR: Star,
-  MARK_SPAM: ShieldAlert,
-  TRASH: Trash2,
-  MOVE_FOLDER: FolderInput,
-  REPLY: Reply,
-  FORWARD: Forward,
-  DRAFT_EMAIL: PenLine,
-  CALL_WEBHOOK: Webhook,
+export const ACTION_ICON: Record<RuleActionType, string> = {
+  ARCHIVE: "Archive",
+  LABEL: "Tag",
+  MARK_READ: "MailOpen",
+  STAR: "Star",
+  MARK_SPAM: "ShieldAlert",
+  TRASH: "Trash2",
+  MOVE_FOLDER: "FolderInput",
+  REPLY: "Reply",
+  FORWARD: "Forward",
+  DRAFT_EMAIL: "PenLine",
+  CALL_WEBHOOK: "Webhook",
 };
 
 export function ActionIcon({ type, size = 11 }: { type: string; size?: number }) {
-  const Icon = ACTION_ICON[type as RuleActionType] ?? Zap;
-  return <Icon size={size} className="flex-shrink-0" />;
+  const name = ACTION_ICON[type as RuleActionType] ?? "Zap";
+  return <AppIcon name={name} size={size} className="flex-shrink-0" />;
 }
 
 /**
diff --git a/workbench/control_plane/src/app/email/components/automation/ai-settings/common.tsx b/workbench/control_plane/src/app/email/components/automation/ai-settings/common.tsx
index e44bda4b..e295a27d 100644
--- a/workbench/control_plane/src/app/email/components/automation/ai-settings/common.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/ai-settings/common.tsx
@@ -5,7 +5,7 @@
 // AISettingsView.tsx so a Spinner / Empty / Field / result-pill looks identical
 // everywhere and there is a single place to change them.
 
-import { AlertTriangle, Eye, Loader2, Pencil, PenLine } from "lucide-react";
+import Icon from "@/components/Icon";
 import type { RuleAction, RuleConditions } from "../../../lib/types";
 import { HoverPopover } from "../ui";
 import {
@@ -70,7 +70,7 @@ export function IconAction({
 export function Spinner({ label }: { label: string }) {
   return (
     <div className="flex items-center justify-center h-full text-muted-foreground gap-2 text-sm">
-      <Loader2 className="animate-spin" size={16} /> {label}
+      <Icon name="Loader2" className="animate-spin" size={16} /> {label}
     </div>
   );
 }
@@ -134,7 +134,7 @@ export function RuleResultPill({
         : matched
           ? ruleName || "Matched"
           : "No match found"}
-      <Eye size={11} className="opacity-70" />
+      <Icon name="Eye" size={11} className="opacity-70" />
     </span>
   );
   const specs = actionSpecs ?? [];
@@ -193,7 +193,7 @@ export function RuleResultPill({
         {draft && (
           <div>
             <div className="text-[9px] uppercase tracking-wide text-muted-foreground/70 mb-1 flex items-center gap-1">
-              <PenLine size={10} /> Drafted reply
+              <Icon name="PenLine" size={10} /> Drafted reply
             </div>
             <div className="text-[10px] text-foreground/90 bg-secondary/40 rounded-md px-2 py-1.5 max-h-40 overflow-y-auto whitespace-pre-wrap break-words">
               {draft}
@@ -211,7 +211,7 @@ export function RuleResultPill({
         {errs.length > 0 && (
           <div className="text-[10px] text-destructive bg-destructive/10 rounded-md px-2 py-1.5">
             <div className="font-medium mb-0.5 flex items-center gap-1">
-              <AlertTriangle size={10} /> Action issues
+              <Icon name="AlertTriangle" size={10} /> Action issues
             </div>
             {errs.map((e, i) => (
               <div key={i} className="text-destructive/90">
@@ -228,7 +228,7 @@ export function RuleResultPill({
             }}
             className="flex items-center gap-1 text-[11px] text-primary hover:opacity-80 pt-0.5"
           >
-            <Pencil size={11} /> View matching rule
+            <Icon name="Pencil" size={11} /> View matching rule
           </button>
         )}
       </div>
diff --git a/workbench/control_plane/src/app/email/components/automation/ai-settings/fixDialog.tsx b/workbench/control_plane/src/app/email/components/automation/ai-settings/fixDialog.tsx
index daf833fb..356e5c26 100644
--- a/workbench/control_plane/src/app/email/components/automation/ai-settings/fixDialog.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/ai-settings/fixDialog.tsx
@@ -5,8 +5,8 @@
 // classification pattern (and re-runs the email); for "New rule" it hands the
 // correction to the AI chat. Extracted from AISettingsView.tsx.
 
+import Icon from "@/components/Icon";
 import { useEffect, useState } from "react";
-import { Check, Loader2, MessageCircle } from "lucide-react";
 import { listRules, runRuleOnMessage, submitRuleFeedback } from "../../../lib/api";
 import type { AutomationRule, RunMessageResult } from "../../../lib/types";
 import { useEmailStore } from "../../../lib/emailStore";
@@ -235,11 +235,11 @@ export function FixDialog({
               className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
             >
               {busy ? (
-                <Loader2 className="animate-spin" size={13} />
+                <Icon name="Loader2" className="animate-spin" size={13} />
               ) : willChat ? (
-                <MessageCircle size={13} />
+                <Icon name="MessageCircle" size={13} />
               ) : (
-                <Check size={13} />
+                <Icon name="Check" size={13} />
               )}
               {willChat ? "Send to assistant" : "Apply correction"}
             </button>
@@ -423,7 +423,7 @@ export function FixButton({
         title="Tell the assistant this was wrong"
         className="flex items-center gap-1 px-1.5 py-1 rounded-md text-[11px] text-muted-foreground border border-border hover:text-foreground hover:bg-secondary transition-colors"
       >
-        <MessageCircle size={12} /> Fix
+        <Icon name="MessageCircle" size={12} /> Fix
       </button>
       {open && (
         <FixDialog
diff --git a/workbench/control_plane/src/app/email/components/automation/ui.tsx b/workbench/control_plane/src/app/email/components/automation/ui.tsx
index 72bf21c4..76569371 100644
--- a/workbench/control_plane/src/app/email/components/automation/ui.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/ui.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useEffect, useRef, useState } from "react";
-import { X } from "lucide-react";
 
 /**
  * Shared, inbox-zero-styled primitives for the Assistant tabs (Test / History /
@@ -51,7 +51,7 @@ export function Modal({
             onClick={onClose}
             className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors flex-shrink-0"
           >
-            <X size={16} />
+            <Icon name="X" size={16} />
           </button>
         </div>
         <div className="px-4 py-4 space-y-3 overflow-y-auto">{children}</div>
diff --git a/workbench/control_plane/src/app/email/oauth/callback/page.tsx b/workbench/control_plane/src/app/email/oauth/callback/page.tsx
index ec0d92d0..1179c1e5 100644
--- a/workbench/control_plane/src/app/email/oauth/callback/page.tsx
+++ b/workbench/control_plane/src/app/email/oauth/callback/page.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useEffect, useState, Suspense } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
-import { CheckCircle2, XCircle, ArrowRight, Mail, Settings } from "lucide-react";
 
 /**
  * Normalise the post-auth redirect target to a safe internal path.
@@ -74,7 +74,7 @@ function CallbackContent() {
             /* Success */
             <div className="flex flex-col items-center text-center gap-4">
               <div className="w-14 h-14 rounded-full bg-emerald-500/15 flex items-center justify-center">
-                <CheckCircle2 className="w-8 h-8 text-emerald-400" />
+                <Icon name="CheckCircle2" className="w-8 h-8 text-emerald-400" />
               </div>
               <div>
                 <h2 className="text-lg font-semibold text-foreground">Account Connected</h2>
@@ -95,13 +95,13 @@ function CallbackContent() {
                   href="/email"
                   className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors"
                 >
-                  <Mail size={14} /> Open Email
+                  <Icon name="Mail" size={14} /> Open Email
                 </a>
                 <a
                   href="/integrations"
                   className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg border border-border text-sm text-foreground hover:bg-secondary transition-colors"
                 >
-                  <Settings size={14} /> Integrations
+                  <Icon name="Settings" size={14} /> Integrations
                 </a>
               </div>
             </div>
@@ -111,7 +111,7 @@ function CallbackContent() {
             /* Error */
             <div className="flex flex-col items-center text-center gap-4">
               <div className="w-14 h-14 rounded-full bg-destructive/15 flex items-center justify-center">
-                <XCircle className="w-8 h-8 text-destructive" />
+                <Icon name="XCircle" className="w-8 h-8 text-destructive" />
               </div>
               <div>
                 <h2 className="text-lg font-semibold text-foreground">Connection Failed</h2>
@@ -122,13 +122,13 @@ function CallbackContent() {
                   href="/integrations"
                   className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors"
                 >
-                  <ArrowRight size={14} /> Try Again
+                  <Icon name="ArrowRight" size={14} /> Try Again
                 </a>
                 <a
                   href="/email"
                   className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg border border-border text-sm text-foreground hover:bg-secondary transition-colors"
                 >
-                  <Mail size={14} /> Email Client
+                  <Icon name="Mail" size={14} /> Email Client
                 </a>
               </div>
             </div>
diff --git a/workbench/control_plane/src/app/email/page.tsx b/workbench/control_plane/src/app/email/page.tsx
index 3d3b9738..07950d45 100644
--- a/workbench/control_plane/src/app/email/page.tsx
+++ b/workbench/control_plane/src/app/email/page.tsx
@@ -1,21 +1,7 @@
 "use client";
 
+import AppIcon, { themedIcon } from "@/components/Icon";
 import { useState, useEffect, useRef, useCallback, useMemo } from "react";
-import {
-  PanelLeftClose,
-  PanelLeftOpen,
-  Columns2,
-  ArrowLeft,
-  RefreshCw,
-  X,
-  Mail,
-  ExternalLink,
-  Settings,
-  CheckCircle2,
-  AlertCircle,
-  Loader2,
-  ArrowRight,
-} from "lucide-react";
 import { useViewMode } from "@/components/ViewModeProvider";
 import { useMobileDrawer } from "@/components/AppShell";
 import { AccountSidebar } from "./components/AccountSidebar";
@@ -542,7 +528,7 @@ export default function EmailPage() {
             {/* Header */}
             <div className="text-center mb-5">
               <div className="w-12 h-12 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center mx-auto mb-3">
-                <Mail className="w-6 h-6 text-primary" />
+                <AppIcon name="Mail" className="w-6 h-6 text-primary" />
               </div>
               <h2 className="text-lg font-semibold text-foreground">Welcome to Email</h2>
               <p className="text-sm text-muted-foreground mt-1">
@@ -556,7 +542,7 @@ export default function EmailPage() {
               <div className={`p-3 rounded-xl border ${oauthStatus.gmail && oauthStatus.microsoft ? "border-emerald-500/20 bg-emerald-500/5" : "border-amber-500/20 bg-amber-500/5"}`}>
                 <div className="flex items-start gap-3">
                   <div className={`w-6 h-6 rounded-full flex items-center justify-center shrink-0 mt-0.5 text-xs font-bold ${oauthStatus.gmail && oauthStatus.microsoft ? "bg-emerald-500/20 text-emerald-400" : "bg-amber-500/20 text-amber-400"}`}>
-                    {oauthStatus.gmail && oauthStatus.microsoft ? <CheckCircle2 size={14} /> : "1"}
+                    {oauthStatus.gmail && oauthStatus.microsoft ? <AppIcon name="CheckCircle2" size={14} /> : "1"}
                   </div>
                   <div className="flex-1 min-w-0">
                     <div className="text-sm font-medium text-foreground">
@@ -574,8 +560,8 @@ export default function EmailPage() {
                         href="/integrations?tab=apis&search=OAuth"
                         className="inline-flex items-center gap-1 text-xs text-primary hover:opacity-80 mt-1.5 transition-opacity"
                       >
-                        <Settings size={11} /> Open setup guides
-                        <ExternalLink size={10} />
+                        <AppIcon name="Settings" size={11} /> Open setup guides
+                        <AppIcon name="ExternalLink" size={10} />
                       </a>
                     )}
                   </div>
@@ -640,7 +626,7 @@ export default function EmailPage() {
                 className="flex-1 py-2 rounded-lg bg-primary hover:opacity-90 text-xs font-medium text-primary-foreground text-center transition-colors flex items-center justify-center gap-1.5"
               >
                 Manage in Integrations
-                <ArrowRight size={12} />
+                <AppIcon name="ArrowRight" size={12} />
               </a>
             </div>
           </div>
@@ -763,13 +749,13 @@ export default function EmailPage() {
           <div className="flex items-center gap-3 px-3 py-2 border-b border-border flex-shrink-0 bg-card">
             <div className="flex items-center gap-1.5 flex-1 basis-0 min-w-0">
               <IconBtn
-                icon={leftOpen ? PanelLeftClose : PanelLeftOpen}
+                icon={leftOpen ? themedIcon("PanelLeftClose") : themedIcon("PanelLeftOpen")}
                 label={leftOpen ? "Hide accounts" : "Show accounts"}
                 onClick={() => setLeftOpen((v) => !v)}
               />
               <div className="w-px h-4 bg-border" />
               <IconBtn
-                icon={Columns2}
+                icon={themedIcon("Columns2")}
                 label={listOpen ? "Hide email list" : "Show email list"}
                 onClick={() => setListOpen((v) => !v)}
                 active={listOpen}
@@ -815,7 +801,7 @@ export default function EmailPage() {
               className="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
               aria-label="Back to inbox"
             >
-              <ArrowLeft size={16} />
+              <AppIcon name="ArrowLeft" size={16} />
             </button>
             <div className="flex-1 min-w-0">
               <div className="text-xs font-medium text-foreground truncate">
@@ -869,7 +855,7 @@ export default function EmailPage() {
                 aria-label="Refresh"
                 title="Refresh"
               >
-                <RefreshCw size={16} className={syncing ? "animate-spin" : ""} />
+                <AppIcon name="RefreshCw" size={16} className={syncing ? "animate-spin" : ""} />
               </button>
             </div>
           </div>
@@ -888,7 +874,7 @@ export default function EmailPage() {
         {selectedAccount &&
           (selectedAccount.syncStatus === "error" || authErrors[selectedAccount.id]) && (
           <div className="flex items-start gap-2 px-3 py-2 border-b border-amber-500/30 bg-amber-500/10 flex-shrink-0">
-            <AlertCircle size={14} className="text-amber-400 mt-0.5 flex-shrink-0" />
+            <AppIcon name="AlertCircle" size={14} className="text-amber-400 mt-0.5 flex-shrink-0" />
             <div className="flex-1 min-w-0">
               <p className="text-xs text-foreground">
                 <span className="font-medium">{selectedAccount.emailAddress}</span> can&apos;t
@@ -903,14 +889,14 @@ export default function EmailPage() {
                 onClick={() => handleConnect(selectedAccount.provider as "gmail" | "microsoft")}
                 className="flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-amber-500/20 text-amber-300 hover:bg-amber-500/30 text-[11px] font-medium transition-colors flex-shrink-0"
               >
-                <ExternalLink size={11} /> Reconnect
+                <AppIcon name="ExternalLink" size={11} /> Reconnect
               </button>
             ) : (
               <a
                 href="/integrations?tab=email"
                 className="flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-amber-500/20 text-amber-300 hover:bg-amber-500/30 text-[11px] font-medium transition-colors flex-shrink-0"
               >
-                <ExternalLink size={11} /> Fix in Integrations
+                <AppIcon name="ExternalLink" size={11} /> Fix in Integrations
               </a>
             )}
           </div>
@@ -1111,7 +1097,7 @@ export default function EmailPage() {
                 onClick={() => setShowAddModal(false)}
                 className="p-1 rounded-md hover:bg-secondary text-muted-foreground transition-colors"
               >
-                <X size={16} />
+                <AppIcon name="X" size={16} />
               </button>
             </div>
             <div className="space-y-2">
diff --git a/workbench/control_plane/src/app/integrations/page.tsx b/workbench/control_plane/src/app/integrations/page.tsx
index 3e627705..73f1a345 100644
--- a/workbench/control_plane/src/app/integrations/page.tsx
+++ b/workbench/control_plane/src/app/integrations/page.tsx
@@ -10,37 +10,8 @@
  *   Plugins — Claude-style self-describing plugins
  */
 
+import Icon, { themedIcon } from "@/components/Icon";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import {
-  AlertCircle,
-  ArrowRight,
-  BarChart2,
-  Box,
-  Check,
-  CheckSquare,
-  ChevronDown,
-  ChevronRight,
-  CreditCard,
-  ExternalLink,
-  Globe,
-  HardDrive,
-  Loader2,
-  Lock,
-  Mail,
-  MessageSquare,
-  Plus,
-  Puzzle,
-  RefreshCw,
-  RotateCcw,
-  Search,
-  Server,
-  Settings2,
-  Sparkles,
-  Target,
-  Users,
-  X,
-  Zap,
-} from "lucide-react";
 import type { IntegrationStatus } from "@/app/api/integrations/status/route";
 import type { SkillFamily, SkillsCatalog } from "@/app/api/integrations/skills/route";
 import type { AgentEntry } from "@/app/api/agent/list/route";
@@ -55,11 +26,11 @@ import type { TabDef } from "@/components/Tabs";
 type TabId = "apis" | "email" | "mcps" | "plugins" | "skills";
 
 const TABS: TabDef[] = [
-  { id: "apis",    label: "APIs",    icon: Zap,      note: "REST API credentials & discovery" },
-  { id: "email",   label: "Email",   icon: Mail,     note: "Email account connections" },
-  { id: "mcps",    label: "MCPs",    icon: Server,   note: "Model Context Protocol servers" },
-  { id: "plugins", label: "Plugins", icon: Puzzle,   note: "Claude-style tool plugins" },
-  { id: "skills",  label: "Skills",  icon: Sparkles, note: "Agent skill families & token costs" },
+  { id: "apis",    label: "APIs",    icon: "Zap",      note: "REST API credentials & discovery" },
+  { id: "email",   label: "Email",   icon: "Mail",     note: "Email account connections" },
+  { id: "mcps",    label: "MCPs",    icon: "Server",   note: "Model Context Protocol servers" },
+  { id: "plugins", label: "Plugins", icon: "Puzzle",   note: "Claude-style tool plugins" },
+  { id: "skills",  label: "Skills",  icon: "Sparkles", note: "Agent skill families & token costs" },
 ];
 
 // ===========================================================================
@@ -149,17 +120,17 @@ const DISCOVER_SUGGESTIONS = [
   "Stripe", "Twilio", "Airtable", "Linear",
 ];
 
-const CATEGORY_FALLBACK: Record<string, { Icon: React.ElementType; color: string }> = {
-  core:          { Icon: Settings2,     color: "text-violet-400" },
-  crm:           { Icon: Users,         color: "text-blue-400" },
-  email:         { Icon: Mail,          color: "text-amber-400" },
-  prospecting:   { Icon: Target,        color: "text-emerald-400" },
-  productivity:  { Icon: CheckSquare,   color: "text-cyan-400" },
-  search:        { Icon: Globe,         color: "text-orange-400" },
-  analytics:     { Icon: BarChart2,     color: "text-rose-400" },
-  payments:      { Icon: CreditCard,    color: "text-indigo-400" },
-  communication: { Icon: MessageSquare, color: "text-teal-400" },
-  storage:       { Icon: HardDrive,     color: "text-sky-400" },
+const CATEGORY_FALLBACK: Record<string, { icon: string; color: string }> = {
+  core:          { icon: "Settings2",     color: "text-violet-400" },
+  crm:           { icon: "Users",         color: "text-blue-400" },
+  email:         { icon: "Mail",          color: "text-amber-400" },
+  prospecting:   { icon: "Target",        color: "text-emerald-400" },
+  productivity:  { icon: "CheckSquare",   color: "text-cyan-400" },
+  search:        { icon: "Globe",         color: "text-orange-400" },
+  analytics:     { icon: "BarChart2",     color: "text-rose-400" },
+  payments:      { icon: "CreditCard",    color: "text-indigo-400" },
+  communication: { icon: "MessageSquare", color: "text-teal-400" },
+  storage:       { icon: "HardDrive",     color: "text-sky-400" },
 };
 
 function logoUrls(domain: string): string[] {
@@ -196,9 +167,9 @@ function ServiceLogo({
     );
   }
   const fb = CATEGORY_FALLBACK[category];
-  const FbIcon = fb?.Icon ?? Puzzle;
+  const fbName = fb?.icon ?? "Puzzle";
   const fbColor = fb?.color ?? "text-muted-foreground";
-  return <FbIcon size={px} className={`${fbColor} shrink-0`} />;
+  return <Icon name={fbName} size={px} className={`${fbColor} shrink-0`} />;
 }
 
 function ApiTile({ api, selected, onClick }: { api: ApiEntry; selected: boolean; onClick: () => void }) {
@@ -260,7 +231,7 @@ function CredentialForm({ api, onSaved }: {
         <div key={v.key}>
           <label className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
             {v.label}
-            {v.sensitive && <Lock className="w-2.5 h-2.5 opacity-50" />}
+            {v.sensitive && <Icon name="Lock" className="w-2.5 h-2.5 opacity-50" />}
           </label>
           <input type={v.sensitive ? "password" : "text"} autoComplete="off" spellCheck={false}
             value={values[v.key] ?? ""}
@@ -274,7 +245,7 @@ function CredentialForm({ api, onSaved }: {
       {err && <p className="text-xs text-destructive bg-destructive/10 rounded-lg px-3 py-2">{err}</p>}
       <button onClick={() => void save()} disabled={saving}
         className="w-full py-2.5 rounded-lg bg-primary hover:opacity-90 disabled:opacity-40 text-sm font-medium text-primary-foreground transition-colors flex items-center justify-center gap-2">
-        {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : done ? <Check className="w-3.5 h-3.5" /> : null}
+        {saving ? <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" /> : done ? <Icon name="Check" className="w-3.5 h-3.5" /> : null}
         {saving ? "Saving…" : done ? "Saved!" : "Save credentials"}
       </button>
     </div>
@@ -406,7 +377,7 @@ function ClickUpConnector({ onChange }: { onChange?: () => void }) {
         </div>
         {loading ? (
           <div className="flex items-center gap-2 text-xs text-muted-foreground py-2">
-            <Loader2 className="w-3.5 h-3.5 animate-spin" /> Loading…
+            <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" /> Loading…
           </div>
         ) : accounts.length === 0 ? (
           <p className="text-xs text-muted-foreground">
@@ -421,7 +392,7 @@ function ClickUpConnector({ onChange }: { onChange?: () => void }) {
                 key={a.id}
                 className="flex items-center gap-2.5 rounded-lg border border-border px-3 py-2"
               >
-                <Box className="w-4 h-4 shrink-0 text-primary/80" />
+                <Icon name="Box" className="w-4 h-4 shrink-0 text-primary/80" />
                 <div className="min-w-0 flex-1">
                   <div className="truncate text-[13px] font-medium text-foreground">
                     {a.label}
@@ -443,9 +414,9 @@ function ClickUpConnector({ onChange }: { onChange?: () => void }) {
                   className="p-1.5 rounded-md text-muted-foreground hover:bg-red-500/10 hover:text-red-400 transition-colors disabled:opacity-50"
                 >
                   {busy === a.id ? (
-                    <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                    <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" />
                   ) : (
-                    <X className="w-3.5 h-3.5" />
+                    <Icon name="X" className="w-3.5 h-3.5" />
                   )}
                 </button>
               </div>
@@ -461,7 +432,7 @@ function ClickUpConnector({ onChange }: { onChange?: () => void }) {
         </div>
         <div className="flex items-center gap-2">
           <div className="flex flex-1 items-center gap-2 rounded-lg border border-border bg-secondary px-3 py-2 focus-within:border-primary">
-            <Lock className="w-3 h-3 shrink-0 text-muted-foreground" />
+            <Icon name="Lock" className="w-3 h-3 shrink-0 text-muted-foreground" />
             <input
               value={token}
               onChange={(e) => setToken(e.target.value)}
@@ -478,9 +449,9 @@ function ClickUpConnector({ onChange }: { onChange?: () => void }) {
             className="shrink-0 inline-flex items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40 transition-colors"
           >
             {busy === "find" ? (
-              <Loader2 className="w-4 h-4 animate-spin" />
+              <Icon name="Loader2" className="w-4 h-4 animate-spin" />
             ) : (
-              <Plus className="w-4 h-4" />
+              <Icon name="Plus" className="w-4 h-4" />
             )}
             Find
           </button>
@@ -510,7 +481,7 @@ function ClickUpConnector({ onChange }: { onChange?: () => void }) {
                   key={w.id}
                   className="flex items-center gap-2.5 rounded-lg border border-border px-3 py-2"
                 >
-                  <Box className="w-4 h-4 shrink-0 text-muted-foreground" />
+                  <Icon name="Box" className="w-4 h-4 shrink-0 text-muted-foreground" />
                   <div className="min-w-0 flex-1">
                     <div className="truncate text-[13px] text-foreground">{w.name}</div>
                     <div className="text-[11px] text-muted-foreground">
@@ -519,7 +490,7 @@ function ClickUpConnector({ onChange }: { onChange?: () => void }) {
                   </div>
                   {already ? (
                     <span className="inline-flex items-center gap-1 text-[11px] text-success">
-                      <Check className="w-3.5 h-3.5" /> connected
+                      <Icon name="Check" className="w-3.5 h-3.5" /> connected
                     </span>
                   ) : (
                     <button
@@ -529,9 +500,9 @@ function ClickUpConnector({ onChange }: { onChange?: () => void }) {
                       className="inline-flex items-center gap-1 rounded-md bg-primary/10 px-2.5 py-1.5 text-xs font-medium text-primary hover:bg-primary/20 disabled:opacity-50 transition-colors"
                     >
                       {busy === w.id ? (
-                        <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                        <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" />
                       ) : (
-                        <Plus className="w-3.5 h-3.5" />
+                        <Icon name="Plus" className="w-3.5 h-3.5" />
                       )}
                       Connect
                     </button>
@@ -615,7 +586,7 @@ function WhatsAppConnector({ onChange }: { onChange?: () => void }) {
         </div>
         {loading ? (
           <div className="flex items-center gap-2 text-xs text-muted-foreground">
-            <Loader2 className="w-3.5 h-3.5 animate-spin" /> Loading…
+            <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" /> Loading…
           </div>
         ) : accounts.length === 0 ? (
           <div className="rounded-lg border border-border p-3 text-xs text-muted-foreground">
@@ -651,7 +622,7 @@ function WhatsAppConnector({ onChange }: { onChange?: () => void }) {
                   className="shrink-0 rounded-md border border-border px-2 py-1 text-[11px] text-muted-foreground hover:text-red-500 disabled:opacity-40"
                 >
                   {busy === a.id ? (
-                    <Loader2 className="w-3 h-3 animate-spin" />
+                    <Icon name="Loader2" className="w-3 h-3 animate-spin" />
                   ) : (
                     "Disconnect"
                   )}
@@ -667,7 +638,7 @@ function WhatsAppConnector({ onChange }: { onChange?: () => void }) {
         href="/whatsapp/connect"
         className="flex items-center justify-center gap-1.5 rounded-lg bg-primary py-2 text-xs font-medium text-primary-foreground hover:opacity-90"
       >
-        <Plus className="w-3.5 h-3.5" /> Connect a number
+        <Icon name="Plus" className="w-3.5 h-3.5" /> Connect a number
       </a>
       <p className="text-[10.5px] text-muted-foreground/70">
         Connecting opens the guided flow in the WhatsApp app — link a personal
@@ -717,14 +688,14 @@ function ApiSidePanel({ api, agents, onClose, onRefresh }: {
               </span>
               {api.storage === "encrypted-db" && (
                 <span className="text-[9px] flex items-center gap-0.5 text-violet-400 bg-violet-500/10 border border-violet-500/20 px-1.5 py-0.5 rounded-full">
-                  <Lock className="w-2 h-2" /> Encrypted
+                  <Icon name="Lock" className="w-2 h-2" /> Encrypted
                 </span>
               )}
             </div>
           </div>
         </div>
         <button onClick={onClose} className="text-muted-foreground hover:text-foreground p-1 rounded transition-colors mt-0.5">
-          <X className="w-4 h-4" />
+          <Icon name="X" className="w-4 h-4" />
         </button>
       </div>
 
@@ -747,13 +718,13 @@ function ApiSidePanel({ api, agents, onClose, onRefresh }: {
             {api.setup_url && (
               <a href={api.setup_url} target="_blank" rel="noopener noreferrer"
                 className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg border border-primary/30 text-primary hover:bg-primary/5 transition-colors">
-                Get credentials <ExternalLink className="w-3 h-3" />
+                Get credentials <Icon name="ExternalLink" className="w-3 h-3" />
               </a>
             )}
             {api.docs_url && (
               <a href={api.docs_url} target="_blank" rel="noopener noreferrer"
                 className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg border border-border text-muted-foreground hover:bg-secondary transition-colors">
-                Docs <ExternalLink className="w-3 h-3" />
+                Docs <Icon name="ExternalLink" className="w-3 h-3" />
               </a>
             )}
           </div>
@@ -774,7 +745,7 @@ function ApiSidePanel({ api, agents, onClose, onRefresh }: {
             {api.instructions && (
               <details>
                 <summary className="text-xs text-muted-foreground cursor-pointer hover:text-foreground list-none flex items-center gap-1">
-                  <ChevronRight className="w-3 h-3 shrink-0" /> Setup instructions
+                  <Icon name="ChevronRight" className="w-3 h-3 shrink-0" /> Setup instructions
                 </summary>
                 <pre className="mt-2 text-xs text-muted-foreground bg-secondary/60 rounded-lg p-3 whitespace-pre-wrap leading-relaxed">{api.instructions}</pre>
               </details>
@@ -782,7 +753,7 @@ function ApiSidePanel({ api, agents, onClose, onRefresh }: {
             <div className="flex gap-2">
               <button onClick={() => void runTest()} disabled={testing || !api.configured}
                 className="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg border border-border text-xs text-muted-foreground hover:bg-secondary disabled:opacity-40 transition-colors">
-                {testing ? <Loader2 className="w-3 h-3 animate-spin" /> : <RefreshCw className="w-3 h-3" />}
+                {testing ? <Icon name="Loader2" className="w-3 h-3 animate-spin" /> : <Icon name="RefreshCw" className="w-3 h-3" />}
                 {testing ? "Testing…" : "Test"}
               </button>
               <button onClick={() => setMode("edit")}
@@ -792,7 +763,7 @@ function ApiSidePanel({ api, agents, onClose, onRefresh }: {
             </div>
             {testResult && (
               <div className={`text-xs rounded-lg px-3 py-2 flex items-start gap-2 ${testResult.ok ? "text-success bg-success/10 border border-success/20" : "text-destructive bg-destructive/10 border border-destructive/20"}`}>
-                {testResult.ok ? <Check className="w-3.5 h-3.5 mt-0.5 shrink-0" /> : <AlertCircle className="w-3.5 h-3.5 mt-0.5 shrink-0" />}
+                {testResult.ok ? <Icon name="Check" className="w-3.5 h-3.5 mt-0.5 shrink-0" /> : <Icon name="AlertCircle" className="w-3.5 h-3.5 mt-0.5 shrink-0" />}
                 {testResult.detail}
               </div>
             )}
@@ -802,7 +773,7 @@ function ApiSidePanel({ api, agents, onClose, onRefresh }: {
             {api.instructions && (
               <details>
                 <summary className="text-xs text-muted-foreground cursor-pointer hover:text-foreground list-none flex items-center gap-1">
-                  <ChevronDown className="w-3 h-3" /> Setup instructions
+                  <Icon name="ChevronDown" className="w-3 h-3" /> Setup instructions
                 </summary>
                 <pre className="mt-2 text-xs text-muted-foreground bg-secondary/60 rounded-lg p-3 whitespace-pre-wrap leading-relaxed">{api.instructions}</pre>
               </details>
@@ -908,7 +879,7 @@ function DiscoverModal({ onClose, onSaved }: { onClose: () => void; onSaved: ()
       <div className="w-full max-w-xl bg-card border-t sm:border border-border rounded-t-2xl sm:rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[92vh] sm:max-h-[90vh]">
         <div className="flex items-center justify-between px-5 py-4 border-b border-border shrink-0">
           <div className="flex items-center gap-2">
-            <Sparkles className="w-4 h-4 text-primary" />
+            <Icon name="Sparkles" className="w-4 h-4 text-primary" />
             <span className="font-semibold text-foreground text-sm">
               {step === "search" && "Add API — AI Discovery"}
               {step === "select" && `${results.length} API${results.length !== 1 ? "s" : ""} found — select to add`}
@@ -917,7 +888,7 @@ function DiscoverModal({ onClose, onSaved }: { onClose: () => void; onSaved: ()
               )}
             </span>
           </div>
-          <button onClick={onClose} className="text-muted-foreground hover:text-foreground transition-colors"><X className="w-4 h-4" /></button>
+          <button onClick={onClose} className="text-muted-foreground hover:text-foreground transition-colors"><Icon name="X" className="w-4 h-4" /></button>
         </div>
 
         <div className="flex-1 overflow-y-auto p-5 space-y-4">
@@ -930,7 +901,7 @@ function DiscoverModal({ onClose, onSaved }: { onClose: () => void; onSaved: ()
               </p>
               <div className="flex gap-2">
                 <div className="relative flex-1">
-                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+                  <Icon name="Search" className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
                   <input ref={inputRef} type="text" value={q}
                     onChange={(e) => setQ(e.target.value)}
                     onKeyDown={(e) => e.key === "Enter" && void discover()}
@@ -940,7 +911,7 @@ function DiscoverModal({ onClose, onSaved }: { onClose: () => void; onSaved: ()
                 </div>
                 <button onClick={() => void discover()} disabled={!q.trim() || discovering}
                   className="px-4 py-2 rounded-lg bg-primary hover:opacity-90 disabled:opacity-40 text-sm font-medium text-primary-foreground flex items-center gap-2 shrink-0 transition-colors">
-                  {discovering ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
+                  {discovering ? <Icon name="Loader2" className="w-4 h-4 animate-spin" /> : <Icon name="Sparkles" className="w-4 h-4" />}
                   {discovering ? "Searching…" : "Discover"}
                 </button>
               </div>
@@ -974,7 +945,7 @@ function DiscoverModal({ onClose, onSaved }: { onClose: () => void; onSaved: ()
                         <div className="flex-1 min-w-0">
                           <div className="flex items-center gap-1.5 flex-wrap">
                             <span className="font-medium text-sm text-foreground">{r.label}</span>
-                            {isSel && <Check className="w-3 h-3 text-primary shrink-0" />}
+                            {isSel && <Icon name="Check" className="w-3 h-3 text-primary shrink-0" />}
                           </div>
                           <div className="text-[10px] text-muted-foreground capitalize mb-1">{r.category}</div>
                           <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">{r.description}</p>
@@ -997,7 +968,7 @@ function DiscoverModal({ onClose, onSaved }: { onClose: () => void; onSaved: ()
                 </button>
                 <button onClick={() => void saveDefinitions()} disabled={selected.size === 0 || savingDefs}
                   className="flex-1 py-2 rounded-lg bg-primary hover:opacity-90 disabled:opacity-40 text-sm font-medium text-primary-foreground flex items-center justify-center gap-2 transition-colors">
-                  {savingDefs ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <ArrowRight className="w-3.5 h-3.5" />}
+                  {savingDefs ? <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" /> : <Icon name="ArrowRight" className="w-3.5 h-3.5" />}
                   {savingDefs ? "Adding…" : `Add ${selected.size} API${selected.size !== 1 ? "s" : ""}`}
                 </button>
               </div>
@@ -1030,7 +1001,7 @@ function DiscoverModal({ onClose, onSaved }: { onClose: () => void; onSaved: ()
               {current.instructions && (
                 <details>
                   <summary className="text-xs text-muted-foreground cursor-pointer hover:text-foreground list-none flex items-center gap-1">
-                    <ChevronRight className="w-3 h-3" /> Setup instructions
+                    <Icon name="ChevronRight" className="w-3 h-3" /> Setup instructions
                   </summary>
                   <pre className="mt-2 text-xs text-muted-foreground bg-secondary/60 rounded-lg p-3 whitespace-pre-wrap leading-relaxed">{current.instructions}</pre>
                 </details>
@@ -1040,13 +1011,13 @@ function DiscoverModal({ onClose, onSaved }: { onClose: () => void; onSaved: ()
                   {current.setup_url && (
                     <a href={current.setup_url} target="_blank" rel="noopener noreferrer"
                       className="flex items-center gap-1 text-xs text-primary hover:opacity-80 transition-colors">
-                      Get credentials <ExternalLink className="w-3 h-3" />
+                      Get credentials <Icon name="ExternalLink" className="w-3 h-3" />
                     </a>
                   )}
                   {current.docs_url && (
                     <a href={current.docs_url} target="_blank" rel="noopener noreferrer"
                       className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors">
-                      API docs <ExternalLink className="w-3 h-3" />
+                      API docs <Icon name="ExternalLink" className="w-3 h-3" />
                     </a>
                   )}
                 </div>
@@ -1054,7 +1025,7 @@ function DiscoverModal({ onClose, onSaved }: { onClose: () => void; onSaved: ()
               {current.env_vars.map((v) => (
                 <div key={v.key}>
                   <label className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
-                    {v.label} {v.sensitive && <Lock className="w-2.5 h-2.5 opacity-50" />}
+                    {v.label} {v.sensitive && <Icon name="Lock" className="w-2.5 h-2.5 opacity-50" />}
                   </label>
                   <input type={v.sensitive ? "password" : "text"} autoComplete="off"
                     value={creds[v.key] ?? ""}
@@ -1079,7 +1050,7 @@ function DiscoverModal({ onClose, onSaved }: { onClose: () => void; onSaved: ()
 
           {err && (
             <p className="text-xs text-destructive bg-destructive/10 rounded-lg px-3 py-2 flex items-start gap-2">
-              <AlertCircle className="w-3.5 h-3.5 mt-0.5 shrink-0" /> {err}
+              <Icon name="AlertCircle" className="w-3.5 h-3.5 mt-0.5 shrink-0" /> {err}
             </p>
           )}
         </div>
@@ -1169,11 +1140,11 @@ function ApisTab() {
         <div className="flex items-center gap-2 ml-auto">
           <button onClick={() => void fetchAll()} title="Refresh"
             className="p-1.5 rounded-lg border border-border text-muted-foreground hover:bg-secondary transition-colors">
-            <RefreshCw className="w-3.5 h-3.5" />
+            <Icon name="RefreshCw" className="w-3.5 h-3.5" />
           </button>
           <button onClick={() => setShowDiscover(true)}
             className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary hover:opacity-90 text-xs font-medium text-primary-foreground transition-colors">
-            <Plus className="w-3.5 h-3.5" /><span className="hidden sm:inline">Add API</span>
+            <Icon name="Plus" className="w-3.5 h-3.5" /><span className="hidden sm:inline">Add API</span>
           </button>
         </div>
       </div>
@@ -1190,7 +1161,7 @@ function ApisTab() {
           ))}
         </div>
         <div className="relative ml-auto shrink-0">
-          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none" />
+          <Icon name="Search" className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none" />
           <input type="text" value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search…"
             className="pl-8 pr-3 py-1.5 rounded-lg bg-secondary border border-border text-xs text-foreground placeholder-muted-foreground focus:outline-none focus:border-primary transition-colors w-28 sm:w-36"
           />
@@ -1202,13 +1173,13 @@ function ApisTab() {
         <div className={`flex-1 p-4 overflow-y-auto ${selectedApi ? "sm:min-w-0" : ""}`}>
           {loading ? (
             <div className="flex items-center justify-center h-48 gap-3 text-muted-foreground text-sm">
-              <Loader2 className="w-4 h-4 animate-spin" /> Loading API connections…
+              <Icon name="Loader2" className="w-4 h-4 animate-spin" /> Loading API connections…
             </div>
           ) : filtered.length === 0 ? (
             <div className="flex flex-col items-center justify-center h-48 gap-3 text-muted-foreground text-sm">
               <p>No APIs found{search ? ` for "${search}"` : ""}.</p>
               <button onClick={() => setShowDiscover(true)} className="flex items-center gap-1.5 text-xs text-primary hover:opacity-80">
-                <Plus className="w-3.5 h-3.5" /> Add a new API
+                <Icon name="Plus" className="w-3.5 h-3.5" /> Add a new API
               </button>
             </div>
           ) : (
@@ -1218,7 +1189,7 @@ function ApisTab() {
               ))}
               <button onClick={() => setShowDiscover(true)}
                 className="p-4 rounded-xl border-2 border-dashed border-border text-muted-foreground hover:border-primary/40 hover:text-primary hover:bg-primary/5 transition-all flex flex-col items-center justify-center gap-2 min-h-[120px]">
-                <Plus className="w-5 h-5" /><span className="text-xs">Add API</span>
+                <Icon name="Plus" className="w-5 h-5" /><span className="text-xs">Add API</span>
               </button>
             </div>
           )}
@@ -1235,7 +1206,7 @@ function ApisTab() {
                     <span className="text-sm font-semibold">{selectedApi.label ?? selectedApi.service}</span>
                   </div>
                   <button onClick={() => setSelected(null)} className="p-1 rounded-md hover:bg-secondary text-muted-foreground">
-                    <X size={16} />
+                    <Icon name="X" size={16} />
                   </button>
                 </div>
                 <div className="flex-1 min-h-0 overflow-y-auto">
@@ -1385,11 +1356,11 @@ function EmailTab() {
         <div className="flex items-center gap-2 ml-auto">
           <button onClick={() => void fetchAccounts()} title="Refresh"
             className="p-1.5 rounded-lg border border-border text-muted-foreground hover:bg-secondary transition-colors">
-            <RefreshCw className="w-3.5 h-3.5" />
+            <Icon name="RefreshCw" className="w-3.5 h-3.5" />
           </button>
           <button onClick={() => setShowAdd(true)}
             className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary hover:opacity-90 text-xs font-medium text-primary-foreground transition-colors">
-            <Plus className="w-3.5 h-3.5" /><span className="hidden sm:inline">Add Account</span>
+            <Icon name="Plus" className="w-3.5 h-3.5" /><span className="hidden sm:inline">Add Account</span>
           </button>
         </div>
       </div>
@@ -1398,7 +1369,7 @@ function EmailTab() {
       {(!oauthStatus.gmail || !oauthStatus.microsoft) && (
         <div className="mx-4 mt-3 p-3 rounded-xl bg-amber-500/8 border border-amber-500/20">
           <div className="flex items-start gap-2.5">
-            <AlertCircle className="w-4 h-4 text-amber-400 mt-0.5 shrink-0" />
+            <Icon name="AlertCircle" className="w-4 h-4 text-amber-400 mt-0.5 shrink-0" />
             <div className="flex-1 min-w-0">
               <p className="text-xs font-medium text-amber-300 mb-1">
                 OAuth sign-in not fully configured
@@ -1414,7 +1385,7 @@ function EmailTab() {
                     className="inline-flex items-center gap-1 text-[11px] px-2.5 py-1 rounded-full bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 transition-colors">
                     <span className="w-1.5 h-1.5 rounded-full bg-red-400" />
                     Gmail OAuth — not set up
-                    <ExternalLink className="w-2.5 h-2.5" />
+                    <Icon name="ExternalLink" className="w-2.5 h-2.5" />
                   </a>
                 )}
                 {!oauthStatus.microsoft && (
@@ -1422,7 +1393,7 @@ function EmailTab() {
                     className="inline-flex items-center gap-1 text-[11px] px-2.5 py-1 rounded-full bg-blue-500/10 text-blue-400 border border-blue-500/20 hover:bg-blue-500/20 transition-colors">
                     <span className="w-1.5 h-1.5 rounded-full bg-blue-400" />
                     Microsoft OAuth — not set up
-                    <ExternalLink className="w-2.5 h-2.5" />
+                    <Icon name="ExternalLink" className="w-2.5 h-2.5" />
                   </a>
                 )}
               </div>
@@ -1439,21 +1410,21 @@ function EmailTab() {
       <div className="flex-1 overflow-y-auto p-4">
         {loading ? (
           <div className="flex items-center justify-center h-48 gap-3 text-muted-foreground text-sm">
-            <Loader2 className="w-4 h-4 animate-spin" /> Loading email accounts…
+            <Icon name="Loader2" className="w-4 h-4 animate-spin" /> Loading email accounts…
           </div>
         ) : error ? (
           <div className="flex flex-col items-center justify-center h-48 gap-3 text-muted-foreground text-sm">
-            <AlertCircle className="w-5 h-5 text-red-400" />
+            <Icon name="AlertCircle" className="w-5 h-5 text-red-400" />
             <p>{error}</p>
             <button onClick={() => void fetchAccounts()} className="text-xs text-primary hover:opacity-80">Retry</button>
           </div>
         ) : accounts.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-48 gap-3 text-muted-foreground text-sm">
-            <Mail className="w-8 h-8 opacity-30" />
+            <Icon name="Mail" className="w-8 h-8 opacity-30" />
             <p>No email accounts connected.</p>
             <button onClick={() => setShowAdd(true)}
               className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary hover:opacity-90 text-xs font-medium text-primary-foreground transition-colors">
-              <Plus className="w-3.5 h-3.5" /> Connect your first account
+              <Icon name="Plus" className="w-3.5 h-3.5" /> Connect your first account
             </button>
           </div>
         ) : (
@@ -1478,16 +1449,16 @@ function EmailTab() {
                     {(account.provider === "gmail" || account.provider === "microsoft") && (
                       <button onClick={() => handleReconnect(account.provider)} title="Reconnect (re-authorize)"
                         className="p-1 rounded-md hover:bg-secondary text-muted-foreground hover:text-foreground transition-colors">
-                        <RotateCcw className="w-3.5 h-3.5" />
+                        <Icon name="RotateCcw" className="w-3.5 h-3.5" />
                       </button>
                     )}
                     <button onClick={() => handleSync(account.id)} title="Sync now"
                       className="p-1 rounded-md hover:bg-secondary text-muted-foreground hover:text-foreground transition-colors">
-                      <RefreshCw className="w-3.5 h-3.5" />
+                      <Icon name="RefreshCw" className="w-3.5 h-3.5" />
                     </button>
                     <button onClick={() => handleDelete(account.id)} title="Remove"
                       className="p-1 rounded-md hover:bg-red-500/10 text-muted-foreground hover:text-red-400 transition-colors">
-                      <X className="w-3.5 h-3.5" />
+                      <Icon name="X" className="w-3.5 h-3.5" />
                     </button>
                   </div>
                 </div>
@@ -1512,7 +1483,7 @@ function EmailTab() {
                 {account.syncStatus === "error" && (
                   <div className="mt-2 p-2 rounded-lg bg-red-500/8 border border-red-500/20">
                     <div className="flex items-start gap-1.5">
-                      <AlertCircle className="w-3 h-3 text-red-400 mt-0.5 shrink-0" />
+                      <Icon name="AlertCircle" className="w-3 h-3 text-red-400 mt-0.5 shrink-0" />
                       <div className="flex-1 min-w-0">
                         <p className="text-[10px] text-red-300 leading-snug break-words">
                           {account.syncError || "Sync failed — the connection may have expired."}
@@ -1520,7 +1491,7 @@ function EmailTab() {
                         {(account.provider === "gmail" || account.provider === "microsoft") && (
                           <button onClick={() => handleReconnect(account.provider)}
                             className="mt-1 inline-flex items-center gap-1 text-[10px] font-medium text-primary hover:opacity-80">
-                            <RotateCcw className="w-2.5 h-2.5" /> Reconnect account
+                            <Icon name="RotateCcw" className="w-2.5 h-2.5" /> Reconnect account
                           </button>
                         )}
                       </div>
@@ -1536,7 +1507,7 @@ function EmailTab() {
             ))}
             <button onClick={() => setShowAdd(true)}
               className="p-4 rounded-xl border-2 border-dashed border-border text-muted-foreground hover:border-primary/40 hover:text-primary hover:bg-primary/5 transition-all flex flex-col items-center justify-center gap-2 min-h-[140px]">
-              <Plus className="w-5 h-5" /><span className="text-xs">Add Account</span>
+              <Icon name="Plus" className="w-5 h-5" /><span className="text-xs">Add Account</span>
             </button>
           </div>
         )}
@@ -1558,7 +1529,7 @@ function EmailTab() {
       {/* Link to full email client */}
       <div className="px-4 py-2 border-t border-border shrink-0 flex items-center gap-2">
         <a href="/email" className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors">
-          <ExternalLink className="w-3 h-3" /> Open Email Client
+          <Icon name="ExternalLink" className="w-3 h-3" /> Open Email Client
         </a>
       </div>
     </div>
@@ -1579,7 +1550,7 @@ function AddEmailModal({
         <div className="flex items-center justify-between mb-4">
           <h3 className="text-base font-semibold text-foreground">Add Email Account</h3>
           <button onClick={onClose} className="p-1 rounded-md hover:bg-secondary text-muted-foreground transition-colors">
-            <X size={16} />
+            <Icon name="X" size={16} />
           </button>
         </div>
         <div className="space-y-2">
@@ -1687,7 +1658,7 @@ function AddIMAPModal({
         <div className="flex items-center justify-between mb-4">
           <h3 className="text-base font-semibold text-foreground">IMAP / SMTP Setup</h3>
           <button onClick={onClose} className="p-1 rounded-md hover:bg-secondary text-muted-foreground transition-colors">
-            <X size={16} />
+            <Icon name="X" size={16} />
           </button>
         </div>
         <div className="space-y-3">
@@ -1749,7 +1720,7 @@ function AddIMAPModal({
 
           <button onClick={handleSave} disabled={saving}
             className="w-full py-2.5 rounded-lg bg-primary hover:opacity-90 disabled:opacity-40 text-sm font-medium text-primary-foreground transition-colors flex items-center justify-center gap-2">
-            {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : null}
+            {saving ? <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" /> : null}
             {saving ? "Connecting…" : "Connect Account"}
           </button>
         </div>
@@ -1826,7 +1797,7 @@ function McpsTab() {
       {/* Hero */}
       <div className="flex items-start gap-4 p-5 rounded-2xl border border-border bg-card">
         <div className="w-10 h-10 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center shrink-0">
-          <Server className="w-5 h-5 text-primary" />
+          <Icon name="Server" className="w-5 h-5 text-primary" />
         </div>
         <div className="flex-1 min-w-0">
           <div className="flex items-center justify-between gap-3">
@@ -1838,7 +1809,7 @@ function McpsTab() {
             </div>
             <button onClick={() => setShowAdd(true)}
               className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary hover:opacity-90 text-xs font-medium text-primary-foreground shrink-0 transition-colors">
-              <Plus className="w-3.5 h-3.5" /> Add MCP Server
+              <Icon name="Plus" className="w-3.5 h-3.5" /> Add MCP Server
             </button>
           </div>
           <p className="text-sm text-muted-foreground mt-2 leading-relaxed max-w-xl">
@@ -1887,7 +1858,7 @@ function McpsTab() {
                     </button>
                     <button onClick={() => handleDelete(s.name)}
                       className="px-2 py-1 rounded text-[10px] border border-border text-muted-foreground hover:bg-destructive/10 hover:text-destructive transition-colors">
-                      <X className="w-3 h-3" />
+                      <Icon name="X" className="w-3 h-3" />
                     </button>
                   </div>
                 </div>
@@ -1898,7 +1869,7 @@ function McpsTab() {
       ) : !loading ? (
         <div className="flex flex-col items-center justify-center gap-3 py-10 text-center">
           <div className="w-12 h-12 rounded-2xl bg-secondary border border-border flex items-center justify-center">
-            <Server className="w-6 h-6 text-muted-foreground" />
+            <Icon name="Server" className="w-6 h-6 text-muted-foreground" />
           </div>
           <div>
             <div className="text-sm font-medium text-foreground">No MCP servers registered</div>
@@ -1906,7 +1877,7 @@ function McpsTab() {
           </div>
           <button onClick={() => setShowAdd(true)}
             className="flex items-center gap-1.5 px-4 py-2 rounded-lg bg-primary hover:opacity-90 text-xs font-medium text-primary-foreground transition-colors">
-            <Plus className="w-3.5 h-3.5" /> Add MCP Server
+            <Icon name="Plus" className="w-3.5 h-3.5" /> Add MCP Server
           </button>
         </div>
       ) : null}
@@ -1980,7 +1951,7 @@ function AddMcpModal({ onClose, onAdded }: { onClose: () => void; onAdded: () =>
       <div className="w-full max-w-md bg-card border-t sm:border border-border rounded-t-2xl sm:rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[92vh]">
         <div className="flex items-center justify-between px-5 py-4 border-b border-border shrink-0">
           <div className="font-semibold text-sm">Add MCP Server</div>
-          <button onClick={onClose} className="text-muted-foreground hover:text-foreground"><X className="w-4 h-4" /></button>
+          <button onClick={onClose} className="text-muted-foreground hover:text-foreground"><Icon name="X" className="w-4 h-4" /></button>
         </div>
         <div className="flex-1 overflow-y-auto p-5 space-y-4">
           <div className="grid grid-cols-2 gap-3">
@@ -2061,12 +2032,12 @@ function AddMcpModal({ onClose, onAdded }: { onClose: () => void; onAdded: () =>
 // ===========================================================================
 
 const PLUGIN_EXAMPLES = [
-  { name: "Web Browsing",      icon: Globe,    desc: "Agents can open URLs, read pages, and extract structured data from the live web." },
-  { name: "Code Interpreter",  icon: Box,      desc: "Run sandboxed Python/JS and return computed results, charts, or transformed data." },
-  { name: "Document Analysis", icon: HardDrive, desc: "Upload PDFs, spreadsheets, or images and let agents extract and reason over content." },
-  { name: "Email Actions",     icon: Mail,     desc: "Draft, send, and thread emails directly from agent workflows without extra API setup." },
-  { name: "Calendar & Booking",icon: CheckSquare, desc: "Check availability, schedule meetings, and create calendar events autonomously." },
-  { name: "Community Plugins", icon: Users,    desc: "Install third-party plugins published by the CommandCenter community or build your own." },
+  { name: "Web Browsing",      icon: themedIcon("Globe"),    desc: "Agents can open URLs, read pages, and extract structured data from the live web." },
+  { name: "Code Interpreter",  icon: themedIcon("Box"),      desc: "Run sandboxed Python/JS and return computed results, charts, or transformed data." },
+  { name: "Document Analysis", icon: themedIcon("HardDrive"), desc: "Upload PDFs, spreadsheets, or images and let agents extract and reason over content." },
+  { name: "Email Actions",     icon: themedIcon("Mail"),     desc: "Draft, send, and thread emails directly from agent workflows without extra API setup." },
+  { name: "Calendar & Booking",icon: themedIcon("CheckSquare"), desc: "Check availability, schedule meetings, and create calendar events autonomously." },
+  { name: "Community Plugins", icon: themedIcon("Users"),    desc: "Install third-party plugins published by the CommandCenter community or build your own." },
 ];
 
 function PluginsTab() {
@@ -2100,7 +2071,7 @@ function PluginsTab() {
       {/* Hero */}
       <div className="flex items-start gap-4 p-5 rounded-2xl border border-border bg-card">
         <div className="w-10 h-10 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center shrink-0">
-          <Puzzle className="w-5 h-5 text-primary" />
+          <Icon name="Puzzle" className="w-5 h-5 text-primary" />
         </div>
         <div className="flex-1 min-w-0">
           <div className="flex items-center justify-between gap-3">
@@ -2112,7 +2083,7 @@ function PluginsTab() {
             </div>
             <button onClick={() => setShowInstall(true)}
               className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary hover:opacity-90 text-xs font-medium text-primary-foreground shrink-0 transition-colors">
-              <Plus className="w-3.5 h-3.5" /> Install Plugin
+              <Icon name="Plus" className="w-3.5 h-3.5" /> Install Plugin
             </button>
           </div>
           <p className="text-sm text-muted-foreground mt-2 leading-relaxed max-w-xl">
@@ -2151,7 +2122,7 @@ function PluginsTab() {
                   </div>
                   <button onClick={() => handleDelete(p.id)}
                     className="px-2 py-1 rounded text-[10px] border border-border text-muted-foreground hover:bg-destructive/10 hover:text-destructive transition-colors shrink-0">
-                    <X className="w-3 h-3" />
+                    <Icon name="X" className="w-3 h-3" />
                   </button>
                 </div>
               </div>
@@ -2161,7 +2132,7 @@ function PluginsTab() {
       ) : !loading ? (
         <div className="flex flex-col items-center justify-center gap-3 py-10 text-center">
           <div className="w-12 h-12 rounded-2xl bg-secondary border border-border flex items-center justify-center">
-            <Puzzle className="w-6 h-6 text-muted-foreground" />
+            <Icon name="Puzzle" className="w-6 h-6 text-muted-foreground" />
           </div>
           <div>
             <div className="text-sm font-medium text-foreground">No plugins installed</div>
@@ -2169,7 +2140,7 @@ function PluginsTab() {
           </div>
           <button onClick={() => setShowInstall(true)}
             className="flex items-center gap-1.5 px-4 py-2 rounded-lg bg-primary hover:opacity-90 text-xs font-medium text-primary-foreground transition-colors">
-            <Plus className="w-3.5 h-3.5" /> Install Plugin
+            <Icon name="Plus" className="w-3.5 h-3.5" /> Install Plugin
           </button>
         </div>
       ) : null}
@@ -2252,13 +2223,13 @@ function InstallPluginModal({ onClose, onInstalled }: { onClose: () => void; onI
       <div className="w-full max-w-md bg-card border-t sm:border border-border rounded-t-2xl sm:rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[92vh]">
         <div className="flex items-center justify-between px-5 py-4 border-b border-border shrink-0">
           <div className="font-semibold text-sm">Install Plugin</div>
-          <button onClick={onClose} className="text-muted-foreground hover:text-foreground"><X className="w-4 h-4" /></button>
+          <button onClick={onClose} className="text-muted-foreground hover:text-foreground"><Icon name="X" className="w-4 h-4" /></button>
         </div>
         <div className="flex-1 overflow-y-auto p-5 space-y-4">
           {result ? (
             <div className="p-4 rounded-xl border border-success/20 bg-success/5 space-y-2">
               <div className="flex items-center gap-2">
-                <Check className="w-4 h-4 text-success" />
+                <Icon name="Check" className="w-4 h-4 text-success" />
                 <span className="text-sm font-medium text-foreground">Installed: {result.label}</span>
               </div>
               <div className="text-xs text-muted-foreground">
@@ -2278,12 +2249,12 @@ function InstallPluginModal({ onClose, onInstalled }: { onClose: () => void; onI
                   placeholder="https://my-plugin.example.com/.well-known/ai-plugin.json"
                   className="w-full px-3 py-2 rounded-lg bg-secondary border border-border text-sm text-foreground placeholder-muted-foreground focus:outline-none focus:border-primary font-mono" />
               </div>
-              {err && <p className="text-xs text-destructive bg-destructive/10 rounded-lg px-3 py-2 flex items-start gap-2"><AlertCircle className="w-3.5 h-3.5 mt-0.5 shrink-0" /> {err}</p>}
+              {err && <p className="text-xs text-destructive bg-destructive/10 rounded-lg px-3 py-2 flex items-start gap-2"><Icon name="AlertCircle" className="w-3.5 h-3.5 mt-0.5 shrink-0" /> {err}</p>}
               <div className="flex gap-2 pt-1">
                 <button onClick={onClose} className="flex-1 py-2 rounded-lg border border-border text-sm text-muted-foreground hover:bg-secondary transition-colors">Cancel</button>
                 <button onClick={install} disabled={!manifestUrl.trim() || installing}
                   className="flex-1 py-2 rounded-lg bg-primary hover:opacity-90 disabled:opacity-40 text-sm font-medium text-primary-foreground flex items-center justify-center gap-2 transition-colors">
-                  {installing ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Plus className="w-3.5 h-3.5" />}
+                  {installing ? <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" /> : <Icon name="Plus" className="w-3.5 h-3.5" />}
                   {installing ? "Installing…" : "Install"}
                 </button>
               </div>
@@ -2309,7 +2280,7 @@ function fmtTokens(t: number): string {
 
 function SkillFamilyCard({ family }: { family: SkillFamily }) {
   const [open, setOpen] = useState(false);
-  const Chevron = open ? ChevronDown : ChevronRight;
+  const chevron = open ? "ChevronDown" : "ChevronRight";
   return (
     <div className="p-4 rounded-xl border border-border bg-card hover:bg-secondary/10 transition-colors">
       <button
@@ -2323,7 +2294,7 @@ function SkillFamilyCard({ family }: { family: SkillFamily }) {
               <span className="text-sm font-semibold text-foreground">{family.label}</span>
               {family.core && (
                 <span className="inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded border bg-violet-500/15 text-violet-400 border-violet-500/25">
-                  <Lock className="w-2.5 h-2.5" /> Core · always on
+                  <Icon name="Lock" className="w-2.5 h-2.5" /> Core · always on
                 </span>
               )}
               {!family.core && !family.scope_governed && (
@@ -2345,7 +2316,7 @@ function SkillFamilyCard({ family }: { family: SkillFamily }) {
                 ? "per-grant"
                 : `${family.tool_count} tool${family.tool_count !== 1 ? "s" : ""} · ${fmtTokens(family.token_cost)}`}
             </span>
-            <Chevron className="w-3.5 h-3.5 text-muted" />
+            <Icon name={chevron} className="w-3.5 h-3.5 text-muted" />
           </div>
         </div>
       </button>
@@ -2403,7 +2374,7 @@ function SkillsTab() {
       {/* Hero */}
       <div className="flex items-start gap-4 p-5 rounded-2xl border border-border bg-card">
         <div className="w-10 h-10 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-center shrink-0">
-          <Sparkles className="w-5 h-5 text-primary" />
+          <Icon name="Sparkles" className="w-5 h-5 text-primary" />
         </div>
         <div className="flex-1 min-w-0">
           <div className="flex items-center justify-between gap-3">
@@ -2419,7 +2390,7 @@ function SkillsTab() {
             </div>
             <button onClick={() => void fetchCatalog()} disabled={loading}
               className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border hover:bg-secondary text-xs font-medium text-muted-foreground shrink-0 disabled:opacity-40 transition-colors">
-              <RefreshCw className={`w-3.5 h-3.5 ${loading ? "animate-spin" : ""}`} /> Refresh
+              <Icon name="RefreshCw" className={`w-3.5 h-3.5 ${loading ? "animate-spin" : ""}`} /> Refresh
             </button>
           </div>
           <p className="text-sm text-muted-foreground mt-2 leading-relaxed max-w-xl">
@@ -2433,7 +2404,7 @@ function SkillsTab() {
 
       {error && (
         <div className="flex items-center gap-2 p-3 rounded-xl border border-destructive/30 bg-destructive/10 text-xs text-destructive">
-          <AlertCircle className="w-4 h-4 shrink-0" /> {error}
+          <Icon name="AlertCircle" className="w-4 h-4 shrink-0" /> {error}
         </div>
       )}
 
@@ -2477,7 +2448,7 @@ function SkillsTab() {
                     {families.map((f) => (
                       <td key={f.slug} className="text-center px-3 py-2.5">
                         {a.families.includes(f.slug)
-                          ? <Check className="w-3.5 h-3.5 text-success inline" />
+                          ? <Icon name="Check" className="w-3.5 h-3.5 text-success inline" />
                           : (a.disabled_families ?? []).includes(f.slug)
                           ? <span className="text-[10px] px-1.5 py-0.5 rounded bg-warning/10 text-warning" title="Explicitly disabled by an admin (skill toggle)">off</span>
                           : <span className="text-muted">—</span>}
@@ -2494,7 +2465,7 @@ function SkillsTab() {
       {!loading && !error && families.length === 0 && (
         <div className="flex flex-col items-center justify-center gap-3 py-10 text-center">
           <div className="w-12 h-12 rounded-2xl bg-secondary border border-border flex items-center justify-center">
-            <Sparkles className="w-6 h-6 text-muted-foreground" />
+            <Icon name="Sparkles" className="w-6 h-6 text-muted-foreground" />
           </div>
           <div>
             <div className="text-sm font-medium text-foreground">No skills catalog available</div>
diff --git a/workbench/control_plane/src/app/notes/components/ActiveBots.tsx b/workbench/control_plane/src/app/notes/components/ActiveBots.tsx
index 09f5f00c..cec86f1d 100644
--- a/workbench/control_plane/src/app/notes/components/ActiveBots.tsx
+++ b/workbench/control_plane/src/app/notes/components/ActiveBots.tsx
@@ -7,9 +7,9 @@
  * processing. Multiple bots show at once — that's the multi-meeting fan-out.
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
-import { AlertTriangle, Loader2, Radio, Square, Video } from "lucide-react";
 import { listActiveBots, stopBot } from "../lib/api";
 import type { MeetingBot, MeetingBotStatus } from "../lib/types";
 
@@ -106,7 +106,7 @@ export default function ActiveBots({ reloadSignal, onChange }: ActiveBotsProps)
   return (
     <div className="space-y-2">
       <div className="flex items-center gap-1.5 px-1">
-        <Video className="h-3.5 w-3.5 text-primary" />
+        <Icon name="Video" className="h-3.5 w-3.5 text-primary" />
         <span className="text-[11px] font-semibold uppercase tracking-wide text-primary">
           Notetakers ({running} in meetings)
         </span>
@@ -129,7 +129,7 @@ export default function ActiveBots({ reloadSignal, onChange }: ActiveBotsProps)
               className="flex min-w-0 flex-1 items-center gap-3 text-left"
               title="Open this meeting"
             >
-              <Video
+              <Icon name="Video"
                 className={`h-5 w-5 shrink-0 ${
                   bad ? "text-destructive" : "text-primary"
                 }`}
@@ -158,7 +158,7 @@ export default function ActiveBots({ reloadSignal, onChange }: ActiveBotsProps)
                 title="Open the live console (transcript + copilot)"
                 aria-label="Open live console"
               >
-                <Radio className="h-4 w-4" />
+                <Icon name="Radio" className="h-4 w-4" />
               </button>
             )}
             {!bad && (
@@ -170,16 +170,16 @@ export default function ActiveBots({ reloadSignal, onChange }: ActiveBotsProps)
                 aria-label="Stop notetaker"
               >
                 {stopping === b.meeting_id ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
+                  <Icon name="Loader2" className="h-4 w-4 animate-spin" />
                 ) : (
-                  <Square className="h-4 w-4 fill-current" />
+                  <Icon name="Square" className="h-4 w-4 fill-current" />
                 )}
               </button>
             )}
           </div>
           {bad && (
             <p className="mt-2 flex items-start gap-1.5 rounded-lg bg-destructive/10 px-2.5 py-1.5 text-[11px] leading-relaxed text-destructive">
-              <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+              <Icon name="AlertTriangle" className="mt-0.5 h-3.5 w-3.5 shrink-0" />
               <span>{explainText(b)}</span>
             </p>
           )}
diff --git a/workbench/control_plane/src/app/notes/components/AskPanel.tsx b/workbench/control_plane/src/app/notes/components/AskPanel.tsx
index bf324a89..d25a56ce 100644
--- a/workbench/control_plane/src/app/notes/components/AskPanel.tsx
+++ b/workbench/control_plane/src/app/notes/components/AskPanel.tsx
@@ -6,8 +6,8 @@
  * (spec §4 Tier-1 / §5.3 provenance-you-can-touch).
  */
 
+import Icon from "@/components/Icon";
 import { useState } from "react";
-import { Loader2, MessageCircleQuestion, Send } from "lucide-react";
 import { askMeeting } from "../lib/api";
 
 interface QA {
@@ -51,7 +51,7 @@ export default function AskPanel({
   return (
     <div className="rounded-xl border border-border bg-card">
       <div className="flex items-center gap-1.5 px-4 py-2.5 border-b border-border">
-        <MessageCircleQuestion className="w-4 h-4 text-primary" />
+        <Icon name="MessageCircleQuestion" className="w-4 h-4 text-primary" />
         <h2 className="text-sm font-semibold text-foreground">
           Ask this meeting
         </h2>
@@ -94,7 +94,7 @@ export default function AskPanel({
         ))}
         {loading && (
           <div className="flex items-center gap-2 text-xs text-muted-foreground">
-            <Loader2 className="w-3.5 h-3.5 animate-spin" /> Thinking…
+            <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" /> Thinking…
           </div>
         )}
         {error && (
@@ -116,7 +116,7 @@ export default function AskPanel({
           className="p-2 rounded-lg bg-primary text-primary-foreground hover:opacity-90 tech-transition disabled:opacity-50"
           aria-label="Ask"
         >
-          <Send className="w-4 h-4" />
+          <Icon name="Send" className="w-4 h-4" />
         </button>
       </div>
     </div>
diff --git a/workbench/control_plane/src/app/notes/components/BotIdentitySection.tsx b/workbench/control_plane/src/app/notes/components/BotIdentitySection.tsx
index 4852e7e0..068f8a5f 100644
--- a/workbench/control_plane/src/app/notes/components/BotIdentitySection.tsx
+++ b/workbench/control_plane/src/app/notes/components/BotIdentitySection.tsx
@@ -24,8 +24,8 @@
  *    responses from the user, so they must never collapse into "sign-in failed".
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useState } from "react";
-import { AlertTriangle, CheckCircle2, KeyRound, Loader2, Monitor } from "lucide-react";
 import { getBotIdentity, signInBot, signInBotInteractive } from "../lib/api";
 import type { BotIdentity } from "../lib/types";
 
@@ -133,7 +133,7 @@ export default function BotIdentitySection() {
   if (loading) {
     return (
       <div className="flex items-center gap-2 text-xs text-muted-foreground">
-        <Loader2 className="h-3.5 w-3.5 animate-spin" /> Checking the notetaker&apos;s account…
+        <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" /> Checking the notetaker&apos;s account…
       </div>
     );
   }
@@ -145,19 +145,19 @@ export default function BotIdentitySection() {
   return (
     <section>
       <h3 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-        <KeyRound className="h-3.5 w-3.5" /> Notetaker account
+        <Icon name="KeyRound" className="h-3.5 w-3.5" /> Notetaker account
       </h3>
 
       {/* Status first — it's the fact that decides whether joining can work. */}
       {id.unreachable ? (
         <p className="mb-3 flex items-start gap-1.5 rounded-lg border border-border bg-muted/40 px-3 py-2 text-xs text-muted-foreground">
-          <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+          <Icon name="AlertTriangle" className="mt-0.5 h-3.5 w-3.5 shrink-0" />
           Couldn&apos;t reach the notetaker service, so its sign-in state is
           unknown. It may be restarting.
         </p>
       ) : signedIn ? (
         <p className="mb-3 flex items-start gap-1.5 rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-3 py-2 text-xs">
-          <CheckCircle2 className="mt-0.5 h-3.5 w-3.5 shrink-0 text-emerald-500" />
+          <Icon name="CheckCircle2" className="mt-0.5 h-3.5 w-3.5 shrink-0 text-emerald-500" />
           <span>
             Signed in as <strong>{id.email || "a Google account"}</strong>. Put
             this address on a calendar invite and the notetaker joins on its own,
@@ -166,7 +166,7 @@ export default function BotIdentitySection() {
         </p>
       ) : (
         <p className="mb-3 flex items-start gap-1.5 rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs">
-          <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-500" />
+          <Icon name="AlertTriangle" className="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-500" />
           <span>
             Not signed in, so Google will decline the notetaker — it refuses
             participants that aren&apos;t signed in, and being in the call
@@ -225,7 +225,7 @@ export default function BotIdentitySection() {
               disabled={busy !== null || !email.trim() || !password}
               className="inline-flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground disabled:opacity-50"
             >
-              {busy === "scripted" && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
+              {busy === "scripted" && <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />}
               {signedIn ? "Sign in as someone else" : "Sign in"}
             </button>
             <button
@@ -235,9 +235,9 @@ export default function BotIdentitySection() {
               title="Opens Google's sign-in page in the notetaker's own browser so you can complete 2FA over VNC"
             >
               {busy === "interactive" ? (
-                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
               ) : (
-                <Monitor className="h-3.5 w-3.5" />
+                <Icon name="Monitor" className="h-3.5 w-3.5" />
               )}
               Sign in by hand (2FA)
             </button>
diff --git a/workbench/control_plane/src/app/notes/components/FollowupEmailModal.tsx b/workbench/control_plane/src/app/notes/components/FollowupEmailModal.tsx
index 39eed320..39549348 100644
--- a/workbench/control_plane/src/app/notes/components/FollowupEmailModal.tsx
+++ b/workbench/control_plane/src/app/notes/components/FollowupEmailModal.tsx
@@ -6,8 +6,8 @@
  * and sends via the existing /email/send (spec §3.9). Nothing sends on its own.
  */
 
+import Icon from "@/components/Icon";
 import { useEffect, useState } from "react";
-import { Loader2, Send, X } from "lucide-react";
 import {
   draftFollowupEmail,
   listEmailAccounts,
@@ -95,13 +95,13 @@ export default function FollowupEmailModal({
             className="p-1.5 rounded-lg text-muted-foreground hover:bg-secondary tech-transition"
             aria-label="Close"
           >
-            <X className="w-4 h-4" />
+            <Icon name="X" className="w-4 h-4" />
           </button>
         </div>
 
         {loading ? (
           <div className="flex items-center justify-center py-16">
-            <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+            <Icon name="Loader2" className="w-5 h-5 animate-spin text-muted-foreground" />
           </div>
         ) : (
           <div className="p-4 space-y-3 overflow-y-auto">
@@ -181,9 +181,9 @@ export default function FollowupEmailModal({
           >
             <span className="flex items-center gap-1.5">
               {sending ? (
-                <Loader2 className="w-4 h-4 animate-spin" />
+                <Icon name="Loader2" className="w-4 h-4 animate-spin" />
               ) : (
-                <Send className="w-4 h-4" />
+                <Icon name="Send" className="w-4 h-4" />
               )}
               Send
             </span>
diff --git a/workbench/control_plane/src/app/notes/components/GlossaryModal.tsx b/workbench/control_plane/src/app/notes/components/GlossaryModal.tsx
index 96c0044e..dbaeffb4 100644
--- a/workbench/control_plane/src/app/notes/components/GlossaryModal.tsx
+++ b/workbench/control_plane/src/app/notes/components/GlossaryModal.tsx
@@ -6,8 +6,8 @@
  * product names, people and customers get spelled right.
  */
 
+import Icon from "@/components/Icon";
 import { useEffect, useState } from "react";
-import { Loader2, Plus, X } from "lucide-react";
 import {
   addGlossaryTerm,
   deleteGlossaryTerm,
@@ -73,7 +73,7 @@ export default function GlossaryModal({ onClose }: { onClose: () => void }) {
             className="p-1.5 rounded-lg text-muted-foreground hover:bg-secondary tech-transition"
             aria-label="Close"
           >
-            <X className="w-4 h-4" />
+            <Icon name="X" className="w-4 h-4" />
           </button>
         </div>
 
@@ -98,16 +98,16 @@ export default function GlossaryModal({ onClose }: { onClose: () => void }) {
               aria-label="Add term"
             >
               {busy ? (
-                <Loader2 className="w-4 h-4 animate-spin" />
+                <Icon name="Loader2" className="w-4 h-4 animate-spin" />
               ) : (
-                <Plus className="w-4 h-4" />
+                <Icon name="Plus" className="w-4 h-4" />
               )}
             </button>
           </div>
 
           {loading ? (
             <div className="flex items-center justify-center py-8">
-              <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+              <Icon name="Loader2" className="w-5 h-5 animate-spin text-muted-foreground" />
             </div>
           ) : terms.length === 0 ? (
             <p className="text-xs text-muted-foreground text-center py-6">
@@ -127,7 +127,7 @@ export default function GlossaryModal({ onClose }: { onClose: () => void }) {
                     className="text-muted-foreground hover:text-destructive"
                     aria-label={`Remove ${t.term}`}
                   >
-                    <X className="w-3 h-3" />
+                    <Icon name="X" className="w-3 h-3" />
                   </button>
                 </span>
               ))}
diff --git a/workbench/control_plane/src/app/notes/components/JoinCallModal.tsx b/workbench/control_plane/src/app/notes/components/JoinCallModal.tsx
index 5072a0c5..45602def 100644
--- a/workbench/control_plane/src/app/notes/components/JoinCallModal.tsx
+++ b/workbench/control_plane/src/app/notes/components/JoinCallModal.tsx
@@ -7,8 +7,8 @@
  * set up yet" state when no provider key is configured.
  */
 
+import Icon from "@/components/Icon";
 import { useEffect, useState } from "react";
-import { AlertCircle, Loader2, Video, X } from "lucide-react";
 import { botJoin, getBotConfig } from "../lib/api";
 
 interface JoinCallModalProps {
@@ -81,7 +81,7 @@ export default function JoinCallModal({
       >
         <div className="mb-3 flex items-center gap-2">
           <span className="grid h-8 w-8 place-items-center rounded-lg bg-primary/15 text-primary">
-            <Video className="h-4 w-4" />
+            <Icon name="Video" className="h-4 w-4" />
           </span>
           <div className="min-w-0 flex-1">
             <h2 className="text-sm font-bold text-foreground">
@@ -97,14 +97,14 @@ export default function JoinCallModal({
             className="rounded-lg p-1 text-muted-foreground hover:bg-secondary hover:text-foreground tech-transition"
             aria-label="Close"
           >
-            <X className="h-4 w-4" />
+            <Icon name="X" className="h-4 w-4" />
           </button>
         </div>
 
         {configured === false ? (
           <div className="rounded-lg bg-warning/10 px-3 py-2.5 text-xs text-warning">
             <span className="flex items-start gap-1.5">
-              <AlertCircle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+              <Icon name="AlertCircle" className="mt-0.5 h-3.5 w-3.5 shrink-0" />
               <span>
                 The meeting notetaker isn&apos;t set up yet. An admin needs to
                 connect the self-hosted meeting-bot worker
@@ -151,7 +151,7 @@ export default function JoinCallModal({
                 guests outright when nobody is in the call yet. Saying so here
                 prevents the failure instead of explaining it afterwards. */}
             <p className="mt-2 flex items-start gap-1.5 rounded-lg bg-warning/10 px-2.5 py-1.5 text-[10px] leading-relaxed text-warning">
-              <AlertCircle className="mt-0.5 h-3 w-3 shrink-0" />
+              <Icon name="AlertCircle" className="mt-0.5 h-3 w-3 shrink-0" />
               <span>
                 Join the call yourself first, then admit the notetaker when it
                 knocks — Google turns guests away when no one is in the meeting
@@ -178,9 +178,9 @@ export default function JoinCallModal({
                 className="inline-flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 tech-transition disabled:opacity-50"
               >
                 {busy ? (
-                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                  <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
                 ) : (
-                  <Video className="h-3.5 w-3.5" />
+                  <Icon name="Video" className="h-3.5 w-3.5" />
                 )}
                 {busy ? "Sending…" : "Send notetaker"}
               </button>
diff --git a/workbench/control_plane/src/app/notes/components/LiveCopilotStrip.tsx b/workbench/control_plane/src/app/notes/components/LiveCopilotStrip.tsx
index ca0f1fcf..5be695e4 100644
--- a/workbench/control_plane/src/app/notes/components/LiveCopilotStrip.tsx
+++ b/workbench/control_plane/src/app/notes/components/LiveCopilotStrip.tsx
@@ -16,9 +16,9 @@
  * suggestion you never see is the same as no copilot.
  */
 
+import Icon from "@/components/Icon";
 import { useEffect, useState } from "react";
 import Link from "next/link";
-import { Radio, Sparkles } from "lucide-react";
 import { getLiveSession, setCopilot } from "../lib/api";
 import type { CopilotEvent, LiveSession } from "../lib/types";
 
@@ -83,7 +83,7 @@ export default function LiveCopilotStrip({ meetingId }: { meetingId: string }) {
       }`}
     >
       <div className="flex items-center gap-2.5">
-        <Sparkles
+        <Icon name="Sparkles"
           className={`h-4 w-4 shrink-0 ${on ? "text-primary" : "text-muted-foreground"}`}
         />
         <div className="min-w-0 flex-1">
@@ -121,7 +121,7 @@ export default function LiveCopilotStrip({ meetingId }: { meetingId: string }) {
           href={`/notes/live/${meetingId}`}
           className="mt-2 inline-flex items-center gap-1.5 text-xs text-primary hover:underline"
         >
-          <Radio className="h-3.5 w-3.5" />
+          <Icon name="Radio" className="h-3.5 w-3.5" />
           {count > 1 ? "See all suggestions and agenda coverage" : "Open the live console"}
         </Link>
       )}
diff --git a/workbench/control_plane/src/app/notes/components/LiveDock.tsx b/workbench/control_plane/src/app/notes/components/LiveDock.tsx
index dee4e5f2..f4614b43 100644
--- a/workbench/control_plane/src/app/notes/components/LiveDock.tsx
+++ b/workbench/control_plane/src/app/notes/components/LiveDock.tsx
@@ -13,9 +13,9 @@
  * shown by RecordingDock are filtered out so the two never stack up.
  */
 
+import Icon from "@/components/Icon";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
-import { Bot, Radio } from "lucide-react";
 import { listLiveSessions } from "../lib/api";
 import { useRecordingStore } from "../lib/recordingStore";
 import type { LiveSession } from "../lib/types";
@@ -77,9 +77,9 @@ export function LiveDock() {
           </span>
         </span>
         {first.source === "bot" ? (
-          <Bot className="h-4 w-4 shrink-0 text-muted-foreground" />
+          <Icon name="Bot" className="h-4 w-4 shrink-0 text-muted-foreground" />
         ) : (
-          <Radio className="h-4 w-4 shrink-0 text-muted-foreground" />
+          <Icon name="Radio" className="h-4 w-4 shrink-0 text-muted-foreground" />
         )}
       </button>
     </div>
diff --git a/workbench/control_plane/src/app/notes/components/MeetingOutcomes.tsx b/workbench/control_plane/src/app/notes/components/MeetingOutcomes.tsx
index e8148dc5..d19089b0 100644
--- a/workbench/control_plane/src/app/notes/components/MeetingOutcomes.tsx
+++ b/workbench/control_plane/src/app/notes/components/MeetingOutcomes.tsx
@@ -12,8 +12,8 @@
  * rather than something you have to remember.
  */
 
+import Icon from "@/components/Icon";
 import { useEffect, useState } from "react";
-import { Check, Circle, ListChecks } from "lucide-react";
 import { getAgendaProgress } from "../lib/api";
 import type { ActionItem, AgendaProgress, MeetingDetail } from "../lib/types";
 
@@ -127,7 +127,7 @@ export default function MeetingOutcomes({
       {progress && (
         <div className="rounded-xl border border-border bg-card p-3">
           <p className="mb-2 flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
-            <ListChecks className="h-3.5 w-3.5" /> Agenda — what you covered
+            <Icon name="ListChecks" className="h-3.5 w-3.5" /> Agenda — what you covered
             <span className="font-mono normal-case tracking-normal opacity-70">
               {progress.covered_count} of {progress.total}
             </span>
@@ -143,9 +143,9 @@ export default function MeetingOutcomes({
                 }`}
               >
                 {it.covered ? (
-                  <Check className="h-3 w-3" />
+                  <Icon name="Check" className="h-3 w-3" />
                 ) : (
-                  <Circle className="h-3 w-3" />
+                  <Icon name="Circle" className="h-3 w-3" />
                 )}
                 {it.title}
               </span>
diff --git a/workbench/control_plane/src/app/notes/components/MeetingPrep.tsx b/workbench/control_plane/src/app/notes/components/MeetingPrep.tsx
index f238c8b5..0423b52d 100644
--- a/workbench/control_plane/src/app/notes/components/MeetingPrep.tsx
+++ b/workbench/control_plane/src/app/notes/components/MeetingPrep.tsx
@@ -17,20 +17,9 @@
  * after it.
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
-import {
-  BookOpen,
-  Check,
-  ListChecks,
-  Loader2,
-  Mic,
-  Sparkles,
-  Upload,
-  Users,
-  Video,
-  X,
-} from "lucide-react";
 import {
   chatAgenda,
   getAgenda,
@@ -222,7 +211,7 @@ export default function MeetingPrep({ meeting, onChanged, onSendBot }: Props) {
   if (loading) {
     return (
       <div className="flex justify-center py-16">
-        <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+        <Icon name="Loader2" className="h-5 w-5 animate-spin text-muted-foreground" />
       </div>
     );
   }
@@ -264,7 +253,7 @@ export default function MeetingPrep({ meeting, onChanged, onSendBot }: Props) {
         <div className="space-y-4">
           <section className="rounded-xl border border-border bg-card p-3">
             <p className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              <ListChecks className="h-3.5 w-3.5" /> Agenda
+              <Icon name="ListChecks" className="h-3.5 w-3.5" /> Agenda
               {agenda.length > 0 && (
                 <span className="font-mono text-[10px] normal-case tracking-normal opacity-70">
                   {agenda.length} item{agenda.length === 1 ? "" : "s"}
@@ -319,7 +308,7 @@ export default function MeetingPrep({ meeting, onChanged, onSendBot }: Props) {
                 className="rounded-lg border border-border px-3 py-1.5 text-sm font-medium hover:bg-secondary disabled:opacity-50"
               >
                 {planning ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
+                  <Icon name="Loader2" className="h-4 w-4 animate-spin" />
                 ) : agenda.length ? (
                   "Refine"
                 ) : (
@@ -331,7 +320,7 @@ export default function MeetingPrep({ meeting, onChanged, onSendBot }: Props) {
 
           <section className="rounded-xl border border-border bg-card p-3">
             <p className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              <BookOpen className="h-3.5 w-3.5" /> Briefing
+              <Icon name="BookOpen" className="h-3.5 w-3.5" /> Briefing
             </p>
             <textarea
               value={brief}
@@ -394,7 +383,7 @@ export default function MeetingPrep({ meeting, onChanged, onSendBot }: Props) {
 
           <section className="rounded-xl border border-border bg-card p-3">
             <p className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              <Users className="h-3.5 w-3.5" /> Attendees
+              <Icon name="Users" className="h-3.5 w-3.5" /> Attendees
             </p>
             <div className="mb-2 flex flex-wrap gap-1.5">
               {attendees.map((a: Attendee, i: number) => (
@@ -409,7 +398,7 @@ export default function MeetingPrep({ meeting, onChanged, onSendBot }: Props) {
                     className="text-muted-foreground hover:text-destructive"
                     aria-label={`Remove ${a.name || a.email}`}
                   >
-                    <X className="h-3 w-3" />
+                    <Icon name="X" className="h-3 w-3" />
                   </button>
                 </span>
               ))}
@@ -491,7 +480,7 @@ export default function MeetingPrep({ meeting, onChanged, onSendBot }: Props) {
           </section>
 
           <section className="flex items-center gap-3 rounded-xl border border-border bg-card p-3">
-            <Sparkles className="h-4 w-4 shrink-0 text-primary" />
+            <Icon name="Sparkles" className="h-4 w-4 shrink-0 text-primary" />
             <div className="min-w-0 flex-1">
               <p className="text-sm font-medium">Meeting copilot</p>
               <p className="text-[11px] text-muted-foreground">
@@ -532,19 +521,19 @@ export default function MeetingPrep({ meeting, onChanged, onSendBot }: Props) {
           onClick={() => router.push(`/notes/session/${id}`)}
           className="inline-flex items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
         >
-          <Mic className="h-4 w-4" /> Record here
+          <Icon name="Mic" className="h-4 w-4" /> Record here
         </button>
         <button
           onClick={onSendBot}
           className="inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-sm hover:bg-secondary"
         >
-          <Video className="h-4 w-4" /> Send notetaker to a call
+          <Icon name="Video" className="h-4 w-4" /> Send notetaker to a call
         </button>
         <label className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-sm hover:bg-secondary">
           {uploading ? (
-            <Loader2 className="h-4 w-4 animate-spin" />
+            <Icon name="Loader2" className="h-4 w-4 animate-spin" />
           ) : (
-            <Upload className="h-4 w-4" />
+            <Icon name="Upload" className="h-4 w-4" />
           )}
           {uploading ? "Uploading…" : "Upload a recording"}
           <input
@@ -561,7 +550,7 @@ export default function MeetingPrep({ meeting, onChanged, onSendBot }: Props) {
         </label>
         {filled > 0 && (
           <span className="ml-auto inline-flex items-center gap-1 text-[11px] text-success">
-            <Check className="h-3.5 w-3.5" /> Prepared
+            <Icon name="Check" className="h-3.5 w-3.5" /> Prepared
           </span>
         )}
       </div>
diff --git a/workbench/control_plane/src/app/notes/components/MicPicker.tsx b/workbench/control_plane/src/app/notes/components/MicPicker.tsx
index 53147416..6d47ab81 100644
--- a/workbench/control_plane/src/app/notes/components/MicPicker.tsx
+++ b/workbench/control_plane/src/app/notes/components/MicPicker.tsx
@@ -12,8 +12,8 @@
  * recording capture — that starts fresh from the selected deviceId.
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { AlertCircle, Check, ChevronDown, Mic, MicOff } from "lucide-react";
 import { listMicrophones, type MicDevice } from "../lib/recorder";
 
 export const MIC_STORAGE_KEY = "notes.micDeviceId";
@@ -154,12 +154,12 @@ export function MicPicker({ value, onChange, disabled }: MicPickerProps) {
           className="flex w-full items-center gap-2 rounded-xl border border-border bg-card px-3 py-2.5 text-left text-sm text-foreground hover:border-primary/40 tech-transition"
         >
           {ready ? (
-            <Mic className="w-4 h-4 shrink-0 text-primary" />
+            <Icon name="Mic" className="w-4 h-4 shrink-0 text-primary" />
           ) : (
-            <MicOff className="w-4 h-4 shrink-0 text-muted-foreground" />
+            <Icon name="MicOff" className="w-4 h-4 shrink-0 text-muted-foreground" />
           )}
           <span className="min-w-0 flex-1 truncate">{selectedLabel}</span>
-          <ChevronDown className="w-4 h-4 shrink-0 text-muted-foreground" />
+          <Icon name="ChevronDown" className="w-4 h-4 shrink-0 text-muted-foreground" />
         </button>
 
         {open && (
@@ -169,7 +169,7 @@ export function MicPicker({ value, onChange, disabled }: MicPickerProps) {
               className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-secondary tech-transition"
             >
               <span className="min-w-0 flex-1 truncate">Default microphone</span>
-              {value === null && <Check className="w-3.5 h-3.5 text-primary" />}
+              {value === null && <Icon name="Check" className="w-3.5 h-3.5 text-primary" />}
             </button>
             {devices
               .filter((d) => d.deviceId)
@@ -183,7 +183,7 @@ export function MicPicker({ value, onChange, disabled }: MicPickerProps) {
                     {d.label || `Microphone ${i + 1}`}
                   </span>
                   {value === d.deviceId && (
-                    <Check className="w-3.5 h-3.5 text-primary" />
+                    <Icon name="Check" className="w-3.5 h-3.5 text-primary" />
                   )}
                 </button>
               ))}
@@ -211,7 +211,7 @@ export function MicPicker({ value, onChange, disabled }: MicPickerProps) {
       <p className="mt-1.5 px-1 text-[11px] text-muted-foreground">
         {err ? (
           <span className="inline-flex items-center gap-1 text-destructive">
-            <AlertCircle className="w-3 h-3 shrink-0" />
+            <Icon name="AlertCircle" className="w-3 h-3 shrink-0" />
             {err}
           </span>
         ) : ready ? (
diff --git a/workbench/control_plane/src/app/notes/components/NotesSettingsModal.tsx b/workbench/control_plane/src/app/notes/components/NotesSettingsModal.tsx
index e3c16e66..7fc8aa7e 100644
--- a/workbench/control_plane/src/app/notes/components/NotesSettingsModal.tsx
+++ b/workbench/control_plane/src/app/notes/components/NotesSettingsModal.tsx
@@ -12,8 +12,8 @@
  * can see what it *would* do before deciding to override it.
  */
 
+import Icon from "@/components/Icon";
 import { useEffect, useState } from "react";
-import { Loader2, Send, Settings2, Sparkles, X } from "lucide-react";
 import { getNotesSettings, saveNotesSettings } from "../lib/api";
 import type { NotesSettings, TemplateInfo } from "../lib/types";
 import BotIdentitySection from "./BotIdentitySection";
@@ -131,20 +131,20 @@ export default function NotesSettingsModal({ onClose }: { onClose: () => void })
       <div className="absolute inset-0 bg-black/60" onClick={onClose} />
       <div className="relative flex max-h-[85vh] w-full max-w-2xl flex-col rounded-2xl border border-border bg-card shadow-2xl">
         <div className="flex items-center gap-2 border-b border-border px-4 py-3">
-          <Settings2 className="h-4 w-4 text-primary" />
+          <Icon name="Settings2" className="h-4 w-4 text-primary" />
           <h2 className="flex-1 text-sm font-semibold">Note Taker settings</h2>
           <button
             onClick={onClose}
             className="text-muted-foreground hover:text-foreground"
             aria-label="Close"
           >
-            <X className="h-4 w-4" />
+            <Icon name="X" className="h-4 w-4" />
           </button>
         </div>
 
         {loading ? (
           <div className="flex h-48 items-center justify-center">
-            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+            <Icon name="Loader2" className="h-4 w-4 animate-spin text-muted-foreground" />
           </div>
         ) : loadFailed ? (
           <div className="px-4 py-8 text-center text-sm text-destructive">
@@ -162,7 +162,7 @@ export default function NotesSettingsModal({ onClose }: { onClose: () => void })
             {/* ── After-meeting dispatch ──────────────────────────────── */}
             <section>
               <h3 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                <Send className="h-3.5 w-3.5" /> After each meeting
+                <Icon name="Send" className="h-3.5 w-3.5" /> After each meeting
               </h3>
               <p className="mb-2 text-xs text-muted-foreground">
                 Confident action items (≥80%) are dispatched automatically when
@@ -192,7 +192,7 @@ export default function NotesSettingsModal({ onClose }: { onClose: () => void })
             {/* ── Copilot ─────────────────────────────────────────────── */}
             <section>
               <h3 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                <Sparkles className="h-3.5 w-3.5" /> Meeting copilot
+                <Icon name="Sparkles" className="h-3.5 w-3.5" /> Meeting copilot
               </h3>
               <label className="mb-3 flex items-start gap-2">
                 <input
diff --git a/workbench/control_plane/src/app/notes/components/RecordingDock.tsx b/workbench/control_plane/src/app/notes/components/RecordingDock.tsx
index 02bb7690..531dfde1 100644
--- a/workbench/control_plane/src/app/notes/components/RecordingDock.tsx
+++ b/workbench/control_plane/src/app/notes/components/RecordingDock.tsx
@@ -12,8 +12,8 @@
  * pill when both are minimized, so neither is clipped by the menu bar.
  */
 
+import Icon from "@/components/Icon";
 import { usePathname, useRouter } from "next/navigation";
-import { Loader2, Mic, Pause, Play, Square } from "lucide-react";
 import { useTaskStore } from "@/app/tasks/lib/taskStore";
 import { formatClock } from "../lib/api";
 import { isActive, useRecordingStore } from "../lib/recordingStore";
@@ -63,7 +63,7 @@ export function RecordingDock() {
           title="Back to the recording"
         >
           {finalizing ? (
-            <Loader2 className="w-3.5 h-3.5 shrink-0 animate-spin text-primary" />
+            <Icon name="Loader2" className="w-3.5 h-3.5 shrink-0 animate-spin text-primary" />
           ) : (
             <span
               className={`w-2.5 h-2.5 shrink-0 rounded-full ${
@@ -75,7 +75,7 @@ export function RecordingDock() {
             {formatClock(elapsed)}
           </span>
           <span className="flex min-w-0 items-center gap-1 truncate text-xs text-muted-foreground">
-            <Mic className="w-3 h-3 shrink-0" />
+            <Icon name="Mic" className="w-3 h-3 shrink-0" />
             <span className="truncate">
               {finalizing
                 ? "Finishing…"
@@ -94,9 +94,9 @@ export function RecordingDock() {
               aria-label={paused ? "Resume" : "Pause"}
             >
               {paused ? (
-                <Play className="w-4 h-4" />
+                <Icon name="Play" className="w-4 h-4" />
               ) : (
-                <Pause className="w-4 h-4" />
+                <Icon name="Pause" className="w-4 h-4" />
               )}
             </button>
             <button
@@ -104,7 +104,7 @@ export function RecordingDock() {
               className="rounded-lg bg-destructive/15 p-1.5 text-destructive hover:bg-destructive/25 tech-transition"
               aria-label="Stop and transcribe"
             >
-              <Square className="w-4 h-4 fill-current" />
+              <Icon name="Square" className="w-4 h-4 fill-current" />
             </button>
           </>
         )}
diff --git a/workbench/control_plane/src/app/notes/live/[id]/page.tsx b/workbench/control_plane/src/app/notes/live/[id]/page.tsx
index a8891726..82d65108 100644
--- a/workbench/control_plane/src/app/notes/live/[id]/page.tsx
+++ b/workbench/control_plane/src/app/notes/live/[id]/page.tsx
@@ -21,21 +21,9 @@
  * Meet call, or your own mic. Reattaches by id, so a refresh never drops it.
  */
 
+import Icon from "@/components/Icon";
 import { use, useCallback, useEffect, useRef, useState } from "react";
 import Link from "next/link";
-import {
-  ArrowLeft,
-  Bot,
-  Check,
-  Circle,
-  ListChecks,
-  Loader2,
-  Mic,
-  Settings2,
-  Sparkles,
-  Square,
-  Users,
-} from "lucide-react";
 import { speakerEdge, speakerText } from "../../lib/speakers";
 import {
   getAgendaProgress,
@@ -228,7 +216,7 @@ export default function LiveConsolePage({
   if (loading) {
     return (
       <div className="flex min-h-[60vh] items-center justify-center">
-        <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+        <Icon name="Loader2" className="h-5 w-5 animate-spin text-muted-foreground" />
       </div>
     );
   }
@@ -243,7 +231,7 @@ export default function LiveConsolePage({
           href={`/notes/meeting/${id}`}
           className="mt-4 inline-flex items-center gap-1.5 text-sm text-primary hover:underline"
         >
-          <ArrowLeft className="h-4 w-4" /> Open the meeting
+          <Icon name="ArrowLeft" className="h-4 w-4" /> Open the meeting
         </Link>
       </div>
     );
@@ -258,7 +246,7 @@ export default function LiveConsolePage({
           className="text-muted-foreground hover:text-foreground"
           aria-label="Back to notes"
         >
-          <ArrowLeft className="h-4 w-4" />
+          <Icon name="ArrowLeft" className="h-4 w-4" />
         </Link>
         <div className="min-w-0">
           <h1 className="truncate text-base font-bold sm:text-lg">
@@ -266,9 +254,9 @@ export default function LiveConsolePage({
           </h1>
           <p className="mt-0.5 flex items-center gap-2 text-xs text-muted-foreground">
             {session.source === "bot" ? (
-              <Bot className="h-3.5 w-3.5" />
+              <Icon name="Bot" className="h-3.5 w-3.5" />
             ) : (
-              <Mic className="h-3.5 w-3.5" />
+              <Icon name="Mic" className="h-3.5 w-3.5" />
             )}
             {session.source === "bot" ? "Notetaker in call" : "Recording here"}
             {roster.length > 0 && <span>· {roster.length} speakers</span>}
@@ -298,7 +286,7 @@ export default function LiveConsolePage({
             title="Agenda, briefing and context for this meeting"
             aria-label="Meeting setup"
           >
-            <Settings2 className="h-4 w-4" />
+            <Icon name="Settings2" className="h-4 w-4" />
           </Link>
           <button
             onClick={onToggleCopilot}
@@ -309,7 +297,7 @@ export default function LiveConsolePage({
                 : "border-border text-muted-foreground hover:bg-secondary"
             }`}
           >
-            <Sparkles className="h-4 w-4" />
+            <Icon name="Sparkles" className="h-4 w-4" />
             {busy ? "…" : session.copilot_enabled ? "Copilot on" : "Copilot off"}
           </button>
           {/* Ending the meeting belongs HERE — this is the screen you're on
@@ -326,7 +314,7 @@ export default function LiveConsolePage({
                   : "Stop recording"
               }
             >
-              <Square className="h-3.5 w-3.5 fill-current" />
+              <Icon name="Square" className="h-3.5 w-3.5 fill-current" />
               {ending ? "Ending…" : session.source === "bot" ? "End" : "Stop"}
             </button>
           )}
@@ -393,7 +381,7 @@ export default function LiveConsolePage({
           {/* Copilot output arrives here. */}
           <section>
             <p className="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-primary">
-              <Sparkles className="h-3.5 w-3.5" /> Copilot
+              <Icon name="Sparkles" className="h-3.5 w-3.5" /> Copilot
               {tips.length > 0 && (
                 <span className="font-mono text-[10px] normal-case tracking-normal opacity-70">
                   {tips.length}
@@ -441,7 +429,7 @@ export default function LiveConsolePage({
           {progress && progress.total > 0 && (
             <section>
               <p className="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
-                <ListChecks className="h-3.5 w-3.5" /> Agenda
+                <Icon name="ListChecks" className="h-3.5 w-3.5" /> Agenda
                 <span className="font-mono text-[10px] normal-case tracking-normal opacity-70">
                   {progress.covered_count} of {progress.total}
                   {progress.elapsed_s > 60 &&
@@ -469,9 +457,9 @@ export default function LiveConsolePage({
                     }`}
                   >
                     {it.covered ? (
-                      <Check className="mt-0.5 h-3.5 w-3.5 shrink-0 text-success" />
+                      <Icon name="Check" className="mt-0.5 h-3.5 w-3.5 shrink-0 text-success" />
                     ) : (
-                      <Circle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-warning/70" />
+                      <Icon name="Circle" className="mt-0.5 h-3.5 w-3.5 shrink-0 text-warning/70" />
                     )}
                     <span
                       className={
@@ -496,7 +484,7 @@ export default function LiveConsolePage({
           {/* Who's on the call, per the live voiceprint gallery. */}
           <section>
             <p className="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
-              <Users className="h-3.5 w-3.5" /> In the room
+              <Icon name="Users" className="h-3.5 w-3.5" /> In the room
             </p>
             {roster.length === 0 ? (
               <p className="text-sm text-muted-foreground">
diff --git a/workbench/control_plane/src/app/notes/meeting/[id]/page.tsx b/workbench/control_plane/src/app/notes/meeting/[id]/page.tsx
index 6c5abb84..02656e35 100644
--- a/workbench/control_plane/src/app/notes/meeting/[id]/page.tsx
+++ b/workbench/control_plane/src/app/notes/meeting/[id]/page.tsx
@@ -6,29 +6,9 @@
  * generated notes + draft action items on top of slice 0's transcript view.
  */
 
+import Icon, { themedIcon } from "@/components/Icon";
 import { use, useCallback, useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
-import {
-  AlertTriangle,
-  ArrowLeft,
-  Check,
-  CheckSquare,
-  Clock,
-  ExternalLink,
-  FileText,
-  Loader2,
-  Mail,
-  Pencil,
-  Play,
-  Plus,
-  RefreshCw,
-  Radio,
-  Sparkles,
-  Trash2,
-  Users,
-  Video,
-  X,
-} from "lucide-react";
 import Link from "next/link";
 import MarkdownMessage from "@/components/MarkdownMessage";
 import AskPanel from "../../components/AskPanel";
@@ -457,7 +437,7 @@ export default function MeetingPage({
             className="shrink-0 p-2 rounded-lg border border-border text-muted-foreground hover:bg-secondary tech-transition"
             aria-label="Back to notes"
           >
-            <ArrowLeft className="w-4 h-4" />
+            <Icon name="ArrowLeft" className="w-4 h-4" />
           </button>
           <div className="min-w-0">
             <h1 className="text-base sm:text-lg font-bold text-foreground truncate">
@@ -481,7 +461,7 @@ export default function MeetingPage({
               title="Draft a follow-up email"
             >
               <span className="flex items-center gap-1.5">
-                <Mail className="w-4 h-4" />
+                <Icon name="Mail" className="w-4 h-4" />
                 <span className="hidden sm:inline">Follow-up</span>
               </span>
             </button>
@@ -496,11 +476,11 @@ export default function MeetingPage({
             >
               <span className="flex items-center gap-1.5">
                 {summarizing ? (
-                  <Loader2 className="w-4 h-4 animate-spin" />
+                  <Icon name="Loader2" className="w-4 h-4 animate-spin" />
                 ) : notesMd ? (
-                  <RefreshCw className="w-4 h-4" />
+                  <Icon name="RefreshCw" className="w-4 h-4" />
                 ) : (
-                  <Sparkles className="w-4 h-4" />
+                  <Icon name="Sparkles" className="w-4 h-4" />
                 )}
                 <span className="hidden sm:inline">
                   {notesMd ? "Regenerate" : "Generate notes"}
@@ -519,7 +499,7 @@ export default function MeetingPage({
             aria-label="Refresh"
             title="Refresh"
           >
-            <RefreshCw className={`w-4 h-4 ${refreshing ? "animate-spin" : ""}`} />
+            <Icon name="RefreshCw" className={`w-4 h-4 ${refreshing ? "animate-spin" : ""}`} />
           </button>
           {meeting && (
             <button
@@ -543,9 +523,9 @@ export default function MeetingPage({
               title="Delete this meeting"
             >
               {deleting ? (
-                <Loader2 className="w-4 h-4 animate-spin" />
+                <Icon name="Loader2" className="w-4 h-4 animate-spin" />
               ) : (
-                <Trash2 className="w-4 h-4" />
+                <Icon name="Trash2" className="w-4 h-4" />
               )}
             </button>
           )}
@@ -562,7 +542,7 @@ export default function MeetingPage({
 
           {toast && (
             <div className="rounded-lg bg-success/10 px-3 py-2 text-sm text-success flex items-center gap-2">
-              <Check className="w-4 h-4" />
+              <Icon name="Check" className="w-4 h-4" />
               {toast}
             </div>
           )}
@@ -601,13 +581,13 @@ export default function MeetingPage({
               )}
               {meeting.duration_s != null && (
                 <span className={chipCls}>
-                  <Clock className="w-3 h-3" />
+                  <Icon name="Clock" className="w-3 h-3" />
                   {formatClock(meeting.duration_s)}
                 </span>
               )}
               {speakerLabels.length > 0 && (
                 <span className={chipCls}>
-                  <Users className="w-3 h-3" />
+                  <Icon name="Users" className="w-3 h-3" />
                   {speakerLabels.length} speaker
                   {speakerLabels.length > 1 ? "s" : ""}
                 </span>
@@ -644,7 +624,7 @@ export default function MeetingPage({
                     className="text-muted-foreground hover:text-destructive"
                     aria-label="Remove attendee"
                   >
-                    <X className="w-3 h-3" />
+                    <Icon name="X" className="w-3 h-3" />
                   </button>
                 </span>
               ))}
@@ -667,7 +647,7 @@ export default function MeetingPage({
                   className="p-1 rounded-md border border-border text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition"
                   aria-label="Add attendee"
                 >
-                  <Plus className="w-3.5 h-3.5" />
+                  <Icon name="Plus" className="w-3.5 h-3.5" />
                 </button>
               </span>
             </div>
@@ -685,7 +665,7 @@ export default function MeetingPage({
               }`}
             >
               <div className="flex items-center gap-3">
-                <Video
+                <Icon name="Video"
                   className={`w-5 h-5 shrink-0 ${
                     botFailed ? "text-destructive" : "text-primary"
                   }`}
@@ -711,14 +691,14 @@ export default function MeetingPage({
                     href={`/notes/live/${id}`}
                     className="shrink-0 inline-flex items-center gap-1.5 rounded-lg border border-primary/30 px-2.5 py-1.5 text-xs text-primary hover:bg-primary/10 tech-transition"
                   >
-                    <Radio className="w-3.5 h-3.5" />
+                    <Icon name="Radio" className="w-3.5 h-3.5" />
                     Live console
                   </Link>
                 )}
               </div>
               {botFailed && bot.error && (
                 <p className="mt-2 flex items-start gap-1.5 rounded-lg bg-destructive/10 px-2.5 py-1.5 text-xs leading-relaxed text-destructive">
-                  <AlertTriangle className="mt-0.5 w-3.5 h-3.5 shrink-0" />
+                  <Icon name="AlertTriangle" className="mt-0.5 w-3.5 h-3.5 shrink-0" />
                   <span>{bot.error}</span>
                 </p>
               )}
@@ -773,7 +753,7 @@ export default function MeetingPage({
 
           {busy && (
             <div className="rounded-xl border border-border bg-card p-4 flex items-center gap-3">
-              <Loader2 className="w-4 h-4 animate-spin text-warning" />
+              <Icon name="Loader2" className="w-4 h-4 animate-spin text-warning" />
               <div className="min-w-0">
                 <p className="text-sm font-semibold text-foreground">
                   {progress?.runs.find((r) => r.status === "running")?.kind ===
@@ -866,7 +846,7 @@ export default function MeetingPage({
               {showDiarizeHint && (
                 <div className="mb-3 rounded-xl border border-amber-500/30 bg-amber-500/5 p-3">
                   <div className="flex items-start gap-2.5">
-                    <Users className="w-4 h-4 text-amber-500 shrink-0 mt-0.5" />
+                    <Icon name="Users" className="w-4 h-4 text-amber-500 shrink-0 mt-0.5" />
                     <div className="min-w-0 space-y-2">
                       <p className="text-xs text-foreground">
                         <span className="font-semibold">
@@ -888,9 +868,9 @@ export default function MeetingPage({
                         className="inline-flex items-center gap-1.5 rounded-lg border border-border bg-card px-2.5 py-1 text-xs font-medium text-foreground hover:bg-muted tech-transition disabled:opacity-60"
                       >
                         {retranscribing ? (
-                          <Loader2 className="w-3 h-3 animate-spin" />
+                          <Icon name="Loader2" className="w-3 h-3 animate-spin" />
                         ) : (
-                          <RefreshCw className="w-3 h-3" />
+                          <Icon name="RefreshCw" className="w-3 h-3" />
                         )}
                         Re-transcribe
                       </button>
@@ -913,9 +893,9 @@ export default function MeetingPage({
                       title="Detect who's who from lines like “Hi, I'm Priya”"
                     >
                       {identifying ? (
-                        <Loader2 className="w-3 h-3 animate-spin" />
+                        <Icon name="Loader2" className="w-3 h-3 animate-spin" />
                       ) : (
-                        <Sparkles className="w-3 h-3" />
+                        <Icon name="Sparkles" className="w-3 h-3" />
                       )}
                       {identifying ? "Detecting…" : "Auto-detect names"}
                     </button>
@@ -934,7 +914,7 @@ export default function MeetingPage({
                         className="shrink-0 flex items-center gap-1 text-[10px] font-mono text-muted-foreground hover:text-primary tech-transition mt-0.5"
                         title="Play from here"
                       >
-                        <Play className="w-3 h-3" />
+                        <Icon name="Play" className="w-3 h-3" />
                         {formatClock(seg.start_s)}
                       </button>
                       <div className="min-w-0">
@@ -954,7 +934,7 @@ export default function MeetingPage({
                             >
                               {displayName(seg.speaker_label)}
                             </span>
-                            <Pencil className="w-2.5 h-2.5 text-muted-foreground opacity-0 group-hover:opacity-100 tech-transition" />
+                            <Icon name="Pencil" className="w-2.5 h-2.5 text-muted-foreground opacity-0 group-hover:opacity-100 tech-transition" />
                           </button>
                         ) : seg.channel ? (
                           <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
@@ -1027,7 +1007,7 @@ export default function MeetingPage({
                   </div>
                 ) : (
                   <div className="rounded-xl border border-border bg-card p-6 text-center">
-                    <Sparkles className="w-6 h-6 mx-auto text-muted-foreground mb-2" />
+                    <Icon name="Sparkles" className="w-6 h-6 mx-auto text-muted-foreground mb-2" />
                     <p className="text-xs text-muted-foreground">
                       {busy
                         ? "Notes will appear once the transcript is ready."
@@ -1061,7 +1041,7 @@ export default function MeetingPage({
                                 title="Jump to this moment in the transcript"
                                 className="inline-flex items-center gap-0.5 rounded-md border border-border bg-muted/40 px-1.5 py-0.5 text-[10px] font-mono text-muted-foreground hover:text-primary hover:border-primary/30 tech-transition"
                               >
-                                <Play className="w-2.5 h-2.5" />
+                                <Icon name="Play" className="w-2.5 h-2.5" />
                                 {formatClock(seg.start_s)}
                               </button>
                             );
@@ -1081,7 +1061,7 @@ export default function MeetingPage({
                 <div>
                   <div className="flex items-center justify-between mb-2">
                     <h2 className="text-sm font-semibold text-foreground flex items-center gap-1.5">
-                      <CheckSquare className="w-4 h-4" />
+                      <Icon name="CheckSquare" className="w-4 h-4" />
                       Action items
                     </h2>
                     {actions.some(
@@ -1102,10 +1082,10 @@ export default function MeetingPage({
                       const rowBusy = actioning === a.id || actioning === "all";
                       const KindIcon =
                         a.kind === "email"
-                          ? Mail
+                          ? themedIcon("Mail")
                           : a.kind === "document"
-                            ? FileText
-                            : CheckSquare;
+                            ? themedIcon("FileText")
+                            : themedIcon("CheckSquare");
                       const kindLabel =
                         a.kind === "email"
                           ? "Email"
@@ -1144,7 +1124,7 @@ export default function MeetingPage({
                           )}
                           {a.dispatch_error && a.status !== "created" && (
                             <p className="mt-1.5 flex items-start gap-1 rounded-md bg-destructive/10 px-2 py-1 text-[11px] text-destructive">
-                              <AlertTriangle className="mt-0.5 w-3 h-3 shrink-0" />
+                              <Icon name="AlertTriangle" className="mt-0.5 w-3 h-3 shrink-0" />
                               {a.dispatch_error}
                             </p>
                           )}
@@ -1180,7 +1160,7 @@ export default function MeetingPage({
                                     title="Jump to this moment in the transcript"
                                     className="inline-flex items-center gap-0.5 rounded-md border border-border bg-muted/40 px-1.5 py-0.5 text-[10px] font-mono text-muted-foreground hover:text-primary hover:border-primary/30 tech-transition"
                                   >
-                                    <Play className="w-2.5 h-2.5" />
+                                    <Icon name="Play" className="w-2.5 h-2.5" />
                                     {seg ? formatClock(seg.start_s) : "source"}
                                   </button>
                                 );
@@ -1196,9 +1176,9 @@ export default function MeetingPage({
                                   className="flex-1 flex items-center justify-center gap-1 rounded-md bg-primary/10 text-primary px-2 py-1 text-xs hover:bg-primary/20 tech-transition disabled:opacity-60"
                                 >
                                   {rowBusy ? (
-                                    <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                                    <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" />
                                   ) : (
-                                    <Check className="w-3.5 h-3.5" />
+                                    <Icon name="Check" className="w-3.5 h-3.5" />
                                   )}
                                   {a.kind === "email"
                                     ? "Approve → Send email"
@@ -1213,14 +1193,14 @@ export default function MeetingPage({
                                   title="Reject"
                                   className="flex items-center justify-center gap-1 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:text-destructive hover:border-destructive/30 tech-transition disabled:opacity-60"
                                 >
-                                  <X className="w-3.5 h-3.5" />
+                                  <Icon name="X" className="w-3.5 h-3.5" />
                                 </button>
                               </>
                             )}
                             {a.status === "created" &&
                               (a.kind === "email" ? (
                                 <span className="flex items-center gap-1 text-xs text-success">
-                                  <Mail className="w-3.5 h-3.5" />
+                                  <Icon name="Mail" className="w-3.5 h-3.5" />
                                   {a.dispatch_ref?.startsWith("sent:")
                                     ? "Email sent"
                                     : "Drafted in your mailbox"}
@@ -1230,9 +1210,9 @@ export default function MeetingPage({
                                   href="/artifacts"
                                   className="flex items-center gap-1 text-xs text-success hover:underline"
                                 >
-                                  <FileText className="w-3.5 h-3.5" /> Draft in
+                                  <Icon name="FileText" className="w-3.5 h-3.5" /> Draft in
                                   Artifacts
-                                  <ExternalLink className="w-3 h-3" />
+                                  <Icon name="ExternalLink" className="w-3 h-3" />
                                 </Link>
                               ) : (
                                 <Link
@@ -1243,8 +1223,8 @@ export default function MeetingPage({
                                   }
                                   className="flex items-center gap-1 text-xs text-success hover:underline"
                                 >
-                                  <Check className="w-3.5 h-3.5" /> In Tasks
-                                  <ExternalLink className="w-3 h-3" />
+                                  <Icon name="Check" className="w-3.5 h-3.5" /> In Tasks
+                                  <Icon name="ExternalLink" className="w-3 h-3" />
                                 </Link>
                               ))}
                             {a.status === "rejected" && (
@@ -1364,9 +1344,9 @@ export default function MeetingPage({
                 className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50 tech-transition"
               >
                 {savingSpeaker ? (
-                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                  <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" />
                 ) : (
-                  <Check className="w-3.5 h-3.5" />
+                  <Icon name="Check" className="w-3.5 h-3.5" />
                 )}
                 Save
               </button>
diff --git a/workbench/control_plane/src/app/notes/page.tsx b/workbench/control_plane/src/app/notes/page.tsx
index 39006d30..d685a1fd 100644
--- a/workbench/control_plane/src/app/notes/page.tsx
+++ b/workbench/control_plane/src/app/notes/page.tsx
@@ -18,21 +18,9 @@
  * meeting before you'd said what it was. Template now lives in prep.
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
-import {
-  AudioLines,
-  BookMarked,
-  CalendarPlus,
-  Clock,
-  Loader2,
-  Mic,
-  Search,
-  Settings2,
-  Upload,
-  Users,
-  Video,
-} from "lucide-react";
 import { createMeeting, formatClock, listMeetings, uploadRecording } from "./lib/api";
 import { bandOf, groupIntoBands, isPrepared, outcomeLine } from "./lib/bands";
 import { useViewMode } from "@/components/ViewModeProvider";
@@ -239,7 +227,7 @@ export default function NotesPage() {
               className="tech-transition flex-1 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground"
             >
               <span className="flex items-center justify-center gap-1.5">
-                <CalendarPlus className="h-4 w-4" /> New meeting
+                <Icon name="CalendarPlus" className="h-4 w-4" /> New meeting
               </span>
             </button>
             <button
@@ -247,7 +235,7 @@ export default function NotesPage() {
               className="tech-transition shrink-0 rounded-lg border border-border p-2 text-muted-foreground"
               aria-label="Note Taker settings"
             >
-              <Settings2 className="h-4 w-4" />
+              <Icon name="Settings2" className="h-4 w-4" />
             </button>
           </div>
         )}
@@ -260,7 +248,7 @@ export default function NotesPage() {
               title="Glossary — teach transcription your jargon"
               aria-label="Glossary"
             >
-              <BookMarked className="h-4 w-4" />
+              <Icon name="BookMarked" className="h-4 w-4" />
             </button>
             <button
               onClick={() => setShowSettings(true)}
@@ -268,7 +256,7 @@ export default function NotesPage() {
               title="Note Taker settings — copilot behaviour, meeting types, defaults"
               aria-label="Note Taker settings"
             >
-              <Settings2 className="h-4 w-4" />
+              <Icon name="Settings2" className="h-4 w-4" />
             </button>
 
             {/* One primary action. Everything that starts a meeting lives
@@ -281,7 +269,7 @@ export default function NotesPage() {
                   title="Set up a meeting — agenda, briefing, who's coming — before it starts"
                 >
                   <span className="flex items-center gap-1.5">
-                    <CalendarPlus className="h-4 w-4" /> New meeting
+                    <Icon name="CalendarPlus" className="h-4 w-4" /> New meeting
                   </span>
                 </button>
                 <button
@@ -302,7 +290,7 @@ export default function NotesPage() {
                     }}
                     className="flex w-full items-center gap-2.5 px-3 py-2.5 text-left text-sm hover:bg-secondary"
                   >
-                    <Mic className="h-4 w-4 text-muted-foreground" />
+                    <Icon name="Mic" className="h-4 w-4 text-muted-foreground" />
                     <span>
                       Record here
                       <span className="block text-[11px] text-muted-foreground">
@@ -317,7 +305,7 @@ export default function NotesPage() {
                     }}
                     className="flex w-full items-center gap-2.5 px-3 py-2.5 text-left text-sm hover:bg-secondary"
                   >
-                    <Video className="h-4 w-4 text-muted-foreground" />
+                    <Icon name="Video" className="h-4 w-4 text-muted-foreground" />
                     <span>
                       Send a notetaker
                       <span className="block text-[11px] text-muted-foreground">
@@ -334,9 +322,9 @@ export default function NotesPage() {
                     className="flex w-full items-center gap-2.5 px-3 py-2.5 text-left text-sm hover:bg-secondary disabled:opacity-60"
                   >
                     {uploading ? (
-                      <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                      <Icon name="Loader2" className="h-4 w-4 animate-spin text-muted-foreground" />
                     ) : (
-                      <Upload className="h-4 w-4 text-muted-foreground" />
+                      <Icon name="Upload" className="h-4 w-4 text-muted-foreground" />
                     )}
                     <span>
                       {uploading ? "Uploading…" : "Upload a recording"}
@@ -355,7 +343,7 @@ export default function NotesPage() {
       <div className="flex-1 overflow-y-auto">
         <div className="mx-auto max-w-3xl space-y-5 px-4 py-4 sm:px-6">
           <div className="relative">
-            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Icon name="Search" className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
             <input
               value={query}
               onChange={(e) => {
@@ -380,11 +368,11 @@ export default function NotesPage() {
 
           {loading ? (
             <div className="flex items-center justify-center py-16 text-muted-foreground">
-              <Loader2 className="h-5 w-5 animate-spin" />
+              <Icon name="Loader2" className="h-5 w-5 animate-spin" />
             </div>
           ) : meetings.length === 0 ? (
             <div className="space-y-3 rounded-xl border border-border bg-card p-8 text-center">
-              <AudioLines className="mx-auto h-8 w-8 text-muted-foreground" />
+              <Icon name="AudioLines" className="mx-auto h-8 w-8 text-muted-foreground" />
               <p className="text-sm font-semibold text-foreground">No meetings yet</p>
               <p className="mx-auto max-w-sm text-xs text-muted-foreground">
                 Start with <span className="text-foreground">New meeting</span> to
@@ -450,13 +438,13 @@ export default function NotesPage() {
                               <span>{whenLabel(m)}</span>
                               {m.duration_s != null && (
                                 <span className="flex items-center gap-1">
-                                  <Clock className="h-3 w-3" />
+                                  <Icon name="Clock" className="h-3 w-3" />
                                   {formatClock(m.duration_s)}
                                 </span>
                               )}
                               {m.segment_count > 0 && (
                                 <span className="flex items-center gap-1">
-                                  <Users className="h-3 w-3" />
+                                  <Icon name="Users" className="h-3 w-3" />
                                   {m.segment_count} segments
                                 </span>
                               )}
diff --git a/workbench/control_plane/src/app/notes/session/[id]/page.tsx b/workbench/control_plane/src/app/notes/session/[id]/page.tsx
index 51aeb0f9..7ff8e439 100644
--- a/workbench/control_plane/src/app/notes/session/[id]/page.tsx
+++ b/workbench/control_plane/src/app/notes/session/[id]/page.tsx
@@ -9,20 +9,10 @@
  * notes, and we hand off to the meeting detail view.
  */
 
+import Icon from "@/components/Icon";
 import { use, useCallback, useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import {
-  AlertTriangle,
-  ArrowLeft,
-  Loader2,
-  Mic,
-  Pause,
-  Play,
-  Radio,
-  Smartphone,
-  Square,
-} from "lucide-react";
 import {
   LEVEL_BARS,
   isActive,
@@ -173,7 +163,7 @@ export default function SessionPage({
           aria-label="Back"
           title={isLive ? "Recording keeps running — it'll follow you" : "Back"}
         >
-          <ArrowLeft className="w-4 h-4" />
+          <Icon name="ArrowLeft" className="w-4 h-4" />
         </button>
         <div>
           <h1 className="text-base sm:text-lg font-bold text-foreground">
@@ -197,7 +187,7 @@ export default function SessionPage({
         {otherActive && (
           <div className="flex flex-col items-center gap-4 text-center max-w-md">
             <div className="w-16 h-16 rounded-full bg-warning/10 flex items-center justify-center">
-              <Mic className="w-7 h-7 text-warning" />
+              <Icon name="Mic" className="w-7 h-7 text-warning" />
             </div>
             <p className="text-sm text-foreground font-semibold">
               Another recording is in progress
@@ -217,7 +207,7 @@ export default function SessionPage({
         {!otherActive && !active && (
           <div className="flex flex-col items-center gap-6 text-center max-w-md">
             <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center">
-              <Mic className="w-9 h-9 text-primary" />
+              <Icon name="Mic" className="w-9 h-9 text-primary" />
             </div>
             <div>
               <p className="text-sm text-foreground font-semibold">
@@ -269,7 +259,7 @@ export default function SessionPage({
                 the app can still suspend capture — say so plainly. */}
             {wasBackgrounded ? (
               <div className="flex items-start gap-2 rounded-lg bg-warning/10 px-3 py-2 text-xs text-warning max-w-md">
-                <AlertTriangle className="w-3.5 h-3.5 shrink-0 mt-0.5" />
+                <Icon name="AlertTriangle" className="w-3.5 h-3.5 shrink-0 mt-0.5" />
                 <span className="text-left">
                   You switched away from the app. On phones, recording can pause
                   in the background — there may be a gap in the transcript. Keep
@@ -278,7 +268,7 @@ export default function SessionPage({
               </div>
             ) : (
               <p className="flex items-center gap-1.5 text-[11px] text-muted-foreground max-w-md text-center px-4">
-                <Smartphone className="w-3 h-3 shrink-0" />
+                <Icon name="Smartphone" className="w-3 h-3 shrink-0" />
                 On mobile, keep this app open and the screen on — recording
                 pauses if you switch apps or lock the phone.
               </p>
@@ -328,7 +318,7 @@ export default function SessionPage({
                   href={`/notes/live/${id}`}
                   className="mt-2 inline-flex items-center gap-1.5 text-xs text-primary hover:underline"
                 >
-                  <Radio className="h-3.5 w-3.5" />
+                  <Icon name="Radio" className="h-3.5 w-3.5" />
                   Open the live console
                 </Link>
               </div>
@@ -348,9 +338,9 @@ export default function SessionPage({
                 aria-label={phase === "recording" ? "Pause" : "Resume"}
               >
                 {phase === "recording" ? (
-                  <Pause className="w-6 h-6" />
+                  <Icon name="Pause" className="w-6 h-6" />
                 ) : (
-                  <Play className="w-6 h-6" />
+                  <Icon name="Play" className="w-6 h-6" />
                 )}
               </button>
               <button
@@ -358,7 +348,7 @@ export default function SessionPage({
                 className="p-5 rounded-full bg-destructive/15 text-destructive hover:bg-destructive/25 tech-transition"
                 aria-label="Stop and transcribe"
               >
-                <Square className="w-7 h-7 fill-current" />
+                <Icon name="Square" className="w-7 h-7 fill-current" />
               </button>
               <button
                 onClick={discard}
@@ -381,7 +371,7 @@ export default function SessionPage({
 
         {finalizing && (
           <div className="flex flex-col items-center gap-3 text-muted-foreground">
-            <Loader2 className="w-8 h-8 animate-spin text-primary" />
+            <Icon name="Loader2" className="w-8 h-8 animate-spin text-primary" />
             <p className="text-sm">
               Uploading the last audio and starting transcription…
             </p>
diff --git a/workbench/control_plane/src/app/observability/office-topdown.tsx b/workbench/control_plane/src/app/observability/office-topdown.tsx
index 14a469a3..ff24bc67 100644
--- a/workbench/control_plane/src/app/observability/office-topdown.tsx
+++ b/workbench/control_plane/src/app/observability/office-topdown.tsx
@@ -14,58 +14,36 @@
  * wall so they stay correctly placed as it expands/contracts.
  */
 
+import AppIcon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import React from "react";
 
-import {
-  Building2,
-  Calendar,
-  Cog,
-  Coins,
-  Database,
-  FileText,
-  GitBranch,
-  Globe,
-  ListTodo,
-  Mail,
-  MessageCircle,
-  MessageCircleQuestion,
-  PenTool,
-  PencilLine,
-  Search,
-  Send,
-  Share2,
-  Stethoscope,
-  Terminal,
-  TriangleAlert,
-  Wrench,
-} from "lucide-react";
 
 // Granular observability: map the tool an agent is CURRENTLY calling to a lucide icon
 // shown on the agent (top-right badge). Ordered rules — first match wins, most
 // specific first — so any tool name (read_email, gtd_add_task, web_search, git_push…)
 // resolves to a sensible icon, falling back to a generic wrench.
-type IconType = typeof Cog;
+type IconType = ThemedIcon;
 const TOOL_ICON_RULES: Array<[RegExp, IconType]> = [
-  [/send|dispatch|deliver/, Send],
-  [/mail|email|inbox|reply|thread|message/, Mail],
-  [/web|search|browse|google|lookup|find_/, Search],
-  [/diagnos|lint|error|test|verify|check/, Stethoscope],
-  [/git|commit|push|pull|branch|\bpr\b|merge/, GitBranch],
-  [/diagram|draw|chart|render|image|figure/, PenTool],
-  [/artifact|share|export|upload|publish/, Share2],
-  [/task|gtd|todo|ticket|clickup|reclarify/, ListTodo],
-  [/calendar|schedule|meeting|event|remind/, Calendar],
-  [/ask|question|clarify|confirm/, MessageCircleQuestion],
-  [/sql|database|postgres|\bdb\b|record/, Database],
-  [/http|fetch|\bapi\b|url|request/, Globe],
-  [/write|edit|create_|update_|save|note|draft/, PencilLine],
-  [/shell|bash|exec|run_|command|terminal|code|python/, Terminal],
-  [/read|get_|open|view|list|file|doc|load|query/, FileText],
+  [/send|dispatch|deliver/, themedIcon("Send")],
+  [/mail|email|inbox|reply|thread|message/, themedIcon("Mail")],
+  [/web|search|browse|google|lookup|find_/, themedIcon("Search")],
+  [/diagnos|lint|error|test|verify|check/, themedIcon("Stethoscope")],
+  [/git|commit|push|pull|branch|\bpr\b|merge/, themedIcon("GitBranch")],
+  [/diagram|draw|chart|render|image|figure/, themedIcon("PenTool")],
+  [/artifact|share|export|upload|publish/, themedIcon("Share2")],
+  [/task|gtd|todo|ticket|clickup|reclarify/, themedIcon("ListTodo")],
+  [/calendar|schedule|meeting|event|remind/, themedIcon("Calendar")],
+  [/ask|question|clarify|confirm/, themedIcon("MessageCircleQuestion")],
+  [/sql|database|postgres|\bdb\b|record/, themedIcon("Database")],
+  [/http|fetch|\bapi\b|url|request/, themedIcon("Globe")],
+  [/write|edit|create_|update_|save|note|draft/, themedIcon("PencilLine")],
+  [/shell|bash|exec|run_|command|terminal|code|python/, themedIcon("Terminal")],
+  [/read|get_|open|view|list|file|doc|load|query/, themedIcon("FileText")],
 ];
 function toolIcon(tool: string): IconType {
   const t = tool.toLowerCase();
   for (const [re, Icon] of TOOL_ICON_RULES) if (re.test(t)) return Icon;
-  return Wrench;
+  return themedIcon("Wrench");
 }
 
 import { CHARACTER_LIBRARY } from "./character-library.generated";
@@ -294,12 +272,12 @@ function Seat({
           // cog when the tool is unknown. createElement (not JSX) so the dynamic
           // lucide component isn't flagged as a render-local component.
           <span className="oc-badge oc-b-working" title={tool ? `Using ${tool}` : "working"}>
-            {React.createElement(tool ? toolIcon(tool) : Cog, { size: 12, strokeWidth: 2.5 })}
+            {React.createElement(tool ? toolIcon(tool) : themedIcon("Cog"), { size: 12, strokeWidth: 2.5 })}
           </span>
         )}
         {state === "error" && (
           <span className="oc-badge oc-b-error">
-            <TriangleAlert size={12} strokeWidth={2.5} />
+            <AppIcon name="TriangleAlert" size={12} strokeWidth={2.5} />
           </span>
         )}
         {plant && (
@@ -342,7 +320,7 @@ function AppSeat({
           <span className="oc-kiosk-stand" aria-hidden />
         </div>
         <span className="oc-badge oc-b-app" title="Consuming AI tokens">
-          <Coins size={12} strokeWidth={2.5} />
+          <AppIcon name="Coins" size={12} strokeWidth={2.5} />
         </span>
       </div>
       <div className="oc-plate">
@@ -393,7 +371,7 @@ function CrStandee({
     >
       {speaking && (
         <span className="oc-cr-bubble">
-          <MessageCircle size={11} strokeWidth={2.6} />
+          <AppIcon name="MessageCircle" size={11} strokeWidth={2.6} />
         </span>
       )}
       {breathe && nFrames ? (
@@ -543,15 +521,15 @@ export function TopDownOffice({
     <div className="h-full min-h-0 overflow-y-auto pb-24 sm:pb-2">
       <div className="flex items-center justify-between mb-3">
         <div className="oc-mono text-[11px] uppercase tracking-wide text-muted-foreground flex items-center gap-1.5">
-          <Building2 size={13} /> The Office · {workingCount}/{roster.length} at work
+          <AppIcon name="Building2" size={13} /> The Office · {workingCount}/{roster.length} at work
         </div>
         <div className="oc-mono text-[11px] text-emerald-500 flex items-center gap-1">
-          <Coins size={12} /> Today {fmtCost(todayCost)}
+          <AppIcon name="Coins" size={12} /> Today {fmtCost(todayCost)}
         </div>
       </div>
       {roster.length === 0 ? (
         <div className="flex flex-col items-center justify-center h-48 text-center gap-2">
-          <Building2 size={30} className="text-muted-foreground/50" />
+          <AppIcon name="Building2" size={30} className="text-muted-foreground/50" />
           <p className="oc-mono text-sm text-muted-foreground">No agents registered yet.</p>
         </div>
       ) : (
@@ -626,7 +604,7 @@ export function TopDownOffice({
           {collabs.length > 0 && (
             <div className="oc-confs">
               <div className="oc-confs-head">
-                <Building2 size={12} /> {collabs.length === 1 ? "Conference room" : "Conference rooms"} ·{" "}
+                <AppIcon name="Building2" size={12} /> {collabs.length === 1 ? "Conference room" : "Conference rooms"} ·{" "}
                 {collabs.length} in session
               </div>
               <div className="oc-confs-grid">
diff --git a/workbench/control_plane/src/app/observability/page.tsx b/workbench/control_plane/src/app/observability/page.tsx
index 43655753..e0061678 100644
--- a/workbench/control_plane/src/app/observability/page.tsx
+++ b/workbench/control_plane/src/app/observability/page.tsx
@@ -21,11 +21,9 @@
  *   drill-down  GET /api/observability/runs?agent=
  */
 
+import Icon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
-import {
-  AppWindow, Bot, Building2, Coins, Cpu, History as HistoryIcon, Radio, Server,
-} from "lucide-react";
 
 import { CHARACTER_LIBRARY } from "./character-library.generated";
 import { TopDownOffice, TOPDOWN_STYLE } from "./office-topdown";
@@ -240,7 +238,7 @@ function ServerRack({ blades }: { blades: ModelBlade[] }) {
   return (
     <div className="rounded-xl border border-border bg-card/60 p-3">
       <div className="obs-pixel text-[10px] uppercase tracking-wide text-muted-foreground mb-2 flex items-center gap-1.5">
-        <Server size={12} />
+        <Icon name="Server" size={12} />
         <span>Model servers</span>
         <span className="rounded bg-secondary/50 px-1.5 py-0.5">{blades.length} live</span>
       </div>
@@ -334,7 +332,7 @@ function ActivityRow({ e, onOpen, aliases }: { e: ActivityEvent; onOpen: (name:
           isRunLike ? "bg-secondary/40 text-foreground border-border" : "bg-violet-500/10 text-violet-500 border-violet-500/20"
         }`}
       >
-        {isAgent ? <Bot size={11} /> : isApp ? <AppWindow size={11} /> : <Cpu size={11} />}
+        {isAgent ? <Icon name="Bot" size={11} /> : isApp ? <Icon name="AppWindow" size={11} /> : <Icon name="Cpu" size={11} />}
         {isAgent ? "Agent" : isApp ? "App" : "Model"}
       </span>
       <div className="min-w-0 flex-1">
@@ -565,7 +563,7 @@ function HistoryView({ onOpen, aliases }: { onOpen: (name: string) => void; alia
         <p className="text-sm text-muted-foreground p-4 animate-pulse">Loading history…</p>
       ) : runs.length === 0 ? (
         <div className="flex flex-col items-center justify-center h-40 text-center gap-2">
-          <HistoryIcon size={26} className="text-muted-foreground/50" />
+          <Icon name="History" size={26} className="text-muted-foreground/50" />
           <p className="text-sm text-muted-foreground">No runs recorded yet.</p>
           <p className="text-xs text-muted-foreground/60">
             Completed agent runs appear here — this list is durable (it survives restarts, unlike the live feed).
@@ -678,7 +676,7 @@ function AgentDrawer({
           </div>
           <div className="text-right shrink-0">
             <div className="flex items-center gap-1 justify-end text-emerald-500 text-sm font-semibold">
-              <Coins size={13} />
+              <Icon name="Coins" size={13} />
               {spend ? fmtCost(spend.cost) : "—"}
             </div>
             <div className="text-[10px] text-muted-foreground/70">
@@ -1057,11 +1055,11 @@ export default function ObservabilityPage() {
   const todayCost = cost?.days.length ? cost.days[cost.days.length - 1].cost : 0;
   const workingNow = roster.filter((a) => a.status === "working" || hotSet.has(a.name)).length;
 
-  const TABS: Array<{ id: Tab; label: string; Icon: typeof Bot }> = [
-    { id: "office", label: "Office", Icon: Building2 },
-    { id: "feed", label: "Live feed", Icon: Radio },
-    { id: "history", label: "History", Icon: HistoryIcon },
-    { id: "cost", label: "Cost", Icon: Coins },
+  const TABS: Array<{ id: Tab; label: string; Icon: ThemedIcon }> = [
+    { id: "office", label: "Office", Icon: themedIcon("Building2") },
+    { id: "feed", label: "Live feed", Icon: themedIcon("Radio") },
+    { id: "history", label: "History", Icon: themedIcon("History") },
+    { id: "cost", label: "Cost", Icon: themedIcon("Coins") },
   ];
 
   return (
@@ -1078,11 +1076,11 @@ export default function ObservabilityPage() {
         </div>
         <div className="flex items-center gap-4 text-xs">
           <div className="flex items-center gap-2">
-            <span className="flex items-center gap-1 text-muted-foreground"><Bot size={13} /> {workingNow} working</span>
+            <span className="flex items-center gap-1 text-muted-foreground"><Icon name="Bot" size={13} /> {workingNow} working</span>
             <span className="text-muted-foreground/40">·</span>
-            <span className="flex items-center gap-1 text-violet-500"><Cpu size={13} /> {blades.length} models</span>
+            <span className="flex items-center gap-1 text-violet-500"><Icon name="Cpu" size={13} /> {blades.length} models</span>
             <span className="text-muted-foreground/40">·</span>
-            <span className="flex items-center gap-1 text-emerald-500"><Coins size={13} /> {fmtCost(todayCost)} today</span>
+            <span className="flex items-center gap-1 text-emerald-500"><Icon name="Coins" size={13} /> {fmtCost(todayCost)} today</span>
           </div>
           <div className="flex items-center gap-1.5">
             <span className={`h-2 w-2 rounded-full ${connected ? "bg-success/80 obs-led" : "bg-muted-foreground/40"}`} />
diff --git a/workbench/control_plane/src/app/settings/groups/page.tsx b/workbench/control_plane/src/app/settings/groups/page.tsx
index af096443..18b72384 100644
--- a/workbench/control_plane/src/app/settings/groups/page.tsx
+++ b/workbench/control_plane/src/app/settings/groups/page.tsx
@@ -15,18 +15,9 @@
  * explicit decision made on their member page.
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useState } from "react";
 import Link from "next/link";
-import {
-  ArrowLeft,
-  Building2,
-  Loader2,
-  Plus,
-  Star,
-  Trash2,
-  UserPlus,
-  X,
-} from "lucide-react";
 import { useAccess } from "@/components/AccessProvider";
 import type { Group, Member } from "../members/types";
 
@@ -133,7 +124,7 @@ export default function GroupsPage() {
             className="rounded-lg border border-border p-2 text-muted-foreground tech-transition hover:bg-secondary"
             aria-label="Back to members"
           >
-            <ArrowLeft size={15} />
+            <Icon name="ArrowLeft" size={15} />
           </Link>
           <div>
             <h1 className="text-base font-bold text-foreground sm:text-lg">Teams</h1>
@@ -146,7 +137,7 @@ export default function GroupsPage() {
           onClick={() => setCreating(true)}
           className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground tech-transition hover:opacity-90 sm:px-4"
         >
-          <Plus size={15} />
+          <Icon name="Plus" size={15} />
           New team
         </button>
       </div>
@@ -155,7 +146,7 @@ export default function GroupsPage() {
         <div className="mx-4 mt-3 flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive sm:mx-6">
           <span className="flex-1">{error}</span>
           <button onClick={() => setError("")} aria-label="Dismiss">
-            <X size={13} />
+            <Icon name="X" size={13} />
           </button>
         </div>
       )}
@@ -163,7 +154,7 @@ export default function GroupsPage() {
         <div className="mx-4 mt-3 flex items-start gap-2 rounded-lg border border-border bg-secondary/40 px-3 py-2 text-xs text-muted-foreground sm:mx-6">
           <span className="flex-1">{notice}</span>
           <button onClick={() => setNotice("")} aria-label="Dismiss">
-            <X size={13} />
+            <Icon name="X" size={13} />
           </button>
         </div>
       )}
@@ -177,7 +168,7 @@ export default function GroupsPage() {
 
         {loading ? (
           <div className="flex items-center gap-2 text-xs text-muted-foreground">
-            <Loader2 size={14} className="animate-spin" /> Loading teams…
+            <Icon name="Loader2" size={14} className="animate-spin" /> Loading teams…
           </div>
         ) : groups.length === 0 ? (
           <p className="text-xs text-muted-foreground">
@@ -206,7 +197,7 @@ export default function GroupsPage() {
                           className="flex items-center gap-1 text-[10px] text-muted-foreground"
                           title={`Pairs with the center.${g.slug} feature — cannot be deleted`}
                         >
-                          <Building2 size={10} /> Center
+                          <Icon name="Building2" size={10} /> Center
                         </span>
                       )}
                     </div>
@@ -220,7 +211,7 @@ export default function GroupsPage() {
                       onClick={() => setAddingTo(g)}
                       className="flex items-center gap-1.5 rounded-lg border border-border px-2.5 py-1.5 text-[11px] text-muted-foreground tech-transition hover:border-primary/30 hover:text-foreground"
                     >
-                      <UserPlus size={12} />
+                      <Icon name="UserPlus" size={12} />
                       Add member
                     </button>
                     {!g.is_center && (
@@ -229,7 +220,7 @@ export default function GroupsPage() {
                         className="rounded-lg bg-destructive/10 p-2 text-destructive tech-transition hover:bg-destructive/20"
                         title="Delete team (must be empty)"
                       >
-                        <Trash2 size={14} />
+                        <Icon name="Trash2" size={14} />
                       </button>
                     )}
                   </div>
@@ -261,7 +252,7 @@ export default function GroupsPage() {
                               : "text-muted-foreground/50 hover:text-warning"
                           }
                         >
-                          <Star
+                          <Icon name="Star"
                             size={11}
                             fill={m.role === "lead" ? "currentColor" : "none"}
                           />
@@ -273,7 +264,7 @@ export default function GroupsPage() {
                           aria-label={`Remove ${m.email} from ${g.display_name}`}
                           title="Remove from team (keeps any Center access — revoke that on their member page)"
                         >
-                          <X size={11} />
+                          <Icon name="X" size={11} />
                         </button>
                       </span>
                     ))}
@@ -379,7 +370,7 @@ function CreateGroupDialog({
             className="rounded-lg p-1 text-muted-foreground hover:bg-secondary"
             aria-label="Close"
           >
-            <X size={15} />
+            <Icon name="X" size={15} />
           </button>
         </div>
 
@@ -432,7 +423,7 @@ function CreateGroupDialog({
             disabled={busy || !slug}
             className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground tech-transition hover:opacity-90 disabled:opacity-50"
           >
-            {busy && <Loader2 size={14} className="animate-spin" />}
+            {busy && <Icon name="Loader2" size={14} className="animate-spin" />}
             Create team
           </button>
         </div>
@@ -498,7 +489,7 @@ function EditGroupDialog({
             className="rounded-lg p-1 text-muted-foreground hover:bg-secondary"
             aria-label="Close"
           >
-            <X size={15} />
+            <Icon name="X" size={15} />
           </button>
         </div>
 
@@ -539,7 +530,7 @@ function EditGroupDialog({
             disabled={busy}
             className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground tech-transition hover:opacity-90 disabled:opacity-50"
           >
-            {busy && <Loader2 size={14} className="animate-spin" />}
+            {busy && <Icon name="Loader2" size={14} className="animate-spin" />}
             Save
           </button>
         </div>
@@ -604,7 +595,7 @@ function AddMemberDialog({
         <div className="mb-4 flex items-start justify-between">
           <div>
             <h2 className="flex items-center gap-2 text-sm font-semibold text-foreground">
-              <UserPlus size={15} /> Add to {group.display_name}
+              <Icon name="UserPlus" size={15} /> Add to {group.display_name}
             </h2>
           </div>
           <button
@@ -612,7 +603,7 @@ function AddMemberDialog({
             className="rounded-lg p-1 text-muted-foreground hover:bg-secondary"
             aria-label="Close"
           >
-            <X size={15} />
+            <Icon name="X" size={15} />
           </button>
         </div>
 
@@ -693,7 +684,7 @@ function AddMemberDialog({
             disabled={busy || !email || candidates.length === 0}
             className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground tech-transition hover:opacity-90 disabled:opacity-50"
           >
-            {busy && <Loader2 size={14} className="animate-spin" />}
+            {busy && <Icon name="Loader2" size={14} className="animate-spin" />}
             Add
           </button>
         </div>
diff --git a/workbench/control_plane/src/app/settings/members/[email]/page.tsx b/workbench/control_plane/src/app/settings/members/[email]/page.tsx
index 6c46b5a7..e5bdd676 100644
--- a/workbench/control_plane/src/app/settings/members/[email]/page.tsx
+++ b/workbench/control_plane/src/app/settings/members/[email]/page.tsx
@@ -21,22 +21,10 @@
  * every row looks deliberately configured hides the two rows that actually are.
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import {
-  ArrowLeft,
-  Bot,
-  Check,
-  Plug,
-  Info,
-  LayoutGrid,
-  Loader2,
-  Save,
-  ShieldOff,
-  Sliders,
-  X,
-} from "lucide-react";
 import { useAccess } from "@/components/AccessProvider";
 import { explainSource, type Decision, type MemberAccess, type Role } from "../types";
 
@@ -179,7 +167,7 @@ export default function MemberAccessPage() {
     return (
       <div className="flex h-full items-center justify-center p-8">
         <div className="max-w-sm rounded-xl border border-border bg-card p-8 text-center">
-          <ShieldOff size={20} className="mx-auto mb-3 text-muted-foreground" />
+          <Icon name="ShieldOff" size={20} className="mx-auto mb-3 text-muted-foreground" />
           <h1 className="text-base font-semibold text-foreground">Admin only</h1>
         </div>
       </div>
@@ -189,7 +177,7 @@ export default function MemberAccessPage() {
   if (loading) {
     return (
       <div className="flex items-center gap-2 p-6 text-xs text-muted-foreground">
-        <Loader2 size={14} className="animate-spin" /> Loading access…
+        <Icon name="Loader2" size={14} className="animate-spin" /> Loading access…
       </div>
     );
   }
@@ -217,7 +205,7 @@ export default function MemberAccessPage() {
             className="rounded-lg border border-border p-2 text-muted-foreground tech-transition hover:bg-secondary"
             aria-label="Back to members"
           >
-            <ArrowLeft size={15} />
+            <Icon name="ArrowLeft" size={15} />
           </Link>
           <div className="min-w-0">
             <h1 className="truncate text-base font-bold text-foreground sm:text-lg">
@@ -233,7 +221,7 @@ export default function MemberAccessPage() {
           disabled={!dirty || saving}
           className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground tech-transition hover:opacity-90 disabled:opacity-40 sm:px-4"
         >
-          {saving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
+          {saving ? <Icon name="Loader2" size={14} className="animate-spin" /> : <Icon name="Save" size={14} />}
           {dirty ? "Save changes" : "Saved"}
         </button>
       </div>
@@ -254,7 +242,7 @@ export default function MemberAccessPage() {
             }}
             aria-label="Dismiss"
           >
-            <X size={13} />
+            <Icon name="X" size={13} />
           </button>
         </div>
       )}
@@ -262,7 +250,7 @@ export default function MemberAccessPage() {
       <div className="flex-1 overflow-y-auto px-4 py-4 sm:px-6">
         {/* Role */}
         <Section
-          icon={<Sliders size={14} />}
+          icon={<Icon name="Sliders" size={14} />}
           title="Role"
           subtitle="The baseline. Everything below adjusts it for this person only."
         >
@@ -281,7 +269,7 @@ export default function MemberAccessPage() {
                   }`}
                 >
                   <div className="flex items-center gap-1.5 text-sm font-medium text-foreground">
-                    {held && <Check size={13} className="text-primary" />}
+                    {held && <Icon name="Check" size={13} className="text-primary" />}
                     {r.display_name}
                   </div>
                   <div className="mt-0.5 max-w-[220px] text-[11px] text-muted-foreground">
@@ -295,7 +283,7 @@ export default function MemberAccessPage() {
 
         {/* Features */}
         <Section
-          icon={<LayoutGrid size={14} />}
+          icon={<Icon name="LayoutGrid" size={14} />}
           title="Apps and features"
           subtitle="Which parts of CommandCenter this person can open."
         >
@@ -311,7 +299,7 @@ export default function MemberAccessPage() {
 
         {/* Agents */}
         <Section
-          icon={<Bot size={14} />}
+          icon={<Icon name="Bot" size={14} />}
           title="Agents"
           subtitle="Which agents this person can run. Denying the role's blanket access and allowing individual agents is the usual pattern."
         >
@@ -322,7 +310,7 @@ export default function MemberAccessPage() {
           ) : (
             <>
               <div className="mb-2 flex items-center gap-2 rounded-lg border border-border bg-secondary/30 px-3 py-2 text-[11px] text-muted-foreground">
-                <Info size={12} className="shrink-0" />
+                <Icon name="Info" size={12} className="shrink-0" />
                 <span>
                   To restrict someone to specific agents, set{" "}
                   <code className="font-mono">agents:run:*</code> below to{" "}
@@ -362,7 +350,7 @@ export default function MemberAccessPage() {
 
         {/* Integrations */}
         <Section
-          icon={<Plug size={14} />}
+          icon={<Icon name="Plug" size={14} />}
           title="Integrations"
           subtitle="Which third-party services an agent may use on this person's behalf. Separate from managing the credentials themselves, which is a capability below."
         >
@@ -405,7 +393,7 @@ export default function MemberAccessPage() {
 
         {/* Capabilities */}
         <Section
-          icon={<Sliders size={14} />}
+          icon={<Icon name="Sliders" size={14} />}
           title="Administration and capabilities"
           subtitle="Platform-level permissions, separate from which apps are visible."
         >
diff --git a/workbench/control_plane/src/app/settings/members/page.tsx b/workbench/control_plane/src/app/settings/members/page.tsx
index ed85db97..6ed27af0 100644
--- a/workbench/control_plane/src/app/settings/members/page.tsx
+++ b/workbench/control_plane/src/app/settings/members/page.tsx
@@ -24,22 +24,9 @@
  * gateway's, and this is only a courtesy (`lib/access.ts:126-129`).
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
-import {
-  AlertTriangle,
-  Check,
-  DoorOpen,
-  Loader2,
-  Plus,
-  RefreshCw,
-  ShieldOff,
-  Trash2,
-  UserMinus,
-  UserPlus,
-  Users,
-  X,
-} from "lucide-react";
 import FilterPills from "@/components/FilterPills";
 import Tabs from "@/components/Tabs";
 import { useAccess } from "@/components/AccessProvider";
@@ -391,7 +378,7 @@ export default function MembersPage() {
     return (
       <div className="flex h-full items-center justify-center p-8">
         <div className="max-w-sm rounded-xl border border-border bg-card p-8 text-center">
-          <ShieldOff size={20} className="mx-auto mb-3 text-muted-foreground" />
+          <Icon name="ShieldOff" size={20} className="mx-auto mb-3 text-muted-foreground" />
           <h1 className="text-base font-semibold text-foreground">
             Members is admin-only
           </h1>
@@ -420,7 +407,7 @@ export default function MembersPage() {
             className="rounded-lg border border-border p-2 text-muted-foreground tech-transition hover:bg-secondary"
             title="Refresh"
           >
-            <RefreshCw size={16} />
+            <Icon name="RefreshCw" size={16} />
           </button>
           <Link
             href="/settings/groups"
@@ -438,7 +425,7 @@ export default function MembersPage() {
             onClick={() => setInviting(true)}
             className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground tech-transition hover:opacity-90 sm:px-4"
           >
-            <Plus size={15} />
+            <Icon name="Plus" size={15} />
             Invite
           </button>
         </div>
@@ -449,11 +436,11 @@ export default function MembersPage() {
         activeTab={tab}
         onTabChange={setTab}
         tabs={[
-          { id: "members", label: "Members", icon: Users, count: counts.all },
+          { id: "members", label: "Members", icon: "Users", count: counts.all },
           {
             id: "requests",
             label: "Requests",
-            icon: DoorOpen,
+            icon: "DoorOpen",
             // Only badged when there is something to answer — a permanent "0"
             // is the kind of chrome people stop reading. When the queue failed
             // to load there is no honest count, so the tooltip says so rather
@@ -483,7 +470,7 @@ export default function MembersPage() {
         <div className="mx-4 mt-3 flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive sm:mx-6">
           <span className="flex-1">{error}</span>
           <button onClick={() => setError("")} aria-label="Dismiss">
-            <X size={13} />
+            <Icon name="X" size={13} />
           </button>
         </div>
       )}
@@ -492,7 +479,7 @@ export default function MembersPage() {
         <div className="mx-4 mt-3 flex items-start gap-2 rounded-lg border border-border bg-secondary px-3 py-2 text-xs text-muted-foreground sm:mx-6">
           <span className="flex-1">{notice}</span>
           <button onClick={() => setNotice("")} aria-label="Dismiss">
-            <X size={13} />
+            <Icon name="X" size={13} />
           </button>
         </div>
       )}
@@ -503,7 +490,7 @@ export default function MembersPage() {
           succeeds. */}
       {queueError && (
         <div className="mx-4 mt-3 flex items-start gap-2 rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-xs text-warning sm:mx-6">
-          <AlertTriangle size={13} className="mt-0.5 shrink-0" />
+          <Icon name="AlertTriangle" size={13} className="mt-0.5 shrink-0" />
           <span className="flex-1">
             {queueError} The roster below is unaffected.
           </span>
@@ -513,7 +500,7 @@ export default function MembersPage() {
       <div className="flex-1 overflow-y-auto px-4 py-4 sm:px-6">
         {loading ? (
           <div className="flex items-center gap-2 text-xs text-muted-foreground">
-            <Loader2 size={14} className="animate-spin" /> Loading members…
+            <Icon name="Loader2" size={14} className="animate-spin" /> Loading members…
           </div>
         ) : tab === "requests" ? (
           <RequestsTab
@@ -698,7 +685,7 @@ function MemberRow({
             onClick={() => onRemove(member)}
             className="flex items-center gap-1 rounded-lg border border-destructive/30 px-2.5 py-1.5 text-[11px] text-destructive tech-transition hover:bg-destructive/10"
           >
-            <UserMinus size={12} />
+            <Icon name="UserMinus" size={12} />
             Remove
           </button>
         )}
@@ -711,7 +698,7 @@ function MemberRow({
             title="Delete this person and every credential and access grant they hold. Their work and the audit trail are kept."
             className="flex items-center gap-1 rounded-lg bg-destructive px-2.5 py-1.5 text-[11px] font-medium text-destructive-foreground tech-transition hover:opacity-90"
           >
-            <Trash2 size={12} />
+            <Icon name="Trash2" size={12} />
             Delete permanently
           </button>
         )}
@@ -744,7 +731,7 @@ function RemoveDialog({
       <div className="absolute inset-0 bg-black/60" onClick={onClose} />
       <div className="relative w-full max-w-md rounded-xl border border-border bg-card p-5 shadow-2xl">
         <h2 className="flex items-center gap-2 text-sm font-semibold text-foreground">
-          <UserMinus size={15} className="text-destructive" />
+          <Icon name="UserMinus" size={15} className="text-destructive" />
           Remove {member.display_name || member.email}?
         </h2>
         <p className="mt-2 text-xs text-muted-foreground">
@@ -774,7 +761,7 @@ function RemoveDialog({
             disabled={busy}
             className="flex items-center gap-1.5 rounded-lg bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground tech-transition hover:opacity-90 disabled:opacity-50"
           >
-            {busy && <Loader2 size={14} className="animate-spin" />}
+            {busy && <Icon name="Loader2" size={14} className="animate-spin" />}
             Remove
           </button>
         </div>
@@ -821,7 +808,7 @@ function PurgeDialog({
       <div className="absolute inset-0 bg-black/60" onClick={onClose} />
       <div className="relative w-full max-w-md rounded-xl border border-destructive/40 bg-card p-5 shadow-2xl">
         <h2 className="flex items-center gap-2 text-sm font-semibold text-foreground">
-          <Trash2 size={15} className="text-destructive" />
+          <Icon name="Trash2" size={15} className="text-destructive" />
           Delete {member.display_name || member.email} permanently?
         </h2>
         <p className="mt-2 text-xs text-muted-foreground">
@@ -892,7 +879,7 @@ function PurgeDialog({
             disabled={busy || !confirmed}
             className="flex items-center gap-1.5 rounded-lg bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground tech-transition hover:opacity-90 disabled:opacity-50"
           >
-            {busy && <Loader2 size={14} className="animate-spin" />}
+            {busy && <Icon name="Loader2" size={14} className="animate-spin" />}
             Delete permanently
           </button>
         </div>
@@ -931,7 +918,7 @@ function RequestsTab({
   if (failed) {
     return (
       <div className="rounded-xl border border-dashed border-warning/40 p-8 text-center">
-        <AlertTriangle size={18} className="mx-auto mb-2 text-warning" />
+        <Icon name="AlertTriangle" size={18} className="mx-auto mb-2 text-warning" />
         <p className="text-xs text-muted-foreground">
           The sign-in queue is unavailable, so this list is not the truth.
           People may be locked out without appearing here. Retry with Refresh;
@@ -944,7 +931,7 @@ function RequestsTab({
   if (requests.length === 0) {
     return (
       <div className="rounded-xl border border-dashed border-border p-8 text-center">
-        <DoorOpen size={18} className="mx-auto mb-2 text-muted-foreground" />
+        <Icon name="DoorOpen" size={18} className="mx-auto mb-2 text-muted-foreground" />
         <p className="text-xs text-muted-foreground">
           Nobody is waiting. Anyone who signs in without an account shows up
           here — you do not have to be told.
@@ -1004,7 +991,7 @@ function RequestRow({
               className="flex shrink-0 items-center gap-1 rounded-md bg-warning/10 px-1.5 py-0.5 text-[10px] text-warning"
               title="Outside the company sign-in domain. Guests invited into the directory can sign in too — check who this is before approving."
             >
-              <AlertTriangle size={10} />
+              <Icon name="AlertTriangle" size={10} />
               outside the company domain
             </span>
           )}
@@ -1050,9 +1037,9 @@ function RequestRow({
           className="flex items-center gap-1.5 rounded-lg bg-primary px-2.5 py-1.5 text-[11px] font-medium text-primary-foreground tech-transition hover:opacity-90 disabled:opacity-50"
         >
           {busy ? (
-            <Loader2 size={12} className="animate-spin" />
+            <Icon name="Loader2" size={12} className="animate-spin" />
           ) : (
-            <Check size={12} />
+            <Icon name="Check" size={12} />
           )}
           Approve
         </button>
@@ -1117,7 +1104,7 @@ function InviteDialog({
         <div className="mb-4 flex items-start justify-between">
           <div>
             <h2 className="flex items-center gap-2 text-sm font-semibold text-foreground">
-              <UserPlus size={15} /> Invite a member
+              <Icon name="UserPlus" size={15} /> Invite a member
             </h2>
             <p className="mt-1 text-xs text-muted-foreground">
               Sign-in is Microsoft SSO — this provisions their access, it does
@@ -1129,7 +1116,7 @@ function InviteDialog({
             className="rounded-lg p-1 text-muted-foreground hover:bg-secondary"
             aria-label="Close"
           >
-            <X size={15} />
+            <Icon name="X" size={15} />
           </button>
         </div>
 
@@ -1189,7 +1176,7 @@ function InviteDialog({
             disabled={busy || !email.includes("@")}
             className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground tech-transition hover:opacity-90 disabled:opacity-50"
           >
-            {busy && <Loader2 size={14} className="animate-spin" />}
+            {busy && <Icon name="Loader2" size={14} className="animate-spin" />}
             Invite
           </button>
         </div>
diff --git a/workbench/control_plane/src/app/settings/roles/page.tsx b/workbench/control_plane/src/app/settings/roles/page.tsx
index 909b9ff9..97770f98 100644
--- a/workbench/control_plane/src/app/settings/roles/page.tsx
+++ b/workbench/control_plane/src/app/settings/roles/page.tsx
@@ -12,9 +12,9 @@
  * role system is one role per employee.
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useState } from "react";
 import Link from "next/link";
-import { ArrowLeft, Loader2, Lock, Plus, Trash2, X } from "lucide-react";
 import { useAccess } from "@/components/AccessProvider";
 import type { Feature, Role } from "../members/types";
 
@@ -92,7 +92,7 @@ export default function RolesPage() {
             className="rounded-lg border border-border p-2 text-muted-foreground tech-transition hover:bg-secondary"
             aria-label="Back to members"
           >
-            <ArrowLeft size={15} />
+            <Icon name="ArrowLeft" size={15} />
           </Link>
           <div>
             <h1 className="text-base font-bold text-foreground sm:text-lg">Roles</h1>
@@ -105,7 +105,7 @@ export default function RolesPage() {
           onClick={() => setCreating(true)}
           className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground tech-transition hover:opacity-90 sm:px-4"
         >
-          <Plus size={15} />
+          <Icon name="Plus" size={15} />
           New role
         </button>
       </div>
@@ -114,7 +114,7 @@ export default function RolesPage() {
         <div className="mx-4 mt-3 flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive sm:mx-6">
           <span className="flex-1">{error}</span>
           <button onClick={() => setError("")} aria-label="Dismiss">
-            <X size={13} />
+            <Icon name="X" size={13} />
           </button>
         </div>
       )}
@@ -128,7 +128,7 @@ export default function RolesPage() {
 
         {loading ? (
           <div className="flex items-center gap-2 text-xs text-muted-foreground">
-            <Loader2 size={14} className="animate-spin" /> Loading roles…
+            <Icon name="Loader2" size={14} className="animate-spin" /> Loading roles…
           </div>
         ) : (
           <div className="flex flex-col gap-2">
@@ -145,7 +145,7 @@ export default function RolesPage() {
                       </code>
                       {r.is_system && (
                         <span className="flex items-center gap-1 text-[10px] text-muted-foreground">
-                          <Lock size={10} /> system
+                          <Icon name="Lock" size={10} /> system
                         </span>
                       )}
                     </div>
@@ -161,7 +161,7 @@ export default function RolesPage() {
                         className="rounded-lg bg-destructive/10 p-2 text-destructive tech-transition hover:bg-destructive/20"
                         title="Delete role"
                       >
-                        <Trash2 size={14} />
+                        <Icon name="Trash2" size={14} />
                       </button>
                     )}
                   </div>
@@ -292,7 +292,7 @@ function CreateRoleDialog({
             className="rounded-lg p-1 text-muted-foreground hover:bg-secondary"
             aria-label="Close"
           >
-            <X size={15} />
+            <Icon name="X" size={15} />
           </button>
         </div>
 
@@ -370,7 +370,7 @@ function CreateRoleDialog({
               disabled={busy || !name.trim() || selected.size === 0}
               className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground tech-transition hover:opacity-90 disabled:opacity-50"
             >
-              {busy && <Loader2 size={14} className="animate-spin" />}
+              {busy && <Icon name="Loader2" size={14} className="animate-spin" />}
               Create role
             </button>
           </div>
diff --git a/workbench/control_plane/src/app/tasks/components/AiTaskActions.tsx b/workbench/control_plane/src/app/tasks/components/AiTaskActions.tsx
index 099afb24..03baecf0 100644
--- a/workbench/control_plane/src/app/tasks/components/AiTaskActions.tsx
+++ b/workbench/control_plane/src/app/tasks/components/AiTaskActions.tsx
@@ -1,13 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useState } from "react";
-import {
-  Sparkles,
-  RefreshCw,
-  Check,
-  Loader2,
-  Wand2,
-} from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 import type { GtdItem } from "../lib/types";
 import type { EnrichFields } from "../lib/api";
@@ -83,7 +77,7 @@ export function AiTaskActions({ item }: { item: GtdItem }) {
         title="Re-run Clarify on this task — break it down or refine it"
         className="tech-transition inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[11px] font-medium text-muted-foreground hover:border-primary/40 hover:text-foreground"
       >
-        <RefreshCw className="h-3.5 w-3.5" />
+        <Icon name="RefreshCw" className="h-3.5 w-3.5" />
         Re-clarify
       </button>
       <button
@@ -97,7 +91,7 @@ export function AiTaskActions({ item }: { item: GtdItem }) {
         }
         className="tech-transition inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[11px] font-medium text-muted-foreground hover:border-primary/40 hover:text-foreground disabled:opacity-40"
       >
-        <Wand2 className="h-3.5 w-3.5" />
+        <Icon name="Wand2" className="h-3.5 w-3.5" />
         Fill details
       </button>
 
@@ -112,12 +106,12 @@ export function AiTaskActions({ item }: { item: GtdItem }) {
           />
           <div className="absolute right-0 top-full z-50 mt-1.5 w-72 rounded-lg border border-border bg-card p-3 shadow-xl">
             <div className="mb-2 flex items-center gap-1.5 text-xs font-semibold text-primary">
-              <Sparkles className="h-3.5 w-3.5" />
+              <Icon name="Sparkles" className="h-3.5 w-3.5" />
               Fill missing details
             </div>
             {loading ? (
               <div className="flex items-center gap-2 py-3 text-xs text-muted-foreground">
-                <Loader2 className="h-4 w-4 animate-spin" />
+                <Icon name="Loader2" className="h-4 w-4 animate-spin" />
                 Reading the task…
               </div>
             ) : error ? (
@@ -177,7 +171,7 @@ export function AiTaskActions({ item }: { item: GtdItem }) {
                     disabled={chosen.size === 0}
                     className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
                   >
-                    <Check className="h-3.5 w-3.5" />
+                    <Icon name="Check" className="h-3.5 w-3.5" />
                     Apply {chosen.size > 0 ? chosen.size : ""}
                   </button>
                   <button
@@ -231,7 +225,7 @@ function FillRow({
             : "border-border",
         ].join(" ")}
       >
-        {checked && <Check className="h-3 w-3" />}
+        {checked && <Icon name="Check" className="h-3 w-3" />}
       </span>
       <span className="w-16 shrink-0 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
         {label}
diff --git a/workbench/control_plane/src/app/tasks/components/AssistantRail.tsx b/workbench/control_plane/src/app/tasks/components/AssistantRail.tsx
index 4fc2e382..5de9efc3 100644
--- a/workbench/control_plane/src/app/tasks/components/AssistantRail.tsx
+++ b/workbench/control_plane/src/app/tasks/components/AssistantRail.tsx
@@ -15,9 +15,9 @@
  *   3. wires the GTD quick actions into the composer (user reviews & sends).
  */
 
+import Icon from "@/components/Icon";
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { useSession } from "next-auth/react";
-import { Sparkles, Plus, MessagesSquare, Trash2, X } from "lucide-react";
 import AgentChat from "@/components/AgentChat";
 import {
   getSessions, createSession, upsertSession, deleteSession,
@@ -150,7 +150,7 @@ export function AssistantRail({ onClose }: { onClose?: () => void } = {}) {
       <div className="flex items-center justify-between px-4 h-9 border-b border-sidebar-border flex-shrink-0">
         <div className="flex items-center gap-2">
           <div className="w-5 h-5 rounded-full bg-primary/20 text-primary flex items-center justify-center">
-            <Sparkles size={11} />
+            <Icon name="Sparkles" size={11} />
           </div>
           <span className="text-xs font-semibold text-sidebar-foreground">
             Assistant
@@ -166,14 +166,14 @@ export function AssistantRail({ onClose }: { onClose?: () => void } = {}) {
                 : "text-muted-foreground hover:text-sidebar-foreground hover:bg-sidebar-accent"
             }`}
           >
-            <MessagesSquare size={14} />
+            <Icon name="MessagesSquare" size={14} />
           </button>
           <button
             onClick={newSession}
             title="New chat"
             className="p-1 rounded text-muted-foreground hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors"
           >
-            <Plus size={15} />
+            <Icon name="Plus" size={15} />
           </button>
           {onClose && (
             <button
@@ -182,7 +182,7 @@ export function AssistantRail({ onClose }: { onClose?: () => void } = {}) {
               aria-label="Close assistant"
               className="p-1 rounded text-muted-foreground hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors"
             >
-              <X size={15} />
+              <Icon name="X" size={15} />
             </button>
           )}
         </div>
@@ -199,7 +199,7 @@ export function AssistantRail({ onClose }: { onClose?: () => void } = {}) {
               onClick={() => setShowSessions(false)}
               className="text-muted-foreground hover:text-foreground"
             >
-              <X size={12} />
+              <Icon name="X" size={12} />
             </button>
           </div>
           {taskSessions.length === 0 ? (
@@ -241,7 +241,7 @@ export function AssistantRail({ onClose }: { onClose?: () => void } = {}) {
                   title="Delete conversation"
                   className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive flex-shrink-0"
                 >
-                  <Trash2 size={12} />
+                  <Icon name="Trash2" size={12} />
                 </button>
               </div>
             ))
diff --git a/workbench/control_plane/src/app/tasks/components/AttachmentComposer.tsx b/workbench/control_plane/src/app/tasks/components/AttachmentComposer.tsx
index 24f9ce5f..ad0197ac 100644
--- a/workbench/control_plane/src/app/tasks/components/AttachmentComposer.tsx
+++ b/workbench/control_plane/src/app/tasks/components/AttachmentComposer.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import AppIcon from "@/components/Icon";
 import { useRef, useState } from "react";
-import { Paperclip, Link2, X, Loader2, Image as ImageIcon, FileText } from "lucide-react";
 import { apiUploadAttachment } from "../lib/api";
 import type { TaskAttachment } from "../lib/types";
 
@@ -13,10 +13,10 @@ export function AttachmentChip({
   att: TaskAttachment;
   onRemove?: () => void;
 }) {
-  const Icon = att.kind === "image" ? ImageIcon : att.kind === "link" ? Link2 : FileText;
+  const iconName = att.kind === "image" ? "Image" : att.kind === "link" ? "Link2" : "FileText";
   return (
     <span className="inline-flex max-w-[220px] items-center gap-1 rounded-full border border-border bg-background/60 px-2 py-0.5 text-[11px] text-muted-foreground">
-      <Icon className="h-3 w-3 shrink-0" />
+      <AppIcon name={iconName} className="h-3 w-3 shrink-0" />
       <a
         href={att.url}
         target="_blank"
@@ -36,7 +36,7 @@ export function AttachmentChip({
           }}
           className="tech-transition shrink-0 text-muted-foreground hover:text-destructive"
         >
-          <X className="h-3 w-3" />
+          <AppIcon name="X" className="h-3 w-3" />
         </button>
       )}
     </span>
@@ -139,9 +139,9 @@ export function AttachmentComposer({
           className="tech-transition inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-[11px] text-muted-foreground hover:bg-secondary hover:text-foreground disabled:opacity-50"
         >
           {uploading ? (
-            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
           ) : (
-            <Paperclip className="h-3.5 w-3.5" />
+            <AppIcon name="Paperclip" className="h-3.5 w-3.5" />
           )}
           {!compact && (uploading ? "Uploading…" : "Attach")}
         </button>
@@ -152,7 +152,7 @@ export function AttachmentComposer({
             title="Add a link"
             className="tech-transition inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-[11px] text-muted-foreground hover:bg-secondary hover:text-foreground"
           >
-            <Link2 className="h-3.5 w-3.5" />
+            <AppIcon name="Link2" className="h-3.5 w-3.5" />
             {!compact && "Link"}
           </button>
         ) : (
diff --git a/workbench/control_plane/src/app/tasks/components/CalendarView.tsx b/workbench/control_plane/src/app/tasks/components/CalendarView.tsx
index c173a0e7..0fec3072 100644
--- a/workbench/control_plane/src/app/tasks/components/CalendarView.tsx
+++ b/workbench/control_plane/src/app/tasks/components/CalendarView.tsx
@@ -10,20 +10,8 @@
 // AppShell). Specs: calendar_timeboxing.md, calendar_focus_os.md,
 // calendar_ai_review.md.
 
+import Icon from "@/components/Icon";
 import { useEffect, useMemo, useRef, useState } from "react";
-import {
-  ChevronLeft,
-  ChevronRight,
-  CalendarDays,
-  CalendarPlus,
-  Settings2,
-  AlertTriangle,
-  Wand2,
-  RotateCcw,
-  CalendarClock,
-  ClipboardCheck,
-  Sun,
-} from "lucide-react";
 import {
   apiGetDayState,
   apiSetDayState,
@@ -422,7 +410,7 @@ export function CalendarView() {
     <div className="relative flex h-full min-h-0 flex-col bg-background">
       {/* Header: title, nav, mode toggle */}
       <div className="flex flex-wrap items-center gap-2 border-b border-border px-4 py-3">
-        <CalendarDays className="h-5 w-5 shrink-0 text-primary" />
+        <Icon name="CalendarDays" className="h-5 w-5 shrink-0 text-primary" />
         <h1 className="text-base font-semibold text-foreground">{title}</h1>
         <div className="ml-2 flex items-center gap-0.5">
           <button
@@ -431,7 +419,7 @@ export function CalendarView() {
             onClick={() => step(-1)}
             className="tech-transition rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
           >
-            <ChevronLeft className="h-4 w-4" />
+            <Icon name="ChevronLeft" className="h-4 w-4" />
           </button>
           <button
             type="button"
@@ -446,7 +434,7 @@ export function CalendarView() {
             onClick={() => step(1)}
             className="tech-transition rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
           >
-            <ChevronRight className="h-4 w-4" />
+            <Icon name="ChevronRight" className="h-4 w-4" />
           </button>
         </div>
         {/* Actions: share the row with the title on desktop (ml-auto), but on
@@ -458,7 +446,7 @@ export function CalendarView() {
               title={`${dueSoon.length} unscheduled task(s) due within 2 weeks`}
               className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-warning/15 px-2 py-0.5 text-[11px] font-medium text-warning"
             >
-              <AlertTriangle className="h-3 w-3" />
+              <Icon name="AlertTriangle" className="h-3 w-3" />
               {dueSoon.length} due soon
             </span>
           )}
@@ -471,7 +459,7 @@ export function CalendarView() {
               title="Start (or restart) your day — breathe · review · commit the One Thing"
               className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-secondary px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground hover:bg-secondary/70 hover:text-foreground"
             >
-              <Sun className="h-3.5 w-3.5" />
+              <Icon name="Sun" className="h-3.5 w-3.5" />
               <span className="hidden sm:inline">Start day</span>
             </button>
           )}
@@ -482,7 +470,7 @@ export function CalendarView() {
               title="End-of-day review — what got done, what carries forward, estimate accuracy"
               className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-secondary px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground hover:bg-secondary/70 hover:text-foreground"
             >
-              <ClipboardCheck className="h-3.5 w-3.5" />
+              <Icon name="ClipboardCheck" className="h-3.5 w-3.5" />
               <span className="hidden sm:inline">Review</span>
             </button>
           )}
@@ -493,7 +481,7 @@ export function CalendarView() {
               title="Fit what's left: reshuffle today's not-done tasks into the time you have left, and move anything that no longer fits back to your list. Adds no new tasks."
               className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-secondary px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground hover:bg-secondary/70 hover:text-foreground"
             >
-              <CalendarClock className="h-3.5 w-3.5" />
+              <Icon name="CalendarClock" className="h-3.5 w-3.5" />
               <span className="hidden sm:inline">Fit what&apos;s left</span>
             </button>
           )}
@@ -503,7 +491,7 @@ export function CalendarView() {
             title="Rebuild my day: reshuffle what's on your calendar into the time left, trim the overflow back to your list, and fill any remaining room from your Next Actions."
             className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary/10 px-2.5 py-1.5 text-[12px] font-medium text-primary hover:bg-primary/20"
           >
-            <Wand2 className="h-3.5 w-3.5" />
+            <Icon name="Wand2" className="h-3.5 w-3.5" />
             <span className="hidden sm:inline">Rebuild my day</span>
           </button>
           <button
@@ -518,7 +506,7 @@ export function CalendarView() {
                 : "text-muted-foreground hover:bg-secondary hover:text-foreground",
             ].join(" ")}
           >
-            <Settings2 className="h-4 w-4" />
+            <Icon name="Settings2" className="h-4 w-4" />
           </button>
           <div className="ml-auto flex rounded-lg bg-secondary p-0.5 text-xs sm:ml-0">
             {(["day", "week", "month"] as Mode[]).map((m) => (
@@ -570,7 +558,7 @@ export function CalendarView() {
           around rituals; the banner invites, it never ambushes. */}
       {startupOffered && !startupOpen && !dayClosed && (
         <div className="flex items-center gap-2 border-b border-border bg-warning/5 px-4 py-2 text-[12px]">
-          <Sun className="h-4 w-4 shrink-0 text-warning" />
+          <Icon name="Sun" className="h-4 w-4 shrink-0 text-warning" />
           <span className="min-w-0 flex-1 text-foreground">
             Start your day — breathe · review · commit the One Thing.
           </span>
@@ -596,7 +584,7 @@ export function CalendarView() {
 
       {overdueCount > 0 && (
         <div className="flex items-center gap-2 border-b border-warning/40 bg-warning/10 px-4 py-2 text-[12px]">
-          <AlertTriangle className="h-4 w-4 shrink-0 text-warning" />
+          <Icon name="AlertTriangle" className="h-4 w-4 shrink-0 text-warning" />
           <span className="min-w-0 flex-1 text-foreground">
             {overdueCount} unfinished task{overdueCount === 1 ? "" : "s"} from
             earlier {overdueCount === 1 ? "is" : "are"} still on your calendar.
@@ -607,7 +595,7 @@ export function CalendarView() {
             title="Clear their times and move them back to your unscheduled list, so you can re-plan them (drag, or Rebuild my day)."
             className="tech-transition inline-flex shrink-0 items-center gap-1.5 rounded-md bg-warning/20 px-2.5 py-1 font-medium text-warning hover:bg-warning/30"
           >
-            <RotateCcw className="h-3.5 w-3.5" />
+            <Icon name="RotateCcw" className="h-3.5 w-3.5" />
             Move to my list
           </button>
         </div>
@@ -697,7 +685,7 @@ export function CalendarView() {
           aria-label="Schedule a task"
           className="tech-transition absolute bottom-4 right-4 z-30 inline-flex items-center gap-1.5 rounded-full bg-primary px-4 py-3 font-semibold text-primary-foreground shadow-lg hover:opacity-90 md:hidden"
         >
-          <CalendarPlus className="h-5 w-5" />
+          <Icon name="CalendarPlus" className="h-5 w-5" />
           {unscheduled.length > 0 && (
             <span className="text-[13px] tabular-nums">{unscheduled.length}</span>
           )}
diff --git a/workbench/control_plane/src/app/tasks/components/CaptureBar.tsx b/workbench/control_plane/src/app/tasks/components/CaptureBar.tsx
index 974dc6fc..2ac081c0 100644
--- a/workbench/control_plane/src/app/tasks/components/CaptureBar.tsx
+++ b/workbench/control_plane/src/app/tasks/components/CaptureBar.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useState, useCallback, KeyboardEvent } from "react";
-import { Plus, CornerDownLeft } from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 
 // F1 — frictionless capture. Type anything, Enter drops it in the Inbox as a
@@ -28,7 +28,7 @@ export function CaptureBar() {
 
   return (
     <div className="flex items-center gap-2 border-b border-border bg-card px-3 py-2.5">
-      <Plus className="h-4 w-4 shrink-0 text-muted-foreground" />
+      <Icon name="Plus" className="h-4 w-4 shrink-0 text-muted-foreground" />
       <input
         value={value}
         onChange={(e) => setValue(e.target.value)}
@@ -43,7 +43,7 @@ export function CaptureBar() {
           onClick={submit}
           className="tech-transition flex items-center gap-1 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground hover:opacity-90"
         >
-          Add <CornerDownLeft className="h-3 w-3" />
+          Add <Icon name="CornerDownLeft" className="h-3 w-3" />
         </button>
       )}
     </div>
diff --git a/workbench/control_plane/src/app/tasks/components/ClarifyModal.tsx b/workbench/control_plane/src/app/tasks/components/ClarifyModal.tsx
index c2fa5ed6..d5abcfc6 100644
--- a/workbench/control_plane/src/app/tasks/components/ClarifyModal.tsx
+++ b/workbench/control_plane/src/app/tasks/components/ClarifyModal.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useEffect } from "react";
-import { X, SkipForward } from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 import { useVisualViewport } from "../lib/useVisualViewport";
 import { ClarifyPanel } from "./ClarifyPanel";
@@ -110,7 +110,7 @@ export function ClarifyModal() {
                   title="Leave it in the inbox to decide later"
                   className="tech-transition inline-flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium text-muted-foreground hover:bg-secondary hover:text-foreground"
                 >
-                  <SkipForward className="h-3.5 w-3.5" />
+                  <Icon name="SkipForward" className="h-3.5 w-3.5" />
                   Skip
                 </button>
               )}
@@ -120,7 +120,7 @@ export function ClarifyModal() {
                 aria-label="Close"
                 className="tech-transition rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
               >
-                <X className="h-4 w-4" />
+                <Icon name="X" className="h-4 w-4" />
               </button>
             </div>
           </div>
diff --git a/workbench/control_plane/src/app/tasks/components/ClarifyPanel.tsx b/workbench/control_plane/src/app/tasks/components/ClarifyPanel.tsx
index 7ce9427a..373fe837 100644
--- a/workbench/control_plane/src/app/tasks/components/ClarifyPanel.tsx
+++ b/workbench/control_plane/src/app/tasks/components/ClarifyPanel.tsx
@@ -1,35 +1,8 @@
 "use client";
 
+import AppIcon, { themedIcon } from "@/components/Icon";
+import type { ThemedIcon } from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  Sparkles,
-  Check,
-  ArrowRight,
-  ListChecks,
-  ListTree,
-  FolderKanban,
-  UserPlus,
-  User,
-  CalendarClock,
-  CalendarDays,
-  Lightbulb,
-  FileText,
-  Trash2,
-  Zap,
-  HardDrive,
-  Cloud,
-  Search,
-  Mail as MailIcon,
-  ChevronRight,
-  Plus,
-  Loader2,
-  Lock,
-  AlertTriangle,
-  Wand2,
-  Pencil,
-  X,
-  type LucideIcon,
-} from "lucide-react";
 import { useTaskStore, type ClarifyDecision } from "../lib/taskStore";
 import {
   proposeClarification,
@@ -74,19 +47,19 @@ type Size = "single" | "subtasks" | "project";
 type Owner = "me" | "delegate";
 type When = "anytime" | "date";
 
-const SORT_META: Record<Sort, { label: string; icon: LucideIcon; danger?: boolean }> = {
-  "do-now": { label: "Do now · 2 min", icon: Zap },
-  actionable: { label: "Actionable", icon: ListChecks },
-  reference: { label: "Reference", icon: FileText },
-  someday: { label: "Someday", icon: Lightbulb },
-  trash: { label: "Trash", icon: Trash2, danger: true },
+const SORT_META: Record<Sort, { label: string; icon: ThemedIcon; danger?: boolean }> = {
+  "do-now": { label: "Do now · 2 min", icon: themedIcon("Zap") },
+  actionable: { label: "Actionable", icon: themedIcon("ListChecks") },
+  reference: { label: "Reference", icon: themedIcon("FileText") },
+  someday: { label: "Someday", icon: themedIcon("Lightbulb") },
+  trash: { label: "Trash", icon: themedIcon("Trash2"), danger: true },
 };
 const SORT_ORDER: Sort[] = ["do-now", "actionable", "reference", "someday", "trash"];
 
-const SIZE_META: Record<Size, { label: string; icon: LucideIcon }> = {
-  single: { label: "Single action", icon: ListChecks },
-  subtasks: { label: "Break into steps", icon: ListTree },
-  project: { label: "Project", icon: FolderKanban },
+const SIZE_META: Record<Size, { label: string; icon: ThemedIcon }> = {
+  single: { label: "Single action", icon: themedIcon("ListChecks") },
+  subtasks: { label: "Break into steps", icon: themedIcon("ListTree") },
+  project: { label: "Project", icon: themedIcon("FolderKanban") },
 };
 
 /** Map a disposition (server proposal / current item state) → the Sort bucket. */
@@ -696,13 +669,13 @@ export function ClarifyPanel({
             title="Rephrase this title with AI"
             className="tech-transition mt-0.5 inline-flex shrink-0 items-center gap-1 rounded-md border border-primary/30 bg-primary/5 px-2 py-1 text-[11px] font-medium text-primary hover:bg-primary/10 disabled:opacity-40"
           >
-            {titleBusy ? <Loader2 className="h-3 w-3 animate-spin" /> : <Wand2 className="h-3 w-3" />}
+            {titleBusy ? <AppIcon name="Loader2" className="h-3 w-3 animate-spin" /> : <AppIcon name="Wand2" className="h-3 w-3" />}
             Improve
           </button>
         </div>
         {item.origin?.kind === "email" && (
           <p className="mt-1 flex items-center gap-1 text-[11px] text-muted-foreground">
-            <MailIcon className="h-3 w-3 shrink-0" />
+            <AppIcon name="Mail" className="h-3 w-3 shrink-0" />
             <span className="truncate">
               Captured from email — {item.origin.fromName || item.origin.fromEmail}
               {item.origin.subject ? ` · “${item.origin.subject}”` : ""}
@@ -734,7 +707,7 @@ export function ClarifyPanel({
                 onClick={() => setNoteOpen(true)}
                 className="tech-transition inline-flex items-center gap-1 text-[11px] font-medium text-primary hover:underline"
               >
-                <Sparkles className="h-3 w-3" />
+                <AppIcon name="Sparkles" className="h-3 w-3" />
                 Add context for the assistant
               </button>
             ) : (
@@ -755,9 +728,9 @@ export function ClarifyPanel({
                     className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
                   >
                     {noteBusy ? (
-                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                      <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
                     ) : (
-                      <Wand2 className="h-3.5 w-3.5" />
+                      <AppIcon name="Wand2" className="h-3.5 w-3.5" />
                     )}
                     Re-clarify with this
                   </button>
@@ -802,7 +775,7 @@ export function ClarifyPanel({
         {vagueOpen && (
           <div className="flex flex-col gap-2 rounded-lg border border-warning/45 bg-warning/10 p-3">
             <div className="flex items-start gap-2 text-[13px] font-semibold text-foreground">
-              <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-warning" />
+              <AppIcon name="AlertTriangle" className="mt-0.5 h-4 w-4 shrink-0 text-warning" />
               <span>
                 {proposal.isVague
                   ? "This title is vague — clarify it so the assistant can clarify the rest"
@@ -833,7 +806,7 @@ export function ClarifyPanel({
                 disabled={!suggestedTitle}
                 className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
               >
-                <Check className="h-3.5 w-3.5" />
+                <AppIcon name="Check" className="h-3.5 w-3.5" />
                 Use this title
               </button>
               <button
@@ -897,7 +870,7 @@ export function ClarifyPanel({
           )}
           <div className="mb-1.5 flex items-center justify-between gap-2">
             <div className="flex items-center gap-1.5 text-xs font-semibold text-primary">
-              <Sparkles className="h-3.5 w-3.5" />
+              <AppIcon name="Sparkles" className="h-3.5 w-3.5" />
               Assistant recommends
             </div>
             <span
@@ -957,15 +930,15 @@ export function ClarifyPanel({
             {proposal.timeEstimateMins ? <span>{durationLabel(proposal.timeEstimateMins)}</span> : null}
             {proposal.dueDate && (
               <span className="inline-flex items-center gap-1">
-                <CalendarDays className="h-3 w-3" /> by {proposal.dueDate}
+                <AppIcon name="CalendarDays" className="h-3 w-3" /> by {proposal.dueDate}
               </span>
             )}
             {sortOf(proposal.disposition) === "actionable" && proposedDestLabel && (
               <span className="inline-flex items-center gap-1 rounded bg-secondary px-1.5 py-0.5 font-medium">
                 {proposal.target?.source === "LOCAL" ? (
-                  <HardDrive className="h-3 w-3" />
+                  <AppIcon name="HardDrive" className="h-3 w-3" />
                 ) : (
-                  <Cloud className="h-3 w-3" />
+                  <AppIcon name="Cloud" className="h-3 w-3" />
                 )}
                 {proposedDestLabel}
                 {proposedProject ? ` · ${short(proposedProject.outcome, 16)}` : ""}
@@ -995,7 +968,7 @@ export function ClarifyPanel({
               disabled={creatingTarget || !canApply}
               className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-60"
             >
-              {creatingTarget ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Check className="h-3.5 w-3.5" />}
+              {creatingTarget ? <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" /> : <AppIcon name="Check" className="h-3.5 w-3.5" />}
               {bigSuggestion
                 ? `Accept & create all ${subtasks.length || 1} step${subtasks.length === 1 ? "" : "s"}`
                 : "Accept & next"}
@@ -1007,7 +980,7 @@ export function ClarifyPanel({
                 title="Change the sort, owner, timing, or destination yourself"
                 className="tech-transition inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground hover:border-primary/40 hover:text-foreground"
               >
-                <Pencil className="h-3 w-3" />
+                <AppIcon name="Pencil" className="h-3 w-3" />
                 Adjust
               </button>
             )}
@@ -1017,7 +990,7 @@ export function ClarifyPanel({
               title="Trash this — it's not actionable"
               className="tech-transition ml-auto inline-flex items-center gap-1.5 rounded-md border border-transparent px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground hover:border-destructive/30 hover:bg-destructive/10 hover:text-destructive"
             >
-              <Trash2 className="h-3.5 w-3.5" />
+              <AppIcon name="Trash2" className="h-3.5 w-3.5" />
               Trash
             </button>
           </div>
@@ -1119,7 +1092,7 @@ export function ClarifyPanel({
                         owner === "me" ? "border-primary bg-primary/10 text-primary" : "border-border text-muted-foreground hover:bg-secondary",
                       ].join(" ")}
                     >
-                      <User className="h-3.5 w-3.5" /> Me
+                      <AppIcon name="User" className="h-3.5 w-3.5" /> Me
                     </button>
                     <button
                       type="button"
@@ -1129,7 +1102,7 @@ export function ClarifyPanel({
                         owner === "delegate" ? "border-primary bg-primary/10 text-primary" : "border-border text-muted-foreground hover:bg-secondary",
                       ].join(" ")}
                     >
-                      <UserPlus className="h-3.5 w-3.5" /> Delegate →
+                      <AppIcon name="UserPlus" className="h-3.5 w-3.5" /> Delegate →
                     </button>
                   </div>
                   {owner === "delegate" && (
@@ -1144,7 +1117,7 @@ export function ClarifyPanel({
                           : assignee.name.toLowerCase() ===
                             proposal.suggestedAssignee.name.toLowerCase()) && (
                           <p className="mt-1.5 flex items-start gap-1 text-[11px] text-amber-500">
-                            <AlertTriangle className="mt-0.5 h-3 w-3 shrink-0" />
+                            <AppIcon name="AlertTriangle" className="mt-0.5 h-3 w-3 shrink-0" />
                             <span>
                               {assignee.name.split(/\s+/)[0]} is{" "}
                               {proposal.assigneeLoad.note ?? "already at capacity"} —
@@ -1176,7 +1149,7 @@ export function ClarifyPanel({
                         when === "date" ? "border-primary bg-primary/10 text-primary" : "border-border text-muted-foreground hover:bg-secondary",
                       ].join(" ")}
                     >
-                      <CalendarClock className="h-3.5 w-3.5" /> By a date →
+                      <AppIcon name="CalendarClock" className="h-3.5 w-3.5" /> By a date →
                     </button>
                   </div>
                   {when === "date" && (
@@ -1261,7 +1234,7 @@ export function ClarifyPanel({
                                 active ? "border-primary bg-primary/10 text-primary" : "border-border text-muted-foreground hover:bg-secondary",
                               ].join(" ")}
                             >
-                              {cp.source === "LOCAL" ? <HardDrive className="h-3.5 w-3.5" /> : <Cloud className="h-3.5 w-3.5" />}
+                              {cp.source === "LOCAL" ? <AppIcon name="HardDrive" className="h-3.5 w-3.5" /> : <AppIcon name="Cloud" className="h-3.5 w-3.5" />}
                               {cp.label}
                             </button>
                           );
@@ -1340,7 +1313,7 @@ export function ClarifyPanel({
 
             {needsProjectForDelegate && (
               <p className="inline-flex items-center gap-1 text-[11px] font-medium text-warning">
-                <AlertTriangle className="h-3 w-3 shrink-0" />
+                <AppIcon name="AlertTriangle" className="h-3 w-3 shrink-0" />
                 Pick a {destAccount?.provider === "clickup" ? "ClickUp list" : "list"}{" "}
                 to delegate into — {assignee?.name.split(/\s+/)[0]} needs it in the
                 tool to see it.
@@ -1362,8 +1335,8 @@ export function ClarifyPanel({
               : "cursor-not-allowed bg-secondary text-muted-foreground",
           ].join(" ")}
         >
-          {creatingTarget ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
-          Organize it <ArrowRight className="h-4 w-4" />
+          {creatingTarget ? <AppIcon name="Loader2" className="h-4 w-4 animate-spin" /> : null}
+          Organize it <AppIcon name="ArrowRight" className="h-4 w-4" />
         </button>
         </>)}
       </div>
@@ -1394,15 +1367,15 @@ function ProjectSuggestBanner({
   return (
     <div className="flex flex-col gap-2.5 rounded-lg border border-primary/35 bg-primary/5 p-3">
       <div className="flex items-start gap-2 text-[13px] font-semibold text-foreground">
-        <FolderKanban className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
+        <AppIcon name="FolderKanban" className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
         <span>Looks like it belongs in an existing project</span>
       </div>
       <div className="rounded-md border border-border bg-background/50 px-3 py-2">
         <div className="flex items-center gap-1.5 text-[12.5px] text-foreground">
           {synced ? (
-            <Cloud className="h-3.5 w-3.5 shrink-0 text-primary/70" />
+            <AppIcon name="Cloud" className="h-3.5 w-3.5 shrink-0 text-primary/70" />
           ) : (
-            <HardDrive className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+            <AppIcon name="HardDrive" className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
           )}
           <span className="min-w-0 flex-1 truncate" title={project.outcome}>{project.outcome}</span>
         </div>
@@ -1411,7 +1384,7 @@ function ProjectSuggestBanner({
         </div>
       </div>
       <p className="flex items-start gap-1.5 text-[11.5px] text-muted-foreground">
-        <ArrowRight className="mt-0.5 h-3 w-3 shrink-0 text-primary/70" />
+        <AppIcon name="ArrowRight" className="mt-0.5 h-3 w-3 shrink-0 text-primary/70" />
         {assignee
           ? `Assigned to ${assignee.name} — it'll show under them in Projects${synced ? ", and stays on ClickUp" : ""}.`
           : `Assigned to you — it'll show up in My Next Actions${synced ? ", and on ClickUp" : ""}.`}
@@ -1423,7 +1396,7 @@ function ProjectSuggestBanner({
           onClick={() => { setBusy(true); onFile(); }}
           className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
         >
-          {busy ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Check className="h-3.5 w-3.5" />}
+          {busy ? <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" /> : <AppIcon name="Check" className="h-3.5 w-3.5" />}
           File it here
         </button>
         <button
@@ -1454,17 +1427,17 @@ function ParentSuggestBanner({
   return (
     <div className="flex flex-col gap-2.5 rounded-lg border border-primary/35 bg-primary/5 p-3">
       <div className="flex items-start gap-2 text-[13px] font-semibold text-foreground">
-        <ListTree className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
+        <AppIcon name="ListTree" className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
         <span>Looks like a step of an existing task</span>
       </div>
       <div className="rounded-md border border-border bg-background/50 px-3 py-2">
         <div className="flex items-center gap-1.5 text-[12.5px] text-foreground">
-          <FolderKanban className="h-3.5 w-3.5 shrink-0 text-primary/70" />
+          <AppIcon name="FolderKanban" className="h-3.5 w-3.5 shrink-0 text-primary/70" />
           <span className="min-w-0 flex-1 truncate" title={parentTitle}>{parentTitle}</span>
         </div>
       </div>
       <p className="flex items-start gap-1.5 text-[11.5px] text-muted-foreground">
-        <ArrowRight className="mt-0.5 h-3 w-3 shrink-0 text-primary/70" />
+        <AppIcon name="ArrowRight" className="mt-0.5 h-3 w-3 shrink-0 text-primary/70" />
         File it as a subtask under this task instead of a standalone one.
       </p>
       <div className="flex flex-wrap items-center gap-2">
@@ -1474,7 +1447,7 @@ function ParentSuggestBanner({
           onClick={async () => { setBusy(true); try { await onFileUnder(); } finally { setBusy(false); } }}
           className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
         >
-          {busy ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <ListTree className="h-3.5 w-3.5" />}
+          {busy ? <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" /> : <AppIcon name="ListTree" className="h-3.5 w-3.5" />}
           File as subtask
         </button>
         <button
@@ -1527,7 +1500,7 @@ function DuplicateBanner({
   return (
     <div className="flex flex-col gap-2.5 rounded-lg border border-warning/45 bg-warning/10 p-3">
       <div className="flex items-start gap-2 text-[13px] font-semibold text-foreground">
-        <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-warning" />
+        <AppIcon name="AlertTriangle" className="mt-0.5 h-4 w-4 shrink-0 text-warning" />
         <span>
           {dup.verdict === "duplicate"
             ? "This looks like a task that's already on ClickUp"
@@ -1536,7 +1509,7 @@ function DuplicateBanner({
       </div>
       <div className="rounded-md border border-border bg-background/50 px-3 py-2">
         <div className="flex items-center gap-1.5 text-[12.5px] text-foreground">
-          <Cloud className="h-3.5 w-3.5 shrink-0 text-primary/70" />
+          <AppIcon name="Cloud" className="h-3.5 w-3.5 shrink-0 text-primary/70" />
           <span className="min-w-0 flex-1 truncate" title={dup.title}>{dup.title}</span>
           {dup.providerUrl && (
             <a
@@ -1579,7 +1552,7 @@ function DuplicateBanner({
               onClick={() => void run("rename", () => onRename(renameTitle))}
               className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
             >
-              {busy === "rename" ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Check className="h-3.5 w-3.5" />}
+              {busy === "rename" ? <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" /> : <AppIcon name="Check" className="h-3.5 w-3.5" />}
               Save name
             </button>
             <button
@@ -1600,7 +1573,7 @@ function DuplicateBanner({
             onClick={() => void run("merge", onMerge)}
             className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
           >
-            {busy === "merge" ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Plus className="h-3.5 w-3.5" />}
+            {busy === "merge" ? <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" /> : <AppIcon name="Plus" className="h-3.5 w-3.5" />}
             Add to existing task
           </button>
           <button
@@ -1609,7 +1582,7 @@ function DuplicateBanner({
             onClick={() => setRenaming(true)}
             className="tech-transition inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-[12px] font-medium text-foreground hover:border-primary/40 hover:bg-primary/10 disabled:opacity-50"
           >
-            <Pencil className="h-3.5 w-3.5" />
+            <AppIcon name="Pencil" className="h-3.5 w-3.5" />
             Update its name
           </button>
           <button
@@ -1618,7 +1591,7 @@ function DuplicateBanner({
             onClick={() => void run("drop", onDrop)}
             className="tech-transition inline-flex items-center gap-1.5 rounded-md border border-transparent px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground hover:border-destructive/30 hover:bg-destructive/10 hover:text-destructive disabled:opacity-50"
           >
-            {busy === "drop" ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Trash2 className="h-3.5 w-3.5" />}
+            {busy === "drop" ? <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" /> : <AppIcon name="Trash2" className="h-3.5 w-3.5" />}
             Delete this inbox item
           </button>
           <button
@@ -1648,14 +1621,14 @@ function LockedWhere({
   return (
     <div>
       <div className="flex items-center gap-2 rounded-md border border-border bg-background/40 px-3 py-2">
-        <Lock className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+        <AppIcon name="Lock" className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
         <span className="flex min-w-0 flex-wrap items-center gap-x-1.5 text-[12px] text-foreground">
-          <Cloud className="h-3.5 w-3.5 text-primary/70" />
+          <AppIcon name="Cloud" className="h-3.5 w-3.5 text-primary/70" />
           {destEntry(dest, providers)?.label ?? "ClickUp"}
           {selectedProject && (
             <>
               <span className="text-border">·</span>
-              <FolderKanban className="h-3 w-3 text-muted-foreground" />
+              <AppIcon name="FolderKanban" className="h-3 w-3 text-muted-foreground" />
               {short(selectedProject.outcome, 22)}
             </>
           )}
@@ -1727,12 +1700,12 @@ function SubtaskEditor({
             aria-label="Remove step"
             className="tech-transition shrink-0 rounded p-1 text-muted-foreground/60 hover:bg-destructive/10 hover:text-destructive"
           >
-            <X className="h-3.5 w-3.5" />
+            <AppIcon name="X" className="h-3.5 w-3.5" />
           </button>
         </div>
       ))}
       <div className="flex items-center gap-1.5 rounded-md border border-dashed border-border px-2 py-1.5">
-        <Plus className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+        <AppIcon name="Plus" className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
         <input
           value={draft}
           onChange={(e) => setDraft(e.target.value)}
@@ -1988,7 +1961,7 @@ function InlineCreateFolder({
         onClick={() => setOpen(true)}
         className="tech-transition ml-4 flex items-center gap-1.5 text-left text-[12px] text-primary hover:underline"
       >
-        <Plus className="h-3 w-3" /> New folder here
+        <AppIcon name="Plus" className="h-3 w-3" /> New folder here
       </button>
     );
   }
@@ -2016,7 +1989,7 @@ function InlineCreateFolder({
         }}
         className="tech-transition inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground disabled:opacity-50"
       >
-        {busy ? <Loader2 className="h-3 w-3 animate-spin" /> : <Plus className="h-3 w-3" />}
+        {busy ? <AppIcon name="Loader2" className="h-3 w-3 animate-spin" /> : <AppIcon name="Plus" className="h-3 w-3" />}
         Create
       </button>
     </div>
@@ -2143,7 +2116,7 @@ function TreePicker({
     const expandable =
       !!n.children?.length || (!!onSelectLeaf && n.type !== "list");
     const isOpen = openIds.has(n.id);
-    const Icon = n.type === "space" ? HardDrive : n.type === "folder" ? FolderKanban : ListChecks;
+    const Icon = n.type === "space" ? themedIcon("HardDrive") : n.type === "folder" ? themedIcon("FolderKanban") : themedIcon("ListChecks");
     return (
       <div key={n.id}>
         <button
@@ -2164,7 +2137,7 @@ function TreePicker({
           ].join(" ")}
         >
           {expandable ? (
-            <ChevronRight
+            <AppIcon name="ChevronRight"
               onClick={(e) => { e.stopPropagation(); toggle(n.id); }}
               className={`h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform ${isOpen ? "rotate-90" : ""}`}
             />
@@ -2175,11 +2148,11 @@ function TreePicker({
           <span className="min-w-0 flex-1 truncate">{n.name}</span>
           {unmirrored && (
             <span className="inline-flex shrink-0 items-center gap-1 text-[10px] text-muted-foreground/70">
-              <Loader2 className="h-3 w-3 animate-spin" /> syncing…
+              <AppIcon name="Loader2" className="h-3 w-3 animate-spin" /> syncing…
             </span>
           )}
-          {isSuggested && <Sparkles className="h-3 w-3 shrink-0 text-primary" />}
-          {active && <Check className="h-3.5 w-3.5 shrink-0" />}
+          {isSuggested && <AppIcon name="Sparkles" className="h-3 w-3 shrink-0 text-primary" />}
+          {active && <AppIcon name="Check" className="h-3.5 w-3.5 shrink-0" />}
         </button>
         {expandable && isOpen && (
           <div className="flex flex-col gap-0.5 pb-1 pt-0.5">
@@ -2206,7 +2179,7 @@ function TreePicker({
                     onClick={() => void submitCreate(n.type === "space" ? n.id : ancestorSpaceId, n.type === "folder" ? n.id : undefined)}
                     className="tech-transition inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground disabled:opacity-50"
                   >
-                    {creating ? <Loader2 className="h-3 w-3 animate-spin" /> : <Plus className="h-3 w-3" />}
+                    {creating ? <AppIcon name="Loader2" className="h-3 w-3 animate-spin" /> : <AppIcon name="Plus" className="h-3 w-3" />}
                     Create
                   </button>
                 </div>
@@ -2221,7 +2194,7 @@ function TreePicker({
                 {/* Say WHICH level the new list lands on — a space with folders
                     offers both "directly in this space" (folderless, the level
                     above) and per-folder creation, and "here" hid that. */}
-                <Plus className="h-3 w-3" />{" "}
+                <AppIcon name="Plus" className="h-3 w-3" />{" "}
                 {newLabel.replace(
                   "here…",
                   n.type === "folder" ? "in this folder…" : "directly in this space…",
@@ -2252,7 +2225,7 @@ function TreePicker({
                       onClick={() => void submitCreateFolder(n.id)}
                       className="tech-transition inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground disabled:opacity-50"
                     >
-                      {creating ? <Loader2 className="h-3 w-3 animate-spin" /> : <Plus className="h-3 w-3" />}
+                      {creating ? <AppIcon name="Loader2" className="h-3 w-3 animate-spin" /> : <AppIcon name="Plus" className="h-3 w-3" />}
                       Create
                     </button>
                   </div>
@@ -2264,7 +2237,7 @@ function TreePicker({
                   onClick={() => { setCreatingAt(`folder:${n.id}`); setNewName(""); setCreateError(null); }}
                   className="tech-transition ml-4 flex items-center gap-1.5 text-left text-[12px] text-primary hover:underline"
                 >
-                  <Plus className="h-3 w-3" /> New folder here…
+                  <AppIcon name="Plus" className="h-3 w-3" /> New folder here…
                 </button>
               ))}
           </div>
@@ -2314,9 +2287,9 @@ function TreePicker({
               : "border-transparent text-foreground hover:bg-secondary",
           ].join(" ")}
         >
-          <FolderKanban className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+          <AppIcon name="FolderKanban" className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
           <span className="flex-1">{emptyLabel}</span>
-          {value === undefined && <Check className="h-3.5 w-3.5 shrink-0" />}
+          {value === undefined && <AppIcon name="Check" className="h-3.5 w-3.5 shrink-0" />}
         </button>
       )}
       <div className="max-h-56 overflow-y-auto pr-0.5">
@@ -2341,7 +2314,7 @@ function TreePicker({
                 onClick={() => void submitCreate(undefined, undefined)}
                 className="tech-transition inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground disabled:opacity-50"
               >
-                {creating ? <Loader2 className="h-3 w-3 animate-spin" /> : <Plus className="h-3 w-3" />}
+                {creating ? <AppIcon name="Loader2" className="h-3 w-3 animate-spin" /> : <AppIcon name="Plus" className="h-3 w-3" />}
                 Create
               </button>
             </div>
@@ -2351,7 +2324,7 @@ function TreePicker({
               onClick={() => { setCreatingAt("top"); setNewName(""); setCreateError(null); }}
               className="tech-transition flex items-center gap-1.5 text-left text-[12px] text-primary hover:underline"
             >
-              <Plus className="h-3 w-3" /> {newLabel}
+              <AppIcon name="Plus" className="h-3 w-3" /> {newLabel}
             </button>
           )
         )}
@@ -2366,7 +2339,7 @@ function TreePicker({
 function SearchBox({ q, setQ }: { q: string; setQ: (v: string) => void }) {
   return (
     <div className="relative">
-      <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+      <AppIcon name="Search" className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
       <input
         value={q}
         onChange={(e) => setQ(e.target.value)}
diff --git a/workbench/control_plane/src/app/tasks/components/ContextMenu.tsx b/workbench/control_plane/src/app/tasks/components/ContextMenu.tsx
index 168babcd..f08562bb 100644
--- a/workbench/control_plane/src/app/tasks/components/ContextMenu.tsx
+++ b/workbench/control_plane/src/app/tasks/components/ContextMenu.tsx
@@ -1,7 +1,8 @@
 "use client";
 
+import AppIcon from "@/components/Icon";
+import type { ThemedIcon } from "@/components/Icon";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { Check, type LucideIcon } from "lucide-react";
 
 // A lightweight right-click menu. The tasks app has no menu primitive, so this
 // follows the established click-away popover pattern (a full-screen catcher +
@@ -14,7 +15,7 @@ export type CtxItem =
   | {
       kind: "item";
       label: string;
-      icon?: LucideIcon;
+      icon?: ThemedIcon;
       onSelect: () => void;
       danger?: boolean;
       checked?: boolean;
@@ -106,7 +107,7 @@ export function ContextMenu({
               {Icon && <Icon className="h-3.5 w-3.5 shrink-0" />}
               <span className="min-w-0 flex-1 truncate">{it.label}</span>
               {it.checked && (
-                <Check className="h-3.5 w-3.5 shrink-0 text-primary" />
+                <AppIcon name="Check" className="h-3.5 w-3.5 shrink-0 text-primary" />
               )}
             </button>
           );
diff --git a/workbench/control_plane/src/app/tasks/components/DelegateDialog.tsx b/workbench/control_plane/src/app/tasks/components/DelegateDialog.tsx
index 74360d6a..db9b8622 100644
--- a/workbench/control_plane/src/app/tasks/components/DelegateDialog.tsx
+++ b/workbench/control_plane/src/app/tasks/components/DelegateDialog.tsx
@@ -1,15 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useMemo, useState } from "react";
-import {
-  X,
-  Cloud,
-  FolderKanban,
-  Search,
-  Check,
-  Loader2,
-  UserPlus,
-} from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 import type { GtdItem, Person } from "../lib/types";
 import { initials } from "../lib/utils";
@@ -90,7 +82,7 @@ export function DelegateDialog({
       >
         <div className="flex shrink-0 items-center justify-between border-b border-border px-4 py-3">
           <span className="inline-flex items-center gap-2 text-sm font-semibold text-foreground">
-            <UserPlus className="h-4 w-4 text-primary" />
+            <Icon name="UserPlus" className="h-4 w-4 text-primary" />
             Delegate to {assignee.name}
           </span>
           <button
@@ -99,13 +91,13 @@ export function DelegateDialog({
             aria-label="Close"
             className="tech-transition rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
           >
-            <X className="h-4 w-4" />
+            <Icon name="X" className="h-4 w-4" />
           </button>
         </div>
 
         <div className="min-h-0 flex-1 overflow-y-auto px-4 py-3">
           <p className="mb-3 flex items-start gap-1.5 text-[11px] text-muted-foreground">
-            <Cloud className="mt-0.5 h-3.5 w-3.5 shrink-0 text-primary/70" />
+            <Icon name="Cloud" className="mt-0.5 h-3.5 w-3.5 shrink-0 text-primary/70" />
             <span>
               A delegated task lives in the PM tool so {assignee.name.split(" ")[0]}{" "}
               can see it. Pick where it should go.
@@ -140,7 +132,7 @@ export function DelegateDialog({
                             : "border-border text-muted-foreground hover:bg-secondary",
                         ].join(" ")}
                       >
-                        <Cloud className="h-3.5 w-3.5" />
+                        <Icon name="Cloud" className="h-3.5 w-3.5" />
                         {a.label}
                       </button>
                     ))}
@@ -154,7 +146,7 @@ export function DelegateDialog({
               </p>
               {projects.filter((p) => p.accountId === accountId).length > 5 && (
                 <div className="relative mb-1.5">
-                  <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+                  <Icon name="Search" className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
                   <input
                     value={q}
                     onChange={(e) => setQ(e.target.value)}
@@ -181,10 +173,10 @@ export function DelegateDialog({
                           : "border-border text-foreground hover:bg-secondary",
                       ].join(" ")}
                     >
-                      <FolderKanban className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                      <Icon name="FolderKanban" className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                       <span className="min-w-0 flex-1 truncate">{p.outcome}</span>
                       {projectId === p.id && (
-                        <Check className="h-3.5 w-3.5 shrink-0" />
+                        <Icon name="Check" className="h-3.5 w-3.5 shrink-0" />
                       )}
                     </button>
                   ))
@@ -226,7 +218,7 @@ export function DelegateDialog({
             className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
           >
             {busy ? (
-              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+              <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
             ) : (
               <span className="flex h-4 w-4 items-center justify-center rounded-full bg-primary-foreground/20 text-[8px] font-bold">
                 {initials(assignee.name)}
diff --git a/workbench/control_plane/src/app/tasks/components/DelegatePopup.tsx b/workbench/control_plane/src/app/tasks/components/DelegatePopup.tsx
index 2617a50f..bad3292f 100644
--- a/workbench/control_plane/src/app/tasks/components/DelegatePopup.tsx
+++ b/workbench/control_plane/src/app/tasks/components/DelegatePopup.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useMemo, useState } from "react";
-import { Check, Loader2, Search, UserPlus, X } from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 import type { GtdItem, Person } from "../lib/types";
 import { initials } from "../lib/utils";
@@ -110,7 +110,7 @@ function DelegateBody({
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex shrink-0 items-center gap-2 border-b border-border px-4 py-3">
-          <UserPlus className="h-4 w-4 shrink-0 text-primary" />
+          <Icon name="UserPlus" className="h-4 w-4 shrink-0 text-primary" />
           <div className="min-w-0 flex-1">
             <h2 className="text-sm font-semibold text-foreground">
               Delegate this task
@@ -125,7 +125,7 @@ function DelegateBody({
             aria-label="Close"
             className="tech-transition rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
           >
-            <X className="h-4 w-4" />
+            <Icon name="X" className="h-4 w-4" />
           </button>
         </div>
 
@@ -138,7 +138,7 @@ function DelegateBody({
           )}
           {eligible.length > 8 && (
             <div className="relative mb-2">
-              <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+              <Icon name="Search" className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
               <input
                 value={q}
                 onChange={(e) => setQ(e.target.value)}
@@ -174,7 +174,7 @@ function DelegateBody({
                       {initials(p.name)}
                     </span>
                     <span className="min-w-0 flex-1 truncate">{p.name}</span>
-                    {on && <Check className="h-3.5 w-3.5 shrink-0" />}
+                    {on && <Icon name="Check" className="h-3.5 w-3.5 shrink-0" />}
                   </button>
                 );
               })}
@@ -200,9 +200,9 @@ function DelegateBody({
               className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
             >
               {busy ? (
-                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
               ) : (
-                <Check className="h-3.5 w-3.5" />
+                <Icon name="Check" className="h-3.5 w-3.5" />
               )}
               {selected.length === 0
                 ? "Unassign"
diff --git a/workbench/control_plane/src/app/tasks/components/DeleteConfirmModal.tsx b/workbench/control_plane/src/app/tasks/components/DeleteConfirmModal.tsx
index 7c9f9132..b3a454e7 100644
--- a/workbench/control_plane/src/app/tasks/components/DeleteConfirmModal.tsx
+++ b/workbench/control_plane/src/app/tasks/components/DeleteConfirmModal.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useEffect } from "react";
-import { AlertTriangle, Trash2, X } from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 
 /**
@@ -51,7 +51,7 @@ export function DeleteConfirmModal() {
       >
         <div className="flex items-start gap-3 px-4 py-4">
           <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-destructive/10 text-destructive">
-            <Trash2 className="h-4 w-4" />
+            <Icon name="Trash2" className="h-4 w-4" />
           </div>
           <div className="min-w-0 flex-1">
             <h2 className="text-sm font-semibold text-foreground">
@@ -67,7 +67,7 @@ export function DeleteConfirmModal() {
             </p>
             {syncedCount > 0 && (
               <div className="mt-2 flex items-start gap-1.5 rounded-lg border border-amber-500/30 bg-amber-500/5 px-2.5 py-2 text-[11px] text-amber-600 dark:text-amber-500">
-                <AlertTriangle className="mt-0.5 h-3 w-3 shrink-0" />
+                <Icon name="AlertTriangle" className="mt-0.5 h-3 w-3 shrink-0" />
                 <span>
                   {syncedCount === count && count === 1
                     ? "This is a ClickUp task — it will be archived in ClickUp (recoverable there), not permanently deleted."
@@ -81,7 +81,7 @@ export function DeleteConfirmModal() {
             aria-label="Cancel"
             className="text-muted-foreground hover:text-foreground"
           >
-            <X className="h-4 w-4" />
+            <Icon name="X" className="h-4 w-4" />
           </button>
         </div>
         <div className="flex items-center justify-end gap-2 border-t border-border px-4 py-3">
@@ -96,7 +96,7 @@ export function DeleteConfirmModal() {
             autoFocus
             className="inline-flex items-center gap-1.5 rounded-lg bg-destructive px-3 py-1.5 text-xs font-medium text-destructive-foreground hover:opacity-90"
           >
-            <Trash2 className="h-3.5 w-3.5" />
+            <Icon name="Trash2" className="h-3.5 w-3.5" />
             Delete
           </button>
         </div>
diff --git a/workbench/control_plane/src/app/tasks/components/EliminatePopup.tsx b/workbench/control_plane/src/app/tasks/components/EliminatePopup.tsx
index 4e37b2eb..e49a74f7 100644
--- a/workbench/control_plane/src/app/tasks/components/EliminatePopup.tsx
+++ b/workbench/control_plane/src/app/tasks/components/EliminatePopup.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Trash2, X, Archive, MoonStar } from "lucide-react";
+import Icon from "@/components/Icon";
 import { useTaskStore } from "../lib/taskStore";
 
 // The "Eliminate" popup — opened from the Eliminate pill or a context menu (via
@@ -30,7 +30,7 @@ export function EliminatePopup() {
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center gap-2 border-b border-border px-4 py-3">
-          <Archive className="h-4 w-4 shrink-0 text-muted-foreground" />
+          <Icon name="Archive" className="h-4 w-4 shrink-0 text-muted-foreground" />
           <div className="min-w-0 flex-1">
             <h2 className="truncate text-sm font-semibold text-foreground">
               Let this go?
@@ -45,7 +45,7 @@ export function EliminatePopup() {
             aria-label="Close"
             className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
           >
-            <X className="h-4 w-4" />
+            <Icon name="X" className="h-4 w-4" />
           </button>
         </div>
 
@@ -58,7 +58,7 @@ export function EliminatePopup() {
             }}
             className="tech-transition flex items-start gap-2.5 rounded-lg border border-border bg-background/60 p-3 text-left hover:border-primary/50 active:bg-primary/5"
           >
-            <MoonStar className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
+            <Icon name="MoonStar" className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
             <span className="min-w-0">
               <span className="block text-[13px] font-medium text-foreground">
                 Move to Someday / Maybe
@@ -78,7 +78,7 @@ export function EliminatePopup() {
             }}
             className="tech-transition flex items-start gap-2.5 rounded-lg border border-border bg-background/60 p-3 text-left hover:border-destructive/50 hover:bg-destructive/5"
           >
-            <Trash2 className="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
+            <Icon name="Trash2" className="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
             <span className="min-w-0">
               <span className="block text-[13px] font-medium text-foreground">
                 Delete
diff --git a/workbench/control_plane/src/app/tasks/components/EngageView.tsx b/workbench/control_plane/src/app/tasks/components/EngageView.tsx
index bf05e995..e5ddf4d4 100644
--- a/workbench/control_plane/src/app/tasks/components/EngageView.tsx
+++ b/workbench/control_plane/src/app/tasks/components/EngageView.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import AppIcon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import { useMemo, useState } from "react";
-import { Battery, BatteryLow, BatteryMedium, Clock, Tag, Zap } from "lucide-react";
 import { useTaskStore, itemsForView } from "../lib/taskStore";
 import { Energy } from "../lib/types";
 import { priorityRank, type PriorityCell } from "../lib/priority";
@@ -19,10 +19,10 @@ import { TaskCard } from "./TaskCard";
 
 const ENERGY_ORDER: Record<Energy, number> = { low: 0, medium: 1, high: 2 };
 
-const ENERGY_OPTS: { value: Energy; label: string; icon: typeof Battery }[] = [
-  { value: "low", label: "Low / fried", icon: BatteryLow },
-  { value: "medium", label: "Medium", icon: BatteryMedium },
-  { value: "high", label: "Sharp / high", icon: Battery },
+const ENERGY_OPTS: { value: Energy; label: string; icon: ThemedIcon }[] = [
+  { value: "low", label: "Low / fried", icon: themedIcon("BatteryLow") },
+  { value: "medium", label: "Medium", icon: themedIcon("BatteryMedium") },
+  { value: "high", label: "Sharp / high", icon: themedIcon("Battery") },
 ];
 
 const TIME_OPTS: { value: number; label: string }[] = [
@@ -87,7 +87,7 @@ export function EngageView() {
     <div className="flex h-full flex-col">
       <header className="border-b border-border bg-card px-4 py-3">
         <div className="flex items-center gap-2">
-          <Zap className="h-4 w-4 text-primary" />
+          <AppIcon name="Zap" className="h-4 w-4 text-primary" />
           <h1 className="text-base font-bold text-foreground">Engage · Now</h1>
           <span className="ml-auto text-xs text-muted-foreground">
             {matched.length} pickable
@@ -129,7 +129,7 @@ export function EngageView() {
         {/* Secondary narrowers — time + context */}
         <div className="mt-2 flex flex-wrap items-center gap-3">
           <label className="inline-flex items-center gap-1.5 text-[11px] text-muted-foreground">
-            <Clock className="h-3.5 w-3.5" />
+            <AppIcon name="Clock" className="h-3.5 w-3.5" />
             <select
               value={maxMins}
               onChange={(e) => setMaxMins(Number(e.target.value))}
@@ -144,7 +144,7 @@ export function EngageView() {
           </label>
           {contexts.length > 0 && (
             <label className="inline-flex items-center gap-1.5 text-[11px] text-muted-foreground">
-              <Tag className="h-3.5 w-3.5" />
+              <AppIcon name="Tag" className="h-3.5 w-3.5" />
               <select
                 value={context}
                 onChange={(e) => setContext(e.target.value)}
@@ -164,7 +164,7 @@ export function EngageView() {
 
       {matched.length === 0 ? (
         <div className="flex flex-1 flex-col items-center justify-center gap-2 p-8 text-center">
-          <Zap className="h-6 w-6 text-muted-foreground/50" />
+          <AppIcon name="Zap" className="h-6 w-6 text-muted-foreground/50" />
           <p className="text-sm text-foreground">Nothing matches right now</p>
           <p className="max-w-xs text-xs text-muted-foreground">
             Try a higher energy level or a longer time window — or enjoy the
diff --git a/workbench/control_plane/src/app/tasks/components/FocusMode.tsx b/workbench/control_plane/src/app/tasks/components/FocusMode.tsx
index 314f984c..948cec7c 100644
--- a/workbench/control_plane/src/app/tasks/components/FocusMode.tsx
+++ b/workbench/control_plane/src/app/tasks/components/FocusMode.tsx
@@ -23,21 +23,8 @@
 // `C` capture hotkey (page.tsx) opens the capture palette on top of the room:
 // a stray thought is one keystroke to the inbox and the timer never stops.
 
+import Icon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  Check,
-  ChevronRight,
-  Coffee,
-  Footprints,
-  Maximize2,
-  Minimize2,
-  Pause,
-  Play,
-  Plus,
-  StretchHorizontal,
-  Wind,
-  X,
-} from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 import { GtdItem } from "../lib/types";
 import { blocksForDay, startOfDay, type Block } from "../lib/scheduling";
@@ -54,11 +41,11 @@ const TIMER_MODES: { key: FocusTimerMode; label: string; work: number | null; br
   { key: "flow", label: "Flow", work: null, brk: 10 },
 ];
 
-const BREAK_KINDS: { key: string; label: string; icon: typeof Wind }[] = [
-  { key: "walk", label: "Walk", icon: Footprints },
-  { key: "breathe", label: "Breathe", icon: Wind },
-  { key: "stretch", label: "Stretch", icon: StretchHorizontal },
-  { key: "coffee", label: "Coffee", icon: Coffee },
+const BREAK_KINDS: { key: string; label: string; icon: ThemedIcon }[] = [
+  { key: "walk", label: "Walk", icon: themedIcon("Footprints") },
+  { key: "breathe", label: "Breathe", icon: themedIcon("Wind") },
+  { key: "stretch", label: "Stretch", icon: themedIcon("StretchHorizontal") },
+  { key: "coffee", label: "Coffee", icon: themedIcon("Coffee") },
 ];
 
 /** mm:ss for the big countdown. */
@@ -399,9 +386,9 @@ function FocusRoom({ itemId }: { itemId: string }) {
               className="tech-transition shrink-0 rounded-md p-1.5 text-muted-foreground hover:bg-secondary hover:text-foreground"
             >
               {pausedAt != null ? (
-                <Play className="h-3.5 w-3.5" fill="currentColor" />
+                <Icon name="Play" className="h-3.5 w-3.5" fill="currentColor" />
               ) : (
-                <Pause className="h-3.5 w-3.5" />
+                <Icon name="Pause" className="h-3.5 w-3.5" />
               )}
             </button>
           )}
@@ -412,7 +399,7 @@ function FocusRoom({ itemId }: { itemId: string }) {
             title="Expand"
             className="tech-transition shrink-0 rounded-md p-1.5 text-muted-foreground hover:bg-secondary hover:text-foreground"
           >
-            <Maximize2 className="h-3.5 w-3.5" />
+            <Icon name="Maximize2" className="h-3.5 w-3.5" />
           </button>
           <button
             type="button"
@@ -421,7 +408,7 @@ function FocusRoom({ itemId }: { itemId: string }) {
             title="End focus — stops the timer"
             className="tech-transition shrink-0 rounded-md p-1.5 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
           >
-            <X className="h-3.5 w-3.5" />
+            <Icon name="X" className="h-3.5 w-3.5" />
           </button>
         </div>
       </div>
@@ -460,7 +447,7 @@ function FocusRoom({ itemId }: { itemId: string }) {
           title="Minimize (esc) — the timer keeps running in a corner dock"
           className="tech-transition ml-auto rounded-md p-1.5 text-muted-foreground hover:bg-secondary hover:text-foreground"
         >
-          <Minimize2 className="h-4 w-4" />
+          <Icon name="Minimize2" className="h-4 w-4" />
         </button>
         <button
           type="button"
@@ -469,7 +456,7 @@ function FocusRoom({ itemId }: { itemId: string }) {
           title="End focus — stops the timer and closes this"
           className="tech-transition rounded-md p-1.5 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
         >
-          <X className="h-4 w-4" />
+          <Icon name="X" className="h-4 w-4" />
         </button>
       </div>
 
@@ -478,7 +465,7 @@ function FocusRoom({ itemId }: { itemId: string }) {
           /* ── completion screen — celebrate, then bridge to what's next ── */
           <>
             <div className="flex h-14 w-14 items-center justify-center rounded-full bg-success/15">
-              <Check className="h-7 w-7 text-success" strokeWidth={3} />
+              <Icon name="Check" className="h-7 w-7 text-success" strokeWidth={3} />
             </div>
             <h1 className="mt-4 max-w-lg text-lg font-semibold text-foreground">
               {item.title}
@@ -531,7 +518,7 @@ function FocusRoom({ itemId }: { itemId: string }) {
                 className="tech-transition mt-4 inline-flex items-center gap-1.5 rounded-md bg-primary/10 px-3 py-2 text-[12px] font-medium text-primary hover:bg-primary/20"
               >
                 Next · {nextBlock.item.title} at {fmtClock(nextBlock.start)}
-                <ChevronRight className="h-3.5 w-3.5" />
+                <Icon name="ChevronRight" className="h-3.5 w-3.5" />
               </button>
             )}
             <button
@@ -645,7 +632,7 @@ function FocusRoom({ itemId }: { itemId: string }) {
                           : "border-muted-foreground/50 text-transparent",
                       ].join(" ")}
                     >
-                      <Check className="h-2.5 w-2.5" strokeWidth={3} />
+                      <Icon name="Check" className="h-2.5 w-2.5" strokeWidth={3} />
                     </span>
                     <span
                       className={
@@ -670,11 +657,11 @@ function FocusRoom({ itemId }: { itemId: string }) {
               >
                 {pausedAt != null ? (
                   <>
-                    <Play className="h-3.5 w-3.5" fill="currentColor" /> Resume
+                    <Icon name="Play" className="h-3.5 w-3.5" fill="currentColor" /> Resume
                   </>
                 ) : (
                   <>
-                    <Pause className="h-3.5 w-3.5" /> Pause
+                    <Icon name="Pause" className="h-3.5 w-3.5" /> Pause
                   </>
                 )}
               </button>
@@ -683,7 +670,7 @@ function FocusRoom({ itemId }: { itemId: string }) {
                 onClick={complete}
                 className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-success px-4 py-2 text-[12px] font-semibold text-success-foreground hover:opacity-90"
               >
-                <Check className="h-3.5 w-3.5" strokeWidth={3} />
+                <Icon name="Check" className="h-3.5 w-3.5" strokeWidth={3} />
                 Done
               </button>
               {item.scheduledStart && (
@@ -693,7 +680,7 @@ function FocusRoom({ itemId }: { itemId: string }) {
                   title="Running over? Extend this block 15m — the flexible rest of today shifts with it. No guilt, the plan reflows."
                   className="tech-transition inline-flex items-center gap-1 rounded-md bg-secondary px-3 py-2 text-[12px] font-medium text-muted-foreground hover:text-foreground"
                 >
-                  <Plus className="h-3.5 w-3.5" />
+                  <Icon name="Plus" className="h-3.5 w-3.5" />
                   15 min
                 </button>
               )}
diff --git a/workbench/control_plane/src/app/tasks/components/InboxCard.tsx b/workbench/control_plane/src/app/tasks/components/InboxCard.tsx
index bf5a3612..294cdcde 100644
--- a/workbench/control_plane/src/app/tasks/components/InboxCard.tsx
+++ b/workbench/control_plane/src/app/tasks/components/InboxCard.tsx
@@ -1,26 +1,8 @@
 "use client";
 
+import AppIcon, { themedIcon } from "@/components/Icon";
+import type { ThemedIcon } from "@/components/Icon";
 import { useEffect, useMemo, useRef, useState } from "react";
-import {
-  Clock,
-  Pencil,
-  Trash2,
-  Lightbulb,
-  FileText,
-  Sparkles,
-  Check,
-  CalendarClock,
-  Square,
-  CheckSquare,
-  StickyNote,
-  ListChecks,
-  FolderKanban,
-  UserPlus,
-  Zap,
-  Cloud,
-  type LucideIcon,
-  Mail,
-} from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 import { proposeClarification, type ClarifyDisposition } from "../lib/clarify";
 import { GtdItem, GtdProject, Person } from "../lib/types";
@@ -33,15 +15,15 @@ import { ContextMenu, type CtxItem } from "./ContextMenu";
 // The assistant's at-a-glance read of a capture — shown on the card so you see
 // the *shape* of your inbox (what's yours, what to delegate, what's a project,
 // where it goes) before opening anything. It's a hint; Clarify still decides.
-const DISP_HINT: Record<ClarifyDisposition, { label: string; Icon: LucideIcon }> = {
-  NEXT: { label: "Next", Icon: ListChecks },
-  PROJECT: { label: "Project", Icon: FolderKanban },
-  WAITING: { label: "Delegate", Icon: UserPlus },
-  CALENDAR: { label: "Schedule", Icon: CalendarClock },
-  DO_NOW: { label: "Do now", Icon: Zap },
-  SOMEDAY: { label: "Someday", Icon: Lightbulb },
-  REFERENCE: { label: "Reference", Icon: FileText },
-  TRASH: { label: "Trash", Icon: Trash2 },
+const DISP_HINT: Record<ClarifyDisposition, { label: string; Icon: ThemedIcon }> = {
+  NEXT: { label: "Next", Icon: themedIcon("ListChecks") },
+  PROJECT: { label: "Project", Icon: themedIcon("FolderKanban") },
+  WAITING: { label: "Delegate", Icon: themedIcon("UserPlus") },
+  CALENDAR: { label: "Schedule", Icon: themedIcon("CalendarClock") },
+  DO_NOW: { label: "Do now", Icon: themedIcon("Zap") },
+  SOMEDAY: { label: "Someday", Icon: themedIcon("Lightbulb") },
+  REFERENCE: { label: "Reference", Icon: themedIcon("FileText") },
+  TRASH: { label: "Trash", Icon: themedIcon("Trash2") },
 };
 const shortText = (s: string, n = 22) => (s.length > n ? s.slice(0, n - 1) + "…" : s);
 
@@ -102,7 +84,7 @@ export function InboxCard({
     return (
       <div className="flex flex-col gap-2 rounded-xl border border-primary/40 bg-card px-4 py-3">
         <div className="flex items-center gap-2">
-          <Pencil className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+          <AppIcon name="Pencil" className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
           <input
             autoFocus
             value={draftTitle}
@@ -125,7 +107,7 @@ export function InboxCard({
             aria-label="Save"
             className="tech-transition rounded-md p-1 text-primary hover:bg-primary/10"
           >
-            <Check className="h-4 w-4" />
+            <AppIcon name="Check" className="h-4 w-4" />
           </button>
         </div>
         <textarea
@@ -143,33 +125,33 @@ export function InboxCard({
     {
       kind: "item",
       label: "Clarify…",
-      icon: Sparkles,
+      icon: themedIcon("Sparkles"),
       onSelect: () => openClarify(item.id),
     },
     {
       kind: "item",
       label: "Schedule on calendar",
-      icon: CalendarClock,
+      icon: themedIcon("CalendarClock"),
       onSelect: () => openSchedule(item.id),
     },
     { kind: "sep" },
     {
       kind: "item",
       label: "Move to Someday / Maybe",
-      icon: Lightbulb,
+      icon: themedIcon("Lightbulb"),
       onSelect: () => quickDispose(item.id, "SOMEDAY"),
     },
     {
       kind: "item",
       label: "Move to Reference",
-      icon: FileText,
+      icon: themedIcon("FileText"),
       onSelect: () => quickDispose(item.id, "REFERENCE"),
     },
     { kind: "sep" },
     {
       kind: "item",
       label: "Delete",
-      icon: Trash2,
+      icon: themedIcon("Trash2"),
       danger: true,
       onSelect: () => requestDelete([item.id]),
     },
@@ -220,9 +202,9 @@ export function InboxCard({
         ].join(" ")}
       >
         {selected ? (
-          <CheckSquare className="h-4 w-4" />
+          <AppIcon name="CheckSquare" className="h-4 w-4" />
         ) : (
-          <Square className="h-4 w-4" />
+          <AppIcon name="Square" className="h-4 w-4" />
         )}
       </button>
 
@@ -233,7 +215,7 @@ export function InboxCard({
         <HintRow hint={hint} />
         {item.notes && (
           <p className="mt-1 flex items-start gap-1 text-[12px] leading-snug text-muted-foreground">
-            <StickyNote className="mt-0.5 h-3 w-3 shrink-0" />
+            <AppIcon name="StickyNote" className="mt-0.5 h-3 w-3 shrink-0" />
             <span className="line-clamp-2">{item.notes}</span>
           </p>
         )}
@@ -244,7 +226,7 @@ export function InboxCard({
         )}
         {item.origin?.kind === "email" && (
           <p className="mt-1 flex items-center gap-1 text-[11px] text-muted-foreground">
-            <Mail className="h-3 w-3 shrink-0" />
+            <AppIcon name="Mail" className="h-3 w-3 shrink-0" />
             <span className="truncate">
               From email — {item.origin.fromName || item.origin.fromEmail}
               {item.origin.subject ? ` · “${item.origin.subject}”` : ""}
@@ -262,7 +244,7 @@ export function InboxCard({
         )}
         <div className="mt-1.5 flex flex-wrap items-center gap-2 text-[11px] text-muted-foreground">
           <span className="inline-flex items-center gap-1">
-            <Clock className="h-3 w-3" />
+            <AppIcon name="Clock" className="h-3 w-3" />
             captured {relativeTime(item.createdAt)}
           </span>
           <SourceBadge source={item.source} provider={item.provider} size="xs" />
@@ -276,7 +258,7 @@ export function InboxCard({
               title="Detected a date — snooze to it?"
               className="tech-transition inline-flex items-center gap-1 rounded-full border border-primary/30 bg-primary/5 px-1.5 py-0.5 text-[10px] text-primary hover:bg-primary/10"
             >
-              <CalendarClock className="h-3 w-3" />
+              <AppIcon name="CalendarClock" className="h-3 w-3" />
               {dateHint}?
             </button>
           )}
@@ -285,11 +267,11 @@ export function InboxCard({
 
       {/* Secondary quick-actions (desktop hover; on touch, tap card → Clarify) */}
       <div className="hidden shrink-0 items-center gap-0.5 opacity-0 tech-transition focus-within:opacity-100 group-hover:opacity-100 sm:flex">
-        <CardAction label="Edit" icon={Pencil} onClick={onEditStart} />
+        <CardAction label="Edit" icon={themedIcon("Pencil")} onClick={onEditStart} />
         <div className="relative">
           <CardAction
             label="Snooze"
-            icon={CalendarClock}
+            icon={themedIcon("CalendarClock")}
             onClick={() => setSnoozeOpen((v) => !v)}
           />
           {snoozeOpen && (
@@ -304,17 +286,17 @@ export function InboxCard({
         </div>
         <CardAction
           label="Someday"
-          icon={Lightbulb}
+          icon={themedIcon("Lightbulb")}
           onClick={() => quickDispose(item.id, "SOMEDAY")}
         />
         <CardAction
           label="Reference"
-          icon={FileText}
+          icon={themedIcon("FileText")}
           onClick={() => quickDispose(item.id, "REFERENCE")}
         />
         <CardAction
           label="Clarify"
-          icon={Sparkles}
+          icon={themedIcon("Sparkles")}
           primary
           onClick={() => openClarify(item.id)}
         />
@@ -332,7 +314,7 @@ export function InboxCard({
         }}
         className="tech-transition mt-0.5 shrink-0 rounded-md p-1.5 text-muted-foreground/70 hover:bg-destructive/10 hover:text-destructive"
       >
-        <Trash2 className="h-4 w-4" />
+        <AppIcon name="Trash2" className="h-4 w-4" />
       </button>
 
       {menu && (
@@ -379,12 +361,12 @@ function buildHint(
 function HintRow({
   hint,
 }: {
-  hint: { label: string; Icon: LucideIcon; detail: string; provider?: string };
+  hint: { label: string; Icon: ThemedIcon; detail: string; provider?: string };
 }) {
   return (
     <div className="mt-1 flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[11px]">
       <span className="inline-flex items-center gap-1">
-        <Sparkles className="h-3 w-3 text-primary/60" />
+        <AppIcon name="Sparkles" className="h-3 w-3 text-primary/60" />
         <hint.Icon className="h-3 w-3 text-muted-foreground" />
         <span className="font-medium text-foreground/75">{hint.label}</span>
       </span>
@@ -393,7 +375,7 @@ function HintRow({
       )}
       {hint.provider && (
         <span className="inline-flex items-center gap-0.5 rounded-full bg-secondary px-1.5 py-px text-[10px] text-muted-foreground">
-          <Cloud className="h-2.5 w-2.5" />
+          <AppIcon name="Cloud" className="h-2.5 w-2.5" />
           {hint.provider}
         </span>
       )}
@@ -433,7 +415,7 @@ function SnoozeMenu({
             onClick={() => onPick(o.iso)}
             className="tech-transition flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] text-foreground hover:bg-secondary"
           >
-            <CalendarClock className="h-3.5 w-3.5 text-muted-foreground" />
+            <AppIcon name="CalendarClock" className="h-3.5 w-3.5 text-muted-foreground" />
             {o.label}
           </button>
         ))}
@@ -461,7 +443,7 @@ function CardAction({
   danger,
 }: {
   label: string;
-  icon: LucideIcon;
+  icon: ThemedIcon;
   onClick: () => void;
   primary?: boolean;
   danger?: boolean;
diff --git a/workbench/control_plane/src/app/tasks/components/InboxTable.tsx b/workbench/control_plane/src/app/tasks/components/InboxTable.tsx
index d56d27d5..b597430f 100644
--- a/workbench/control_plane/src/app/tasks/components/InboxTable.tsx
+++ b/workbench/control_plane/src/app/tasks/components/InboxTable.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Mail, Paperclip, ArrowRight, Trash2, Lightbulb } from "lucide-react";
+import Icon from "@/components/Icon";
 import { GtdItem } from "../lib/types";
 import { useTaskStore } from "../lib/taskStore";
 import { proposeClarification, sortShapeSummary, type SortBucket } from "../lib/clarify";
@@ -99,7 +99,7 @@ export function InboxTable({
                         className="inline-flex shrink-0 items-center gap-0.5 text-[10px] text-muted-foreground"
                         title={item.attachments.map((a) => a.name).join(", ")}
                       >
-                        <Paperclip className="h-3 w-3" />
+                        <Icon name="Paperclip" className="h-3 w-3" />
                         {item.attachments.length}
                       </span>
                     )}
@@ -142,7 +142,7 @@ export function InboxTable({
                       className="inline-flex max-w-full items-center gap-1"
                       title={item.origin.subject}
                     >
-                      <Mail className="h-3 w-3 shrink-0" />
+                      <Icon name="Mail" className="h-3 w-3 shrink-0" />
                       <span className="truncate">
                         {item.origin.fromName || item.origin.fromEmail}
                       </span>
@@ -168,7 +168,7 @@ export function InboxTable({
                       }}
                       className="tech-transition rounded p-1 text-muted-foreground opacity-0 hover:bg-secondary hover:text-foreground group-hover:opacity-100"
                     >
-                      <Lightbulb className="h-3.5 w-3.5" />
+                      <Icon name="Lightbulb" className="h-3.5 w-3.5" />
                     </button>
                     <button
                       type="button"
@@ -179,7 +179,7 @@ export function InboxTable({
                       }}
                       className="tech-transition rounded p-1 text-primary opacity-0 hover:bg-primary/10 group-hover:opacity-100"
                     >
-                      <ArrowRight className="h-3.5 w-3.5" />
+                      <Icon name="ArrowRight" className="h-3.5 w-3.5" />
                     </button>
                     {/* Trash always visible — never hover-gated. */}
                     <button
@@ -192,7 +192,7 @@ export function InboxTable({
                       }}
                       className="tech-transition rounded p-1 text-muted-foreground/70 hover:bg-destructive/10 hover:text-destructive"
                     >
-                      <Trash2 className="h-3.5 w-3.5" />
+                      <Icon name="Trash2" className="h-3.5 w-3.5" />
                     </button>
                   </span>
                 </td>
diff --git a/workbench/control_plane/src/app/tasks/components/InboxView.tsx b/workbench/control_plane/src/app/tasks/components/InboxView.tsx
index 676fe4e9..8be2306c 100644
--- a/workbench/control_plane/src/app/tasks/components/InboxView.tsx
+++ b/workbench/control_plane/src/app/tasks/components/InboxView.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import AppIcon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import {
   useEffect,
   useMemo,
@@ -7,34 +8,6 @@ import {
   useSyncExternalStore,
   KeyboardEvent,
 } from "react";
-import {
-  Inbox,
-  Plus,
-  CornerDownLeft,
-  Sparkles,
-  CheckCircle2,
-  ArrowRight,
-  Wind,
-  Undo2,
-  AlertCircle,
-  Search,
-  ArrowDownUp,
-  SearchX,
-  Lightbulb,
-  FileText,
-  Trash2,
-  CalendarClock,
-  X,
-  Check,
-  Pencil,
-  RotateCcw,
-  Keyboard,
-  LayoutGrid,
-  LayoutList,
-  Loader2,
-  HardDrive,
-  Cloud,
-} from "lucide-react";
 import FilterPills from "@/components/FilterPills";
 import { useTaskStore } from "../lib/taskStore";
 import { Disposition, GtdItem } from "../lib/types";
@@ -317,7 +290,7 @@ export function InboxView() {
     <div className="flex h-full flex-col bg-background">
       {/* Mobile heading — the hero is hidden on mobile, so orient the user. */}
       <div className="flex shrink-0 items-center gap-2 border-b border-border px-4 py-2.5 sm:hidden">
-        <Inbox className="h-4 w-4 shrink-0 text-primary" />
+        <AppIcon name="Inbox" className="h-4 w-4 shrink-0 text-primary" />
         <h1 className="text-sm font-bold text-foreground">Inbox</h1>
         <span className="text-[11px] text-muted-foreground">Getting Things Done</span>
       </div>
@@ -330,11 +303,11 @@ export function InboxView() {
       <div className="hidden shrink-0 border-b border-border bg-card sm:block">
         <div className="flex items-center gap-2.5 px-4 py-2.5">
           <div className="flex shrink-0 items-center gap-2">
-            <Inbox className="h-4 w-4 text-primary" />
+            <AppIcon name="Inbox" className="h-4 w-4 text-primary" />
             <h1 className="text-base font-bold text-foreground">Inbox</h1>
           </div>
           <div className="tech-transition flex min-w-0 flex-1 items-center gap-2 rounded-lg border border-border bg-background px-3 py-1.5 focus-within:border-primary/50">
-            <Plus className="h-4 w-4 shrink-0 text-muted-foreground" />
+            <AppIcon name="Plus" className="h-4 w-4 shrink-0 text-muted-foreground" />
             <input
               value={value}
               onChange={(e) => setValue(e.target.value)}
@@ -349,7 +322,7 @@ export function InboxView() {
                 onClick={submit}
                 className="tech-transition inline-flex shrink-0 items-center gap-1 rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground hover:opacity-90"
               >
-                Add <CornerDownLeft className="h-3 w-3" />
+                Add <AppIcon name="CornerDownLeft" className="h-3 w-3" />
               </button>
             ) : (
               <kbd className="shrink-0 rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground">
@@ -368,7 +341,7 @@ export function InboxView() {
             title="Mind sweep — dump everything on your mind"
             className="tech-transition inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border px-2 py-1.5 text-xs text-muted-foreground hover:border-primary/40 hover:text-foreground"
           >
-            <Wind className="h-3.5 w-3.5" />
+            <AppIcon name="Wind" className="h-3.5 w-3.5" />
             <span className="hidden lg:inline">Mind sweep</span>
           </button>
           <button
@@ -378,7 +351,7 @@ export function InboxView() {
             aria-pressed={showShortcuts}
             className="tech-transition inline-flex shrink-0 items-center rounded-md border border-border p-1.5 text-muted-foreground hover:border-primary/40 hover:text-foreground"
           >
-            <Keyboard className="h-3.5 w-3.5" />
+            <AppIcon name="Keyboard" className="h-3.5 w-3.5" />
           </button>
         </div>
         {showShortcuts && (
@@ -410,7 +383,7 @@ export function InboxView() {
               onClick={undoLastCapture}
               className="tech-transition inline-flex items-center gap-1 text-[11px] font-medium text-primary hover:underline"
             >
-              <Undo2 className="h-3.5 w-3.5" />
+              <AppIcon name="Undo2" className="h-3.5 w-3.5" />
               Undo
             </button>
           </div>
@@ -454,7 +427,7 @@ export function InboxView() {
                   onClick={() => { resolveDupNotice("rename", dupRenameValue); setDupRenaming(false); }}
                   className="tech-transition inline-flex items-center gap-1 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
                 >
-                  <Check className="h-3.5 w-3.5" />
+                  <AppIcon name="Check" className="h-3.5 w-3.5" />
                   Save
                 </button>
                 <button
@@ -463,7 +436,7 @@ export function InboxView() {
                   onClick={() => setDupRenaming(false)}
                   className="tech-transition text-muted-foreground hover:text-foreground"
                 >
-                  <X className="h-3.5 w-3.5" />
+                  <AppIcon name="X" className="h-3.5 w-3.5" />
                 </button>
               </span>
             ) : (
@@ -499,7 +472,7 @@ export function InboxView() {
                   onClick={() => { setDupRenameValue(dupNotice.title); setDupRenaming(true); }}
                   className="tech-transition inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-foreground"
                 >
-                  <Pencil className="h-3 w-3" />
+                  <AppIcon name="Pencil" className="h-3 w-3" />
                   Rename existing
                 </button>
                 <button
@@ -508,7 +481,7 @@ export function InboxView() {
                   onClick={() => resolveDupNotice("dismiss")}
                   className="tech-transition text-muted-foreground hover:text-foreground"
                 >
-                  <X className="h-3.5 w-3.5" />
+                  <AppIcon name="X" className="h-3.5 w-3.5" />
                 </button>
               </span>
             )}
@@ -527,13 +500,13 @@ export function InboxView() {
                 {selectedIds.size} selected
               </span>
               <div className="ml-auto flex items-center gap-1">
-                <BulkBtn icon={Lightbulb} onClick={() => bulk("SOMEDAY")}>
+                <BulkBtn icon={themedIcon("Lightbulb")} onClick={() => bulk("SOMEDAY")}>
                   Someday
                 </BulkBtn>
-                <BulkBtn icon={FileText} onClick={() => bulk("REFERENCE")}>
+                <BulkBtn icon={themedIcon("FileText")} onClick={() => bulk("REFERENCE")}>
                   Reference
                 </BulkBtn>
-                <BulkBtn icon={Trash2} danger onClick={bulkDelete}>
+                <BulkBtn icon={themedIcon("Trash2")} danger onClick={bulkDelete}>
                   Delete
                 </BulkBtn>
                 <button
@@ -542,7 +515,7 @@ export function InboxView() {
                   className="tech-transition rounded-md p-1 text-muted-foreground hover:text-foreground"
                   aria-label="Clear selection"
                 >
-                  <X className="h-4 w-4" />
+                  <AppIcon name="X" className="h-4 w-4" />
                 </button>
               </div>
             </div>
@@ -557,22 +530,22 @@ export function InboxView() {
                   title="Filtered by source — change it in the sidebar"
                 >
                   {sourceFilter === "local" ? (
-                    <HardDrive className="h-3 w-3" />
+                    <AppIcon name="HardDrive" className="h-3 w-3" />
                   ) : (
-                    <Cloud className="h-3 w-3" />
+                    <AppIcon name="Cloud" className="h-3 w-3" />
                   )}
                   {sourceFilter === "local" ? "Mine" : "ClickUp"}
                 </span>
               )}
               {processed > 0 && (
                 <span className="hidden items-center gap-1 whitespace-nowrap text-[11px] text-success sm:inline-flex">
-                  <CheckCircle2 className="h-3 w-3" />
+                  <AppIcon name="CheckCircle2" className="h-3 w-3" />
                   {processed} processed
                 </span>
               )}
               {isAging && oldest && !showTickler && (
                 <span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-warning/10 px-2 py-0.5 text-[10px] font-medium text-warning">
-                  <AlertCircle className="h-3 w-3" />
+                  <AppIcon name="AlertCircle" className="h-3 w-3" />
                   oldest {relativeTime(oldest.createdAt)}
                 </span>
               )}
@@ -590,7 +563,7 @@ export function InboxView() {
                 {!showTickler && (
                   <>
                     <div className="tech-transition flex min-w-0 max-w-sm flex-1 items-center gap-2 rounded-lg border border-border bg-card px-2.5 py-1.5 focus-within:border-primary/50">
-                      <Search className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                      <AppIcon name="Search" className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                       <input
                         value={search}
                         onChange={(e) => setSearch(e.target.value)}
@@ -607,7 +580,7 @@ export function InboxView() {
                       className="tech-transition inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-lg border border-border px-2 py-1.5 text-xs text-muted-foreground hover:text-foreground"
                       title="Toggle sort order"
                     >
-                      <ArrowDownUp className="h-3.5 w-3.5" />
+                      <AppIcon name="ArrowDownUp" className="h-3.5 w-3.5" />
                       <span className="hidden lg:inline">
                         {sortOrder === "newest" ? "Newest" : "Oldest"}
                       </span>
@@ -621,9 +594,9 @@ export function InboxView() {
                       className="tech-transition inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-lg border border-border px-2 py-1.5 text-xs text-muted-foreground hover:text-foreground"
                     >
                       {density === "cards" ? (
-                        <LayoutList className="h-3.5 w-3.5" />
+                        <AppIcon name="LayoutList" className="h-3.5 w-3.5" />
                       ) : (
-                        <LayoutGrid className="h-3.5 w-3.5" />
+                        <AppIcon name="LayoutGrid" className="h-3.5 w-3.5" />
                       )}
                       <span className="hidden lg:inline">
                         {density === "cards" ? "List" : "Cards"}
@@ -642,7 +615,7 @@ export function InboxView() {
                         : "text-muted-foreground hover:bg-secondary hover:text-foreground",
                     ].join(" ")}
                   >
-                    <CalendarClock className="h-3.5 w-3.5" />
+                    <AppIcon name="CalendarClock" className="h-3.5 w-3.5" />
                     <span className="hidden sm:inline">Tickler&nbsp;</span>
                     {tickler.length}
                   </button>
@@ -655,9 +628,9 @@ export function InboxView() {
                     title="Process the oldest item first (GTD FIFO)"
                     className="tech-transition inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md bg-primary/10 px-2.5 py-1.5 text-xs font-medium text-primary hover:bg-primary/20 disabled:opacity-40"
                   >
-                    <Sparkles className="h-3.5 w-3.5" />
+                    <AppIcon name="Sparkles" className="h-3.5 w-3.5" />
                     Clarify next
-                    <ArrowRight className="h-3.5 w-3.5" />
+                    <AppIcon name="ArrowRight" className="h-3.5 w-3.5" />
                   </button>
                 )}
               </div>
@@ -671,14 +644,14 @@ export function InboxView() {
         <div className="w-full px-4 py-4 sm:py-3">
           {loading ? (
             <div className="flex flex-col items-center justify-center gap-2 py-16 text-center">
-              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground/60" />
+              <AppIcon name="Loader2" className="h-6 w-6 animate-spin text-muted-foreground/60" />
               <p className="text-xs text-muted-foreground">Loading your inbox…</p>
             </div>
           ) : showTickler ? (
             <TicklerList items={tickler} onUndefer={undeferItem} />
           ) : activeInbox.length === 0 ? (
             <div className="flex flex-col items-center justify-center gap-2 py-16 text-center">
-              <CheckCircle2 className="h-9 w-9 text-success/70" />
+              <AppIcon name="CheckCircle2" className="h-9 w-9 text-success/70" />
               <p className="text-sm font-medium text-foreground">
                 Inbox zero. Mind like water.
               </p>
@@ -690,7 +663,7 @@ export function InboxView() {
             </div>
           ) : visible.length === 0 ? (
             <div className="flex flex-col items-center justify-center gap-2 py-16 text-center">
-              <SearchX className="h-8 w-8 text-muted-foreground/50" />
+              <AppIcon name="SearchX" className="h-8 w-8 text-muted-foreground/50" />
               <p className="text-sm text-muted-foreground">
                 No captures match this filter.
               </p>
@@ -764,7 +737,7 @@ function TicklerList({
             key={item.id}
             className="flex items-center gap-3 rounded-xl border border-border bg-card px-4 py-3"
           >
-            <CalendarClock className="h-4 w-4 shrink-0 text-primary/70" />
+            <AppIcon name="CalendarClock" className="h-4 w-4 shrink-0 text-primary/70" />
             <div className="min-w-0 flex-1">
               <p className="truncate text-sm text-foreground">{item.title}</p>
               <p className="text-[11px] text-muted-foreground">
@@ -776,7 +749,7 @@ function TicklerList({
               onClick={() => onUndefer(item.id)}
               className="tech-transition inline-flex items-center gap-1 rounded-md border border-border px-2 py-1 text-[11px] text-muted-foreground hover:text-foreground"
             >
-              <RotateCcw className="h-3 w-3" />
+              <AppIcon name="RotateCcw" className="h-3 w-3" />
               Un-snooze
             </button>
           </div>
@@ -792,7 +765,7 @@ function BulkBtn({
   danger,
   children,
 }: {
-  icon: typeof Lightbulb;
+  icon: ThemedIcon;
   onClick: () => void;
   danger?: boolean;
   children: React.ReactNode;
diff --git a/workbench/control_plane/src/app/tasks/components/ItemDetail.tsx b/workbench/control_plane/src/app/tasks/components/ItemDetail.tsx
index d377fd98..b653f5f1 100644
--- a/workbench/control_plane/src/app/tasks/components/ItemDetail.tsx
+++ b/workbench/control_plane/src/app/tasks/components/ItemDetail.tsx
@@ -1,36 +1,8 @@
 "use client";
 
+import AppIcon, { themedIcon } from "@/components/Icon";
+import type { ThemedIcon } from "@/components/Icon";
 import { useEffect, useState } from "react";
-import {
-  ArrowRight,
-  Clock,
-  AlertTriangle,
-  FolderKanban,
-  Zap,
-  CalendarClock,
-  UploadCloud,
-  ExternalLink,
-  Mail,
-  Check,
-  X,
-  Pencil,
-  Gauge,
-  Tag,
-  UserRound,
-  UserMinus,
-  CircleDot,
-  Trash2,
-  MessageSquare,
-  Paperclip,
-  ListTree,
-  Loader2,
-  Plus,
-  Maximize2,
-  Timer,
-  Archive,
-  ArchiveRestore,
-  type LucideIcon,
-} from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 import {
   originEmailHref,
@@ -132,7 +104,7 @@ function ItemDetailEmpty({
 
   return (
     <div className="flex h-full flex-col items-center justify-center gap-2 p-8 text-center">
-      <FolderKanban className="h-8 w-8 text-muted-foreground/40" />
+      <AppIcon name="FolderKanban" className="h-8 w-8 text-muted-foreground/40" />
       <p className="text-sm text-muted-foreground">
         {view === "projects"
           ? "Select a project to see its tasks."
@@ -243,7 +215,7 @@ export function TaskDetail({
               rel="noreferrer"
               className="tech-transition inline-flex items-center gap-1 text-[11px] font-medium text-primary hover:underline"
             >
-              <ExternalLink className="h-3 w-3" />
+              <AppIcon name="ExternalLink" className="h-3 w-3" />
               Open in {item.provider}
             </a>
           )}
@@ -257,7 +229,7 @@ export function TaskDetail({
               title="Start Focus Mode — a full-screen timer for this task"
               className="tech-transition inline-flex items-center gap-1 rounded-md border border-primary/30 bg-primary/5 px-2 py-1 text-[11px] font-medium text-primary hover:bg-primary/10"
             >
-              <Timer className="h-3 w-3" />
+              <AppIcon name="Timer" className="h-3 w-3" />
               Focus
             </button>
           )}
@@ -269,7 +241,7 @@ export function TaskDetail({
               onClick={() => openFocus(item.id)}
               className="tech-transition ml-auto rounded-md p-1 text-muted-foreground/70 hover:bg-secondary hover:text-foreground"
             >
-              <Maximize2 className="h-4 w-4" />
+              <AppIcon name="Maximize2" className="h-4 w-4" />
             </button>
           )}
           <button
@@ -283,9 +255,9 @@ export function TaskDetail({
             ].join(" ")}
           >
             {isArchived ? (
-              <ArchiveRestore className="h-4 w-4" />
+              <AppIcon name="ArchiveRestore" className="h-4 w-4" />
             ) : (
-              <Archive className="h-4 w-4" />
+              <AppIcon name="Archive" className="h-4 w-4" />
             )}
           </button>
           <button
@@ -295,7 +267,7 @@ export function TaskDetail({
             onClick={() => requestDelete([item.id])}
             className="tech-transition rounded-md p-1 text-muted-foreground/70 hover:bg-destructive/10 hover:text-destructive"
           >
-            <Trash2 className="h-4 w-4" />
+            <AppIcon name="Trash2" className="h-4 w-4" />
           </button>
         </div>
         <EditableTitle
@@ -320,7 +292,7 @@ export function TaskDetail({
       <div className="flex flex-col gap-5 px-5 py-4">
         {/* Next action — the cardinal GTD field, prominent + editable */}
         <section>
-          <SectionLabel icon={ArrowRight}>Next action</SectionLabel>
+          <SectionLabel icon={themedIcon("ArrowRight")}>Next action</SectionLabel>
           <EditableText
             value={item.nextAction ?? ""}
             placeholder="The next physical, visible step…"
@@ -331,10 +303,10 @@ export function TaskDetail({
 
         {/* Metadata grid — every cell is click-to-edit */}
         <section>
-          <SectionLabel icon={Tag}>Details</SectionLabel>
+          <SectionLabel icon={themedIcon("Tag")}>Details</SectionLabel>
           <div className="grid grid-cols-2 gap-2">
             {/* Context */}
-            <MetaEdit label="Context" icon={Tag}
+            <MetaEdit label="Context" icon={themedIcon("Tag")}
               display={item.context
                 ? <span className="font-mono text-primary/90">{item.context}</span>
                 : null}
@@ -351,7 +323,7 @@ export function TaskDetail({
             </MetaEdit>
 
             {/* Energy */}
-            <MetaEdit label="Energy" icon={Gauge}
+            <MetaEdit label="Energy" icon={themedIcon("Gauge")}
               display={item.energy
                 ? <span className="inline-flex items-center gap-1.5 capitalize">
                     <span className={`h-2 w-2 rounded-full ${ENERGY_DOT[item.energy]}`} />
@@ -371,7 +343,7 @@ export function TaskDetail({
             </MetaEdit>
 
             {/* Estimate */}
-            <MetaEdit label="Estimate" icon={Zap}
+            <MetaEdit label="Estimate" icon={themedIcon("Zap")}
               display={item.timeEstimateMins
                 ? <span>{durationLabel(item.timeEstimateMins)}</span>
                 : null}
@@ -391,10 +363,10 @@ export function TaskDetail({
             </MetaEdit>
 
             {/* Due */}
-            <MetaEdit label="Due" icon={CalendarClock}
+            <MetaEdit label="Due" icon={themedIcon("CalendarClock")}
               display={item.dueAt
                 ? <span className={`inline-flex items-center gap-1 ${overdue ? "font-medium text-destructive" : ""}`}>
-                    {overdue ? <AlertTriangle className="h-3 w-3" /> : <Clock className="h-3 w-3" />}
+                    {overdue ? <AppIcon name="AlertTriangle" className="h-3 w-3" /> : <AppIcon name="Clock" className="h-3 w-3" />}
                     {relativeTime(item.dueAt)}
                   </span>
                 : null}
@@ -416,7 +388,7 @@ export function TaskDetail({
                   {item.dueAt && (
                     <button type="button" onClick={() => { updateItem(item.id, { dueAt: "" }); close(); }}
                       className="tech-transition rounded p-1 text-muted-foreground hover:text-destructive" title="Clear">
-                      <X className="h-3.5 w-3.5" />
+                      <AppIcon name="X" className="h-3.5 w-3.5" />
                     </button>
                   )}
                 </div>
@@ -429,7 +401,7 @@ export function TaskDetail({
                 visible/changeable here too, not just on the board. */}
             {isSynced ? (
               syncedStageOptions.length > 0 && (
-                <MetaEdit label="Stage" icon={CircleDot}
+                <MetaEdit label="Stage" icon={themedIcon("CircleDot")}
                   display={item.providerStatus
                     ? <span>{formatStatus(item.providerStatus)}</span>
                     : null}
@@ -446,7 +418,7 @@ export function TaskDetail({
               )
             ) : (
               stageActions.stages.length > 0 && (
-                <MetaEdit label="Stage" icon={CircleDot}
+                <MetaEdit label="Stage" icon={themedIcon("CircleDot")}
                   display={<span>{stageActions.currentStage}</span>}
                 >
                   {(close) => (
@@ -466,7 +438,7 @@ export function TaskDetail({
                 ClickUp task (they can't see a private local one), so it routes
                 through the destination picker. */}
             {isSynced ? (
-              <MetaEdit label="Assignees" icon={UserRound}
+              <MetaEdit label="Assignees" icon={themedIcon("UserRound")}
                 display={assigneeList.length
                   ? <AssigneeStack people={assigneeList} />
                   : null}
@@ -487,7 +459,7 @@ export function TaskDetail({
                 )}
               </MetaEdit>
             ) : (
-              <MetaEdit label="Assignee" icon={UserRound}
+              <MetaEdit label="Assignee" icon={themedIcon("UserRound")}
                 display={item.assignee
                   ? <span className="inline-flex items-center gap-1.5">
                       <Avatar name={item.assignee.name} />
@@ -525,7 +497,7 @@ export function TaskDetail({
                   Project
                 </div>
                 <div className="mt-0.5 flex min-w-0 items-center gap-1.5 text-sm text-foreground">
-                  <FolderKanban className="h-3.5 w-3.5 shrink-0 text-primary/70" />
+                  <AppIcon name="FolderKanban" className="h-3.5 w-3.5 shrink-0 text-primary/70" />
                   <span className="truncate" title={project.outcome}>{project.outcome}</span>
                 </div>
               </div>
@@ -579,7 +551,7 @@ export function TaskDetail({
             delete/two-way sync is untouched. */}
         {offerDropFromNext && (
           <div className="flex flex-wrap items-center gap-2 rounded-lg border border-warning/40 bg-warning/10 px-3 py-2.5">
-            <AlertTriangle className="h-4 w-4 shrink-0 text-warning" />
+            <AppIcon name="AlertTriangle" className="h-4 w-4 shrink-0 text-warning" />
             <span className="min-w-0 flex-1 text-[12.5px] text-foreground">
               No longer your action? Remove it from My Next Actions — it stays on ClickUp.
             </span>
@@ -588,7 +560,7 @@ export function TaskDetail({
               onClick={() => { updateItem(item.id, { isMine: false }); setOfferDropFromNext(false); }}
               className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90"
             >
-              <UserMinus className="h-3.5 w-3.5" />
+              <AppIcon name="UserMinus" className="h-3.5 w-3.5" />
               Remove from My Next Actions
             </button>
             <button
@@ -604,7 +576,7 @@ export function TaskDetail({
         {/* Waiting-on (delegated) */}
         {item.waitingOn && (
           <section>
-            <SectionLabel icon={Clock}>Waiting on</SectionLabel>
+            <SectionLabel icon={themedIcon("Clock")}>Waiting on</SectionLabel>
             <span className="inline-flex items-center gap-2 text-sm text-foreground">
               <Avatar name={item.waitingOn.name} lg />
               {item.waitingOn.name}
@@ -620,10 +592,10 @@ export function TaskDetail({
                 it only when they actually committed to a date; clearing it
                 takes the promise back rather than writing a second deadline. */}
             <div className="mt-2 max-w-xs">
-              <MetaEdit label="Promised by" icon={CalendarClock}
+              <MetaEdit label="Promised by" icon={themedIcon("CalendarClock")}
                 display={item.expectedBy
                   ? <span className={`inline-flex items-center gap-1 ${promiseLate ? "font-medium text-destructive" : ""}`}>
-                      {promiseLate ? <AlertTriangle className="h-3 w-3" /> : <Clock className="h-3 w-3" />}
+                      {promiseLate ? <AppIcon name="AlertTriangle" className="h-3 w-3" /> : <AppIcon name="Clock" className="h-3 w-3" />}
                       {relativeTime(item.expectedBy)}
                     </span>
                   : <span className="text-[13px] text-muted-foreground/70">
@@ -650,7 +622,7 @@ export function TaskDetail({
                     {item.expectedBy && (
                       <button type="button" onClick={() => { updateItem(item.id, { expectedBy: "" }); close(); }}
                         className="tech-transition rounded p-1 text-muted-foreground hover:text-destructive" title="Clear the promise">
-                        <X className="h-3.5 w-3.5" />
+                        <AppIcon name="X" className="h-3.5 w-3.5" />
                       </button>
                     )}
                   </div>
@@ -693,7 +665,7 @@ export function TaskDetail({
         {/* Captured-from linkage */}
         {item.origin?.kind === "email" && (
           <section>
-            <SectionLabel icon={Mail}>Captured from</SectionLabel>
+            <SectionLabel icon={themedIcon("Mail")}>Captured from</SectionLabel>
             <p className="text-sm text-muted-foreground">
               Email from {item.origin.fromName || item.origin.fromEmail || "someone"}
               {item.origin.subject ? ` — “${item.origin.subject}”` : ""}{"  "}
@@ -712,7 +684,7 @@ export function TaskDetail({
           <section className="rounded-lg border border-warning/30 bg-warning/5 px-3 py-2.5">
             <div className="flex items-center justify-between gap-2">
               <span className="inline-flex items-center gap-1.5 text-[12px] font-medium text-warning">
-                <Clock className="h-3.5 w-3.5" />
+                <AppIcon name="Clock" className="h-3.5 w-3.5" />
                 Not yet pushed to {item.provider ?? "the tool"}
               </span>
               <button
@@ -729,7 +701,7 @@ export function TaskDetail({
                 }}
                 className="tech-transition inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-[11px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
               >
-                <UploadCloud className="h-3.5 w-3.5" />
+                <AppIcon name="UploadCloud" className="h-3.5 w-3.5" />
                 {pushState === "busy" ? "Pushing…" : "Push now"}
               </button>
             </div>
@@ -806,7 +778,7 @@ function LocalSubtasksSection({ item }: { item: GtdItem }) {
 
   return (
     <section>
-      <SectionLabel icon={ListTree}>
+      <SectionLabel icon={themedIcon("ListTree")}>
         Subtasks{subs.length > 0 ? ` · ${doneCount}/${subs.length}` : ""}
       </SectionLabel>
       {loading ? (
@@ -831,7 +803,7 @@ function LocalSubtasksSection({ item }: { item: GtdItem }) {
                       : "border-border hover:border-primary",
                   ].join(" ")}
                 >
-                  {done && <Check className="h-2.5 w-2.5" />}
+                  {done && <AppIcon name="Check" className="h-2.5 w-2.5" />}
                 </button>
                 <button
                   type="button"
@@ -851,7 +823,7 @@ function LocalSubtasksSection({ item }: { item: GtdItem }) {
                     className="shrink-0 text-muted-foreground/60 hover:text-foreground"
                     title="Open in ClickUp"
                   >
-                    <ExternalLink className="h-3 w-3" />
+                    <AppIcon name="ExternalLink" className="h-3 w-3" />
                   </a>
                 )}
               </div>
@@ -859,7 +831,7 @@ function LocalSubtasksSection({ item }: { item: GtdItem }) {
           })}
           {backend === "live" && (
             <div className="flex items-center gap-1.5 rounded-md border border-dashed border-border px-2 py-1.5">
-              <Plus className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+              <AppIcon name="Plus" className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
               <input
                 value={adding}
                 onChange={(e) => setAdding(e.target.value)}
@@ -913,7 +885,7 @@ function ProviderDetailSections({
   if (loading) {
     return (
       <div className="flex items-center gap-2 text-[12px] text-muted-foreground">
-        <Loader2 className="h-3.5 w-3.5 animate-spin" />
+        <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
         Loading {provider === "clickup" ? "ClickUp" : provider} detail…
       </div>
     );
@@ -928,7 +900,7 @@ function ProviderDetailSections({
     <>
       {subtasks.length > 0 && (
         <section>
-          <SectionLabel icon={ListTree}>Subtasks · {subtasks.length}</SectionLabel>
+          <SectionLabel icon={themedIcon("ListTree")}>Subtasks · {subtasks.length}</SectionLabel>
           <div className="flex flex-col gap-1">
             {subtasks.map((s) => <SubtaskRow key={s.providerTaskId} s={s} />)}
           </div>
@@ -937,7 +909,7 @@ function ProviderDetailSections({
 
       {attachments.length > 0 && (
         <section>
-          <SectionLabel icon={Paperclip}>
+          <SectionLabel icon={themedIcon("Paperclip")}>
             Attachments · {attachments.length}
           </SectionLabel>
           <AttachmentChips attachments={attachments} />
@@ -946,7 +918,7 @@ function ProviderDetailSections({
 
       {comments.length > 0 && (
         <section>
-          <SectionLabel icon={MessageSquare}>
+          <SectionLabel icon={themedIcon("MessageSquare")}>
             Comments · {comments.length}
           </SectionLabel>
           <div className="flex flex-col gap-2.5">
@@ -982,7 +954,7 @@ function SubtaskRow({ s }: { s: TaskSubtask }) {
           done ? "border-success bg-success/15 text-success" : "border-border",
         ].join(" ")}
       >
-        {done && <Check className="h-2.5 w-2.5" />}
+        {done && <AppIcon name="Check" className="h-2.5 w-2.5" />}
       </span>
       <span className={`min-w-0 flex-1 truncate ${done ? "text-muted-foreground line-through" : "text-foreground"}`}>
         {s.title}
@@ -993,7 +965,7 @@ function SubtaskRow({ s }: { s: TaskSubtask }) {
         </span>
       )}
       {s.assignees[0] && <Avatar name={s.assignees[0].name} />}
-      {s.providerUrl && <ExternalLink className="h-3 w-3 shrink-0 text-muted-foreground/60" />}
+      {s.providerUrl && <AppIcon name="ExternalLink" className="h-3 w-3 shrink-0 text-muted-foreground/60" />}
     </div>
   );
   return s.providerUrl ? (
@@ -1030,7 +1002,7 @@ function SectionLabel({
   icon: Icon,
   children,
 }: {
-  icon?: LucideIcon;
+  icon?: ThemedIcon;
   children: React.ReactNode;
 }) {
   return (
@@ -1055,7 +1027,7 @@ function EditableTitle({ value, onSave }: { value: string; onSave: (v: string) =
         title="Click to edit"
       >
         <h1 className="text-lg font-bold leading-snug text-foreground">{value}</h1>
-        <Pencil className="mt-1.5 h-3.5 w-3.5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
+        <AppIcon name="Pencil" className="mt-1.5 h-3.5 w-3.5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
       </button>
     );
   }
@@ -1108,7 +1080,7 @@ function EditableText({
         <p className={`flex-1 text-sm text-foreground ${multiline ? "whitespace-pre-wrap" : ""}`}>
           {value}
         </p>
-        <Pencil className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
+        <AppIcon name="Pencil" className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
       </button>
     ) : (
       <button
@@ -1116,7 +1088,7 @@ function EditableText({
         onClick={startEdit}
         className="tech-transition inline-flex items-center gap-1.5 rounded-md border border-dashed border-border px-2.5 py-1.5 text-[13px] text-muted-foreground hover:border-primary/40 hover:text-foreground"
       >
-        <Pencil className="h-3 w-3" />
+        <AppIcon name="Pencil" className="h-3 w-3" />
         {emptyHint}
       </button>
     );
@@ -1157,7 +1129,7 @@ function MetaEdit({
   children,
 }: {
   label: string;
-  icon: LucideIcon;
+  icon: ThemedIcon;
   display: React.ReactNode;
   children: (close: () => void) => React.ReactNode;
 }) {
@@ -1176,7 +1148,7 @@ function MetaEdit({
             <Icon className="h-3 w-3" />
             {label}
           </span>
-          <Pencil className="h-3 w-3 shrink-0 text-muted-foreground/50 opacity-0 transition-opacity group-hover:opacity-100" />
+          <AppIcon name="Pencil" className="h-3 w-3 shrink-0 text-muted-foreground/50 opacity-0 transition-opacity group-hover:opacity-100" />
         </div>
         <div className="mt-0.5 text-sm text-foreground">
           {display ?? <span className="text-muted-foreground/60">—</span>}
@@ -1197,7 +1169,7 @@ function MetaEdit({
           className="tech-transition rounded p-0.5 text-muted-foreground/60 hover:text-foreground"
           aria-label={`Close ${label} editor`}
         >
-          <X className="h-3 w-3" />
+          <AppIcon name="X" className="h-3 w-3" />
         </button>
       </div>
       <div className="mt-1.5">{children(() => setOpen(false))}</div>
@@ -1329,7 +1301,7 @@ function MultiPersonMenu({
                 : "border-border text-muted-foreground hover:bg-secondary",
             ].join(" ")}
           >
-            {on ? <Check className="h-3 w-3 shrink-0" /> : <Avatar name={p.name} />}
+            {on ? <AppIcon name="Check" className="h-3 w-3 shrink-0" /> : <Avatar name={p.name} />}
             {p.name}
           </button>
         );
@@ -1413,7 +1385,7 @@ function StatusPicker({
                   item.disposition === d ? "bg-primary/10 text-primary" : "text-foreground hover:bg-secondary",
                 ].join(" ")}
               >
-                {item.disposition === d && <Check className="h-3.5 w-3.5" />}
+                {item.disposition === d && <AppIcon name="Check" className="h-3.5 w-3.5" />}
                 <span className={item.disposition === d ? "" : "ml-[22px]"}>
                   {DISPOSITION_LABEL[d]}
                 </span>
diff --git a/workbench/control_plane/src/app/tasks/components/ItemList.tsx b/workbench/control_plane/src/app/tasks/components/ItemList.tsx
index 3bfb652d..5a3be629 100644
--- a/workbench/control_plane/src/app/tasks/components/ItemList.tsx
+++ b/workbench/control_plane/src/app/tasks/components/ItemList.tsx
@@ -1,28 +1,7 @@
 "use client";
 
+import AppIcon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import { useMemo, useState, useSyncExternalStore } from "react";
-import {
-  Inbox,
-  ListChecks,
-  Clock,
-  Calendar,
-  Lightbulb,
-  CheckCircle2,
-  AlertTriangle,
-  Loader2,
-  HardDrive,
-  Cloud,
-  LayoutList,
-  Columns3,
-  Archive,
-  ArchiveRestore,
-  Trash2,
-  CheckSquare,
-  Target,
-  Zap,
-  X,
-  Sparkles,
-} from "lucide-react";
 import { useTaskStore, itemsForView } from "../lib/taskStore";
 import { isUntagged } from "../lib/priority";
 import { ViewKey } from "../lib/types";
@@ -63,17 +42,17 @@ function setModePersist(m: "list" | "board") {
 
 const VIEW_META: Record<
   string,
-  { title: string; icon: typeof Inbox; hint: string }
+  { title: string; icon: ThemedIcon; hint: string }
 > = {
-  inbox: { title: "Inbox", icon: Inbox, hint: "Capture, then clarify each item to zero." },
-  next: { title: "My Next Actions", icon: ListChecks, hint: "Tasks assigned to you, grouped by status and sorted by priority — the very next physical step for each." },
-  priority: { title: "Priority", icon: Target, hint: "Your open work by the founder matrix — Founder Fire first, Eliminate last." },
-  engage: { title: "Engage · Now", icon: Zap, hint: "What you can pick up right now, matched to your energy." },
-  waiting: { title: "Waiting For", icon: Clock, hint: "Delegated or blocked on someone else." },
-  calendar: { title: "Calendar", icon: Calendar, hint: "Date-specific actions — the hard landscape." },
-  someday: { title: "Someday / Maybe", icon: Lightbulb, hint: "Incubating. Reviewed weekly." },
-  done: { title: "Done", icon: CheckCircle2, hint: "Completed tasks. They stay here until you archive them." },
-  archive: { title: "Archive", icon: Archive, hint: "Archived tasks — hidden from active views. Restore anytime." },
+  inbox: { title: "Inbox", icon: themedIcon("Inbox"), hint: "Capture, then clarify each item to zero." },
+  next: { title: "My Next Actions", icon: themedIcon("ListChecks"), hint: "Tasks assigned to you, grouped by status and sorted by priority — the very next physical step for each." },
+  priority: { title: "Priority", icon: themedIcon("Target"), hint: "Your open work by the founder matrix — Founder Fire first, Eliminate last." },
+  engage: { title: "Engage · Now", icon: themedIcon("Zap"), hint: "What you can pick up right now, matched to your energy." },
+  waiting: { title: "Waiting For", icon: themedIcon("Clock"), hint: "Delegated or blocked on someone else." },
+  calendar: { title: "Calendar", icon: themedIcon("Calendar"), hint: "Date-specific actions — the hard landscape." },
+  someday: { title: "Someday / Maybe", icon: themedIcon("Lightbulb"), hint: "Incubating. Reviewed weekly." },
+  done: { title: "Done", icon: themedIcon("CheckCircle2"), hint: "Completed tasks. They stay here until you archive them." },
+  archive: { title: "Archive", icon: themedIcon("Archive"), hint: "Archived tasks — hidden from active views. Restore anytime." },
 };
 
 export function ItemList() {
@@ -215,7 +194,7 @@ export function ItemList() {
                     : "text-muted-foreground hover:text-foreground",
                 ].join(" ")}
               >
-                <LayoutList className="h-3 w-3" />
+                <AppIcon name="LayoutList" className="h-3 w-3" />
                 List
               </button>
               <button
@@ -230,7 +209,7 @@ export function ItemList() {
                     : "text-muted-foreground hover:text-foreground",
                 ].join(" ")}
               >
-                <Columns3 className="h-3 w-3" />
+                <AppIcon name="Columns3" className="h-3 w-3" />
                 Board
               </button>
             </div>
@@ -247,9 +226,9 @@ export function ItemList() {
               title="Filtered by source — change it in the sidebar"
             >
               {sourceFilter === "local" ? (
-                <HardDrive className="h-3 w-3" />
+                <AppIcon name="HardDrive" className="h-3 w-3" />
               ) : (
-                <Cloud className="h-3 w-3" />
+                <AppIcon name="Cloud" className="h-3 w-3" />
               )}
               {sourceFilter === "local" ? "Mine" : "ClickUp"}
             </span>
@@ -276,7 +255,7 @@ export function ItemList() {
                   : "border-border text-muted-foreground hover:border-primary/40 hover:text-foreground",
               ].join(" ")}
             >
-              <CheckSquare className="h-3 w-3" />
+              <AppIcon name="CheckSquare" className="h-3 w-3" />
               Select
             </button>
           )}
@@ -296,13 +275,13 @@ export function ItemList() {
         <p className="mt-0.5 text-[11px] text-muted-foreground">{meta.hint}</p>
         {view === "waiting" && overdueCount > 0 && (
           <p className="mt-1 inline-flex items-center gap-1 text-[11px] font-medium text-destructive">
-            <AlertTriangle className="h-3 w-3" />
+            <AppIcon name="AlertTriangle" className="h-3 w-3" />
             {overdueCount} overdue — needs a nudge
           </p>
         )}
         {untaggedCount > 0 && (
           <p className="mt-1 inline-flex items-center gap-1 text-[11px] text-muted-foreground/80">
-            <AlertTriangle className="h-3 w-3" />
+            <AppIcon name="AlertTriangle" className="h-3 w-3" />
             {untaggedCount} not yet judged — in{" "}
             <span className="font-medium">Eliminate</span> by default until you
             flag them important or leveraged.
@@ -316,7 +295,7 @@ export function ItemList() {
 
       {loading ? (
         <div className="flex flex-1 flex-col items-center justify-center gap-2 p-8 text-center">
-          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground/60" />
+          <AppIcon name="Loader2" className="h-6 w-6 animate-spin text-muted-foreground/60" />
           <p className="text-xs text-muted-foreground">Loading…</p>
         </div>
       ) : visible.length === 0 ? (
@@ -381,7 +360,7 @@ export function ItemList() {
           <div className="ml-auto flex items-center gap-1.5">
             {isArchiveView ? (
               <BulkAction
-                icon={ArchiveRestore}
+                icon={themedIcon("ArchiveRestore")}
                 label="Restore"
                 onClick={() => {
                   bulkArchive([...selectedIds], false);
@@ -390,7 +369,7 @@ export function ItemList() {
               />
             ) : (
               <BulkAction
-                icon={Archive}
+                icon={themedIcon("Archive")}
                 label="Archive"
                 onClick={() => {
                   bulkArchive([...selectedIds], true);
@@ -399,7 +378,7 @@ export function ItemList() {
               />
             )}
             <BulkAction
-              icon={Trash2}
+              icon={themedIcon("Trash2")}
               label="Delete"
               danger
               onClick={() => {
@@ -413,7 +392,7 @@ export function ItemList() {
               aria-label="Cancel selection"
               className="tech-transition rounded-md p-1 text-muted-foreground hover:text-foreground"
             >
-              <X className="h-4 w-4" />
+              <AppIcon name="X" className="h-4 w-4" />
             </button>
           </div>
         </div>
@@ -428,7 +407,7 @@ function BulkAction({
   onClick,
   danger = false,
 }: {
-  icon: typeof Archive;
+  icon: ThemedIcon;
   label: string;
   onClick: () => void;
   danger?: boolean;
@@ -495,9 +474,9 @@ function ContextBackfillButton({ count }: { count: number }) {
       className="tech-transition ml-auto inline-flex items-center gap-1.5 rounded-md border border-primary/30 bg-primary/5 px-2 py-1 text-[11px] font-medium text-primary hover:bg-primary/10 disabled:opacity-50"
     >
       {busy ? (
-        <Loader2 className="h-3.5 w-3.5 animate-spin" />
+        <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
       ) : (
-        <Sparkles className="h-3.5 w-3.5" />
+        <AppIcon name="Sparkles" className="h-3.5 w-3.5" />
       )}
       {done ?? `Assign context · ${count}`}
     </button>
@@ -515,7 +494,7 @@ function EmptyState({ view }: { view: ViewKey }) {
           : "Nothing here yet.";
   return (
     <div className="flex flex-1 flex-col items-center justify-center gap-2 p-8 text-center">
-      <CheckCircle2 className="h-8 w-8 text-success/70" />
+      <AppIcon name="CheckCircle2" className="h-8 w-8 text-success/70" />
       <p className="text-sm text-muted-foreground">{msg}</p>
     </div>
   );
diff --git a/workbench/control_plane/src/app/tasks/components/ListColumns.tsx b/workbench/control_plane/src/app/tasks/components/ListColumns.tsx
index 97ec4152..ee4195db 100644
--- a/workbench/control_plane/src/app/tasks/components/ListColumns.tsx
+++ b/workbench/control_plane/src/app/tasks/components/ListColumns.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AlertTriangle, Clock, Paperclip, ListTree, Zap } from "lucide-react";
+import Icon from "@/components/Icon";
 import { GtdItem } from "../lib/types";
 import { useTaskStore } from "../lib/taskStore";
 import { durationLabel, isOverdue, relativeTime } from "../lib/utils";
@@ -158,7 +158,7 @@ function CellBody({
     case "estimate":
       return item.timeEstimateMins ? (
         <span className="inline-flex items-center gap-1 text-[10px] text-muted-foreground">
-          <Zap className="h-3 w-3" />
+          <Icon name="Zap" className="h-3 w-3" />
           {durationLabel(item.timeEstimateMins)}
         </span>
       ) : null;
@@ -173,9 +173,9 @@ function CellBody({
           ].join(" ")}
         >
           {isOverdue(item) ? (
-            <AlertTriangle className="h-3 w-3" />
+            <Icon name="AlertTriangle" className="h-3 w-3" />
           ) : (
-            <Clock className="h-3 w-3" />
+            <Icon name="Clock" className="h-3 w-3" />
           )}
           {relativeTime(item.dueAt)}
         </span>
@@ -183,14 +183,14 @@ function CellBody({
     case "attachments":
       return item.attachments?.length ? (
         <span className="inline-flex items-center gap-0.5 text-[10px] text-muted-foreground">
-          <Paperclip className="h-3 w-3" />
+          <Icon name="Paperclip" className="h-3 w-3" />
           {item.attachments.length}
         </span>
       ) : null;
     case "subtasks":
       return item.subtaskCount ? (
         <span className="inline-flex items-center gap-0.5 text-[10px] text-muted-foreground">
-          <ListTree className="h-3 w-3" />
+          <Icon name="ListTree" className="h-3 w-3" />
           {item.subtaskCount}
         </span>
       ) : null;
diff --git a/workbench/control_plane/src/app/tasks/components/ListsSidebar.tsx b/workbench/control_plane/src/app/tasks/components/ListsSidebar.tsx
index c5abfe74..cedaeeae 100644
--- a/workbench/control_plane/src/app/tasks/components/ListsSidebar.tsx
+++ b/workbench/control_plane/src/app/tasks/components/ListsSidebar.tsx
@@ -1,28 +1,8 @@
 "use client";
 
+import AppIcon, { themedIcon } from "@/components/Icon";
+import type { ThemedIcon } from "@/components/Icon";
 import { useMemo } from "react";
-import {
-  Inbox,
-  ListChecks,
-  Clock,
-  Calendar,
-  FolderKanban,
-  Users,
-  Lightbulb,
-  Mountain,
-  Cloud,
-  Plug,
-  HardDrive,
-  Layers,
-  Sparkles,
-  Archive,
-  CheckCircle2,
-  RefreshCw,
-  Loader2,
-  AlertTriangle,
-  type LucideIcon,
-  Settings2,
-} from "lucide-react";
 import { useTaskStore, viewCounts } from "../lib/taskStore";
 import { relativeTime } from "../lib/utils";
 import { ViewKey } from "../lib/types";
@@ -30,7 +10,7 @@ import { ViewKey } from "../lib/types";
 type NavRow = {
   view: ViewKey;
   label: string;
-  icon: LucideIcon;
+  icon: ThemedIcon;
   /** show the count badge */
   showCount?: boolean;
   /** not yet built — rendered disabled with a "soon" tag */
@@ -43,19 +23,19 @@ type NavRow = {
 // sidebar entries. Priority and Engage were removed as standalone views for
 // that reason.
 const PRIMARY: NavRow[] = [
-  { view: "inbox", label: "Inbox", icon: Inbox, showCount: true },
-  { view: "next", label: "My Next Actions", icon: ListChecks, showCount: true },
-  { view: "waiting", label: "Waiting For", icon: Clock, showCount: true },
-  { view: "calendar", label: "Calendar", icon: Calendar, showCount: true },
-  { view: "projects", label: "Projects", icon: FolderKanban },
-  { view: "people", label: "People", icon: Users },
-  { view: "someday", label: "Someday / Maybe", icon: Lightbulb, showCount: true },
-  { view: "done", label: "Done", icon: CheckCircle2, showCount: true },
-  { view: "archive", label: "Archive", icon: Archive },
+  { view: "inbox", label: "Inbox", icon: themedIcon("Inbox"), showCount: true },
+  { view: "next", label: "My Next Actions", icon: themedIcon("ListChecks"), showCount: true },
+  { view: "waiting", label: "Waiting For", icon: themedIcon("Clock"), showCount: true },
+  { view: "calendar", label: "Calendar", icon: themedIcon("Calendar"), showCount: true },
+  { view: "projects", label: "Projects", icon: themedIcon("FolderKanban") },
+  { view: "people", label: "People", icon: themedIcon("Users") },
+  { view: "someday", label: "Someday / Maybe", icon: themedIcon("Lightbulb"), showCount: true },
+  { view: "done", label: "Done", icon: themedIcon("CheckCircle2"), showCount: true },
+  { view: "archive", label: "Archive", icon: themedIcon("Archive") },
 ];
 
 const SECONDARY: NavRow[] = [
-  { view: "horizons", label: "Horizons of Focus", icon: Mountain, soon: true },
+  { view: "horizons", label: "Horizons of Focus", icon: themedIcon("Mountain"), soon: true },
 ];
 
 export function ListsSidebar({
@@ -119,9 +99,9 @@ export function ListsSidebar({
           <div className="flex items-center gap-0.5 rounded-lg border border-border bg-background p-0.5">
             {(
               [
-                { id: "all", label: "All", Icon: Layers },
-                { id: "local", label: "Mine", Icon: HardDrive },
-                { id: "synced", label: "ClickUp", Icon: Cloud },
+                { id: "all", label: "All", Icon: themedIcon("Layers") },
+                { id: "local", label: "Mine", Icon: themedIcon("HardDrive") },
+                { id: "synced", label: "ClickUp", Icon: themedIcon("Cloud") },
               ] as const
             ).map(({ id, label, Icon }) => (
               <button
@@ -197,7 +177,7 @@ export function ListsSidebar({
                 : "text-muted-foreground hover:bg-secondary hover:text-foreground",
             ].join(" ")}
           >
-            <Sparkles className="h-4 w-4 shrink-0" />
+            <AppIcon name="Sparkles" className="h-4 w-4 shrink-0" />
             <span className="flex-1">Assistant</span>
           </button>
         </div>
@@ -212,7 +192,7 @@ export function ListsSidebar({
             key={a.id}
             className="flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-[13px] text-muted-foreground"
           >
-            <Cloud className="h-3.5 w-3.5 shrink-0 text-primary/70" />
+            <AppIcon name="Cloud" className="h-3.5 w-3.5 shrink-0 text-primary/70" />
             <div className="min-w-0 flex-1">
               <span className="block truncate">{a.label}</span>
               {/* Sync visibility: last pull time (or the error), so it's clear
@@ -227,7 +207,7 @@ export function ListsSidebar({
               >
                 {a.syncError ? (
                   <>
-                    <AlertTriangle className="h-2.5 w-2.5 shrink-0" />
+                    <AppIcon name="AlertTriangle" className="h-2.5 w-2.5 shrink-0" />
                     Sync failed
                   </>
                 ) : syncing ? (
@@ -250,9 +230,9 @@ export function ListsSidebar({
               className="tech-transition shrink-0 rounded-md p-1 text-muted-foreground/70 hover:bg-secondary hover:text-foreground disabled:opacity-50"
             >
               {syncing ? (
-                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
               ) : (
-                <RefreshCw className="h-3.5 w-3.5" />
+                <AppIcon name="RefreshCw" className="h-3.5 w-3.5" />
               )}
             </button>
           </div>
@@ -265,7 +245,7 @@ export function ListsSidebar({
           }}
           className="tech-transition flex w-full items-center gap-2.5 rounded-lg px-2 py-2 text-left text-[13px] text-muted-foreground hover:bg-secondary hover:text-foreground"
         >
-          <Plug className="h-3.5 w-3.5 shrink-0" />
+          <AppIcon name="Plug" className="h-3.5 w-3.5 shrink-0" />
           <span className="flex-1">Connect workspace…</span>
         </button>
         <button
@@ -276,7 +256,7 @@ export function ListsSidebar({
           }}
           className="tech-transition flex w-full items-center gap-2.5 rounded-lg px-2 py-2 text-left text-[13px] text-muted-foreground hover:bg-secondary hover:text-foreground"
         >
-          <Settings2 className="h-3.5 w-3.5 shrink-0" />
+          <AppIcon name="Settings2" className="h-3.5 w-3.5 shrink-0" />
           <span className="flex-1">Settings</span>
         </button>
       </div>
diff --git a/workbench/control_plane/src/app/tasks/components/PeopleView.tsx b/workbench/control_plane/src/app/tasks/components/PeopleView.tsx
index 1a5256f9..c8e70f04 100644
--- a/workbench/control_plane/src/app/tasks/components/PeopleView.tsx
+++ b/workbench/control_plane/src/app/tasks/components/PeopleView.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useEffect, useMemo, useState } from "react";
-import { Plus, Search, Loader2, Users, Link2 } from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 import { OrgPerson } from "../lib/types";
 import { PersonEditor } from "./PersonEditor";
@@ -62,7 +62,7 @@ export function PeopleView() {
   if (backend !== "live") {
     return (
       <div className="flex h-full flex-col items-center justify-center gap-2 text-sm text-muted-foreground">
-        <Users size={22} className="opacity-40" />
+        <Icon name="Users" size={22} className="opacity-40" />
         Connect a live workspace to manage your team.
       </div>
     );
@@ -74,7 +74,7 @@ export function PeopleView() {
       <div className="flex flex-wrap items-center gap-2 border-b border-border bg-card px-4 py-2.5">
         <div className="flex items-center gap-2">
           <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary/15 text-primary">
-            <Users size={15} />
+            <Icon name="Users" size={15} />
           </div>
           <div>
             <h1 className="text-sm font-semibold leading-tight text-foreground">
@@ -87,7 +87,7 @@ export function PeopleView() {
         </div>
         <div className="ml-auto flex items-center gap-2">
           <div className="flex items-center gap-2 rounded-md bg-secondary px-2.5 py-1.5">
-            <Search size={13} className="text-muted-foreground" />
+            <Icon name="Search" size={13} className="text-muted-foreground" />
             <input
               value={q}
               onChange={(e) => setQ(e.target.value)}
@@ -99,7 +99,7 @@ export function PeopleView() {
             onClick={() => setEditing("new")}
             className="flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
           >
-            <Plus size={14} /> Add person
+            <Icon name="Plus" size={14} /> Add person
           </button>
         </div>
       </div>
@@ -136,11 +136,11 @@ export function PeopleView() {
       <div className="min-h-0 flex-1 overflow-y-auto">
         {loading ? (
           <div className="flex items-center gap-2 px-4 py-6 text-xs text-muted-foreground">
-            <Loader2 size={14} className="animate-spin" /> Loading people…
+            <Icon name="Loader2" size={14} className="animate-spin" /> Loading people…
           </div>
         ) : visible.length === 0 ? (
           <div className="flex flex-col items-center justify-center gap-2 py-16 text-sm text-muted-foreground">
-            <Users size={22} className="opacity-40" />
+            <Icon name="Users" size={22} className="opacity-40" />
             {orgPeople.length === 0
               ? "No people yet — add your team or seed from the HR import."
               : "No one matches those filters."}
@@ -190,7 +190,7 @@ function PersonRow({ p, onOpen }: { p: OrgPerson; onOpen: () => void }) {
             </span>
           )}
           {p.providerUserId && (
-            <Link2
+            <Icon name="Link2"
               size={11}
               className="text-emerald-500"
               aria-label="Linked to ClickUp"
diff --git a/workbench/control_plane/src/app/tasks/components/PersonEditor.tsx b/workbench/control_plane/src/app/tasks/components/PersonEditor.tsx
index 359d9c04..6d36a0da 100644
--- a/workbench/control_plane/src/app/tasks/components/PersonEditor.tsx
+++ b/workbench/control_plane/src/app/tasks/components/PersonEditor.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useMemo, useRef, useState } from "react";
-import { X, Loader2, Upload, Check, Plus } from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 import { OrgPerson, OrgPersonWrite } from "../lib/types";
 
@@ -136,7 +136,7 @@ export function PersonEditor({
             onClick={onClose}
             className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
           >
-            <X size={16} />
+            <Icon name="X" size={16} />
           </button>
         </div>
 
@@ -212,7 +212,7 @@ export function PersonEditor({
                     onClick={() => removeSkill(s)}
                     className="text-muted-foreground hover:text-foreground"
                   >
-                    <X size={10} />
+                    <Icon name="X" size={10} />
                   </button>
                 </span>
               ))}
@@ -232,7 +232,7 @@ export function PersonEditor({
                 {skillInput.trim() && (
                   <button onClick={() => addSkill(skillInput)}
                     className="text-primary hover:opacity-80">
-                    <Plus size={12} />
+                    <Icon name="Plus" size={12} />
                   </button>
                 )}
               </div>
@@ -256,15 +256,15 @@ export function PersonEditor({
                   className="flex items-center gap-1.5 rounded-md border border-dashed border-border px-3 py-2 text-xs text-muted-foreground transition-colors hover:bg-secondary disabled:opacity-50"
                 >
                   {uploading ? (
-                    <Loader2 size={13} className="animate-spin" />
+                    <Icon name="Loader2" size={13} className="animate-spin" />
                   ) : (
-                    <Upload size={13} />
+                    <Icon name="Upload" size={13} />
                   )}
                   {uploading ? "Parsing résumé…" : "Upload résumé (PDF/DOCX) → auto-update skills"}
                 </button>
                 {notice && (
                   <div className="flex items-start gap-1.5 text-[11px] text-emerald-500">
-                    <Check size={12} className="mt-0.5 flex-shrink-0" /> {notice}
+                    <Icon name="Check" size={12} className="mt-0.5 flex-shrink-0" /> {notice}
                   </div>
                 )}
               </div>
@@ -292,7 +292,7 @@ export function PersonEditor({
             disabled={saving || !name.trim()}
             className="flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
           >
-            {saving && <Loader2 size={13} className="animate-spin" />}
+            {saving && <Icon name="Loader2" size={13} className="animate-spin" />}
             {person ? "Save changes" : "Add person"}
           </button>
         </div>
diff --git a/workbench/control_plane/src/app/tasks/components/PriorityControls.tsx b/workbench/control_plane/src/app/tasks/components/PriorityControls.tsx
index de5a00bf..1efab5c3 100644
--- a/workbench/control_plane/src/app/tasks/components/PriorityControls.tsx
+++ b/workbench/control_plane/src/app/tasks/components/PriorityControls.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AlertTriangle, Gem, Waves, X, Zap } from "lucide-react";
+import AppIcon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import { GtdItem } from "../lib/types";
 import { useTaskStore } from "../lib/taskStore";
 import {
@@ -53,7 +53,7 @@ export function WeightToggles({
       <FlagToggle
         active={!!item.important}
         onClick={() => onChange({ important: !item.important })}
-        icon={AlertTriangle}
+        icon={themedIcon("AlertTriangle")}
         label="Important"
         title="Something stalls or breaks if this is skipped (downside)."
         tone="important"
@@ -62,7 +62,7 @@ export function WeightToggles({
       <FlagToggle
         active={!!item.leveraged}
         onClick={() => onChange({ leveraged: !item.leveraged })}
-        icon={Gem}
+        icon={themedIcon("Gem")}
         label="Leveraged"
         title="Rare, asymmetric 100x upside — an investor, a grant, a key hire."
         tone="leveraged"
@@ -71,7 +71,7 @@ export function WeightToggles({
       <FlagToggle
         active={!!item.deepWork}
         onClick={() => onChange({ deepWork: !item.deepWork })}
-        icon={Waves}
+        icon={themedIcon("Waves")}
         label="Deep work"
         title="Needs an unbroken flow state — creative, building, writing, strategy. The planner protects a long peak-energy block for it."
         tone="deep"
@@ -92,7 +92,7 @@ export function WeightToggles({
             : "border-dashed border-border text-muted-foreground/50",
         ].join(" ")}
       >
-        <Zap className="h-3 w-3" />
+        <AppIcon name="Zap" className="h-3 w-3" />
         Urgent
         <span className="text-[9px] opacity-60">(auto)</span>
       </span>
@@ -111,7 +111,7 @@ function FlagToggle({
 }: {
   active: boolean;
   onClick: () => void;
-  icon: typeof AlertTriangle;
+  icon: ThemedIcon;
   label: string;
   title: string;
   tone: "important" | "leveraged" | "deep";
@@ -268,7 +268,7 @@ export function SuggestionBadge({
         aria-label="Dismiss suggestion — keep mine"
         className="tech-transition -mr-0.5 shrink-0 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/15"
       >
-        <X className="h-2.5 w-2.5" />
+        <AppIcon name="X" className="h-2.5 w-2.5" />
       </button>
     </span>
   );
diff --git a/workbench/control_plane/src/app/tasks/components/ProjectTasksView.tsx b/workbench/control_plane/src/app/tasks/components/ProjectTasksView.tsx
index a5153557..17885d9f 100644
--- a/workbench/control_plane/src/app/tasks/components/ProjectTasksView.tsx
+++ b/workbench/control_plane/src/app/tasks/components/ProjectTasksView.tsx
@@ -1,14 +1,7 @@
 "use client";
 
+import AppIcon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import { useMemo, useSyncExternalStore } from "react";
-import {
-  FolderKanban,
-  LayoutList,
-  Columns3,
-  AlertTriangle,
-  CheckCircle2,
-  ExternalLink,
-} from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 import { GtdProject } from "../lib/types";
 import { applyFilters, applySort } from "../lib/ordering";
@@ -86,19 +79,19 @@ export function ProjectTasksView({ project }: { project: GtdProject }) {
       {/* Project header */}
       <header className="border-b border-border bg-card px-5 py-3">
         <div className="mb-1 flex items-center gap-2">
-          <FolderKanban className="h-4 w-4 text-primary" />
+          <AppIcon name="FolderKanban" className="h-4 w-4 text-primary" />
           <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
             Project
           </span>
           <SourceBadge source={project.source} provider={project.provider} />
           {project.hasNextAction || openCount > 0 ? (
             <span className="inline-flex items-center gap-1 text-[11px] text-success">
-              <CheckCircle2 className="h-3 w-3" />
+              <AppIcon name="CheckCircle2" className="h-3 w-3" />
               {openCount} next action{openCount === 1 ? "" : "s"}
             </span>
           ) : (
             <span className="inline-flex items-center gap-1 text-[11px] font-medium text-warning">
-              <AlertTriangle className="h-3 w-3" />
+              <AppIcon name="AlertTriangle" className="h-3 w-3" />
               No next action
             </span>
           )}
@@ -106,13 +99,13 @@ export function ProjectTasksView({ project }: { project: GtdProject }) {
             <ModeButton
               active={mode === "list"}
               onClick={() => setModePersist("list")}
-              icon={LayoutList}
+              icon={themedIcon("LayoutList")}
               label="List"
             />
             <ModeButton
               active={mode === "board"}
               onClick={() => setModePersist("board")}
-              icon={Columns3}
+              icon={themedIcon("Columns3")}
               label="Board"
             />
           </span>
@@ -125,7 +118,7 @@ export function ProjectTasksView({ project }: { project: GtdProject }) {
         )}
         {isSynced && !providerStages && (
           <p className="mt-1 inline-flex items-center gap-1 text-[11px] text-muted-foreground">
-            <ExternalLink className="h-3 w-3" />
+            <AppIcon name="ExternalLink" className="h-3 w-3" />
             Sync the workspace to load this project&apos;s ClickUp stages.
           </p>
         )}
@@ -135,7 +128,7 @@ export function ProjectTasksView({ project }: { project: GtdProject }) {
 
       {visible.length === 0 ? (
         <div className="flex flex-1 flex-col items-center justify-center gap-2 p-8 text-center">
-          <CheckCircle2 className="h-8 w-8 text-success/60" />
+          <AppIcon name="CheckCircle2" className="h-8 w-8 text-success/60" />
           <p className="text-sm text-muted-foreground">
             {projectTasks.length === 0
               ? "No tasks in this project yet."
@@ -161,7 +154,7 @@ function ModeButton({
 }: {
   active: boolean;
   onClick: () => void;
-  icon: typeof LayoutList;
+  icon: ThemedIcon;
   label: string;
 }) {
   return (
diff --git a/workbench/control_plane/src/app/tasks/components/ProjectsList.tsx b/workbench/control_plane/src/app/tasks/components/ProjectsList.tsx
index 8f4fb17c..7f57c478 100644
--- a/workbench/control_plane/src/app/tasks/components/ProjectsList.tsx
+++ b/workbench/control_plane/src/app/tasks/components/ProjectsList.tsx
@@ -1,17 +1,7 @@
 "use client";
 
+import AppIcon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import { useMemo, useState } from "react";
-import {
-  FolderKanban,
-  AlertTriangle,
-  ChevronRight,
-  HardDrive,
-  Cloud,
-  Folder,
-  Boxes,
-  Plus,
-  Loader2,
-} from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 import { GtdProject } from "../lib/types";
 import type { LocalFolder, LocalSpace } from "../lib/api";
@@ -43,7 +33,7 @@ export function ProjectsList() {
     <div className="flex h-full flex-col">
       <header className="border-b border-border bg-card px-4 py-3">
         <div className="flex items-center gap-2">
-          <FolderKanban className="h-4 w-4 text-primary" />
+          <AppIcon name="FolderKanban" className="h-4 w-4 text-primary" />
           <h1 className="text-base font-bold text-foreground">Projects</h1>
           <span className="ml-auto text-xs text-muted-foreground">
             {activeProjects.length} active
@@ -75,7 +65,7 @@ export function ProjectsList() {
 
           {!hasLocal && syncedAccounts.length === 0 && (
             <div className="flex flex-col items-center justify-center gap-2 py-16 text-center">
-              <FolderKanban className="h-8 w-8 text-muted-foreground/40" />
+              <AppIcon name="FolderKanban" className="h-8 w-8 text-muted-foreground/40" />
               <p className="text-sm text-muted-foreground">
                 No projects yet. Connect a workspace or create a local space.
               </p>
@@ -95,7 +85,7 @@ function SectionHeader({
   tone,
   count,
 }: {
-  icon: typeof HardDrive;
+  icon: ThemedIcon;
   label: string;
   tone: "local" | "synced";
   count?: number;
@@ -143,7 +133,7 @@ function AccountSection({
     <section className="rounded-xl border border-primary/20 bg-primary/[0.02]">
       <div className="border-b border-border/60 px-3 py-2">
         <SectionHeader
-          icon={Cloud}
+          icon={themedIcon("Cloud")}
           label={account.label || account.provider}
           tone="synced"
           count={spaceCount}
@@ -159,7 +149,7 @@ function AccountSection({
             <TreeNode
               key={space.id}
               label={space.name}
-              icon={Boxes}
+              icon={themedIcon("Boxes")}
               depth={0}
               defaultOpen={account.hierarchy.length === 1}
             >
@@ -176,7 +166,7 @@ function AccountSection({
                 <TreeNode
                   key={folder.id}
                   label={folder.name}
-                  icon={Folder}
+                  icon={themedIcon("Folder")}
                   depth={1}
                 >
                   {folder.lists.map((l) => (
@@ -246,7 +236,7 @@ function LocalSection({
     <section className="rounded-xl border border-border bg-card">
       <div className="flex items-center justify-between border-b border-border/60 px-3 py-2">
         <SectionHeader
-          icon={HardDrive}
+          icon={themedIcon("HardDrive")}
           label="Local"
           tone="local"
           count={spaces.length}
@@ -259,7 +249,7 @@ function LocalSection({
       <div className="p-1.5">
         {loading ? (
           <div className="flex items-center gap-2 px-3 py-3 text-[11px] text-muted-foreground">
-            <Loader2 className="h-3.5 w-3.5 animate-spin" /> Loading…
+            <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" /> Loading…
           </div>
         ) : spaces.length === 0 && ungrouped.length === 0 ? (
           <p className="px-3 py-2 text-[11px] text-muted-foreground/70">
@@ -273,7 +263,7 @@ function LocalSection({
                 <TreeNode
                   key={space.id}
                   label={space.name}
-                  icon={Boxes}
+                  icon={themedIcon("Boxes")}
                   depth={0}
                   trailing={
                     <AddInline
@@ -289,7 +279,7 @@ function LocalSection({
                     <TreeNode
                       key={folder.id}
                       label={folder.name}
-                      icon={Folder}
+                      icon={themedIcon("Folder")}
                       depth={1}
                     >
                       {projectsIn(space.id, folder.id).map((p) => (
@@ -311,7 +301,7 @@ function LocalSection({
             })}
 
             {ungrouped.length > 0 && (
-              <TreeNode label="Ungrouped" icon={Folder} depth={0} defaultOpen>
+              <TreeNode label="Ungrouped" icon={themedIcon("Folder")} depth={0} defaultOpen>
                 {ungrouped.map((p) => (
                   <ProjectNode key={p.id} project={p} depth={1} />
                 ))}
@@ -343,7 +333,7 @@ function TreeNode({
   trailing,
 }: {
   label: string;
-  icon: typeof Folder;
+  icon: ThemedIcon;
   depth: number;
   children: React.ReactNode;
   defaultOpen?: boolean;
@@ -361,7 +351,7 @@ function TreeNode({
           onClick={() => setOpen((o) => !o)}
           className="flex min-w-0 flex-1 items-center gap-1.5 text-left"
         >
-          <ChevronRight
+          <AppIcon name="ChevronRight"
             className={[
               "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform",
               open ? "rotate-90" : "",
@@ -433,7 +423,7 @@ function ProjectNode({
             : "hover:bg-secondary/50",
       ].join(" ")}
     >
-      <FolderKanban
+      <AppIcon name="FolderKanban"
         className={[
           "h-3.5 w-3.5 shrink-0",
           notMirrored
@@ -460,7 +450,7 @@ function ProjectNode({
           className="inline-flex shrink-0 items-center text-warning"
           title="No next action"
         >
-          <AlertTriangle className="h-3 w-3" />
+          <AppIcon name="AlertTriangle" className="h-3 w-3" />
         </span>
       )}
       {openTasks > 0 && (
@@ -507,7 +497,7 @@ function AddInline({
         onClick={() => setEditing(true)}
         className="tech-transition inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground hover:bg-secondary hover:text-foreground"
       >
-        <Plus className="h-3 w-3" /> {label}
+        <AppIcon name="Plus" className="h-3 w-3" /> {label}
       </button>
     );
   }
@@ -548,7 +538,7 @@ function AddProjectRow({
       className="flex items-center gap-1.5 py-1 pr-1.5"
       style={{ paddingLeft: depth * INDENT + 22 }}
     >
-      <Plus className="h-3 w-3 shrink-0 text-muted-foreground/60" />
+      <AppIcon name="Plus" className="h-3 w-3 shrink-0 text-muted-foreground/60" />
       <input
         value={name}
         onChange={(e) => setName(e.target.value)}
diff --git a/workbench/control_plane/src/app/tasks/components/QuickCapture.tsx b/workbench/control_plane/src/app/tasks/components/QuickCapture.tsx
index 86a049da..30447d24 100644
--- a/workbench/control_plane/src/app/tasks/components/QuickCapture.tsx
+++ b/workbench/control_plane/src/app/tasks/components/QuickCapture.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import AppIcon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import { useEffect, useRef, useState } from "react";
-import { Plus, X, ListPlus, Wind, Check, Sparkles, ArrowLeft, ArrowRight, Trash2, Loader2, CopyX, CornerDownLeft, Bell, CalendarClock } from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 import { apiAtomize } from "../lib/api";
 import { snoozeOptions, detectDateHint, matchWhere } from "../lib/utils";
@@ -218,10 +218,10 @@ function QuickCapturePanel() {
         {/* header: mode toggle + close */}
         <div className="flex items-center gap-2 border-b border-border px-3 py-2">
           <div className="flex rounded-lg bg-secondary p-0.5 text-xs">
-            <ModeTab active={mode === "single"} onClick={() => switchMode("single")} icon={Plus}>
+            <ModeTab active={mode === "single"} onClick={() => switchMode("single")} icon={themedIcon("Plus")}>
               Quick
             </ModeTab>
-            <ModeTab active={mode === "sweep"} onClick={() => switchMode("sweep")} icon={Wind}>
+            <ModeTab active={mode === "sweep"} onClick={() => switchMode("sweep")} icon={themedIcon("Wind")}>
               Mind sweep
             </ModeTab>
           </div>
@@ -234,14 +234,14 @@ function QuickCapturePanel() {
             aria-label="Close"
             className="tech-transition rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
           >
-            <X className="h-4 w-4" />
+            <AppIcon name="X" className="h-4 w-4" />
           </button>
         </div>
 
         {mode === "single" ? (
           <div className="p-4">
             <div className="tech-transition flex items-center gap-3 rounded-xl border border-border bg-background/60 px-4 py-3 focus-within:border-primary/50">
-              <Plus className="h-5 w-5 shrink-0 text-muted-foreground" />
+              <AppIcon name="Plus" className="h-5 w-5 shrink-0 text-muted-foreground" />
               <input
                 ref={inputRef}
                 value={value}
@@ -271,11 +271,11 @@ function QuickCapturePanel() {
               >
                 {verifying ? (
                   <>
-                    Checking… <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    Checking… <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
                   </>
                 ) : (
                   <>
-                    Add <CornerDownLeft className="h-3.5 w-3.5" />
+                    Add <AppIcon name="CornerDownLeft" className="h-3.5 w-3.5" />
                   </>
                 )}
               </button>
@@ -292,7 +292,7 @@ function QuickCapturePanel() {
               <span>Enter to add · keep going · Esc to close</span>
               {added > 0 && (
                 <span className="inline-flex items-center gap-1 text-success">
-                  <Check className="h-3 w-3" />
+                  <AppIcon name="Check" className="h-3 w-3" />
                   {added} captured
                 </span>
               )}
@@ -345,7 +345,7 @@ function QuickCapturePanel() {
                 ].join(" ")}
               >
                 Review {lineCount || ""} item{lineCount === 1 ? "" : "s"}
-                <ArrowRight className="h-4 w-4" />
+                <AppIcon name="ArrowRight" className="h-4 w-4" />
               </button>
             </div>
           </div>
@@ -353,9 +353,9 @@ function QuickCapturePanel() {
           <div className="p-4">
             <div className="mb-2.5 flex items-start gap-1.5 rounded-lg border border-primary/20 bg-primary/5 px-2.5 py-2 text-[11px] text-muted-foreground">
               {atomizing ? (
-                <Loader2 className="mt-0.5 h-3.5 w-3.5 shrink-0 animate-spin text-primary" />
+                <AppIcon name="Loader2" className="mt-0.5 h-3.5 w-3.5 shrink-0 animate-spin text-primary" />
               ) : (
-                <Sparkles className="mt-0.5 h-3.5 w-3.5 shrink-0 text-primary" />
+                <AppIcon name="Sparkles" className="mt-0.5 h-3.5 w-3.5 shrink-0 text-primary" />
               )}
               <span>
                 {atomizing
@@ -384,7 +384,7 @@ function QuickCapturePanel() {
                           : "border-border text-transparent"
                       }`}
                     >
-                      <Check className="h-3 w-3" />
+                      <AppIcon name="Check" className="h-3 w-3" />
                     </button>
                     <input
                       value={item.title}
@@ -405,12 +405,12 @@ function QuickCapturePanel() {
                       aria-label="Remove item"
                       className="tech-transition rounded-md p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
                     >
-                      <Trash2 className="h-3.5 w-3.5" />
+                      <AppIcon name="Trash2" className="h-3.5 w-3.5" />
                     </button>
                   </div>
                   {item.verdict !== "new" && (
                     <div className="ml-6 flex items-center gap-1 text-[10px]">
-                      <CopyX className={`h-3 w-3 ${item.verdict === "duplicate" ? "text-warning" : "text-muted-foreground"}`} />
+                      <AppIcon name="CopyX" className={`h-3 w-3 ${item.verdict === "duplicate" ? "text-warning" : "text-muted-foreground"}`} />
                       <span className={item.verdict === "duplicate" ? "text-warning" : "text-muted-foreground"}>
                         {item.verdict === "duplicate"
                           ? `Already ${matchWhere(item.matchDisposition, item.matchSource)}: "${item.matchTitle}" — skipped (tap the box to add anyway)`
@@ -429,7 +429,7 @@ function QuickCapturePanel() {
               }}
               className="tech-transition mt-2 inline-flex items-center gap-1 text-[11px] text-primary hover:underline"
             >
-              <Plus className="h-3 w-3" /> Add another
+              <AppIcon name="Plus" className="h-3 w-3" /> Add another
             </button>
             <div className="mt-3 flex flex-wrap items-center justify-between gap-2">
               <div className="flex items-center gap-2">
@@ -438,7 +438,7 @@ function QuickCapturePanel() {
                   onClick={() => setPhase("write")}
                   className="tech-transition inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-sm text-muted-foreground hover:text-foreground"
                 >
-                  <ArrowLeft className="h-4 w-4" /> Back
+                  <AppIcon name="ArrowLeft" className="h-4 w-4" /> Back
                 </button>
                 {splitFromSingle && (
                   <button
@@ -462,7 +462,7 @@ function QuickCapturePanel() {
                     : "cursor-not-allowed bg-secondary text-muted-foreground",
                 ].join(" ")}
               >
-                <ListPlus className="h-4 w-4" />
+                <AppIcon name="ListPlus" className="h-4 w-4" />
                 Add {reviewCount} to inbox
               </button>
             </div>
@@ -481,7 +481,7 @@ function ModeTab({
 }: {
   active: boolean;
   onClick: () => void;
-  icon: typeof Plus;
+  icon: ThemedIcon;
   children: React.ReactNode;
 }) {
   return (
@@ -529,7 +529,7 @@ function CaptureWhen({
     return (
       <div className="mt-2 flex items-center gap-2 px-1">
         <span className="inline-flex items-center gap-1.5 rounded-full border border-primary/40 bg-primary/10 px-2.5 py-1 text-[11px] font-medium text-primary">
-          {kind === "remind" ? <Bell className="h-3 w-3" /> : <CalendarClock className="h-3 w-3" />}
+          {kind === "remind" ? <AppIcon name="Bell" className="h-3 w-3" /> : <AppIcon name="CalendarClock" className="h-3 w-3" />}
           {kind === "remind" ? "Remind" : "Due"} {dateLabel}
         </span>
         <button type="button" onClick={() => setOpen(true)} className="text-[11px] text-muted-foreground hover:text-foreground">
@@ -550,7 +550,7 @@ function CaptureWhen({
           onClick={() => setOpen(true)}
           className="tech-transition inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[11px] font-medium text-muted-foreground hover:border-primary/40 hover:text-foreground"
         >
-          <Bell className="h-3 w-3" /> Remind me / due date
+          <AppIcon name="Bell" className="h-3 w-3" /> Remind me / due date
         </button>
         {hint && (
           <button
@@ -559,7 +559,7 @@ function CaptureWhen({
             className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[10.5px] font-medium text-primary"
             title="Set a date for this capture"
           >
-            <Sparkles className="h-3 w-3" /> “{hint}” — set a date?
+            <AppIcon name="Sparkles" className="h-3 w-3" /> “{hint}” — set a date?
           </button>
         )}
       </div>
@@ -581,7 +581,7 @@ function CaptureWhen({
                 : "border-border text-muted-foreground hover:bg-secondary",
             ].join(" ")}
           >
-            {k === "remind" ? <Bell className="h-3 w-3" /> : <CalendarClock className="h-3 w-3" />}
+            {k === "remind" ? <AppIcon name="Bell" className="h-3 w-3" /> : <AppIcon name="CalendarClock" className="h-3 w-3" />}
             {k === "remind" ? "Remind me" : "Due date"}
           </button>
         ))}
diff --git a/workbench/control_plane/src/app/tasks/components/ReclarifyModal.tsx b/workbench/control_plane/src/app/tasks/components/ReclarifyModal.tsx
index 0761fd4f..291d5313 100644
--- a/workbench/control_plane/src/app/tasks/components/ReclarifyModal.tsx
+++ b/workbench/control_plane/src/app/tasks/components/ReclarifyModal.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useEffect } from "react";
-import { X, RefreshCw } from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 import { useVisualViewport } from "../lib/useVisualViewport";
 import { ClarifyPanel } from "./ClarifyPanel";
@@ -47,7 +47,7 @@ export function ReclarifyModal() {
       >
         <div className="flex shrink-0 items-center justify-between border-b border-border px-4 py-2">
           <span className="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
-            <RefreshCw className="h-3.5 w-3.5 text-primary" />
+            <Icon name="RefreshCw" className="h-3.5 w-3.5 text-primary" />
             Re-clarify task
           </span>
           <button
@@ -56,7 +56,7 @@ export function ReclarifyModal() {
             aria-label="Close"
             className="tech-transition rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
           >
-            <X className="h-4 w-4" />
+            <Icon name="X" className="h-4 w-4" />
           </button>
         </div>
         <div className="min-h-0 flex-1 overflow-y-auto">
diff --git a/workbench/control_plane/src/app/tasks/components/SchedulePopup.tsx b/workbench/control_plane/src/app/tasks/components/SchedulePopup.tsx
index 94b0b054..b05cb7ac 100644
--- a/workbench/control_plane/src/app/tasks/components/SchedulePopup.tsx
+++ b/workbench/control_plane/src/app/tasks/components/SchedulePopup.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useMemo, useState } from "react";
-import { CalendarClock, X, Check, CalendarX, Clock } from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 import { durationLabel } from "../lib/utils";
 import {
@@ -108,7 +108,7 @@ export function SchedulePopup() {
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center gap-2 border-b border-border px-4 py-3">
-          <CalendarClock className="h-4 w-4 shrink-0 text-primary" />
+          <Icon name="CalendarClock" className="h-4 w-4 shrink-0 text-primary" />
           <div className="min-w-0 flex-1">
             <h2 className="truncate text-sm font-semibold text-foreground">
               Schedule on calendar
@@ -123,13 +123,13 @@ export function SchedulePopup() {
             aria-label="Close"
             className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
           >
-            <X className="h-4 w-4" />
+            <Icon name="X" className="h-4 w-4" />
           </button>
         </div>
 
         <div className="flex flex-col gap-2 px-4 py-3">
           <p className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
-            <Clock className="h-3 w-3" />
+            <Icon name="Clock" className="h-3 w-3" />
             Blocks {durationLabel(dur)}
             {scheduled && (
               <span className="text-primary">
@@ -180,7 +180,7 @@ export function SchedulePopup() {
                 }}
                 className="tech-transition inline-flex shrink-0 items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90"
               >
-                <Check className="h-3.5 w-3.5" />
+                <Icon name="Check" className="h-3.5 w-3.5" />
                 Set
               </button>
             </div>
@@ -195,7 +195,7 @@ export function SchedulePopup() {
               }}
               className="tech-transition mt-0.5 inline-flex items-center justify-center gap-1.5 rounded-md px-3 py-2 text-[12px] font-medium text-muted-foreground hover:bg-secondary hover:text-destructive"
             >
-              <CalendarX className="h-3.5 w-3.5" />
+              <Icon name="CalendarX" className="h-3.5 w-3.5" />
               Unschedule
             </button>
           )}
diff --git a/workbench/control_plane/src/app/tasks/components/SourceBadge.tsx b/workbench/control_plane/src/app/tasks/components/SourceBadge.tsx
index b32c2935..a261b50c 100644
--- a/workbench/control_plane/src/app/tasks/components/SourceBadge.tsx
+++ b/workbench/control_plane/src/app/tasks/components/SourceBadge.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { HardDrive, Cloud } from "lucide-react";
+import AppIcon from "@/components/Icon";
 import { ProviderKind, Source } from "../lib/types";
 import { sourceBadge } from "../lib/utils";
 
@@ -16,7 +16,7 @@ export function SourceBadge({
   size?: "sm" | "xs";
 }) {
   const { label, tone } = sourceBadge(source, provider);
-  const Icon = tone === "local" ? HardDrive : Cloud;
+  const iconName = tone === "local" ? "HardDrive" : "Cloud";
   const dim = size === "xs" ? "h-2.5 w-2.5" : "h-3 w-3";
   return (
     <span
@@ -29,7 +29,7 @@ export function SourceBadge({
       ].join(" ")}
       title={tone === "local" ? "Local — stored in CommandCenter" : `Synced — ${label}`}
     >
-      <Icon className={dim} />
+      <AppIcon name={iconName} className={dim} />
       {label}
     </span>
   );
diff --git a/workbench/control_plane/src/app/tasks/components/StartupRitual.tsx b/workbench/control_plane/src/app/tasks/components/StartupRitual.tsx
index 4041d08c..cc190b8e 100644
--- a/workbench/control_plane/src/app/tasks/components/StartupRitual.tsx
+++ b/workbench/control_plane/src/app/tasks/components/StartupRitual.tsx
@@ -7,18 +7,8 @@
 // Completion (or dismissal) stamps today in focusPrefs so it offers once/day;
 // the streak counts completions only.
 
+import Icon from "@/components/Icon";
 import { useEffect, useMemo, useState } from "react";
-import {
-  AlertTriangle,
-  ArrowRight,
-  Check,
-  RotateCcw,
-  Star,
-  Sun,
-  Wand2,
-  Wind,
-  X,
-} from "lucide-react";
 import { GtdItem } from "../lib/types";
 import { priorityRank } from "../lib/priority";
 import { durationLabel } from "../lib/utils";
@@ -160,7 +150,7 @@ export function StartupRitual({
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center gap-2 border-b border-border px-4 py-3">
-          <Sun className="h-4 w-4 shrink-0 text-warning" />
+          <Icon name="Sun" className="h-4 w-4 shrink-0 text-warning" />
           <h2 className="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">
             Start your day
           </h2>
@@ -178,7 +168,7 @@ export function StartupRitual({
             aria-label="Skip today"
             className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
           >
-            <X className="h-4 w-4" />
+            <Icon name="X" className="h-4 w-4" />
           </button>
         </div>
 
@@ -221,7 +211,7 @@ export function StartupRitual({
                     }}
                     className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-[12px] font-semibold text-primary-foreground hover:opacity-90"
                   >
-                    <Wind className="h-3.5 w-3.5" />
+                    <Icon name="Wind" className="h-3.5 w-3.5" />
                     Begin
                   </button>
                 ) : (
@@ -243,7 +233,7 @@ export function StartupRitual({
                     className="tech-transition inline-flex items-center gap-1 rounded-md px-3 py-2 text-[12px] font-medium text-muted-foreground hover:text-foreground"
                   >
                     Skip
-                    <ArrowRight className="h-3.5 w-3.5" />
+                    <Icon name="ArrowRight" className="h-3.5 w-3.5" />
                   </button>
                 )}
               </div>
@@ -282,19 +272,19 @@ export function StartupRitual({
                     onClick={onRollover}
                     className="tech-transition mt-2 inline-flex items-center gap-1.5 rounded-md bg-warning/20 px-2.5 py-1.5 text-[11.5px] font-medium text-warning hover:bg-warning/30"
                   >
-                    <RotateCcw className="h-3.5 w-3.5" />
+                    <Icon name="RotateCcw" className="h-3.5 w-3.5" />
                     Move to my list
                   </button>
                 </div>
               ) : (
                 <div className="rounded-lg bg-success/5 p-3 text-[12px] text-success">
-                  <Check className="mr-1 inline h-3.5 w-3.5" />
+                  <Icon name="Check" className="mr-1 inline h-3.5 w-3.5" />
                   Nothing carried over — clean slate.
                 </div>
               )}
               {dueSoonCount > 0 && (
                 <div className="flex items-center gap-2 rounded-lg bg-warning/10 p-3 text-[12px] text-foreground">
-                  <AlertTriangle className="h-4 w-4 shrink-0 text-warning" />
+                  <Icon name="AlertTriangle" className="h-4 w-4 shrink-0 text-warning" />
                   {dueSoonCount} unscheduled task{dueSoonCount === 1 ? "" : "s"}{" "}
                   due within 2 weeks — the planner will weigh them.
                 </div>
@@ -305,7 +295,7 @@ export function StartupRitual({
                 className="tech-transition inline-flex items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-2 text-[12px] font-semibold text-primary-foreground hover:opacity-90"
               >
                 Pick the One Thing
-                <ArrowRight className="h-3.5 w-3.5" />
+                <Icon name="ArrowRight" className="h-3.5 w-3.5" />
               </button>
             </div>
           )}
@@ -337,7 +327,7 @@ export function StartupRitual({
                           : "border-border bg-background/60 hover:border-amber-500/40",
                       ].join(" ")}
                     >
-                      <Star
+                      <Icon name="Star"
                         className={[
                           "h-4 w-4 shrink-0",
                           picked
@@ -385,7 +375,7 @@ export function StartupRitual({
               onClick={() => finish(true)}
               className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-[12px] font-semibold text-primary-foreground hover:opacity-90"
             >
-              <Wand2 className="h-3.5 w-3.5" />
+              <Icon name="Wand2" className="h-3.5 w-3.5" />
               Rebuild my day
             </button>
           </div>
diff --git a/workbench/control_plane/src/app/tasks/components/StatusPill.tsx b/workbench/control_plane/src/app/tasks/components/StatusPill.tsx
index 8c220c39..33d133b7 100644
--- a/workbench/control_plane/src/app/tasks/components/StatusPill.tsx
+++ b/workbench/control_plane/src/app/tasks/components/StatusPill.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useState } from "react";
-import { Check, ChevronDown } from "lucide-react";
 import { GtdItem } from "../lib/types";
 import { useCardActions } from "../lib/useCardActions";
 import { stageAccent } from "../lib/stageColors";
@@ -36,7 +36,7 @@ export function StatusPill({ item }: { item: GtdItem }) {
       >
         <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${accent.dot}`} />
         <span className="max-w-[84px] truncate">{currentStage}</span>
-        <ChevronDown className="h-2.5 w-2.5 opacity-60" />
+        <Icon name="ChevronDown" className="h-2.5 w-2.5 opacity-60" />
       </button>
       {open && (
         <>
@@ -57,7 +57,7 @@ export function StatusPill({ item }: { item: GtdItem }) {
                 />
                 <span className="min-w-0 flex-1 truncate">{s}</span>
                 {s === currentStage && (
-                  <Check className="h-3 w-3 shrink-0 text-primary" />
+                  <Icon name="Check" className="h-3 w-3 shrink-0 text-primary" />
                 )}
               </button>
             ))}
diff --git a/workbench/control_plane/src/app/tasks/components/TaskCard.tsx b/workbench/control_plane/src/app/tasks/components/TaskCard.tsx
index 2f351f37..1dd13a63 100644
--- a/workbench/control_plane/src/app/tasks/components/TaskCard.tsx
+++ b/workbench/control_plane/src/app/tasks/components/TaskCard.tsx
@@ -1,20 +1,7 @@
 "use client";
 
+import Icon, { themedIcon } from "@/components/Icon";
 import { useState } from "react";
-import {
-  Clock,
-  AlertTriangle,
-  FolderKanban,
-  Zap,
-  Mail,
-  Paperclip,
-  ListTree,
-  GripVertical,
-  Check,
-  CalendarClock,
-  Trash2,
-  Waves,
-} from "lucide-react";
 import { GtdItem } from "../lib/types";
 import { useTaskStore } from "../lib/taskStore";
 import { useCardActions } from "../lib/useCardActions";
@@ -90,7 +77,7 @@ export function TaskCard({
     {
       kind: "item",
       label: "Schedule on calendar",
-      icon: CalendarClock,
+      icon: themedIcon("CalendarClock"),
       onSelect: actions.schedule,
     },
     { kind: "sep" },
@@ -107,13 +94,13 @@ export function TaskCard({
     {
       kind: "item",
       label: actions.isDone ? "Mark as not done" : "Mark as Done",
-      icon: Check,
+      icon: themedIcon("Check"),
       onSelect: actions.toggleDone,
     },
     {
       kind: "item",
       label: "Eliminate…",
-      icon: Trash2,
+      icon: themedIcon("Trash2"),
       danger: true,
       onSelect: actions.eliminate,
     },
@@ -151,7 +138,7 @@ export function TaskCard({
           title="Deep work — needs an unbroken flow state"
           className="inline-flex items-center gap-1 rounded border border-sky-500/30 bg-sky-500/10 px-1.5 py-0.5 text-[10px] font-medium text-sky-600 dark:text-sky-400"
         >
-          <Waves className="h-3 w-3" />
+          <Icon name="Waves" className="h-3 w-3" />
           Deep
         </span>
       )}
@@ -163,7 +150,7 @@ export function TaskCard({
       )}
       {item.timeEstimateMins ? (
         <span className="inline-flex items-center gap-1 text-[10px] text-muted-foreground">
-          <Zap className="h-3 w-3" />
+          <Icon name="Zap" className="h-3 w-3" />
           {durationLabel(item.timeEstimateMins)}
         </span>
       ) : null}
@@ -174,13 +161,13 @@ export function TaskCard({
             overdue ? "font-medium text-destructive" : "text-muted-foreground",
           ].join(" ")}
         >
-          {overdue ? <AlertTriangle className="h-3 w-3" /> : <Clock className="h-3 w-3" />}
+          {overdue ? <Icon name="AlertTriangle" className="h-3 w-3" /> : <Icon name="Clock" className="h-3 w-3" />}
           {relativeTime(item.dueAt)}
         </span>
       )}
       {atts > 0 && (
         <span className="inline-flex items-center gap-0.5 text-[10px] text-muted-foreground">
-          <Paperclip className="h-3 w-3" />
+          <Icon name="Paperclip" className="h-3 w-3" />
           {atts}
         </span>
       )}
@@ -189,7 +176,7 @@ export function TaskCard({
           className="inline-flex items-center gap-0.5 text-[10px] text-muted-foreground"
           title={`${item.subtaskCount} subtask${item.subtaskCount === 1 ? "" : "s"}`}
         >
-          <ListTree className="h-3 w-3" />
+          <Icon name="ListTree" className="h-3 w-3" />
           {item.subtaskCount}
         </span>
       ) : null}
@@ -198,7 +185,7 @@ export function TaskCard({
           className="inline-flex items-center gap-1 text-[10px] text-muted-foreground"
           title={`From email — ${item.origin.fromName || item.origin.fromEmail || ""}`}
         >
-          <Mail className="h-3 w-3" />
+          <Icon name="Mail" className="h-3 w-3" />
         </span>
       )}
       {/* Priority signal — LIST ROW only. The matrix-cell PILL (what it IS)
@@ -252,7 +239,7 @@ export function TaskCard({
             {meta}
             {project && (
               <span className="hidden items-center gap-1 text-[10px] text-muted-foreground sm:inline-flex">
-                <FolderKanban className="h-3 w-3" />
+                <Icon name="FolderKanban" className="h-3 w-3" />
                 <span className="max-w-[120px] truncate">{project.outcome}</span>
               </span>
             )}
@@ -309,7 +296,7 @@ export function TaskCard({
           />
         ) : (
           draggable && (
-            <GripVertical className="absolute right-1.5 top-1.5 h-3.5 w-3.5 text-muted-foreground/30 opacity-0 transition-opacity group-hover:opacity-100" />
+            <Icon name="GripVertical" className="absolute right-1.5 top-1.5 h-3.5 w-3.5 text-muted-foreground/30 opacity-0 transition-opacity group-hover:opacity-100" />
           )
         )}
         {/* Top corners: priority pill top-LEFT (above the title — always shown
@@ -338,7 +325,7 @@ export function TaskCard({
         )}
         {project && (
           <span className="inline-flex w-fit items-center gap-1 rounded bg-secondary px-1.5 py-0.5 text-[10px] text-muted-foreground">
-            <FolderKanban className="h-3 w-3" />
+            <Icon name="FolderKanban" className="h-3 w-3" />
             <span className="max-w-[160px] truncate">{project.outcome}</span>
           </span>
         )}
@@ -379,7 +366,7 @@ function ScheduleButton({ onClick }: { onClick: () => void }) {
       aria-label="Schedule on calendar"
       className="tech-transition rounded p-1 text-muted-foreground/70 hover:bg-secondary hover:text-primary"
     >
-      <CalendarClock className="h-3.5 w-3.5" />
+      <Icon name="CalendarClock" className="h-3.5 w-3.5" />
     </button>
   );
 }
diff --git a/workbench/control_plane/src/app/tasks/components/TaskFocusModal.tsx b/workbench/control_plane/src/app/tasks/components/TaskFocusModal.tsx
index 5f6344d8..944d450e 100644
--- a/workbench/control_plane/src/app/tasks/components/TaskFocusModal.tsx
+++ b/workbench/control_plane/src/app/tasks/components/TaskFocusModal.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useEffect } from "react";
-import { X } from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 import { TaskDetail } from "./ItemDetail";
 
@@ -48,7 +48,7 @@ export function TaskFocusModal() {
           aria-label="Close"
           className="tech-transition absolute right-3 top-3 z-10 rounded-md p-1.5 text-muted-foreground hover:bg-secondary hover:text-foreground"
         >
-          <X className="h-4 w-4" />
+          <Icon name="X" className="h-4 w-4" />
         </button>
         <div className="min-h-0 flex-1 overflow-y-auto">
           <TaskDetail
diff --git a/workbench/control_plane/src/app/tasks/components/TaskListGrouped.tsx b/workbench/control_plane/src/app/tasks/components/TaskListGrouped.tsx
index bb1f0244..b4567ba6 100644
--- a/workbench/control_plane/src/app/tasks/components/TaskListGrouped.tsx
+++ b/workbench/control_plane/src/app/tasks/components/TaskListGrouped.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import {
   useCallback,
   useEffect,
@@ -7,7 +8,6 @@ import {
   useState,
   useSyncExternalStore,
 } from "react";
-import { ChevronRight, GripVertical, CornerDownRight, Loader2, Circle, CheckCircle2 } from "lucide-react";
 import { GtdItem, ViewKey } from "../lib/types";
 import { useTaskStore } from "../lib/taskStore";
 import { TaskCard } from "./TaskCard";
@@ -245,7 +245,7 @@ export function TaskListGrouped({
                   onClick={() => toggle(g.key)}
                   className="tech-transition flex min-w-0 flex-1 items-center gap-2 text-left"
                 >
-                  <ChevronRight
+                  <Icon name="ChevronRight"
                     className={[
                       "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform",
                       isCollapsed ? "" : "rotate-90",
@@ -421,7 +421,7 @@ function DraggableRow({
         ) : (
           manual && (
             <span className="flex w-5 shrink-0 cursor-grab items-center justify-center text-muted-foreground/25 transition-colors group-hover/row:text-muted-foreground/60 active:cursor-grabbing">
-              <GripVertical className="h-3.5 w-3.5" />
+              <Icon name="GripVertical" className="h-3.5 w-3.5" />
             </span>
           )
         )}
@@ -436,7 +436,7 @@ function DraggableRow({
               aria-expanded={expanded}
               className="tech-transition rounded p-0.5 text-muted-foreground/60 hover:bg-secondary hover:text-foreground"
             >
-              <ChevronRight
+              <Icon name="ChevronRight"
                 className={[
                   "h-3.5 w-3.5 transition-transform",
                   expanded ? "rotate-90" : "",
@@ -558,7 +558,7 @@ function SubtaskRows({ parent }: { parent: GtdItem }) {
   if (children === null) {
     return (
       <div className="flex items-center gap-2 py-2 pl-14 text-[11px] text-muted-foreground">
-        <Loader2 className="h-3 w-3 animate-spin" />
+        <Icon name="Loader2" className="h-3 w-3 animate-spin" />
         Loading subtasks…
       </div>
     );
@@ -587,12 +587,12 @@ function SubtaskRows({ parent }: { parent: GtdItem }) {
               className="tech-transition shrink-0 text-muted-foreground/50 hover:text-success"
             >
               {done ? (
-                <CheckCircle2 className="h-4 w-4 text-success" />
+                <Icon name="CheckCircle2" className="h-4 w-4 text-success" />
               ) : (
-                <Circle className="h-4 w-4" />
+                <Icon name="Circle" className="h-4 w-4" />
               )}
             </button>
-            <CornerDownRight className="h-3 w-3 shrink-0 text-muted-foreground/30" />
+            <Icon name="CornerDownRight" className="h-3 w-3 shrink-0 text-muted-foreground/30" />
             <button
               type="button"
               onClick={() => openFocus(c.id)}
diff --git a/workbench/control_plane/src/app/tasks/components/TaskSettingsModal.tsx b/workbench/control_plane/src/app/tasks/components/TaskSettingsModal.tsx
index b0ca8002..83bf47c0 100644
--- a/workbench/control_plane/src/app/tasks/components/TaskSettingsModal.tsx
+++ b/workbench/control_plane/src/app/tasks/components/TaskSettingsModal.tsx
@@ -1,10 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
-import {
-  X, Settings2, Sparkles, Inbox, RefreshCw,
-  Columns3, ChevronUp, ChevronDown, Plus, Loader2, AlertTriangle,
-} from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 import { fetchStatusCatalog, type TaskSettings, type StatusCatalog } from "../lib/api";
 import { formatStatus } from "../lib/utils";
@@ -120,7 +117,7 @@ function SettingsPanel() {
       >
         {/* header */}
         <div className="flex items-center gap-2 border-b border-border px-4 py-3">
-          <Settings2 className="h-4 w-4 text-primary" />
+          <Icon name="Settings2" className="h-4 w-4 text-primary" />
           <h2 className="text-sm font-semibold text-foreground">
             Task Manager settings
           </h2>
@@ -130,7 +127,7 @@ function SettingsPanel() {
             aria-label="Close"
             className="tech-transition ml-auto rounded-md p-1.5 text-muted-foreground hover:bg-secondary hover:text-foreground"
           >
-            <X className="h-4 w-4" />
+            <Icon name="X" className="h-4 w-4" />
           </button>
         </div>
 
@@ -145,7 +142,7 @@ function SettingsPanel() {
           {/* ── AI models ── */}
           <section>
             <h3 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              <Sparkles className="h-3.5 w-3.5" /> AI models
+              <Icon name="Sparkles" className="h-3.5 w-3.5" /> AI models
             </h3>
             <div className="flex flex-col gap-2">
               {MODEL_FIELDS.map((cfg) => (
@@ -217,7 +214,7 @@ function SettingsPanel() {
           {/* ── Clarify ── */}
           <section>
             <h3 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              <Sparkles className="h-3.5 w-3.5" /> Clarify
+              <Icon name="Sparkles" className="h-3.5 w-3.5" /> Clarify
             </h3>
             <Toggle
               title="AI-powered clarify"
@@ -230,7 +227,7 @@ function SettingsPanel() {
           {/* ── Capture ── */}
           <section>
             <h3 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              <Inbox className="h-3.5 w-3.5" /> Capture
+              <Icon name="Inbox" className="h-3.5 w-3.5" /> Capture
             </h3>
             <Toggle
               title="Duplicate check on quick capture"
@@ -243,7 +240,7 @@ function SettingsPanel() {
           {/* ── Sync ── */}
           <section>
             <h3 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              <RefreshCw className="h-3.5 w-3.5" /> Sync
+              <Icon name="RefreshCw" className="h-3.5 w-3.5" /> Sync
             </h3>
             <div className="flex flex-col gap-2">
               <Toggle
@@ -274,7 +271,7 @@ function SettingsPanel() {
           {/* ── Next Actions list columns ── */}
           <section>
             <h3 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              <Columns3 className="h-3.5 w-3.5" /> Next Actions columns
+              <Icon name="Columns3" className="h-3.5 w-3.5" /> Next Actions columns
             </h3>
             <p className="mb-2 px-1 text-[11px] text-muted-foreground">
               In the list view (desktop), Next Actions shows these as aligned
@@ -287,7 +284,7 @@ function SettingsPanel() {
           {/* ── Board (Kanban stages for Next Actions) ── */}
           <section>
             <h3 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              <Columns3 className="h-3.5 w-3.5" /> Kanban stages
+              <Icon name="Columns3" className="h-3.5 w-3.5" /> Kanban stages
             </h3>
             <p className="mb-2 px-1 text-[11px] text-muted-foreground">
               One global set of stages for <span className="font-medium">all</span>{" "}
@@ -305,7 +302,7 @@ function SettingsPanel() {
           {/* ── ClickUp status → stage mapping ── */}
           <section>
             <h3 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-              <Columns3 className="h-3.5 w-3.5" /> ClickUp status mapping
+              <Icon name="Columns3" className="h-3.5 w-3.5" /> ClickUp status mapping
             </h3>
             <p className="mb-2 px-1 text-[11px] text-muted-foreground">
               Next Actions shows your{" "}
@@ -371,7 +368,7 @@ function StageEditor({
                 onClick={() => move(idx, -1)}
                 className="tech-transition text-muted-foreground/60 hover:text-foreground disabled:opacity-30"
               >
-                <ChevronUp className="h-3 w-3" />
+                <Icon name="ChevronUp" className="h-3 w-3" />
               </button>
               <button
                 type="button"
@@ -380,7 +377,7 @@ function StageEditor({
                 onClick={() => move(idx, 1)}
                 className="tech-transition text-muted-foreground/60 hover:text-foreground disabled:opacity-30"
               >
-                <ChevronDown className="h-3 w-3" />
+                <Icon name="ChevronDown" className="h-3 w-3" />
               </button>
             </div>
             <input
@@ -404,13 +401,13 @@ function StageEditor({
               onClick={() => remove(idx)}
               className="tech-transition shrink-0 rounded p-1 text-muted-foreground/60 hover:bg-destructive/10 hover:text-destructive disabled:opacity-30"
             >
-              <X className="h-3.5 w-3.5" />
+              <Icon name="X" className="h-3.5 w-3.5" />
             </button>
           </div>
         );
       })}
       <div className="flex items-center gap-1.5 rounded-lg border border-dashed border-border px-2 py-1.5">
-        <Plus className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+        <Icon name="Plus" className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
         <input
           value={adding}
           onChange={(e) => setAdding(e.target.value)}
@@ -485,7 +482,7 @@ function StatusMappingEditor({
   if (loading) {
     return (
       <div className="flex items-center gap-2 px-1 py-2 text-[11px] text-muted-foreground">
-        <Loader2 className="h-3.5 w-3.5 animate-spin" /> Loading ClickUp statuses…
+        <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" /> Loading ClickUp statuses…
       </div>
     );
   }
@@ -509,7 +506,7 @@ function StatusMappingEditor({
     <div className="flex flex-col gap-1.5">
       {unmappedCount > 0 && (
         <p className="mb-0.5 inline-flex items-center gap-1 px-1 text-[11px] text-warning">
-          <AlertTriangle className="h-3 w-3 shrink-0" />
+          <Icon name="AlertTriangle" className="h-3 w-3 shrink-0" />
           {unmappedCount} status{unmappedCount === 1 ? "" : "es"} auto-guessed —
           confirm or adjust.
         </p>
diff --git a/workbench/control_plane/src/app/tasks/components/TaskToolbar.tsx b/workbench/control_plane/src/app/tasks/components/TaskToolbar.tsx
index 7ffdf384..403346ad 100644
--- a/workbench/control_plane/src/app/tasks/components/TaskToolbar.tsx
+++ b/workbench/control_plane/src/app/tasks/components/TaskToolbar.tsx
@@ -1,17 +1,8 @@
 "use client";
 
+import Icon from "@/components/Icon";
+import type { ThemedIcon } from "@/components/Icon";
 import { useMemo, useRef, useState, useEffect } from "react";
-import {
-  Search,
-  X,
-  ArrowUpNarrowWide,
-  ArrowDownWideNarrow,
-  ListFilter,
-  Rows3,
-  ChevronDown,
-  Check,
-  type LucideIcon,
-} from "lucide-react";
 import { GtdItem } from "../lib/types";
 import { useTaskStore } from "../lib/taskStore";
 import {
@@ -164,7 +155,7 @@ export function TaskToolbar({ items }: { items: GtdItem[] }) {
     <div className="flex flex-wrap items-center gap-2 border-b border-border bg-card px-4 py-2">
       {/* Search */}
       <div className="relative min-w-[160px] flex-1 sm:max-w-xs">
-        <Search className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+        <Icon name="Search" className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
         <input
           type="text"
           value={filters.query}
@@ -179,7 +170,7 @@ export function TaskToolbar({ items }: { items: GtdItem[] }) {
             title="Clear search"
             className="absolute right-1.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
           >
-            <X className="h-3.5 w-3.5" />
+            <Icon name="X" className="h-3.5 w-3.5" />
           </button>
         )}
       </div>
@@ -219,14 +210,14 @@ export function TaskToolbar({ items }: { items: GtdItem[] }) {
           onClick={clearFilters}
           className="tech-transition inline-flex h-7 items-center gap-1 rounded-md px-2 text-[11px] font-medium text-muted-foreground hover:bg-secondary hover:text-foreground"
         >
-          <X className="h-3 w-3" />
+          <Icon name="X" className="h-3 w-3" />
           Clear{nFacets > 1 ? " all" : ""}
         </button>
       )}
 
       {/* Group-by + Sort — pushed right */}
       <div className="ml-auto flex items-center gap-1">
-        <Rows3 className="h-3.5 w-3.5 text-muted-foreground" />
+        <Icon name="Rows3" className="h-3.5 w-3.5 text-muted-foreground" />
         <select
           value={groupBy}
           onChange={(e) => setGroupBy(e.target.value as GroupBy | "")}
@@ -245,7 +236,7 @@ export function TaskToolbar({ items }: { items: GtdItem[] }) {
       </div>
       {showSort && (
         <div className="flex items-center gap-1">
-          <ListFilter className="h-3.5 w-3.5 text-muted-foreground" />
+          <Icon name="ListFilter" className="h-3.5 w-3.5 text-muted-foreground" />
           <select
             value={sort.field}
             onChange={(e) => setSort({ field: e.target.value as SortField })}
@@ -277,9 +268,9 @@ export function TaskToolbar({ items }: { items: GtdItem[] }) {
             ].join(" ")}
           >
             {sort.dir === "asc" ? (
-              <ArrowUpNarrowWide className="h-3.5 w-3.5" />
+              <Icon name="ArrowUpNarrowWide" className="h-3.5 w-3.5" />
             ) : (
-              <ArrowDownWideNarrow className="h-3.5 w-3.5" />
+              <Icon name="ArrowDownWideNarrow" className="h-3.5 w-3.5" />
             )}
           </button>
         </div>
@@ -294,7 +285,7 @@ interface FacetOption {
   value: string;
   label: string;
   /** lucide icon (priority) — takes precedence over a dot/emoji marker. */
-  icon?: LucideIcon;
+  icon?: ThemedIcon;
   /** a solid colour dot marker (context), e.g. "bg-sky-500". */
   dot?: string;
   emoji?: string;
@@ -350,14 +341,14 @@ function FilterMenu({
             : "border-border text-muted-foreground hover:text-foreground",
         ].join(" ")}
       >
-        <ListFilter className="h-3.5 w-3.5" />
+        <Icon name="ListFilter" className="h-3.5 w-3.5" />
         Filter
         {count > 0 && (
           <span className="rounded-full bg-primary/15 px-1.5 text-[10px] font-semibold text-primary">
             {count}
           </span>
         )}
-        <ChevronDown className="h-3 w-3 opacity-60" />
+        <Icon name="ChevronDown" className="h-3 w-3 opacity-60" />
       </button>
       {open && (
         <div className="absolute left-0 top-8 z-40 max-h-[70vh] w-64 overflow-y-auto rounded-lg border border-border bg-card p-2 shadow-xl">
@@ -381,7 +372,7 @@ function FilterMenu({
                         on ? "border-primary bg-primary text-primary-foreground" : "border-border",
                       ].join(" ")}
                     >
-                      {on && <Check className="h-3 w-3" />}
+                      {on && <Icon name="Check" className="h-3 w-3" />}
                     </span>
                     {o.icon ? (
                       <o.icon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden />
@@ -410,7 +401,7 @@ interface FacetChip {
   value: string;
   label: string;
   /** priority chips carry their lucide icon; context chips their colour. */
-  icon?: LucideIcon;
+  icon?: ThemedIcon;
   dot?: string;
 }
 
@@ -420,7 +411,7 @@ function FacetChips({
   onRemove,
 }: {
   filters: TaskFilters;
-  priorityMeta: { value: string; label: string; icon?: LucideIcon }[];
+  priorityMeta: { value: string; label: string; icon?: ThemedIcon }[];
   onRemove: (key: "contexts" | "priorities" | "energies", value: string) => void;
 }) {
   const chips: FacetChip[] = [
@@ -468,7 +459,7 @@ function FacetChips({
             aria-label={`Remove ${c.label} filter`}
             className="tech-transition rounded-full p-0.5 hover:bg-primary/20"
           >
-            <X className="h-2.5 w-2.5" />
+            <Icon name="X" className="h-2.5 w-2.5" />
           </button>
         </span>
       ))}
diff --git a/workbench/control_plane/src/app/tasks/components/UndoToast.tsx b/workbench/control_plane/src/app/tasks/components/UndoToast.tsx
index 41672bc8..7a7446c3 100644
--- a/workbench/control_plane/src/app/tasks/components/UndoToast.tsx
+++ b/workbench/control_plane/src/app/tasks/components/UndoToast.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useEffect } from "react";
-import { Undo2, X } from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 
 /**
@@ -61,7 +61,7 @@ export function UndoToast() {
         onClick={undoLastChange}
         className="tech-transition inline-flex items-center gap-1 whitespace-nowrap text-[13px] font-semibold text-primary hover:underline"
       >
-        <Undo2 className="h-3.5 w-3.5" />
+        <Icon name="Undo2" className="h-3.5 w-3.5" />
         Undo
         <kbd className="ml-0.5 hidden rounded border border-border px-1 py-0.5 font-mono text-[9px] text-muted-foreground sm:inline">
           u
@@ -73,7 +73,7 @@ export function UndoToast() {
         aria-label="Dismiss"
         className="tech-transition rounded-md p-0.5 text-muted-foreground hover:text-foreground"
       >
-        <X className="h-3.5 w-3.5" />
+        <Icon name="X" className="h-3.5 w-3.5" />
       </button>
     </div>
   );
diff --git a/workbench/control_plane/src/app/tasks/components/WaitingForView.tsx b/workbench/control_plane/src/app/tasks/components/WaitingForView.tsx
index f8dac79a..c4f94930 100644
--- a/workbench/control_plane/src/app/tasks/components/WaitingForView.tsx
+++ b/workbench/control_plane/src/app/tasks/components/WaitingForView.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useMemo } from "react";
-import { AlertTriangle, Clock, Hourglass, Mail, Send } from "lucide-react";
 import { GtdItem } from "../lib/types";
 import { useTaskStore } from "../lib/taskStore";
 import { initials, relativeTime } from "../lib/utils";
@@ -144,7 +144,7 @@ function WaitingRow({
                 stale ? "font-medium text-warning" : "text-muted-foreground",
               ].join(" ")}
             >
-              <Hourglass className="h-3 w-3" />
+              <Icon name="Hourglass" className="h-3 w-3" />
               {days}d waiting
             </span>
           )}
@@ -161,9 +161,9 @@ function WaitingRow({
               ].join(" ")}
             >
               {overdue ? (
-                <AlertTriangle className="h-3 w-3" />
+                <Icon name="AlertTriangle" className="h-3 w-3" />
               ) : (
-                <Clock className="h-3 w-3" />
+                <Icon name="Clock" className="h-3 w-3" />
               )}
               {/* WHICH fact — an explicit promise reads differently from the
                   task's own deadline, and the row must not blur them. */}
@@ -176,7 +176,7 @@ function WaitingRow({
               title={`From email — ${item.origin.fromName || item.origin.fromEmail || ""}`}
               className="inline-flex items-center text-[10px] text-muted-foreground"
             >
-              <Mail className="h-3 w-3" />
+              <Icon name="Mail" className="h-3 w-3" />
             </span>
           )}
         </div>
@@ -200,7 +200,7 @@ function WaitingRow({
             which is owner-gated and not built; NULL until then. */}
         {item.lastNudgedAt && (
           <span className="inline-flex items-center gap-1 text-[10px] text-muted-foreground">
-            <Send className="h-3 w-3" />
+            <Icon name="Send" className="h-3 w-3" />
             nudged {relativeTime(item.lastNudgedAt, nowMs)}
           </span>
         )}
diff --git a/workbench/control_plane/src/app/tasks/components/WorkspacesModal.tsx b/workbench/control_plane/src/app/tasks/components/WorkspacesModal.tsx
index 5b33267d..52e15d59 100644
--- a/workbench/control_plane/src/app/tasks/components/WorkspacesModal.tsx
+++ b/workbench/control_plane/src/app/tasks/components/WorkspacesModal.tsx
@@ -1,17 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useState } from "react";
-import {
-  X,
-  Cloud,
-  Plus,
-  RefreshCw,
-  Trash2,
-  KeyRound,
-  Building2,
-  Check,
-  Loader2,
-} from "lucide-react";
 import { useTaskStore } from "../lib/taskStore";
 import { apiConnectWorkspace, apiListWorkspaces } from "../lib/api";
 
@@ -88,7 +78,7 @@ function WorkspacesPanel() {
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center gap-2 border-b border-border px-4 py-3">
-          <Cloud className="h-4 w-4 text-primary" />
+          <Icon name="Cloud" className="h-4 w-4 text-primary" />
           <h2 className="text-sm font-semibold text-foreground">
             PM-tool workspaces
           </h2>
@@ -98,7 +88,7 @@ function WorkspacesPanel() {
             aria-label="Close"
             className="tech-transition ml-auto rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
           >
-            <X className="h-4 w-4" />
+            <Icon name="X" className="h-4 w-4" />
           </button>
         </div>
 
@@ -127,7 +117,7 @@ function WorkspacesPanel() {
                     key={a.id}
                     className="flex items-center gap-2.5 rounded-lg border border-border px-3 py-2"
                   >
-                    <Building2 className="h-4 w-4 shrink-0 text-primary/80" />
+                    <Icon name="Building2" className="h-4 w-4 shrink-0 text-primary/80" />
                     <div className="min-w-0 flex-1">
                       <p className="truncate text-[13px] font-medium text-foreground">
                         {a.label}
@@ -153,9 +143,9 @@ function WorkspacesPanel() {
                       className="tech-transition rounded-md p-1.5 text-muted-foreground hover:bg-secondary hover:text-foreground disabled:opacity-50"
                     >
                       {syncing ? (
-                        <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                        <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
                       ) : (
-                        <Cloud className="h-3.5 w-3.5" />
+                        <Icon name="Cloud" className="h-3.5 w-3.5" />
                       )}
                     </button>
                     <button
@@ -164,7 +154,7 @@ function WorkspacesPanel() {
                       onClick={() => void refreshAccountSchema(a.id)}
                       className="tech-transition rounded-md p-1.5 text-muted-foreground hover:bg-secondary hover:text-foreground"
                     >
-                      <RefreshCw className="h-3.5 w-3.5" />
+                      <Icon name="RefreshCw" className="h-3.5 w-3.5" />
                     </button>
                     <button
                       type="button"
@@ -172,7 +162,7 @@ function WorkspacesPanel() {
                       onClick={() => void disconnectAccount(a.id)}
                       className="tech-transition rounded-md p-1.5 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
                     >
-                      <Trash2 className="h-3.5 w-3.5" />
+                      <Icon name="Trash2" className="h-3.5 w-3.5" />
                     </button>
                   </div>
                 ))}
@@ -187,7 +177,7 @@ function WorkspacesPanel() {
             </h3>
             <div className="flex items-center gap-2">
               <div className="tech-transition flex flex-1 items-center gap-2 rounded-lg border border-border bg-background/60 px-3 py-2 focus-within:border-primary/50">
-                <KeyRound className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                <Icon name="KeyRound" className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                 <input
                   value={token}
                   onChange={(e) => setToken(e.target.value)}
@@ -203,9 +193,9 @@ function WorkspacesPanel() {
                 className="tech-transition inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
               >
                 {busy === "find" ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
+                  <Icon name="Loader2" className="h-4 w-4 animate-spin" />
                 ) : (
-                  <Plus className="h-4 w-4" />
+                  <Icon name="Plus" className="h-4 w-4" />
                 )}
                 Find workspaces
               </button>
@@ -235,7 +225,7 @@ function WorkspacesPanel() {
                       key={w.id}
                       className="flex items-center gap-2.5 rounded-lg border border-border px-3 py-2"
                     >
-                      <Building2 className="h-4 w-4 shrink-0 text-muted-foreground" />
+                      <Icon name="Building2" className="h-4 w-4 shrink-0 text-muted-foreground" />
                       <div className="min-w-0 flex-1">
                         <p className="truncate text-[13px] text-foreground">{w.name}</p>
                         <p className="text-[11px] text-muted-foreground">
@@ -244,7 +234,7 @@ function WorkspacesPanel() {
                       </div>
                       {already ? (
                         <span className="inline-flex items-center gap-1 text-[11px] text-success">
-                          <Check className="h-3.5 w-3.5" /> connected
+                          <Icon name="Check" className="h-3.5 w-3.5" /> connected
                         </span>
                       ) : (
                         <button
@@ -254,9 +244,9 @@ function WorkspacesPanel() {
                           className="tech-transition inline-flex items-center gap-1 rounded-md bg-primary/10 px-2.5 py-1.5 text-xs font-medium text-primary hover:bg-primary/20 disabled:opacity-50"
                         >
                           {busy === w.id ? (
-                            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                            <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
                           ) : (
-                            <Plus className="h-3.5 w-3.5" />
+                            <Icon name="Plus" className="h-3.5 w-3.5" />
                           )}
                           Connect
                         </button>
diff --git a/workbench/control_plane/src/app/tasks/components/calendar/CalendarSettings.tsx b/workbench/control_plane/src/app/tasks/components/calendar/CalendarSettings.tsx
index 161baa9c..1e8ad81d 100644
--- a/workbench/control_plane/src/app/tasks/components/calendar/CalendarSettings.tsx
+++ b/workbench/control_plane/src/app/tasks/components/calendar/CalendarSettings.tsx
@@ -1,13 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useState } from "react";
-import {
-  X,
-  Plus,
-  Trash2,
-  ChevronDown,
-  ChevronRight,
-} from "lucide-react";
 import {
   type TaskSettings,
   type EnergyWindow,
@@ -111,7 +105,7 @@ export function CalendarSettings({
             aria-label="Close"
             className="rounded p-1 text-muted-foreground hover:text-foreground"
           >
-            <X className="h-4 w-4" />
+            <Icon name="X" className="h-4 w-4" />
           </button>
         </div>
 
@@ -146,9 +140,9 @@ export function CalendarSettings({
               className="mt-1.5 inline-flex items-center gap-0.5 text-[10px] font-medium text-primary hover:underline"
             >
               {showDefault ? (
-                <ChevronDown className="h-3 w-3" />
+                <Icon name="ChevronDown" className="h-3 w-3" />
               ) : (
-                <ChevronRight className="h-3 w-3" />
+                <Icon name="ChevronRight" className="h-3 w-3" />
               )}
               {usingDefaultPrompt
                 ? "See the default the AI is using"
@@ -331,7 +325,7 @@ export function CalendarSettings({
               }
               className="inline-flex items-center gap-0.5 text-primary hover:underline"
             >
-              <Plus className="h-3 w-3" /> Add
+              <Icon name="Plus" className="h-3 w-3" /> Add
             </button>
           </div>
           <p className="mb-1.5 text-[10px] text-muted-foreground">
@@ -384,7 +378,7 @@ export function CalendarSettings({
                     aria-label="Remove window"
                     className="rounded p-0.5 text-muted-foreground hover:text-destructive"
                   >
-                    <Trash2 className="h-3 w-3" />
+                    <Icon name="Trash2" className="h-3 w-3" />
                   </button>
                 </div>
               ))}
@@ -430,7 +424,7 @@ export function CalendarSettings({
                     }
                     className="inline-flex items-center gap-0.5 text-primary hover:underline"
                   >
-                    <Plus className="h-3 w-3" /> Add
+                    <Icon name="Plus" className="h-3 w-3" /> Add
                   </button>
                 </div>
                 <p className="mb-1.5 text-[10px] text-muted-foreground">
@@ -477,7 +471,7 @@ export function CalendarSettings({
                             aria-label="Remove window"
                             className="rounded p-0.5 text-muted-foreground hover:text-destructive"
                           >
-                            <Trash2 className="h-3 w-3" />
+                            <Icon name="Trash2" className="h-3 w-3" />
                           </button>
                         </div>
                         <div className="mt-1.5 flex items-center gap-1">
diff --git a/workbench/control_plane/src/app/tasks/components/calendar/EndOfDayReview.tsx b/workbench/control_plane/src/app/tasks/components/calendar/EndOfDayReview.tsx
index e73313a5..d44c6ba6 100644
--- a/workbench/control_plane/src/app/tasks/components/calendar/EndOfDayReview.tsx
+++ b/workbench/control_plane/src/app/tasks/components/calendar/EndOfDayReview.tsx
@@ -1,13 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useEffect, useState } from "react";
-import {
-  X,
-  Check,
-  ClipboardCheck,
-  Star,
-  Moon,
-} from "lucide-react";
 import {
   apiEstimateStats,
   apiSetDayState,
@@ -150,7 +144,7 @@ export function EndOfDayReview({
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center gap-2 border-b border-border px-4 py-3">
-          <ClipboardCheck className="h-4 w-4 shrink-0 text-primary" />
+          <Icon name="ClipboardCheck" className="h-4 w-4 shrink-0 text-primary" />
           <div className="min-w-0 flex-1">
             <h2 className="truncate text-sm font-semibold text-foreground">
               Day review
@@ -165,7 +159,7 @@ export function EndOfDayReview({
             aria-label="Close"
             className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
           >
-            <X className="h-4 w-4" />
+            <Icon name="X" className="h-4 w-4" />
           </button>
         </div>
 
@@ -206,7 +200,7 @@ export function EndOfDayReview({
                   : "border-border bg-background/60 text-muted-foreground",
               ].join(" ")}
             >
-              <Star
+              <Icon name="Star"
                 className={[
                   "h-4 w-4 shrink-0",
                   oneThingDone
@@ -289,7 +283,7 @@ export function EndOfDayReview({
                     onClick={() => onOpen(b.item.id)}
                     className="tech-transition flex items-center gap-2 rounded-md border border-border bg-background/60 p-2 text-left hover:border-primary/40"
                   >
-                    <Check className="h-3.5 w-3.5 shrink-0 text-success" />
+                    <Icon name="Check" className="h-3.5 w-3.5 shrink-0 text-success" />
                     <span className="min-w-0 flex-1 truncate text-[12.5px] text-foreground line-through decoration-muted-foreground/40">
                       {b.item.title}
                     </span>
@@ -394,7 +388,7 @@ export function EndOfDayReview({
             title="Save tomorrow's seeds and end the work day — permission to stop"
             className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-[12px] font-medium text-primary-foreground hover:opacity-90"
           >
-            <Moon className="h-3.5 w-3.5" />
+            <Icon name="Moon" className="h-3.5 w-3.5" />
             Close the day
           </button>
         </div>
diff --git a/workbench/control_plane/src/app/tasks/components/calendar/NowNextBar.tsx b/workbench/control_plane/src/app/tasks/components/calendar/NowNextBar.tsx
index 956d237d..f9a8b5ec 100644
--- a/workbench/control_plane/src/app/tasks/components/calendar/NowNextBar.tsx
+++ b/workbench/control_plane/src/app/tasks/components/calendar/NowNextBar.tsx
@@ -1,9 +1,6 @@
 "use client";
 
-import {
-  Check,
-  Play,
-} from "lucide-react";
+import Icon from "@/components/Icon";
 import { GtdItem } from "../../lib/types";
 import {
   startOfDay,
@@ -113,7 +110,7 @@ export function NowNextBar({
               title="Mark done"
               className="tech-transition flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-muted-foreground/50 text-transparent hover:border-success hover:bg-success/10 hover:text-success"
             >
-              <Check className="h-3 w-3" strokeWidth={3} />
+              <Icon name="Check" className="h-3 w-3" strokeWidth={3} />
             </button>
             <button
               type="button"
@@ -129,7 +126,7 @@ export function NowNextBar({
               }
               className="tech-transition flex h-5 shrink-0 items-center gap-1 rounded-full border border-primary/50 px-2 text-[10px] font-semibold text-primary hover:bg-primary/10"
             >
-              <Play className="h-2.5 w-2.5" fill="currentColor" />
+              <Icon name="Play" className="h-2.5 w-2.5" fill="currentColor" />
               Focus
             </button>
             <button
diff --git a/workbench/control_plane/src/app/tasks/components/calendar/PlanDayPanel.tsx b/workbench/control_plane/src/app/tasks/components/calendar/PlanDayPanel.tsx
index 8a26e1c5..a968fd2b 100644
--- a/workbench/control_plane/src/app/tasks/components/calendar/PlanDayPanel.tsx
+++ b/workbench/control_plane/src/app/tasks/components/calendar/PlanDayPanel.tsx
@@ -1,16 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useState } from "react";
-import {
-  X,
-  Loader2,
-  Check,
-  AlertTriangle,
-  Wand2,
-  CalendarClock,
-  Sparkles,
-  Settings2,
-} from "lucide-react";
 import {
   apiPlanDay,
   apiReplan,
@@ -225,9 +216,9 @@ export function PlanDayPanel({
         </div>
         <div className="flex shrink-0 items-center gap-2 border-b border-border px-4 py-3">
           {isReplan ? (
-            <CalendarClock className="h-4 w-4 shrink-0 text-primary" />
+            <Icon name="CalendarClock" className="h-4 w-4 shrink-0 text-primary" />
           ) : (
-            <Wand2 className="h-4 w-4 shrink-0 text-primary" />
+            <Icon name="Wand2" className="h-4 w-4 shrink-0 text-primary" />
           )}
           <div className="min-w-0 flex-1">
             <h2 className="truncate text-sm font-semibold text-foreground">
@@ -245,7 +236,7 @@ export function PlanDayPanel({
             aria-label="Close"
             className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
           >
-            <X className="h-4 w-4" />
+            <Icon name="X" className="h-4 w-4" />
           </button>
         </div>
 
@@ -255,7 +246,7 @@ export function PlanDayPanel({
             midnight, so late-night sessions plan 24/7). Re-plans on change. */}
         <div className="flex shrink-0 flex-col gap-2 border-b border-border px-4 py-2">
           <div className="flex items-center gap-2">
-            <CalendarClock className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+            <Icon name="CalendarClock" className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
             <label
               htmlFor="plan-horizon"
               className="shrink-0 text-[11px] font-medium text-foreground"
@@ -343,7 +334,7 @@ export function PlanDayPanel({
                 }}
                 className="inline-flex items-center gap-1 text-[10px] font-medium text-muted-foreground hover:text-foreground"
               >
-                <Settings2 className="h-3 w-3" />
+                <Icon name="Settings2" className="h-3 w-3" />
                 Standing prompt
               </button>
             )}
@@ -366,9 +357,9 @@ export function PlanDayPanel({
               className="tech-transition inline-flex shrink-0 items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
             >
               {loading ? (
-                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
               ) : (
-                <Wand2 className="h-3.5 w-3.5" />
+                <Icon name="Wand2" className="h-3.5 w-3.5" />
               )}
               {plan ? "Redo" : isReplan ? "Fit" : "Plan"}
             </button>
@@ -383,11 +374,11 @@ export function PlanDayPanel({
         <div className="min-h-0 flex-1 overflow-y-auto px-4 py-3">
           {error ? (
             <p className="flex items-center gap-1.5 text-[12px] text-destructive">
-              <AlertTriangle className="h-4 w-4 shrink-0" /> {error}
+              <Icon name="AlertTriangle" className="h-4 w-4 shrink-0" /> {error}
             </p>
           ) : loading && !plan ? (
             <p className="flex items-center gap-1.5 py-6 text-[12px] text-muted-foreground">
-              <Loader2 className="h-4 w-4 animate-spin" /> Planning your day…
+              <Icon name="Loader2" className="h-4 w-4 animate-spin" /> Planning your day…
             </p>
           ) : plan ? (
             <>
@@ -397,7 +388,7 @@ export function PlanDayPanel({
               {plan.blocks.length > 0 &&
                 (fellBack ? (
                   <p className="mb-2 flex items-start gap-1.5 rounded-md border border-warning/40 bg-warning/10 px-2.5 py-2 text-[11px] text-warning">
-                    <AlertTriangle className="mt-px h-3.5 w-3.5 shrink-0" />
+                    <Icon name="AlertTriangle" className="mt-px h-3.5 w-3.5 shrink-0" />
                     <span>
                       AI ranking was unavailable, so this used priority order —
                       your note and standing prompt weren&apos;t applied. Times
@@ -411,7 +402,7 @@ export function PlanDayPanel({
                   </p>
                 ) : (
                   <p className="mb-2 inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-medium text-primary">
-                    <Sparkles className="h-3 w-3" /> AI-ranked for your prompt
+                    <Icon name="Sparkles" className="h-3 w-3" /> AI-ranked for your prompt
                   </p>
                 ))}
               {plan.notes && (
@@ -495,9 +486,9 @@ export function PlanDayPanel({
             // per-run note is never skipped by an auto-run.
             <div className="flex flex-col items-center gap-2 py-8 text-center">
               {isReplan ? (
-                <CalendarClock className="h-6 w-6 text-muted-foreground/60" />
+                <Icon name="CalendarClock" className="h-6 w-6 text-muted-foreground/60" />
               ) : (
-                <Wand2 className="h-6 w-6 text-muted-foreground/60" />
+                <Icon name="Wand2" className="h-6 w-6 text-muted-foreground/60" />
               )}
               <p className="text-[12.5px] font-medium text-foreground">
                 {isReplan
@@ -533,7 +524,7 @@ export function PlanDayPanel({
             disabled={!plan || (plan.blocks.length === 0 && plan.evicted.length === 0)}
             className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
           >
-            <Check className="h-3.5 w-3.5" />
+            <Icon name="Check" className="h-3.5 w-3.5" />
             Apply
             {plan?.blocks.length
               ? ` ${plan.blocks.length} block${plan.blocks.length === 1 ? "" : "s"}`
diff --git a/workbench/control_plane/src/app/tasks/components/calendar/ScheduleSheet.tsx b/workbench/control_plane/src/app/tasks/components/calendar/ScheduleSheet.tsx
index df282ab2..15de6eef 100644
--- a/workbench/control_plane/src/app/tasks/components/calendar/ScheduleSheet.tsx
+++ b/workbench/control_plane/src/app/tasks/components/calendar/ScheduleSheet.tsx
@@ -1,15 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useMemo, useState } from "react";
-import {
-  Clock,
-  Zap,
-  X,
-  CalendarPlus,
-  Check,
-  Wand2,
-  Play,
-} from "lucide-react";
 import { GtdItem } from "../../lib/types";
 import { durationLabel } from "../../lib/utils";
 import { priorityRank } from "../../lib/priority";
@@ -130,7 +122,7 @@ export function ScheduleSheet({
           <span className="h-1 w-10 rounded-full bg-border" />
         </div>
         <div className="flex items-center gap-2 px-4 py-2.5">
-          <CalendarPlus className="h-4 w-4 shrink-0 text-primary" />
+          <Icon name="CalendarPlus" className="h-4 w-4 shrink-0 text-primary" />
           <div className="min-w-0 flex-1">
             <h2 className="truncate text-sm font-semibold text-foreground">
               {gap
@@ -148,7 +140,7 @@ export function ScheduleSheet({
             aria-label="Close"
             className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
           >
-            <X className="h-4 w-4" />
+            <Icon name="X" className="h-4 w-4" />
           </button>
         </div>
 
@@ -158,7 +150,7 @@ export function ScheduleSheet({
             onClick={onPlan}
             className="tech-transition flex w-full items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-2.5 text-[13px] font-semibold text-primary-foreground hover:opacity-90"
           >
-            <Wand2 className="h-4 w-4" />
+            <Icon name="Wand2" className="h-4 w-4" />
             Rebuild my day with AI
           </button>
         </div>
@@ -174,7 +166,7 @@ export function ScheduleSheet({
               {twoMinute.length > 0 && (
                 <>
                   <p className="mb-1 flex items-center gap-1 px-1 text-[10px] font-semibold uppercase tracking-wide text-primary">
-                    <Zap className="h-3 w-3" /> 2-minute pile ({twoMinute.length})
+                    <Icon name="Zap" className="h-3 w-3" /> 2-minute pile ({twoMinute.length})
                     — just do it
                   </p>
                   <div className="mb-2.5 flex flex-col gap-1">
@@ -195,7 +187,7 @@ export function ScheduleSheet({
                           title="Done — no scheduling ceremony for small wins"
                           className="tech-transition inline-flex shrink-0 items-center gap-1 rounded-md bg-success/15 px-2 py-1 text-[11px] font-medium text-success hover:bg-success/25"
                         >
-                          <Check className="h-3 w-3" strokeWidth={3} />
+                          <Icon name="Check" className="h-3 w-3" strokeWidth={3} />
                           Done
                         </button>
                       </div>
@@ -228,12 +220,12 @@ export function ScheduleSheet({
                         </span>
                         <span className="mt-0.5 flex items-center gap-2 text-[10px] text-muted-foreground">
                           <span className="inline-flex items-center gap-0.5">
-                            <Clock className="h-3 w-3" />
+                            <Icon name="Clock" className="h-3 w-3" />
                             {durationLabel(t.timeEstimateMins ?? DEFAULT_BLOCK_MINS)}
                           </span>
                           {t.energy && (
                             <span className="inline-flex items-center gap-0.5 capitalize">
-                              <Zap className="h-3 w-3" />
+                              <Icon name="Zap" className="h-3 w-3" />
                               {t.energy}
                             </span>
                           )}
@@ -255,12 +247,12 @@ export function ScheduleSheet({
                       <span className="inline-flex shrink-0 items-center gap-1 rounded-md bg-primary/10 px-2 py-1 text-[11px] font-medium text-primary">
                         {gap ? (
                           <>
-                            <Play className="h-3 w-3" fill="currentColor" />
+                            <Icon name="Play" className="h-3 w-3" fill="currentColor" />
                             Start
                           </>
                         ) : (
                           <>
-                            <CalendarPlus className="h-3.5 w-3.5" />
+                            <Icon name="CalendarPlus" className="h-3.5 w-3.5" />
                             {at ? fmtClock(at) : "Timebox"}
                           </>
                         )}
diff --git a/workbench/control_plane/src/app/tasks/components/calendar/TimeGrid.tsx b/workbench/control_plane/src/app/tasks/components/calendar/TimeGrid.tsx
index 1d634498..1bb593fc 100644
--- a/workbench/control_plane/src/app/tasks/components/calendar/TimeGrid.tsx
+++ b/workbench/control_plane/src/app/tasks/components/calendar/TimeGrid.tsx
@@ -1,18 +1,7 @@
 "use client";
 
+import Icon, { themedIcon } from "@/components/Icon";
 import { useRef, useState } from "react";
-import {
-  X,
-  CalendarPlus,
-  Trash2,
-  Check,
-  CalendarClock,
-  Lock,
-  Unlock,
-  Play,
-  Star,
-  ExternalLink,
-} from "lucide-react";
 import {
   type EnergyWindow,
   type DayTemplate,
@@ -589,7 +578,7 @@ export function TimeGrid({
                             : "border-muted-foreground/50 text-transparent hover:border-success hover:text-success/70",
                         ].join(" ")}
                       >
-                        <Check className="h-2.5 w-2.5" strokeWidth={3} />
+                        <Icon name="Check" className="h-2.5 w-2.5" strokeWidth={3} />
                       </button>
                       <button
                         type="button"
@@ -661,7 +650,7 @@ export function TimeGrid({
                             : "text-muted-foreground opacity-0 hover:bg-black/10 hover:text-primary group-hover:opacity-100",
                         ].join(" ")}
                       >
-                        <Play className="h-3 w-3" fill="currentColor" />
+                        <Icon name="Play" className="h-3 w-3" fill="currentColor" />
                       </button>
                     )}
                     {/* ★ commit / uncommit the One Thing (today only). */}
@@ -687,7 +676,7 @@ export function TimeGrid({
                             : "text-muted-foreground opacity-0 hover:bg-black/10 hover:text-amber-400 group-hover:opacity-100",
                         ].join(" ")}
                       >
-                        <Star
+                        <Icon name="Star"
                           className="h-3 w-3"
                           fill={isOneThing ? "currentColor" : "none"}
                         />
@@ -716,9 +705,9 @@ export function TimeGrid({
                       ].join(" ")}
                     >
                       {isFixed ? (
-                        <Lock className="h-3 w-3" />
+                        <Icon name="Lock" className="h-3 w-3" />
                       ) : (
-                        <Unlock className="h-3 w-3" />
+                        <Icon name="Unlock" className="h-3 w-3" />
                       )}
                     </button>
                     <button
@@ -731,7 +720,7 @@ export function TimeGrid({
                       }}
                       className="tech-transition absolute right-0.5 top-0.5 rounded p-0.5 text-muted-foreground opacity-0 hover:bg-black/10 hover:text-destructive group-hover:opacity-100"
                     >
-                      <X className="h-3 w-3" />
+                      <Icon name="X" className="h-3 w-3" />
                     </button>
                     {/* drag the bottom edge to change duration */}
                     <div
@@ -761,7 +750,7 @@ export function TimeGrid({
             {
               kind: "item",
               label: "Open task",
-              icon: ExternalLink,
+              icon: themedIcon("ExternalLink"),
               onSelect: () => onOpen(it.id),
             },
             ...(!isDone
@@ -769,7 +758,7 @@ export function TimeGrid({
                   {
                     kind: "item",
                     label: "Focus on this",
-                    icon: Play,
+                    icon: themedIcon("Play"),
                     onSelect: () => onFocusMode(it),
                   } as CtxItem,
                 ]
@@ -777,7 +766,7 @@ export function TimeGrid({
             {
               kind: "item",
               label: isDone ? "Mark not done" : "Mark done",
-              icon: Check,
+              icon: themedIcon("Check"),
               onSelect: () => onComplete(it),
             },
             { kind: "sep" },
@@ -786,7 +775,7 @@ export function TimeGrid({
                   {
                     kind: "item",
                     label: isOT ? "Unset One Thing" : "Make it the One Thing",
-                    icon: Star,
+                    icon: themedIcon("Star"),
                     checked: isOT,
                     onSelect: () => onToggleOneThing(it.id),
                   } as CtxItem,
@@ -799,7 +788,7 @@ export function TimeGrid({
                     label: isFixed
                       ? "Make flexible (auto-moves)"
                       : "Pin as fixed (won't move)",
-                    icon: isFixed ? Unlock : Lock,
+                    icon: isFixed ? themedIcon("Unlock") : themedIcon("Lock"),
                     checked: isFixed,
                     onSelect: () => onSetFlexible(it, isFixed),
                   } as CtxItem,
@@ -811,7 +800,7 @@ export function TimeGrid({
                   {
                     kind: "item",
                     label: "Move to next free slot",
-                    icon: CalendarPlus,
+                    icon: themedIcon("CalendarPlus"),
                     onSelect: () => onMoveToFree(it),
                   } as CtxItem,
                 ]
@@ -819,19 +808,19 @@ export function TimeGrid({
             {
               kind: "item",
               label: "Reschedule…",
-              icon: CalendarClock,
+              icon: themedIcon("CalendarClock"),
               onSelect: () => onReschedulePopup(it.id),
             },
             {
               kind: "item",
               label: "Remove from calendar",
-              icon: X,
+              icon: themedIcon("X"),
               onSelect: () => onUnschedule(it),
             },
             {
               kind: "item",
               label: "Delete task…",
-              icon: Trash2,
+              icon: themedIcon("Trash2"),
               danger: true,
               onSelect: () => onDelete(it.id),
             },
diff --git a/workbench/control_plane/src/app/tasks/components/calendar/UnscheduledRail.tsx b/workbench/control_plane/src/app/tasks/components/calendar/UnscheduledRail.tsx
index 4dcc74fa..94eb08ba 100644
--- a/workbench/control_plane/src/app/tasks/components/calendar/UnscheduledRail.tsx
+++ b/workbench/control_plane/src/app/tasks/components/calendar/UnscheduledRail.tsx
@@ -1,18 +1,7 @@
 "use client";
 
+import Icon, { themedIcon } from "@/components/Icon";
 import { useState } from "react";
-import {
-  Clock,
-  Zap,
-  Sparkles,
-  CalendarPlus,
-  Trash2,
-  Check,
-  AlertTriangle,
-  CalendarClock,
-  Star,
-  ExternalLink,
-} from "lucide-react";
 import { GtdItem } from "../../lib/types";
 import { durationLabel } from "../../lib/utils";
 import { priorityRank } from "../../lib/priority";
@@ -89,7 +78,7 @@ export function UnscheduledRail({
     <aside className="hidden w-64 shrink-0 flex-col border-l border-border bg-card md:flex">
       <div className="border-b border-border px-3 py-2">
         <div className="flex items-center gap-1.5 text-[12px] font-semibold text-foreground">
-          <CalendarPlus className="h-3.5 w-3.5 text-primary" />
+          <Icon name="CalendarPlus" className="h-3.5 w-3.5 text-primary" />
           Unscheduled
         </div>
         <p className="mt-0.5 text-[10px] text-muted-foreground">
@@ -123,7 +112,7 @@ export function UnscheduledRail({
         )}
         {doneStats.count > 0 && (
           <div className="mt-0.5 inline-flex items-center gap-1 text-[10px] font-medium text-success">
-            <Check className="h-3 w-3" />
+            <Icon name="Check" className="h-3 w-3" />
             {doneStats.count} done ·{" "}
             {Math.round((doneStats.mins / 60) * 10) / 10}h
           </div>
@@ -200,7 +189,7 @@ export function UnscheduledRail({
                         : "text-muted-foreground/60 opacity-0 hover:text-amber-400 group-hover:opacity-100",
                     ].join(" ")}
                   >
-                    <Star
+                    <Icon name="Star"
                       className="h-3 w-3"
                       fill={t.id === oneThingId ? "currentColor" : "none"}
                     />
@@ -209,18 +198,18 @@ export function UnscheduledRail({
                 <div className="mt-1 flex items-center gap-2 text-[10px] text-muted-foreground">
                   {t.timeEstimateMins ? (
                     <span className="inline-flex items-center gap-0.5">
-                      <Clock className="h-3 w-3" />
+                      <Icon name="Clock" className="h-3 w-3" />
                       {durationLabel(t.timeEstimateMins)}
                     </span>
                   ) : (
                     <span className="inline-flex items-center gap-0.5">
-                      <Clock className="h-3 w-3" />
+                      <Icon name="Clock" className="h-3 w-3" />
                       {DEFAULT_BLOCK_MINS}m
                     </span>
                   )}
                   {t.energy && (
                     <span className="inline-flex items-center gap-0.5 capitalize">
-                      <Zap className="h-3 w-3" />
+                      <Icon name="Zap" className="h-3 w-3" />
                       {t.energy}
                     </span>
                   )}
@@ -233,7 +222,7 @@ export function UnscheduledRail({
                           : "text-warning",
                       ].join(" ")}
                     >
-                      <AlertTriangle className="h-3 w-3" />
+                      <Icon name="AlertTriangle" className="h-3 w-3" />
                       {(dueDays.get(t.id) as number) <= 0
                         ? "due today"
                         : dueDays.get(t.id) === 1
@@ -255,7 +244,7 @@ export function UnscheduledRail({
           title="Rebuild your day: reshuffle what's scheduled + fill from your list, around priority, energy + deadlines"
           className="tech-transition flex w-full items-center justify-center gap-1.5 rounded-md bg-primary/10 px-2 py-2 text-[11px] font-medium text-primary hover:bg-primary/20"
         >
-          <Sparkles className="h-3.5 w-3.5" />
+          <Icon name="Sparkles" className="h-3.5 w-3.5" />
           Rebuild my day
         </button>
       </div>
@@ -269,13 +258,13 @@ export function UnscheduledRail({
             {
               kind: "item",
               label: "Open task",
-              icon: ExternalLink,
+              icon: themedIcon("ExternalLink"),
               onSelect: () => onOpen(ctx.item.id),
             },
             {
               kind: "item",
               label: "Timebox → first free slot",
-              icon: CalendarPlus,
+              icon: themedIcon("CalendarPlus"),
               onSelect: () => onTimebox(ctx.item),
             },
             { kind: "sep" },
@@ -285,7 +274,7 @@ export function UnscheduledRail({
                 ctx.item.id === oneThingId
                   ? "Unset One Thing"
                   : "Make it the One Thing",
-              icon: Star,
+              icon: themedIcon("Star"),
               checked: ctx.item.id === oneThingId,
               onSelect: () => onToggleOneThing(ctx.item.id),
             },
@@ -293,13 +282,13 @@ export function UnscheduledRail({
             {
               kind: "item",
               label: "Schedule…",
-              icon: CalendarClock,
+              icon: themedIcon("CalendarClock"),
               onSelect: () => onReschedulePopup(ctx.item.id),
             },
             {
               kind: "item",
               label: "Delete task…",
-              icon: Trash2,
+              icon: themedIcon("Trash2"),
               danger: true,
               onSelect: () => onDelete(ctx.item.id),
             },
diff --git a/workbench/control_plane/src/app/tasks/lib/priorityIcons.ts b/workbench/control_plane/src/app/tasks/lib/priorityIcons.ts
index d36e7cf5..030938fb 100644
--- a/workbench/control_plane/src/app/tasks/lib/priorityIcons.ts
+++ b/workbench/control_plane/src/app/tasks/lib/priorityIcons.ts
@@ -5,43 +5,31 @@
 // section headers. Replaces the old emoji so the pills match the app's lucide
 // icon language.
 
-import {
-  ArrowDownWideNarrow,
-  Ban,
-  CalendarClock,
-  CircleAlert,
-  Flame,
-  FlaskConical,
-  Rocket,
-  Siren,
-  Target,
-  TrendingUp,
-  UserPlus,
-  type LucideIcon,
-} from "lucide-react";
+import { themedIcon } from "@/components/Icon";
+import type { ThemedIcon } from "@/components/Icon";
 import type { ActionMode, PriorityCell } from "./priority";
 
 /** Priority level → icon. Matches CELL_META's order/meaning:
  *  🔥 critical, 🚨 urgent, 📈 high-leverage, ❗ important,
  *  🚀 quick-leverage, 🧪 speculative-bet, ↓ low-priority. */
-export const CELL_ICON: Record<PriorityCell, LucideIcon> = {
-  critical: Flame,
-  urgent: Siren,
-  "high-leverage": TrendingUp,
-  important: CircleAlert,
-  "quick-leverage": Rocket,
-  "speculative-bet": FlaskConical,
-  "low-priority": ArrowDownWideNarrow,
+export const CELL_ICON: Record<PriorityCell, ThemedIcon> = {
+  critical: themedIcon("Flame"),
+  urgent: themedIcon("Siren"),
+  "high-leverage": themedIcon("TrendingUp"),
+  important: themedIcon("CircleAlert"),
+  "quick-leverage": themedIcon("Rocket"),
+  "speculative-bet": themedIcon("FlaskConical"),
+  "low-priority": themedIcon("ArrowDownWideNarrow"),
 };
 
 /** Action-mode / suggestion → icon: 🎯 do, 🙋 delegate (hand to a person),
  *  📅 schedule, 🚫 drop (eliminate/ignore). Shared by the Suggestion column,
  *  the card suggestion nudge, and the mode group headers. */
-export const MODE_ICON: Record<ActionMode, LucideIcon> = {
-  do: Target,
-  delegate: UserPlus,
-  schedule: CalendarClock,
-  drop: Ban,
+export const MODE_ICON: Record<ActionMode, ThemedIcon> = {
+  do: themedIcon("Target"),
+  delegate: themedIcon("UserPlus"),
+  schedule: themedIcon("CalendarClock"),
+  drop: themedIcon("Ban"),
 };
 
 /** The icon for a grouped section header, given the grouping axis and the
@@ -50,7 +38,7 @@ export const MODE_ICON: Record<ActionMode, LucideIcon> = {
 export function groupIcon(
   by: "priority" | "mode" | "energy" | "context" | "none" | string,
   key: string,
-): LucideIcon | null {
+): ThemedIcon | null {
   if (by === "priority") return CELL_ICON[key as PriorityCell] ?? null;
   if (by === "mode") return MODE_ICON[key as ActionMode] ?? null;
   return null;
diff --git a/workbench/control_plane/src/app/tasks/page.tsx b/workbench/control_plane/src/app/tasks/page.tsx
index 55485ba9..e812e0b6 100644
--- a/workbench/control_plane/src/app/tasks/page.tsx
+++ b/workbench/control_plane/src/app/tasks/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import AppIcon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import { useEffect, useState } from "react";
-import { PanelLeft, Plus, ArrowLeft, Sparkles } from "lucide-react";
 import { useViewMode } from "@/components/ViewModeProvider";
 import { useMobileDrawer } from "@/components/AppShell";
 import { useTaskStore } from "./lib/taskStore";
@@ -135,7 +135,7 @@ export default function TasksPage() {
               onClick={() => selectProject(null)}
               className="tech-transition flex shrink-0 items-center gap-1.5 border-b border-border bg-card px-4 py-2.5 text-sm text-muted-foreground hover:text-foreground"
             >
-              <ArrowLeft className="h-4 w-4" />
+              <AppIcon name="ArrowLeft" className="h-4 w-4" />
               Back
             </button>
             <div className="min-h-0 flex-1">
@@ -167,7 +167,7 @@ export default function TasksPage() {
           active={leftOpen}
           onClick={() => setLeftOpen((v) => !v)}
           label="Toggle lists"
-          icon={PanelLeft}
+          icon={themedIcon("PanelLeft")}
         />
         <span className="text-xs font-medium text-muted-foreground">
           Task Manager
@@ -177,7 +177,7 @@ export default function TasksPage() {
           onClick={() => openQuickCapture("single")}
           className="tech-transition ml-2 inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground hover:border-primary/40 hover:text-foreground"
         >
-          <Plus className="h-3.5 w-3.5" />
+          <AppIcon name="Plus" className="h-3.5 w-3.5" />
           Capture
           <kbd className="rounded border border-border px-1 text-[9px]">C</kbd>
         </button>
@@ -193,7 +193,7 @@ export default function TasksPage() {
               : "border-border text-muted-foreground hover:border-primary/40 hover:text-foreground",
           ].join(" ")}
         >
-          <Sparkles className="h-3.5 w-3.5" />
+          <AppIcon name="Sparkles" className="h-3.5 w-3.5" />
           Assistant
         </button>
       </div>
@@ -288,7 +288,7 @@ function PanelToggle({
   active: boolean;
   onClick: () => void;
   label: string;
-  icon: typeof PanelLeft;
+  icon: ThemedIcon;
   className?: string;
 }) {
   return (
diff --git a/workbench/control_plane/src/app/whatsapp/calls/page.tsx b/workbench/control_plane/src/app/whatsapp/calls/page.tsx
index 8b512bff..dbbf151a 100644
--- a/workbench/control_plane/src/app/whatsapp/calls/page.tsx
+++ b/workbench/control_plane/src/app/whatsapp/calls/page.tsx
@@ -13,24 +13,8 @@
  * See ai-company-brain/specs/whatsapp_calls_note_taker.md.
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  AlertTriangle,
-  CheckCircle2,
-  Headphones,
-  Loader2,
-  Mic,
-  MicOff,
-  Phone,
-  PhoneIncoming,
-  PhoneOff,
-  ClipboardCheck,
-  ClipboardList,
-  Stethoscope,
-  Users,
-  Volume2,
-  XCircle,
-} from "lucide-react";
 import {
   callAction,
   fetchAccounts,
@@ -396,7 +380,7 @@ export default function WhatsAppCallsPage() {
   if (accounts === null) {
     return (
       <div className="grid place-items-center p-12 text-muted-foreground">
-        <Loader2 className="h-5 w-5 animate-spin" />
+        <Icon name="Loader2" className="h-5 w-5 animate-spin" />
       </div>
     );
   }
@@ -424,7 +408,7 @@ export default function WhatsAppCallsPage() {
     <div className="mx-auto max-w-3xl p-4 sm:p-6">
       <header className="mb-4">
         <h1 className="flex items-center gap-2 text-lg font-bold text-foreground">
-          <Phone className="h-4 w-4 text-primary" />
+          <Icon name="Phone" className="h-4 w-4 text-primary" />
           WhatsApp calls
         </h1>
         <p className="mt-0.5 text-xs text-muted-foreground">
@@ -438,7 +422,7 @@ export default function WhatsAppCallsPage() {
       {/* The ToS posture is the first thing on the page, not a footnote: an
           automated client placing calls is the fastest way to lose a number. */}
       <div className="mb-3 flex items-start gap-2 rounded-xl bg-secondary px-3 py-2.5 text-[11px] leading-relaxed text-muted-foreground">
-        <Headphones className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+        <Icon name="Headphones" className="mt-0.5 h-3.5 w-3.5 shrink-0" />
         <span>
           Your mic and speakers join automatically when you place a call, so you
           hear it ringing straight away. <b className="text-foreground">Use
@@ -449,7 +433,7 @@ export default function WhatsAppCallsPage() {
       </div>
 
       <div className="mb-4 flex items-start gap-2 rounded-xl bg-warning/10 px-3 py-2.5 text-[11px] leading-relaxed text-warning">
-        <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+        <Icon name="AlertTriangle" className="mt-0.5 h-3.5 w-3.5 shrink-0" />
         <span>
           Calling from an unofficial client is outside WhatsApp&apos;s Terms of
           Service and the number can be banned. Use a number you&apos;re willing
@@ -494,9 +478,9 @@ export default function WhatsAppCallsPage() {
               }`}
             >
               {m === "direct" ? (
-                <Phone className="h-3 w-3" />
+                <Icon name="Phone" className="h-3 w-3" />
               ) : (
-                <Users className="h-3 w-3" />
+                <Icon name="Users" className="h-3 w-3" />
               )}
               {m === "direct" ? "1:1" : "Group"}
             </button>
@@ -523,9 +507,9 @@ export default function WhatsAppCallsPage() {
             className="inline-flex items-center justify-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-xs font-medium text-primary-foreground hover:opacity-90 tech-transition disabled:opacity-50"
           >
             {busy ? (
-              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+              <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
             ) : (
-              <Phone className="h-3.5 w-3.5" />
+              <Icon name="Phone" className="h-3.5 w-3.5" />
             )}
             {busy ? "Calling…" : "Call"}
           </button>
@@ -553,7 +537,7 @@ export default function WhatsAppCallsPage() {
               onClick={() => void runDiagnostics()}
               className="mt-1.5 inline-flex items-center gap-1 rounded-md bg-destructive/15 px-2 py-1 font-medium hover:bg-destructive/25 tech-transition"
             >
-              <Stethoscope className="h-3 w-3" />
+              <Icon name="Stethoscope" className="h-3 w-3" />
               Check what&apos;s wrong
             </button>
           </div>
@@ -566,7 +550,7 @@ export default function WhatsAppCallsPage() {
         <div className="mt-3 rounded-2xl border border-border bg-card p-4">
           <div className="mb-2 flex items-center justify-between">
             <h2 className="flex items-center gap-1.5 text-xs font-semibold text-foreground">
-              <Stethoscope className="h-3.5 w-3.5" />
+              <Icon name="Stethoscope" className="h-3.5 w-3.5" />
               Calling readiness
             </h2>
             <button
@@ -577,7 +561,7 @@ export default function WhatsAppCallsPage() {
             </button>
           </div>
           {diag === null ? (
-            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+            <Icon name="Loader2" className="h-4 w-4 animate-spin text-muted-foreground" />
           ) : (
             <>
               <dl className="grid grid-cols-2 gap-x-4 gap-y-1 text-[11px]">
@@ -592,9 +576,9 @@ export default function WhatsAppCallsPage() {
                 ).map(([label, ok]) => (
                   <div key={label} className="flex items-center gap-1.5">
                     {ok ? (
-                      <CheckCircle2 className="h-3.5 w-3.5 shrink-0 text-success" />
+                      <Icon name="CheckCircle2" className="h-3.5 w-3.5 shrink-0 text-success" />
                     ) : (
-                      <XCircle className="h-3.5 w-3.5 shrink-0 text-destructive" />
+                      <Icon name="XCircle" className="h-3.5 w-3.5 shrink-0 text-destructive" />
                     )}
                     <dt className="text-muted-foreground">{label}</dt>
                   </div>
@@ -646,11 +630,11 @@ export default function WhatsAppCallsPage() {
               >
                 <span className="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-primary/15 text-primary">
                   {c.direction === "incoming" ? (
-                    <PhoneIncoming className="h-4 w-4" />
+                    <Icon name="PhoneIncoming" className="h-4 w-4" />
                   ) : c.kind === "group" ? (
-                    <Users className="h-4 w-4" />
+                    <Icon name="Users" className="h-4 w-4" />
                   ) : (
-                    <Phone className="h-4 w-4" />
+                    <Icon name="Phone" className="h-4 w-4" />
                   )}
                 </span>
                 <div className="min-w-0 flex-1">
@@ -668,7 +652,7 @@ export default function WhatsAppCallsPage() {
                     )}
                     {c.recording && (
                       <span className="inline-flex items-center gap-1">
-                        <Mic className="h-3 w-3" />
+                        <Icon name="Mic" className="h-3 w-3" />
                         {c.audio_seconds
                           ? `${c.audio_seconds.toFixed(0)}s captured`
                           : "recording"}
@@ -713,9 +697,9 @@ export default function WhatsAppCallsPage() {
                         }`}
                       >
                         {muted ? (
-                          <MicOff className="h-3.5 w-3.5" />
+                          <Icon name="MicOff" className="h-3.5 w-3.5" />
                         ) : (
-                          <Mic className="h-3.5 w-3.5" />
+                          <Icon name="Mic" className="h-3.5 w-3.5" />
                         )}
                       </button>
                       <button
@@ -723,7 +707,7 @@ export default function WhatsAppCallsPage() {
                         title="Leave the call's audio (the call stays up)"
                         className="rounded-lg border border-border px-2.5 py-1.5 text-xs text-muted-foreground hover:text-foreground tech-transition"
                       >
-                        <Headphones className="h-3.5 w-3.5" />
+                        <Icon name="Headphones" className="h-3.5 w-3.5" />
                       </button>
                     </div>
                   ) : (
@@ -733,9 +717,9 @@ export default function WhatsAppCallsPage() {
                       className="inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-success px-3 py-1.5 text-xs font-medium text-white hover:opacity-90 tech-transition disabled:opacity-50"
                     >
                       {audioState === "requesting-mic" || audioState === "connecting" ? (
-                        <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                        <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
                       ) : (
-                        <Volume2 className="h-3.5 w-3.5" />
+                        <Icon name="Volume2" className="h-3.5 w-3.5" />
                       )}
                       {audioState === "requesting-mic"
                         ? "Mic…"
@@ -753,11 +737,11 @@ export default function WhatsAppCallsPage() {
                   className="shrink-0 rounded-lg border border-border px-2.5 py-1.5 text-xs text-muted-foreground hover:text-foreground tech-transition disabled:opacity-50"
                 >
                   {reportBusy ? (
-                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
                   ) : copied ? (
-                    <ClipboardCheck className="h-3.5 w-3.5 text-success" />
+                    <Icon name="ClipboardCheck" className="h-3.5 w-3.5 text-success" />
                   ) : (
-                    <ClipboardList className="h-3.5 w-3.5" />
+                    <Icon name="ClipboardList" className="h-3.5 w-3.5" />
                   )}
                 </button>
 
@@ -781,7 +765,7 @@ export default function WhatsAppCallsPage() {
                     onClick={() => void act("hangup", c)}
                     className="inline-flex items-center gap-1.5 rounded-lg bg-destructive px-3 py-1.5 text-xs font-medium text-white hover:opacity-90 tech-transition"
                   >
-                    <PhoneOff className="h-3.5 w-3.5" />
+                    <Icon name="PhoneOff" className="h-3.5 w-3.5" />
                     Hang up
                   </button>
                 )}
@@ -798,7 +782,7 @@ export default function WhatsAppCallsPage() {
         <section className="mt-4 rounded-2xl border border-border bg-card p-4">
           <div className="mb-2 flex items-center justify-between gap-2">
             <h2 className="flex items-center gap-1.5 text-xs font-semibold text-foreground">
-              <ClipboardList className="h-3.5 w-3.5" />
+              <Icon name="ClipboardList" className="h-3.5 w-3.5" />
               Debug report {copied && <span className="text-success">· copied</span>}
             </h2>
             <div className="flex gap-2">
@@ -842,7 +826,7 @@ export default function WhatsAppCallsPage() {
               <div key={c.call_id} className="p-3">
                 <div className="flex items-center gap-3">
                   <span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-secondary text-muted-foreground">
-                    <PhoneOff className="h-3.5 w-3.5" />
+                    <Icon name="PhoneOff" className="h-3.5 w-3.5" />
                   </span>
                   <div className="min-w-0 flex-1">
                     <p className="truncate text-xs text-foreground">
diff --git a/workbench/control_plane/src/app/whatsapp/connect/page.tsx b/workbench/control_plane/src/app/whatsapp/connect/page.tsx
index ab9e8e62..211dba24 100644
--- a/workbench/control_plane/src/app/whatsapp/connect/page.tsx
+++ b/workbench/control_plane/src/app/whatsapp/connect/page.tsx
@@ -7,25 +7,9 @@
 // token. Honest by design: it names exactly what Meta requires and never fakes a
 // one-click flow the platform can't actually deliver without app review.
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
-import {
-  AlertTriangle,
-  ArrowLeft,
-  ArrowRight,
-  Building2,
-  Check,
-  CheckCircle2,
-  Copy,
-  ExternalLink,
-  Loader2,
-  LogIn,
-  MessageCircle,
-  QrCode,
-  RefreshCw,
-  ShieldCheck,
-  Smartphone,
-} from "lucide-react";
 import {
   createAccount,
   embeddedSignup,
@@ -76,7 +60,7 @@ export default function ConnectPage() {
     <div className="mx-auto flex min-h-full max-w-2xl flex-col p-4 md:p-6">
       <div className="mb-6 flex items-center gap-3">
         <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary/15 text-primary">
-          <MessageCircle className="h-5 w-5" />
+          <Icon name="MessageCircle" className="h-5 w-5" />
         </span>
         <div>
           <h1 className="text-[16px] font-semibold leading-tight">
@@ -88,7 +72,7 @@ export default function ConnectPage() {
 
       {mode === "loading" && (
         <div className="mt-10 flex justify-center text-muted-foreground">
-          <Loader2 className="h-5 w-5 animate-spin" />
+          <Icon name="Loader2" className="h-5 w-5 animate-spin" />
         </div>
       )}
 
@@ -172,7 +156,7 @@ function PickTransport({
         className="group flex w-full items-start gap-3 rounded-xl border border-border bg-background p-5 text-left transition hover:border-primary/60 hover:bg-primary/[0.03]"
       >
         <span className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/15 text-primary">
-          <Smartphone className="h-5 w-5" />
+          <Icon name="Smartphone" className="h-5 w-5" />
         </span>
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">
@@ -188,7 +172,7 @@ function PickTransport({
             Web works. No Meta developer account, no tokens, live in a minute.
           </p>
         </div>
-        <ArrowRight className="mt-1 h-4 w-4 shrink-0 text-muted-foreground transition group-hover:translate-x-0.5 group-hover:text-primary" />
+        <Icon name="ArrowRight" className="mt-1 h-4 w-4 shrink-0 text-muted-foreground transition group-hover:translate-x-0.5 group-hover:text-primary" />
       </button>
 
       <button
@@ -196,7 +180,7 @@ function PickTransport({
         className="group flex w-full items-start gap-3 rounded-xl border border-border bg-background p-5 text-left transition hover:border-primary/60 hover:bg-primary/[0.03]"
       >
         <span className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
-          <Building2 className="h-5 w-5" />
+          <Icon name="Building2" className="h-5 w-5" />
         </span>
         <div className="min-w-0 flex-1">
           <span className="text-[14px] font-semibold">
@@ -208,7 +192,7 @@ function PickTransport({
             about 15 minutes of setup.
           </p>
         </div>
-        <ArrowRight className="mt-1 h-4 w-4 shrink-0 text-muted-foreground transition group-hover:translate-x-0.5 group-hover:text-primary" />
+        <Icon name="ArrowRight" className="mt-1 h-4 w-4 shrink-0 text-muted-foreground transition group-hover:translate-x-0.5 group-hover:text-primary" />
       </button>
 
       <p className="px-1 pt-1 text-[11px] leading-relaxed text-muted-foreground">
@@ -285,7 +269,7 @@ function PersonalPairing({
   return (
     <Card>
       <div className="flex items-center gap-2">
-        <QrCode className="h-4 w-4 text-primary" />
+        <Icon name="QrCode" className="h-4 w-4 text-primary" />
         <h2 className="text-[14px] font-semibold">Scan to link your WhatsApp</h2>
       </div>
 
@@ -318,7 +302,7 @@ function PersonalPairing({
                 </div>
               ) : (
                 <div className="flex flex-col items-center gap-2 text-muted-foreground">
-                  <Loader2 className="h-5 w-5 animate-spin" />
+                  <Icon name="Loader2" className="h-5 w-5 animate-spin" />
                   <span className="text-[11px]">Generating code…</span>
                 </div>
               )}
@@ -330,7 +314,7 @@ function PersonalPairing({
               <span className="font-semibold text-success">Linked!</span>
             ) : (
               <>
-                <Loader2 className="h-3 w-3 animate-spin" />
+                <Icon name="Loader2" className="h-3 w-3 animate-spin" />
                 Waiting for you to scan… the code refreshes automatically.
               </>
             )}
@@ -353,10 +337,10 @@ function PersonalPairing({
 
       <div className="mt-5 flex items-center justify-between">
         <GhostButton onClick={onBack}>
-          <ArrowLeft className="h-3.5 w-3.5" /> Back
+          <Icon name="ArrowLeft" className="h-3.5 w-3.5" /> Back
         </GhostButton>
         <GhostButton onClick={restart}>
-          <RefreshCw className="h-3.5 w-3.5" /> New code
+          <Icon name="RefreshCw" className="h-3.5 w-3.5" /> New code
         </GhostButton>
       </div>
     </Card>
@@ -367,7 +351,7 @@ function BridgeUnreachable({ onRetry }: { onRetry: () => void }) {
   return (
     <div className="mt-3">
       <div className="flex items-start gap-2 rounded-lg border border-amber-500/30 bg-amber-500/10 p-3">
-        <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-600" />
+        <Icon name="AlertTriangle" className="mt-0.5 h-4 w-4 shrink-0 text-amber-600" />
         <div className="text-[12px] text-amber-700 dark:text-amber-400">
           <div className="font-semibold">The WhatsApp bridge isn&apos;t running</div>
           <p className="mt-1 leading-relaxed">
@@ -380,7 +364,7 @@ function BridgeUnreachable({ onRetry }: { onRetry: () => void }) {
       </div>
       <div className="mt-4 flex justify-end">
         <PrimaryButton onClick={onRetry}>
-          <RefreshCw className="h-3.5 w-3.5" /> Retry
+          <Icon name="RefreshCw" className="h-3.5 w-3.5" /> Retry
         </PrimaryButton>
       </div>
     </div>
@@ -538,9 +522,9 @@ function EmbeddedSignupButton({
         className="flex w-full items-center justify-center gap-2 rounded-lg bg-[#1877F2] px-4 py-2.5 text-[13px] font-semibold text-white hover:opacity-95 disabled:opacity-60"
       >
         {busy ? (
-          <Loader2 className="h-4 w-4 animate-spin" />
+          <Icon name="Loader2" className="h-4 w-4 animate-spin" />
         ) : (
-          <LogIn className="h-4 w-4" />
+          <Icon name="LogIn" className="h-4 w-4" />
         )}
         Continue with Facebook
       </button>
@@ -576,7 +560,7 @@ function Stepper({ step }: { step: number }) {
                       : "bg-muted text-muted-foreground"
                 }`}
               >
-                {done ? <Check className="h-3.5 w-3.5" /> : i + 1}
+                {done ? <Icon name="Check" className="h-3.5 w-3.5" /> : i + 1}
               </span>
               <span
                 className={`hidden text-[11px] sm:inline ${
@@ -657,7 +641,7 @@ function StepPrereqs({
                 rel="noreferrer"
                 className="mt-0.5 inline-flex items-center gap-1 text-[11px] text-primary hover:underline"
               >
-                {it.link} <ExternalLink className="h-3 w-3" />
+                {it.link} <Icon name="ExternalLink" className="h-3 w-3" />
               </a>
             </div>
           </li>
@@ -665,7 +649,7 @@ function StepPrereqs({
       </ol>
       <div className="mt-6 flex justify-end">
         <PrimaryButton onClick={onNext}>
-          Continue <ArrowRight className="h-3.5 w-3.5" />
+          Continue <Icon name="ArrowRight" className="h-3.5 w-3.5" />
         </PrimaryButton>
       </div>
     </Card>
@@ -702,7 +686,7 @@ function StepWebhook({
 
       {!info ? (
         <div className="mt-4 flex items-center gap-2 text-[12px] text-muted-foreground">
-          <Loader2 className="h-4 w-4 animate-spin" /> Loading…
+          <Icon name="Loader2" className="h-4 w-4 animate-spin" /> Loading…
         </div>
       ) : (
         <div className="mt-4 space-y-3">
@@ -728,10 +712,10 @@ function StepWebhook({
 
       <div className="mt-6 flex items-center justify-between">
         <GhostButton onClick={onBack}>
-          <ArrowLeft className="h-3.5 w-3.5" /> Back
+          <Icon name="ArrowLeft" className="h-3.5 w-3.5" /> Back
         </GhostButton>
         <PrimaryButton onClick={onNext} disabled={!webhookUrl}>
-          I&apos;ve done this <ArrowRight className="h-3.5 w-3.5" />
+          I&apos;ve done this <Icon name="ArrowRight" className="h-3.5 w-3.5" />
         </PrimaryButton>
       </div>
     </Card>
@@ -837,9 +821,9 @@ function StepCredentials({
       <div className="mt-3 flex items-center gap-2">
         <GhostButton onClick={doTest} disabled={!canTest || testing}>
           {testing ? (
-            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
           ) : (
-            <ShieldCheck className="h-3.5 w-3.5" />
+            <Icon name="ShieldCheck" className="h-3.5 w-3.5" />
           )}
           Test connection
         </GhostButton>
@@ -853,7 +837,7 @@ function StepCredentials({
       {result?.ok && (
         <div className="mt-3 rounded-lg border border-success/30 bg-success/10 p-3">
           <div className="flex items-center gap-1.5 text-[12.5px] font-semibold text-success">
-            <CheckCircle2 className="h-4 w-4" />
+            <Icon name="CheckCircle2" className="h-4 w-4" />
             {result.verified_name || "Connected"}
           </div>
           <div className="mt-0.5 text-[11.5px] text-muted-foreground">
@@ -877,13 +861,13 @@ function StepCredentials({
 
       <div className="mt-6 flex items-center justify-between">
         <GhostButton onClick={onBack}>
-          <ArrowLeft className="h-3.5 w-3.5" /> Back
+          <Icon name="ArrowLeft" className="h-3.5 w-3.5" /> Back
         </GhostButton>
         <PrimaryButton onClick={doConnect} disabled={!verified || saving}>
           {saving ? (
-            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
           ) : (
-            <Check className="h-3.5 w-3.5" />
+            <Icon name="Check" className="h-3.5 w-3.5" />
           )}
           Connect number
         </PrimaryButton>
@@ -904,7 +888,7 @@ function StepDone({ onGo }: { onGo: () => void }) {
     <Card>
       <div className="flex flex-col items-center py-4 text-center">
         <span className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl bg-success/15 text-success">
-          <CheckCircle2 className="h-7 w-7" />
+          <Icon name="CheckCircle2" className="h-7 w-7" />
         </span>
         <h2 className="text-[15px] font-semibold">You&apos;re connected 🎉</h2>
         <p className="mx-auto mt-1.5 max-w-sm text-[12.5px] text-muted-foreground">
@@ -913,7 +897,7 @@ function StepDone({ onGo }: { onGo: () => void }) {
           inbox starts fresh from now.
         </p>
         <PrimaryButton onClick={onGo} className="mt-5">
-          Go to inbox <ArrowRight className="h-3.5 w-3.5" />
+          Go to inbox <Icon name="ArrowRight" className="h-3.5 w-3.5" />
         </PrimaryButton>
       </div>
     </Card>
@@ -999,11 +983,11 @@ function CopyRow({ label, value }: { label: string; value: string }) {
         >
           {copied ? (
             <>
-              <Check className="h-3 w-3 text-success" /> Copied
+              <Icon name="Check" className="h-3 w-3 text-success" /> Copied
             </>
           ) : (
             <>
-              <Copy className="h-3 w-3" /> Copy
+              <Icon name="Copy" className="h-3 w-3" /> Copy
             </>
           )}
         </button>
diff --git a/workbench/control_plane/src/app/whatsapp/insights/page.tsx b/workbench/control_plane/src/app/whatsapp/insights/page.tsx
index ff9002de..5e990397 100644
--- a/workbench/control_plane/src/app/whatsapp/insights/page.tsx
+++ b/workbench/control_plane/src/app/whatsapp/insights/page.tsx
@@ -4,8 +4,8 @@
 // over the classified store: reply speed, who's waited longest, inbound load by
 // intent, and the busiest chats. Calm and honest — no vanity unread counts.
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useState } from "react";
-import { Activity, Clock, Loader2 } from "lucide-react";
 import { fetchAccounts, fetchPulse, pickDefaultAccount } from "../lib/api";
 import type { WaPulse } from "../lib/types";
 
@@ -66,7 +66,7 @@ export default function InsightsPage() {
   if (loading) {
     return (
       <div className="flex h-full items-center justify-center text-muted-foreground">
-        <Loader2 className="h-5 w-5 animate-spin" />
+        <Icon name="Loader2" className="h-5 w-5 animate-spin" />
       </div>
     );
   }
@@ -76,7 +76,7 @@ export default function InsightsPage() {
   return (
     <div className="mx-auto h-full max-w-3xl overflow-y-auto p-4 text-foreground md:p-6">
       <div className="mb-5 flex items-center gap-3">
-        <Activity className="h-4 w-4 text-primary" />
+        <Icon name="Activity" className="h-4 w-4 text-primary" />
         <h1 className="text-[15px] font-semibold">Pulse</h1>
         <div className="ml-auto flex items-center gap-1 rounded-lg border border-border p-0.5 text-[11px]">
           {[7, 30].map((d) => (
@@ -115,7 +115,7 @@ export default function InsightsPage() {
           <ul className="divide-y divide-border">
             {pulse.waiting_longest.map((w) => (
               <li key={w.chat_id} className="flex items-center gap-3 px-3 py-2.5">
-                <Clock className="h-3.5 w-3.5 shrink-0 text-amber-500" />
+                <Icon name="Clock" className="h-3.5 w-3.5 shrink-0 text-amber-500" />
                 <div className="min-w-0 flex-1">
                   <div className="truncate text-[12.5px] font-semibold">
                     {w.name}
diff --git a/workbench/control_plane/src/app/whatsapp/layout.tsx b/workbench/control_plane/src/app/whatsapp/layout.tsx
index 95e30c82..a15517bd 100644
--- a/workbench/control_plane/src/app/whatsapp/layout.tsx
+++ b/workbench/control_plane/src/app/whatsapp/layout.tsx
@@ -11,34 +11,24 @@
 //     email/tasks use for their mobile sub-navigation.
 // Icons are the native lucide set.
 
+import AppIcon, { themedIcon } from "@/components/Icon";
+import type { ThemedIcon } from "@/components/Icon";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useEffect } from "react";
-import {
-  Activity,
-  Inbox,
-  MessageSquare,
-  MessageSquareText,
-  Phone,
-  Plus,
-  SlidersHorizontal,
-  Smartphone,
-  Tags,
-  type LucideIcon,
-} from "lucide-react";
 import { useViewMode } from "@/components/ViewModeProvider";
 import { useMobileDrawer } from "@/components/AppShell";
 
-type Tab = { href: string; label: string; icon: LucideIcon; exact?: boolean };
+type Tab = { href: string; label: string; icon: ThemedIcon; exact?: boolean };
 
 const TABS: Tab[] = [
-  { href: "/whatsapp", label: "Inbox", icon: Inbox, exact: true },
-  { href: "/whatsapp/calls", label: "Calls", icon: Phone },
-  { href: "/whatsapp/insights", label: "Pulse", icon: Activity },
-  { href: "/whatsapp/settings/categories", label: "Categories", icon: Tags },
-  { href: "/whatsapp/settings/replies", label: "Replies", icon: MessageSquareText },
-  { href: "/whatsapp/settings/rules", label: "Rules", icon: SlidersHorizontal },
-  { href: "/whatsapp/numbers", label: "Numbers", icon: Smartphone },
+  { href: "/whatsapp", label: "Inbox", icon: themedIcon("Inbox"), exact: true },
+  { href: "/whatsapp/calls", label: "Calls", icon: themedIcon("Phone") },
+  { href: "/whatsapp/insights", label: "Pulse", icon: themedIcon("Activity") },
+  { href: "/whatsapp/settings/categories", label: "Categories", icon: themedIcon("Tags") },
+  { href: "/whatsapp/settings/replies", label: "Replies", icon: themedIcon("MessageSquareText") },
+  { href: "/whatsapp/settings/rules", label: "Rules", icon: themedIcon("SlidersHorizontal") },
+  { href: "/whatsapp/numbers", label: "Numbers", icon: themedIcon("Smartphone") },
 ];
 
 const isTabActive = (t: Tab, pathname: string | null) =>
@@ -56,7 +46,7 @@ function SectionNavDrawer({
     <div className="flex flex-col p-2">
       <div className="flex items-center gap-2 px-3 py-2">
         <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-primary/15 text-primary">
-          <MessageSquare className="h-3.5 w-3.5" />
+          <AppIcon name="MessageSquare" className="h-3.5 w-3.5" />
         </span>
         <span className="text-[13px] font-semibold">WhatsApp</span>
       </div>
@@ -85,7 +75,7 @@ function SectionNavDrawer({
           onClick={onNavigate}
           className="flex items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-2.5 text-sm font-semibold text-primary-foreground hover:opacity-90"
         >
-          <Plus className="h-4 w-4 shrink-0" />
+          <AppIcon name="Plus" className="h-4 w-4 shrink-0" />
           Connect a number
         </Link>
       </div>
@@ -128,7 +118,7 @@ export default function WhatsAppLayout({ children }: { children: React.ReactNode
       <aside className="flex w-14 shrink-0 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground md:w-52">
         <div className="flex h-12 shrink-0 items-center gap-2 border-b border-sidebar-border px-3">
           <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-primary/15 text-primary">
-            <MessageSquare className="h-3.5 w-3.5" />
+            <AppIcon name="MessageSquare" className="h-3.5 w-3.5" />
           </span>
           <span className="hidden text-[13px] font-semibold md:block">WhatsApp</span>
         </div>
@@ -161,7 +151,7 @@ export default function WhatsAppLayout({ children }: { children: React.ReactNode
             title="Connect a number"
             className="flex items-center justify-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-[12px] font-semibold text-primary-foreground hover:opacity-90"
           >
-            <Plus className="h-3.5 w-3.5 shrink-0" />
+            <AppIcon name="Plus" className="h-3.5 w-3.5 shrink-0" />
             <span className="hidden md:inline">Connect</span>
           </Link>
         </div>
diff --git a/workbench/control_plane/src/app/whatsapp/lib/types.ts b/workbench/control_plane/src/app/whatsapp/lib/types.ts
index 0538e80a..4554d738 100644
--- a/workbench/control_plane/src/app/whatsapp/lib/types.ts
+++ b/workbench/control_plane/src/app/whatsapp/lib/types.ts
@@ -2,14 +2,8 @@
 // apps/services/gateway/gateway/routes/whatsapp/core.py). Kept in sync by hand —
 // a small, stable surface for the read-only W0 app.
 
-import {
-  Clock,
-  MessageSquare,
-  Moon,
-  Sparkles,
-  Users,
-  type LucideIcon,
-} from "lucide-react";
+import { themedIcon } from "@/components/Icon";
+import type { ThemedIcon } from "@/components/Icon";
 
 export type WaAccount = {
   id: string;
@@ -287,10 +281,10 @@ export type WaChatContext = {
 // The triage streams shown in the nav — the single organizing spine.
 // Triage streams. Icons are the native lucide set (rendered as components), not
 // emoji, so they inherit the app's colour + sizing like every other icon.
-export const STREAMS: { key: string; label: string; icon: LucideIcon }[] = [
-  { key: "needs_reply", label: "Needs reply", icon: Sparkles },
-  { key: "waiting", label: "Waiting on them", icon: Clock },
-  { key: "groups", label: "Groups", icon: Users },
-  { key: "all", label: "All chats", icon: MessageSquare },
-  { key: "snoozed", label: "Snoozed", icon: Moon },
+export const STREAMS: { key: string; label: string; icon: ThemedIcon }[] = [
+  { key: "needs_reply", label: "Needs reply", icon: themedIcon("Sparkles") },
+  { key: "waiting", label: "Waiting on them", icon: themedIcon("Clock") },
+  { key: "groups", label: "Groups", icon: themedIcon("Users") },
+  { key: "all", label: "All chats", icon: themedIcon("MessageSquare") },
+  { key: "snoozed", label: "Snoozed", icon: themedIcon("Moon") },
 ];
diff --git a/workbench/control_plane/src/app/whatsapp/numbers/page.tsx b/workbench/control_plane/src/app/whatsapp/numbers/page.tsx
index 2132b2c6..d1f594e3 100644
--- a/workbench/control_plane/src/app/whatsapp/numbers/page.tsx
+++ b/workbench/control_plane/src/app/whatsapp/numbers/page.tsx
@@ -5,9 +5,9 @@
 // reachable from the Integrations page; this brings account management into the
 // WhatsApp app itself (via the shared nav's "Numbers" tab).
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useState } from "react";
 import Link from "next/link";
-import { Check, Loader2, Plus, Smartphone, Trash2 } from "lucide-react";
 import { disconnectAccount, fetchAccounts } from "../lib/api";
 import type { WaAccount } from "../lib/types";
 
@@ -49,7 +49,7 @@ export default function NumbersPage() {
   if (loading) {
     return (
       <div className="flex h-full items-center justify-center text-muted-foreground">
-        <Loader2 className="h-5 w-5 animate-spin" />
+        <Icon name="Loader2" className="h-5 w-5 animate-spin" />
       </div>
     );
   }
@@ -57,7 +57,7 @@ export default function NumbersPage() {
   return (
     <div className="mx-auto h-full max-w-2xl overflow-y-auto p-4 md:p-6">
       <div className="mb-1 flex items-center gap-2">
-        <Smartphone className="h-4 w-4 text-primary" />
+        <Icon name="Smartphone" className="h-4 w-4 text-primary" />
         <h1 className="text-[15px] font-semibold">Connected numbers</h1>
       </div>
       <p className="mb-5 text-[12.5px] text-muted-foreground">
@@ -80,7 +80,7 @@ export default function NumbersPage() {
             href="/whatsapp/connect"
             className="mt-4 inline-flex items-center gap-1.5 rounded-lg bg-primary px-3.5 py-2 text-[12.5px] font-semibold text-primary-foreground hover:opacity-90"
           >
-            <Plus className="h-3.5 w-3.5" /> Connect a number
+            <Icon name="Plus" className="h-3.5 w-3.5" /> Connect a number
           </Link>
         </div>
       ) : (
@@ -94,7 +94,7 @@ export default function NumbersPage() {
                 className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-white"
                 style={{ backgroundColor: a.avatar_color || "#25D366" }}
               >
-                <Smartphone className="h-4 w-4" />
+                <Icon name="Smartphone" className="h-4 w-4" />
               </span>
               <div className="min-w-0 flex-1">
                 <div className="flex items-center gap-2">
@@ -120,9 +120,9 @@ export default function NumbersPage() {
                 className="flex shrink-0 items-center gap-1.5 rounded-lg border border-border px-2.5 py-1.5 text-[12px] font-semibold text-muted-foreground hover:border-red-500/40 hover:text-red-500 disabled:opacity-50"
               >
                 {busy === a.id ? (
-                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                  <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
                 ) : (
-                  <Trash2 className="h-3.5 w-3.5" />
+                  <Icon name="Trash2" className="h-3.5 w-3.5" />
                 )}
                 Disconnect
               </button>
@@ -133,7 +133,7 @@ export default function NumbersPage() {
             href="/whatsapp/connect"
             className="mt-2 flex items-center justify-center gap-1.5 rounded-lg border border-dashed border-border py-2.5 text-[12.5px] font-semibold text-muted-foreground hover:border-primary/50 hover:text-foreground"
           >
-            <Plus className="h-3.5 w-3.5" /> Connect another number
+            <Icon name="Plus" className="h-3.5 w-3.5" /> Connect another number
           </Link>
         </div>
       )}
@@ -149,7 +149,7 @@ function SyncBadge({ status }: { status: string }) {
         live ? "text-success" : "text-muted-foreground"
       }`}
     >
-      {live ? <Check className="h-3 w-3" /> : null}
+      {live ? <Icon name="Check" className="h-3 w-3" /> : null}
       {live ? "Live" : status || "idle"}
     </span>
   );
diff --git a/workbench/control_plane/src/app/whatsapp/page.tsx b/workbench/control_plane/src/app/whatsapp/page.tsx
index 0f844da3..ec9bb169 100644
--- a/workbench/control_plane/src/app/whatsapp/page.tsx
+++ b/workbench/control_plane/src/app/whatsapp/page.tsx
@@ -8,26 +8,9 @@
 // buttons — capability arrives in later phases as streams / settings / drawers,
 // never as more always-on chrome on the queue.
 
+import AppIcon from "@/components/Icon";
 import { useCallback, useEffect, useRef, useState } from "react";
 import Link from "next/link";
-import {
-  ArrowLeft,
-  Check,
-  ChevronDown,
-  ChevronsUpDown,
-  Clock,
-  Loader2,
-  MessageCircle,
-  Mic,
-  PanelRight,
-  Phone,
-  Plus,
-  Search,
-  Send,
-  Sparkles,
-  X,
-  Zap,
-} from "lucide-react";
 import { useViewMode } from "@/components/ViewModeProvider";
 import { useMobileDrawer } from "@/components/AppShell";
 import {
@@ -297,7 +280,7 @@ export default function WhatsAppPage() {
   if (loading) {
     return (
       <div className="flex h-full items-center justify-center text-muted-foreground">
-        <Loader2 className="h-5 w-5 animate-spin" />
+        <AppIcon name="Loader2" className="h-5 w-5 animate-spin" />
       </div>
     );
   }
@@ -343,7 +326,7 @@ export default function WhatsAppPage() {
           <span className="text-[11px] text-muted-foreground">
             {chats.length}
           </span>
-          <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground/60" />
+          <AppIcon name="ChevronDown" className="h-4 w-4 shrink-0 text-muted-foreground/60" />
           <span className="ml-auto flex min-w-0 items-center gap-1.5 text-[11px] text-muted-foreground">
             <span className="truncate">
               {activeAccount.display_name || activeAccount.phone_number}
@@ -475,7 +458,7 @@ export default function WhatsAppPage() {
             {chats.length}
           </span>
           <div className="ml-auto flex items-center gap-1 text-muted-foreground/60">
-            <Search className="h-3.5 w-3.5" />
+            <AppIcon name="Search" className="h-3.5 w-3.5" />
           </div>
         </div>
         <div className="min-h-0 flex-1 overflow-y-auto">
@@ -558,7 +541,7 @@ function AccountSwitcher({
                 </div>
               </div>
               {a.id === active.id && (
-                <Check className="h-3.5 w-3.5 shrink-0 text-success" />
+                <AppIcon name="Check" className="h-3.5 w-3.5 shrink-0 text-success" />
               )}
             </button>
           ))}
@@ -566,7 +549,7 @@ function AccountSwitcher({
             href="/whatsapp/connect"
             className="flex items-center gap-2 border-t border-border px-2.5 py-2 text-[11px] font-semibold text-primary hover:bg-muted/50"
           >
-            <Plus className="h-3.5 w-3.5" /> Connect another number
+            <AppIcon name="Plus" className="h-3.5 w-3.5" /> Connect another number
           </Link>
         </div>
       )}
@@ -589,7 +572,7 @@ function AccountSwitcher({
             {accounts.length > 1 ? ` · ${accounts.length} numbers` : ""}
           </div>
         </div>
-        <ChevronsUpDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground/60" />
+        <AppIcon name="ChevronsUpDown" className="h-3.5 w-3.5 shrink-0 text-muted-foreground/60" />
       </button>
     </div>
   );
@@ -717,7 +700,7 @@ function TriageDrawer({
                 </div>
               </div>
               {a.id === activeAccountId && (
-                <Check className="h-4 w-4 shrink-0 text-success" />
+                <AppIcon name="Check" className="h-4 w-4 shrink-0 text-success" />
               )}
             </button>
           ))}
@@ -921,7 +904,7 @@ function Conversation({
               aria-label="Back to list"
               className="-ml-1 shrink-0 rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
             >
-              <ArrowLeft className="h-4 w-4" />
+              <AppIcon name="ArrowLeft" className="h-4 w-4" />
             </button>
           )}
           <ChatAvatar
@@ -954,7 +937,7 @@ function Conversation({
               title={`Call ${chat.name || chat.wa_chat_id}`}
               className="flex items-center gap-1 rounded-md border border-border px-2 py-1 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground"
             >
-              <Phone className="h-3.5 w-3.5 shrink-0" />
+              <AppIcon name="Phone" className="h-3.5 w-3.5 shrink-0" />
               <span className="hidden sm:inline">Call</span>
             </Link>
             {isSnoozed ? (
@@ -963,7 +946,7 @@ function Conversation({
                 className="flex items-center gap-1 rounded-md border border-border bg-muted px-2 py-1 text-[11px] text-muted-foreground"
                 title={`Snoozed until ${snoozeLabel(chat.snoozed_until)}`}
               >
-                <Clock className="h-3.5 w-3.5 shrink-0" />
+                <AppIcon name="Clock" className="h-3.5 w-3.5 shrink-0" />
                 <span className="hidden sm:inline">
                   Snoozed · {snoozeLabel(chat.snoozed_until)} — wake
                 </span>
@@ -977,7 +960,7 @@ function Conversation({
                     showSnooze ? "bg-muted text-foreground" : "text-muted-foreground"
                   }`}
                 >
-                  <Clock className="h-3.5 w-3.5 shrink-0" />
+                  <AppIcon name="Clock" className="h-3.5 w-3.5 shrink-0" />
                   <span className="hidden sm:inline">Snooze</span>
                 </button>
                 {showSnooze && (
@@ -1004,7 +987,7 @@ function Conversation({
                 showDetails ? "bg-muted text-foreground" : "text-muted-foreground"
               }`}
             >
-              <PanelRight className="h-3.5 w-3.5 shrink-0" />
+              <AppIcon name="PanelRight" className="h-3.5 w-3.5 shrink-0" />
               <span className="hidden sm:inline">Details</span>
             </button>
           </div>
@@ -1038,9 +1021,9 @@ function Conversation({
                   className="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-1 text-[11px] font-semibold text-primary disabled:opacity-50"
                 >
                   {drafting ? (
-                    <Loader2 className="h-3 w-3 animate-spin" />
+                    <AppIcon name="Loader2" className="h-3 w-3 animate-spin" />
                   ) : (
-                    <Sparkles className="h-3 w-3" />
+                    <AppIcon name="Sparkles" className="h-3 w-3" />
                   )}
                   Suggest reply
                 </button>
@@ -1053,7 +1036,7 @@ function Conversation({
                         : "bg-muted/50 text-muted-foreground"
                     }`}
                   >
-                    <Zap className="h-3 w-3" /> Saved
+                    <AppIcon name="Zap" className="h-3 w-3" /> Saved
                   </button>
                   {showSaved && (
                     <div className="absolute bottom-8 left-0 z-10 max-h-56 w-72 overflow-y-auto rounded-lg border border-border bg-background shadow-lg">
@@ -1112,9 +1095,9 @@ function Conversation({
                   className="flex h-9 items-center gap-1.5 rounded-lg bg-primary px-3 text-[12px] font-semibold text-primary-foreground hover:opacity-90 disabled:opacity-50"
                 >
                   {sending ? (
-                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
                   ) : (
-                    <Send className="h-3.5 w-3.5" />
+                    <AppIcon name="Send" className="h-3.5 w-3.5" />
                   )}
                   Send
                 </button>
@@ -1166,7 +1149,7 @@ function Conversation({
                 aria-label="Close details"
                 className="rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
               >
-                <X className="h-4 w-4" />
+                <AppIcon name="X" className="h-4 w-4" />
               </button>
             </div>
             <div className="min-h-0 flex-1 overflow-y-auto">
@@ -1312,9 +1295,9 @@ function WaitingOnRow({
         className="mt-1 inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold text-primary disabled:opacity-50"
       >
         {busy ? (
-          <Loader2 className="h-2.5 w-2.5 animate-spin" />
+          <AppIcon name="Loader2" className="h-2.5 w-2.5 animate-spin" />
         ) : (
-          <Sparkles className="h-2.5 w-2.5" />
+          <AppIcon name="Sparkles" className="h-2.5 w-2.5" />
         )}
         Nudge
       </button>
@@ -1369,7 +1352,7 @@ function Bubble({
         {isVoice ? (
           <div>
             <span className="flex items-center gap-1 text-muted-foreground">
-              <Mic className="h-3 w-3" /> voice note
+              <AppIcon name="Mic" className="h-3 w-3" /> voice note
             </span>
             {msg.transcript_text ? (
               <div className="mt-1 italic text-foreground/90">
@@ -1383,9 +1366,9 @@ function Bubble({
                   className="mt-1 inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold text-primary disabled:opacity-50"
                 >
                   {transcribing ? (
-                    <Loader2 className="h-2.5 w-2.5 animate-spin" />
+                    <AppIcon name="Loader2" className="h-2.5 w-2.5 animate-spin" />
                   ) : (
-                    <Sparkles className="h-2.5 w-2.5" />
+                    <AppIcon name="Sparkles" className="h-2.5 w-2.5" />
                   )}
                   Transcribe
                 </button>
@@ -1412,7 +1395,7 @@ function Bubble({
           disabled={busy}
           className="mt-0.5 flex items-center gap-1 text-[10px] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 disabled:opacity-50"
         >
-          <Plus className="h-3 w-3" />
+          <AppIcon name="Plus" className="h-3 w-3" />
           {captured ? "captured" : "task"}
         </button>
       )}
@@ -1425,7 +1408,7 @@ function ConnectEmptyState() {
     <div className="flex h-full items-center justify-center bg-background p-8">
       <div className="max-w-md text-center">
         <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/15 text-primary">
-          <MessageCircle className="h-7 w-7" />
+          <AppIcon name="MessageCircle" className="h-7 w-7" />
         </div>
         <h1 className="text-lg font-semibold">Connect WhatsApp Business</h1>
         <p className="mx-auto mt-2 max-w-sm text-[13px] text-muted-foreground">
@@ -1437,7 +1420,7 @@ function ConnectEmptyState() {
           href="/whatsapp/connect"
           className="mt-5 inline-flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-[13px] font-semibold text-primary-foreground hover:opacity-90"
         >
-          <MessageCircle className="h-4 w-4" /> Connect a number
+          <AppIcon name="MessageCircle" className="h-4 w-4" /> Connect a number
         </Link>
         <p className="mt-3 text-[11px] text-muted-foreground/70">
           Official Cloud API · business numbers only · ~15 minutes.
diff --git a/workbench/control_plane/src/app/whatsapp/settings/categories/page.tsx b/workbench/control_plane/src/app/whatsapp/settings/categories/page.tsx
index 2244f33d..48852f16 100644
--- a/workbench/control_plane/src/app/whatsapp/settings/categories/page.tsx
+++ b/workbench/control_plane/src/app/whatsapp/settings/categories/page.tsx
@@ -5,8 +5,8 @@
 // each category answers notify / auto-reply / drafts / escalation. Only the
 // meaningful cell should draw the eye; defaults stay quiet.
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useState } from "react";
-import { Loader2, Tags } from "lucide-react";
 import {
   bootstrapCategories,
   fetchAccounts,
@@ -70,7 +70,7 @@ export default function CategoriesSettingsPage() {
   if (loading) {
     return (
       <div className="flex h-full items-center justify-center text-muted-foreground">
-        <Loader2 className="h-5 w-5 animate-spin" />
+        <Icon name="Loader2" className="h-5 w-5 animate-spin" />
       </div>
     );
   }
@@ -78,7 +78,7 @@ export default function CategoriesSettingsPage() {
   return (
     <div className="mx-auto h-full max-w-3xl overflow-y-auto p-4 text-foreground md:p-6">
       <div className="mb-5 flex items-center gap-2">
-        <Tags className="h-4 w-4 text-primary" />
+        <Icon name="Tags" className="h-4 w-4 text-primary" />
         <h1 className="text-[15px] font-semibold">Categories</h1>
         <span className="text-[11px] text-muted-foreground">
           labels, upgraded to policy
@@ -104,7 +104,7 @@ export default function CategoriesSettingsPage() {
             className="mt-3 inline-flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-[12px] font-semibold text-primary-foreground disabled:opacity-50"
           >
             {saving === "bootstrap" && (
-              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+              <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
             )}
             Seed default categories
           </button>
diff --git a/workbench/control_plane/src/app/whatsapp/settings/replies/page.tsx b/workbench/control_plane/src/app/whatsapp/settings/replies/page.tsx
index be7b5071..0dd7eff0 100644
--- a/workbench/control_plane/src/app/whatsapp/settings/replies/page.tsx
+++ b/workbench/control_plane/src/app/whatsapp/settings/replies/page.tsx
@@ -4,8 +4,8 @@
 // typed ten times a day (price list, address, GST no.), with an optional
 // '/shortcut'. Plain CRUD; the composer's picker inserts the body.
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useState } from "react";
-import { Loader2, MessageSquareText, Plus, Trash2 } from "lucide-react";
 import {
   createSavedReply,
   deleteSavedReply,
@@ -74,7 +74,7 @@ export default function SavedRepliesPage() {
   if (loading) {
     return (
       <div className="flex h-full items-center justify-center text-muted-foreground">
-        <Loader2 className="h-5 w-5 animate-spin" />
+        <Icon name="Loader2" className="h-5 w-5 animate-spin" />
       </div>
     );
   }
@@ -82,7 +82,7 @@ export default function SavedRepliesPage() {
   return (
     <div className="mx-auto h-full max-w-2xl overflow-y-auto p-4 text-foreground md:p-6">
       <div className="mb-5 flex items-center gap-2">
-        <MessageSquareText className="h-4 w-4 text-primary" />
+        <Icon name="MessageSquareText" className="h-4 w-4 text-primary" />
         <h1 className="text-[15px] font-semibold">Saved replies</h1>
         <span className="text-[11px] text-muted-foreground">
           canned snippets for the composer
@@ -125,9 +125,9 @@ export default function SavedRepliesPage() {
             className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-[12px] font-semibold text-primary-foreground disabled:opacity-50"
           >
             {busy ? (
-              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+              <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
             ) : (
-              <Plus className="h-3.5 w-3.5" />
+              <Icon name="Plus" className="h-3.5 w-3.5" />
             )}
             Add reply
           </button>
@@ -161,7 +161,7 @@ export default function SavedRepliesPage() {
                 className="mt-0.5 shrink-0 text-muted-foreground/60 hover:text-red-500"
                 aria-label="Delete"
               >
-                <Trash2 className="h-3.5 w-3.5" />
+                <Icon name="Trash2" className="h-3.5 w-3.5" />
               </button>
             </li>
           ))}
diff --git a/workbench/control_plane/src/app/whatsapp/settings/rules/page.tsx b/workbench/control_plane/src/app/whatsapp/settings/rules/page.tsx
index 3c04b51c..76c0bce4 100644
--- a/workbench/control_plane/src/app/whatsapp/settings/rules/page.tsx
+++ b/workbench/control_plane/src/app/whatsapp/settings/rules/page.tsx
@@ -5,8 +5,8 @@
 // (no sends) before enabling any of it. Each row shows the decided action and
 // why; the summary tallies actions by kind.
 
+import Icon from "@/components/Icon";
 import { useEffect, useState } from "react";
-import { Loader2, SlidersHorizontal } from "lucide-react";
 import { fetchAccounts, fetchRulesPreview, pickDefaultAccount } from "../../lib/api";
 import type { WaRulePreview, WaRulePreviewItem } from "../../lib/types";
 
@@ -42,7 +42,7 @@ export default function RulesPreviewPage() {
   if (loading) {
     return (
       <div className="flex h-full items-center justify-center text-muted-foreground">
-        <Loader2 className="h-5 w-5 animate-spin" />
+        <Icon name="Loader2" className="h-5 w-5 animate-spin" />
       </div>
     );
   }
@@ -55,7 +55,7 @@ export default function RulesPreviewPage() {
   return (
     <div className="mx-auto h-full max-w-3xl overflow-y-auto p-4 text-foreground md:p-6">
       <div className="mb-5 flex items-center gap-2">
-        <SlidersHorizontal className="h-4 w-4 text-primary" />
+        <Icon name="SlidersHorizontal" className="h-4 w-4 text-primary" />
         <h1 className="text-[15px] font-semibold">Rules preview</h1>
         <span className="text-[11px] text-muted-foreground">
           what automation would do — nothing is sent
diff --git a/workbench/control_plane/src/app/workflows/[id]/page.tsx b/workbench/control_plane/src/app/workflows/[id]/page.tsx
index 2823a4bd..34c99f3b 100644
--- a/workbench/control_plane/src/app/workflows/[id]/page.tsx
+++ b/workbench/control_plane/src/app/workflows/[id]/page.tsx
@@ -7,6 +7,7 @@
  * status onto the canvas over SSE.
  */
 
+import Icon from "@/components/Icon";
 import {
   Suspense,
   use,
@@ -37,20 +38,6 @@ import {
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import { useTheme } from "next-themes";
-import {
-  AlertTriangle,
-  ArrowLeft,
-  BadgeCheck,
-  ChevronDown,
-  Loader2,
-  Play,
-  Power,
-  Rocket,
-  Save,
-  ShieldCheck,
-  Sparkles,
-  Zap,
-} from "lucide-react";
 import { useAccess } from "@/components/AccessProvider";
 import { hasCapability } from "@/lib/access";
 import CopilotPanel from "../components/CopilotPanel";
@@ -944,7 +931,7 @@ function EditorInner({ id }: { id: string }) {
   if (!detail) {
     return (
       <div className="flex items-center justify-center h-full">
-        <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+        <Icon name="Loader2" className="w-5 h-5 animate-spin text-muted-foreground" />
       </div>
     );
   }
@@ -959,7 +946,7 @@ function EditorInner({ id }: { id: string }) {
           href="/workflows"
           className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-secondary tech-transition"
         >
-          <ArrowLeft className="w-4 h-4" />
+          <Icon name="ArrowLeft" className="w-4 h-4" />
         </Link>
         <input
           value={name}
@@ -1029,7 +1016,7 @@ function EditorInner({ id }: { id: string }) {
                           className="text-[10px] px-1.5 py-0.5 rounded-md border border-border text-foreground hover:bg-secondary tech-transition disabled:opacity-50 disabled:cursor-not-allowed shrink-0"
                         >
                           {busy === "rollback" ? (
-                            <Loader2 className="w-3 h-3 animate-spin" />
+                            <Icon name="Loader2" className="w-3 h-3 animate-spin" />
                           ) : (
                             "Roll back"
                           )}
@@ -1051,9 +1038,9 @@ function EditorInner({ id }: { id: string }) {
                     className="w-full flex items-center gap-1.5 px-1.5 py-1 text-[11px] rounded-md text-muted-foreground hover:text-destructive hover:bg-secondary/50 tech-transition disabled:opacity-50 disabled:cursor-not-allowed"
                   >
                     {busy === "disable" ? (
-                      <Loader2 className="w-3 h-3 animate-spin" />
+                      <Icon name="Loader2" className="w-3 h-3 animate-spin" />
                     ) : (
-                      <Power className="w-3 h-3" />
+                      <Icon name="Power" className="w-3 h-3" />
                     )}
                     Take offline — stops all triggers, keeps the version
                   </button>
@@ -1068,7 +1055,7 @@ function EditorInner({ id }: { id: string }) {
           title="Configure triggers"
           className="flex items-center gap-1.5 text-[11px] px-2.5 py-1 rounded-full border border-amber-500/30 bg-amber-500/10 text-amber-500 hover:bg-amber-500/15 tech-transition shrink-0 max-w-56"
         >
-          <Zap className="w-3 h-3 shrink-0" />
+          <Icon name="Zap" className="w-3 h-3 shrink-0" />
           <span className="truncate">
             {triggerFacts.detail === "manual"
               ? "Trigger: run manually"
@@ -1088,9 +1075,9 @@ function EditorInner({ id }: { id: string }) {
             className="rounded-lg border border-border px-2.5 py-1.5 text-xs text-foreground hover:bg-secondary tech-transition flex items-center gap-1 disabled:opacity-50"
           >
             {saving ? (
-              <Loader2 className="w-3.5 h-3.5 animate-spin" />
+              <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" />
             ) : (
-              <Save className="w-3.5 h-3.5" />
+              <Icon name="Save" className="w-3.5 h-3.5" />
             )}
             {dirty ? "Save" : "Saved"}
           </button>
@@ -1100,9 +1087,9 @@ function EditorInner({ id }: { id: string }) {
             className="rounded-lg border border-border px-2.5 py-1.5 text-xs text-foreground hover:bg-secondary tech-transition flex items-center gap-1 disabled:opacity-50"
           >
             {busy === "validate" ? (
-              <Loader2 className="w-3.5 h-3.5 animate-spin" />
+              <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" />
             ) : (
-              <ShieldCheck className="w-3.5 h-3.5" />
+              <Icon name="ShieldCheck" className="w-3.5 h-3.5" />
             )}
             Validate
           </button>
@@ -1113,9 +1100,9 @@ function EditorInner({ id }: { id: string }) {
               className="rounded-l-lg border border-border px-2.5 py-1.5 text-xs font-medium text-foreground hover:bg-secondary tech-transition flex items-center gap-1 disabled:opacity-50"
             >
               {busy === "test" || running ? (
-                <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" />
               ) : (
-                <Play className="w-3.5 h-3.5" />
+                <Icon name="Play" className="w-3.5 h-3.5" />
               )}
               Test
             </button>
@@ -1124,7 +1111,7 @@ function EditorInner({ id }: { id: string }) {
               className="rounded-r-lg border border-l-0 border-border px-1 py-1.5 text-muted-foreground hover:bg-secondary tech-transition"
               title="Sample trigger payload"
             >
-              <ChevronDown className="w-3.5 h-3.5" />
+              <Icon name="ChevronDown" className="w-3.5 h-3.5" />
             </button>
           </div>
           <button
@@ -1138,11 +1125,11 @@ function EditorInner({ id }: { id: string }) {
             className="rounded-lg bg-primary px-2.5 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 tech-transition flex items-center gap-1 disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {busy === "publish" ? (
-              <Loader2 className="w-3.5 h-3.5 animate-spin" />
+              <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" />
             ) : published ? (
-              <BadgeCheck className="w-3.5 h-3.5" />
+              <Icon name="BadgeCheck" className="w-3.5 h-3.5" />
             ) : (
-              <Rocket className="w-3.5 h-3.5" />
+              <Icon name="Rocket" className="w-3.5 h-3.5" />
             )}
             Publish
           </button>
@@ -1151,7 +1138,7 @@ function EditorInner({ id }: { id: string }) {
 
       {detail.status === "disabled" && (
         <div className="flex items-center gap-2 px-3 sm:px-4 py-2 border-b border-warning/20 bg-warning/10 shrink-0">
-          <AlertTriangle className="w-4 h-4 text-warning shrink-0" />
+          <Icon name="AlertTriangle" className="w-4 h-4 text-warning shrink-0" />
           <p className="text-xs text-warning min-w-0">
             <span className="font-medium">Not live — no trigger fires. </span>
             {detail.disabled_reason ??
@@ -1170,9 +1157,9 @@ function EditorInner({ id }: { id: string }) {
             className="ml-auto shrink-0 rounded-lg border border-warning/30 px-2.5 py-1.5 text-xs font-medium text-warning hover:bg-warning/15 tech-transition flex items-center gap-1 disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {busy === "enable" ? (
-              <Loader2 className="w-3.5 h-3.5 animate-spin" />
+              <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" />
             ) : (
-              <Power className="w-3.5 h-3.5" />
+              <Icon name="Power" className="w-3.5 h-3.5" />
             )}
             Re-enable
           </button>
@@ -1230,7 +1217,7 @@ function EditorInner({ id }: { id: string }) {
                   : "text-muted-foreground hover:text-foreground"
               }`}
             >
-              <Sparkles className="w-3 h-3" /> Copilot
+              <Icon name="Sparkles" className="w-3 h-3" /> Copilot
             </button>
           </div>
           {insertEdgeId && leftTab === "palette" && (
@@ -1308,7 +1295,7 @@ function EditorInner({ id }: { id: string }) {
             }}
             className="absolute left-1/2 -translate-x-1/2 bottom-4 z-10 w-[min(560px,84%)] flex items-center gap-2 rounded-xl border border-border bg-card/95 backdrop-blur-sm shadow-lg pl-3 pr-2 py-2"
           >
-            <Sparkles className="w-4 h-4 text-primary shrink-0" />
+            <Icon name="Sparkles" className="w-4 h-4 text-primary shrink-0" />
             <input
               value={describe}
               onChange={(e) => setDescribe(e.target.value)}
@@ -1358,7 +1345,7 @@ export default function WorkflowEditorPage({
     <Suspense
       fallback={
         <div className="flex items-center justify-center h-full">
-          <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+          <Icon name="Loader2" className="w-5 h-5 animate-spin text-muted-foreground" />
         </div>
       }
     >
diff --git a/workbench/control_plane/src/app/workflows/components/CopilotPanel.tsx b/workbench/control_plane/src/app/workflows/components/CopilotPanel.tsx
index 92daacea..95d74f55 100644
--- a/workbench/control_plane/src/app/workflows/components/CopilotPanel.tsx
+++ b/workbench/control_plane/src/app/workflows/components/CopilotPanel.tsx
@@ -9,8 +9,8 @@
  * modules land in the org library with auto-created provenance.
  */
 
+import Icon from "@/components/Icon";
 import { useEffect, useRef, useState } from "react";
-import { Boxes, Loader2, Sparkles, Undo2 } from "lucide-react";
 import { askCopilot } from "../lib/api";
 import type { CopilotResponse, WorkflowGraph } from "../lib/types";
 
@@ -105,7 +105,7 @@ export default function CopilotPanel({
         {turns.length === 0 && (
           <div className="text-[10.5px] text-muted-foreground space-y-2 px-1 pt-1">
             <p className="flex items-center gap-1.5 text-foreground font-medium">
-              <Sparkles className="w-3.5 h-3.5 text-primary" />
+              <Icon name="Sparkles" className="w-3.5 h-3.5 text-primary" />
               Build by describing it
             </p>
             <p>
@@ -137,7 +137,7 @@ export default function CopilotPanel({
                     key={m.id}
                     className="flex items-center gap-1.5 text-[9.5px] rounded-md border border-sky-500/30 bg-sky-500/10 text-sky-500 px-2 py-1"
                   >
-                    <Boxes className="w-3 h-3" />
+                    <Icon name="Boxes" className="w-3 h-3" />
                     created module <code className="font-semibold">{m.name}</code>
                     — validated &amp; saved
                   </div>
@@ -150,7 +150,7 @@ export default function CopilotPanel({
                         onClick={onUndo}
                         className="inline-flex items-center gap-1 text-muted-foreground hover:text-foreground underline"
                       >
-                        <Undo2 className="w-3 h-3" /> undo
+                        <Icon name="Undo2" className="w-3 h-3" /> undo
                       </button>
                     )}
                     <span>· review, then Save</span>
@@ -168,7 +168,7 @@ export default function CopilotPanel({
         ))}
         {busy && (
           <div className="flex items-center gap-2 text-[10px] text-muted-foreground px-1">
-            <Loader2 className="w-3 h-3 animate-spin" />
+            <Icon name="Loader2" className="w-3 h-3 animate-spin" />
             Searching the catalog and drafting the graph…
           </div>
         )}
@@ -195,7 +195,7 @@ export default function CopilotPanel({
             className="self-end rounded-lg bg-primary p-2 text-primary-foreground hover:opacity-90 tech-transition disabled:opacity-50"
             title="Send"
           >
-            <Sparkles className="w-3.5 h-3.5" />
+            <Icon name="Sparkles" className="w-3.5 h-3.5" />
           </button>
         </div>
       </div>
diff --git a/workbench/control_plane/src/app/workflows/components/ModuleStudio.tsx b/workbench/control_plane/src/app/workflows/components/ModuleStudio.tsx
index 972c6d9f..91d8c03c 100644
--- a/workbench/control_plane/src/app/workflows/components/ModuleStudio.tsx
+++ b/workbench/control_plane/src/app/workflows/components/ModuleStudio.tsx
@@ -8,18 +8,10 @@
  * modules become "Module" nodes in every workflow's palette.
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useRef, useState } from "react";
 import Editor from "@monaco-editor/react";
 import { useTheme } from "next-themes";
-import {
-  Boxes,
-  Check,
-  Loader2,
-  Play,
-  Save,
-  Sparkles,
-  Trash2,
-} from "lucide-react";
 import {
   createModule,
   deleteModule,
@@ -246,14 +238,14 @@ export default function ModuleStudio() {
             onClick={startFresh}
             className="w-full rounded-lg bg-primary px-3 py-2 text-xs font-medium text-primary-foreground hover:opacity-90 tech-transition flex items-center justify-center gap-1.5"
           >
-            <Sparkles className="w-3.5 h-3.5" />
+            <Icon name="Sparkles" className="w-3.5 h-3.5" />
             New module
           </button>
         </div>
         <div className="flex-1 overflow-y-auto scrollbar-thin p-2 space-y-1">
           {loading && (
             <div className="flex justify-center py-6">
-              <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
+              <Icon name="Loader2" className="w-4 h-4 animate-spin text-muted-foreground" />
             </div>
           )}
           {!loading && modules.length === 0 && (
@@ -272,7 +264,7 @@ export default function ModuleStudio() {
               }`}
             >
               <div className="flex items-center gap-1.5">
-                <Boxes className="w-3.5 h-3.5 text-sky-500 shrink-0" />
+                <Icon name="Boxes" className="w-3.5 h-3.5 text-sky-500 shrink-0" />
                 <span className="text-xs font-medium text-foreground truncate">
                   {m.name}
                 </span>
@@ -319,7 +311,7 @@ export default function ModuleStudio() {
             ))}
             {generating && (
               <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" />
                 Generating…
               </div>
             )}
@@ -346,7 +338,7 @@ export default function ModuleStudio() {
                 className="self-end rounded-lg bg-primary p-2 text-primary-foreground hover:opacity-90 tech-transition disabled:opacity-50"
                 title="Generate"
               >
-                <Sparkles className="w-4 h-4" />
+                <Icon name="Sparkles" className="w-4 h-4" />
               </button>
             </div>
           </div>
@@ -373,9 +365,9 @@ export default function ModuleStudio() {
                 className="rounded-lg border border-border px-2.5 py-1.5 text-xs text-foreground hover:bg-secondary tech-transition flex items-center gap-1 disabled:opacity-50"
               >
                 {testing ? (
-                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                  <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" />
                 ) : (
-                  <Play className="w-3.5 h-3.5" />
+                  <Icon name="Play" className="w-3.5 h-3.5" />
                 )}
                 Test
               </button>
@@ -385,9 +377,9 @@ export default function ModuleStudio() {
                 className="rounded-lg bg-primary px-2.5 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 tech-transition flex items-center gap-1 disabled:opacity-50"
               >
                 {saving ? (
-                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                  <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" />
                 ) : (
-                  <Save className="w-3.5 h-3.5" />
+                  <Icon name="Save" className="w-3.5 h-3.5" />
                 )}
                 Save
               </button>
@@ -402,7 +394,7 @@ export default function ModuleStudio() {
                         : "Mark ready for workflows"
                     }
                   >
-                    <Check className="w-3.5 h-3.5" />
+                    <Icon name="Check" className="w-3.5 h-3.5" />
                     {status === "ready" ? "Unready" : "Mark ready"}
                   </button>
                   <button
@@ -410,7 +402,7 @@ export default function ModuleStudio() {
                     className="rounded-lg border border-border p-1.5 text-muted-foreground hover:text-destructive hover:bg-secondary tech-transition"
                     title="Delete module"
                   >
-                    <Trash2 className="w-3.5 h-3.5" />
+                    <Icon name="Trash2" className="w-3.5 h-3.5" />
                   </button>
                 </>
               )}
diff --git a/workbench/control_plane/src/app/workflows/components/NodeInspector.tsx b/workbench/control_plane/src/app/workflows/components/NodeInspector.tsx
index 71a73986..f54d497a 100644
--- a/workbench/control_plane/src/app/workflows/components/NodeInspector.tsx
+++ b/workbench/control_plane/src/app/workflows/components/NodeInspector.tsx
@@ -6,8 +6,8 @@
  * available roots are shown as hint chips (trigger, vars, upstream node ids).
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useMemo, useState } from "react";
-import { Trash2 } from "lucide-react";
 import { FALLBACK_ICON, NODE_ICON, NODE_KIND_LABEL } from "../lib/nodeVisuals";
 import { NODE_CATEGORY_STYLE, categoryForType } from "../lib/types";
 import type {
@@ -319,7 +319,7 @@ export default function NodeInspector({
             title="Delete node"
             className="p-1.5 rounded-lg text-muted-foreground hover:text-destructive hover:bg-secondary tech-transition"
           >
-            <Trash2 className="w-3.5 h-3.5" />
+            <Icon name="Trash2" className="w-3.5 h-3.5" />
           </button>
         )}
       </div>
diff --git a/workbench/control_plane/src/app/workflows/components/NodePalette.tsx b/workbench/control_plane/src/app/workflows/components/NodePalette.tsx
index 8cf946c5..22e0eafb 100644
--- a/workbench/control_plane/src/app/workflows/components/NodePalette.tsx
+++ b/workbench/control_plane/src/app/workflows/components/NodePalette.tsx
@@ -12,20 +12,8 @@
  * clearing returns to the category view.
  */
 
+import AppIcon, { themedIcon } from "@/components/Icon";
 import { useEffect, useRef, useState } from "react";
-import {
-  Bot,
-  Boxes,
-  ChevronDown,
-  ChevronRight,
-  GitBranch,
-  LogOut,
-  Plus,
-  Search,
-  Wrench,
-  X,
-  Zap,
-} from "lucide-react";
 import { searchCatalog } from "../lib/api";
 import { FALLBACK_ICON, NODE_ICON } from "../lib/nodeVisuals";
 import { NODE_CATEGORY_STYLE } from "../lib/types";
@@ -161,7 +149,7 @@ export default function NodePalette({
           </span>
           {!dead && (
             <span className="shrink-0 text-muted-foreground opacity-0 group-hover:opacity-100 tech-transition">
-              <Plus className="w-3 h-3" />
+              <AppIcon name="Plus" className="w-3 h-3" />
             </span>
           )}
         </div>
@@ -181,7 +169,7 @@ export default function NodePalette({
           onClick={() => setOpen((o) => ({ ...o, [id]: !o[id] }))}
           className="w-full flex items-center gap-1.5 px-1 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground tech-transition"
         >
-          {open[id] ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
+          {open[id] ? <AppIcon name="ChevronDown" className="w-3 h-3" /> : <AppIcon name="ChevronRight" className="w-3 h-3" />}
           <span className={`w-1.5 h-1.5 rounded-sm shrink-0 ${style.dot}`} />
           <Icon className="w-3 h-3" />
           {label}
@@ -200,7 +188,7 @@ export default function NodePalette({
     <div className="w-52 sm:w-60 shrink-0 overflow-y-auto scrollbar-thin p-2">
       {/* Search — the front door once the catalog is big */}
       <div className="relative mb-2">
-        <Search className="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
+        <AppIcon name="Search" className="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground" />
         <input
           value={query}
           onChange={(e) => setQuery(e.target.value)}
@@ -213,7 +201,7 @@ export default function NodePalette({
             className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
             title="Clear search"
           >
-            <X className="w-3 h-3" />
+            <AppIcon name="X" className="w-3 h-3" />
           </button>
         )}
       </div>
@@ -248,12 +236,12 @@ export default function NodePalette({
       ) : (
         <>
           <div className="flex items-center gap-1.5 px-1 pb-2 text-[10px] text-muted-foreground">
-            <Zap className="w-3 h-3 text-amber-500" />
+            <AppIcon name="Zap" className="w-3 h-3 text-amber-500" />
             Drag onto the canvas, or click to append
           </div>
 
           {section(
-            "agent", "Agents", Bot, (catalog?.agents ?? []).length,
+            "agent", "Agents", themedIcon("Bot"), (catalog?.agents ?? []).length,
             (catalog?.agents ?? []).map((a) =>
               item(
                 `agent:${a.name}`,
@@ -264,7 +252,7 @@ export default function NodePalette({
           )}
 
           {section(
-            "tool", "Tools & Integrations", Wrench,
+            "tool", "Tools & Integrations", themedIcon("Wrench"),
             (catalog?.tools ?? []).length,
             <>
               {platformTools.length > 0 && (
@@ -308,7 +296,7 @@ export default function NodePalette({
           )}
 
           {section(
-            "module", "Modules", Boxes, readyModules.length,
+            "module", "Modules", themedIcon("Boxes"), readyModules.length,
             readyModules.length === 0 ? (
               <p className="text-[10px] text-muted-foreground px-1">
                 No ready modules — build one in the Module Studio, or ask the Copilot.
@@ -325,7 +313,7 @@ export default function NodePalette({
           )}
 
           {section(
-            "logic", "Logic", GitBranch, 4,
+            "logic", "Logic", themedIcon("GitBranch"), 4,
             <>
               {item(
                 "logic:condition",
@@ -352,7 +340,7 @@ export default function NodePalette({
           )}
 
           {section(
-            "output", "Output", LogOut, 1,
+            "output", "Output", themedIcon("LogOut"), 1,
             item(
               "output:output",
               { nodeType: "output", label: "Output", config: { value: "" } },
diff --git a/workbench/control_plane/src/app/workflows/components/RunConsole.tsx b/workbench/control_plane/src/app/workflows/components/RunConsole.tsx
index a25b81ac..ae27ba21 100644
--- a/workbench/control_plane/src/app/workflows/components/RunConsole.tsx
+++ b/workbench/control_plane/src/app/workflows/components/RunConsole.tsx
@@ -8,31 +8,21 @@
  * are painted onto the canvas via onPaintRun.
  */
 
+import Icon from "@/components/Icon";
 import { useEffect, useRef, useState } from "react";
-import {
-  CheckCircle2,
-  ChevronDown,
-  ChevronUp,
-  Circle,
-  History,
-  Loader2,
-  PauseCircle,
-  X,
-  XCircle,
-} from "lucide-react";
 import { getRun, listRuns } from "../lib/api";
 import type { NodeResult, RunDetail, RunEvent, RunSummary } from "../lib/types";
 
 const STATUS_ICON = (status?: string) => {
   if (status === "running")
-    return <Loader2 className="w-3.5 h-3.5 text-primary animate-spin" />;
+    return <Icon name="Loader2" className="w-3.5 h-3.5 text-primary animate-spin" />;
   if (status === "ok" || status === "succeeded")
-    return <CheckCircle2 className="w-3.5 h-3.5 text-success" />;
+    return <Icon name="CheckCircle2" className="w-3.5 h-3.5 text-success" />;
   if (status === "error" || status === "failed")
-    return <XCircle className="w-3.5 h-3.5 text-destructive" />;
+    return <Icon name="XCircle" className="w-3.5 h-3.5 text-destructive" />;
   if (status === "waiting" || status === "paused")
-    return <PauseCircle className="w-3.5 h-3.5 text-warning" />;
-  return <Circle className="w-3 h-3 text-muted-foreground" />;
+    return <Icon name="PauseCircle" className="w-3.5 h-3.5 text-warning" />;
+  return <Icon name="Circle" className="w-3 h-3 text-muted-foreground" />;
 };
 
 /** A recorded run's node_results, replayed in console-event shape. */
@@ -153,12 +143,12 @@ export default function RunConsole({
               : "text-muted-foreground hover:text-foreground"
           }`}
         >
-          <History className="w-3 h-3" />
+          <Icon name="History" className="w-3 h-3" />
           History
         </button>
         {running && (
           <span className="flex items-center gap-1.5 text-[10px] text-primary ml-2">
-            <Loader2 className="w-3 h-3 animate-spin" />
+            <Icon name="Loader2" className="w-3 h-3 animate-spin" />
             running
           </span>
         )}
@@ -168,9 +158,9 @@ export default function RunConsole({
           title={collapsed ? "Expand console" : "Collapse console"}
         >
           {collapsed ? (
-            <ChevronUp className="w-4 h-4" />
+            <Icon name="ChevronUp" className="w-4 h-4" />
           ) : (
-            <ChevronDown className="w-4 h-4" />
+            <Icon name="ChevronDown" className="w-4 h-4" />
           )}
         </button>
       </div>
@@ -179,7 +169,7 @@ export default function RunConsole({
         <div className="flex-1 overflow-y-auto scrollbar-thin px-3 pb-2 font-mono text-[11px] space-y-1">
           {inspected && (
             <div className="flex items-center gap-2 sticky top-0 bg-card/95 py-1 border-b border-border/50 font-sans">
-              <History className="w-3 h-3 text-muted-foreground" />
+              <Icon name="History" className="w-3 h-3 text-muted-foreground" />
               <span className="text-muted-foreground">
                 Recorded run · v{inspected.version} · {inspected.trigger_kind}
                 {inspected.started_at
@@ -190,7 +180,7 @@ export default function RunConsole({
                 onClick={clearInspection}
                 className="ml-auto flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary tech-transition"
               >
-                <X className="w-3 h-3" />
+                <Icon name="X" className="w-3 h-3" />
                 back to live
               </button>
             </div>
@@ -243,7 +233,7 @@ export default function RunConsole({
         <div className="flex-1 overflow-y-auto scrollbar-thin px-3 pb-2">
           {historyLoading && (
             <div className="flex justify-center py-4">
-              <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
+              <Icon name="Loader2" className="w-4 h-4 animate-spin text-muted-foreground" />
             </div>
           )}
           {!historyLoading && history.length === 0 && (
@@ -259,7 +249,7 @@ export default function RunConsole({
                 className="w-full flex items-center gap-2 py-1 text-[11px] border-b border-border/50 last:border-0 text-left hover:bg-secondary/50 tech-transition disabled:opacity-60 rounded-sm px-1 -mx-1"
               >
                 {inspectLoading === run.id ? (
-                  <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />
+                  <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin text-muted-foreground" />
                 ) : (
                   STATUS_ICON(run.status)
                 )}
diff --git a/workbench/control_plane/src/app/workflows/components/TriggerPanel.tsx b/workbench/control_plane/src/app/workflows/components/TriggerPanel.tsx
index 01d4e342..7fddc455 100644
--- a/workbench/control_plane/src/app/workflows/components/TriggerPanel.tsx
+++ b/workbench/control_plane/src/app/workflows/components/TriggerPanel.tsx
@@ -6,8 +6,8 @@
  * a cron expression. All kinds converge on the same run entrypoint.
  */
 
+import Icon from "@/components/Icon";
 import { useMemo, useState } from "react";
-import { Copy, X, Zap } from "lucide-react";
 import type { TriggerSpec } from "../lib/types";
 
 const inputCls =
@@ -81,14 +81,14 @@ export default function TriggerPanel({
     <div className="absolute right-3 top-12 z-20 w-80 rounded-xl border border-border bg-popover shadow-lg">
       <div className="flex items-center justify-between px-3 py-2 border-b border-border">
         <span className="text-xs font-semibold text-foreground flex items-center gap-1.5">
-          <Zap className="w-3.5 h-3.5 text-amber-500" />
+          <Icon name="Zap" className="w-3.5 h-3.5 text-amber-500" />
           Triggers
         </span>
         <button
           onClick={onClose}
           className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary tech-transition"
         >
-          <X className="w-3.5 h-3.5" />
+          <Icon name="X" className="w-3.5 h-3.5" />
         </button>
       </div>
 
@@ -135,7 +135,7 @@ export default function TriggerPanel({
                   className="p-1.5 rounded-lg border border-border text-muted-foreground hover:text-foreground tech-transition shrink-0 disabled:opacity-50"
                   title="Copy URL"
                 >
-                  <Copy className="w-3.5 h-3.5" />
+                  <Icon name="Copy" className="w-3.5 h-3.5" />
                 </button>
               </div>
               {copied && (
diff --git a/workbench/control_plane/src/app/workflows/components/WorkflowEdge.tsx b/workbench/control_plane/src/app/workflows/components/WorkflowEdge.tsx
index 8051d337..56c74378 100644
--- a/workbench/control_plane/src/app/workflows/components/WorkflowEdge.tsx
+++ b/workbench/control_plane/src/app/workflows/components/WorkflowEdge.tsx
@@ -13,13 +13,13 @@
  *     and rewired, so makers never hand-drag two edges to add a step.
  */
 
+import Icon from "@/components/Icon";
 import {
   BaseEdge,
   EdgeLabelRenderer,
   getSmoothStepPath,
   type EdgeProps,
 } from "@xyflow/react";
-import { Plus } from "lucide-react";
 
 export type WorkflowEdgeData = {
   branch?: "true" | "false" | null;
@@ -92,7 +92,7 @@ export default function WorkflowEdge({
                   : "border-border text-muted-foreground opacity-50 hover:opacity-100 hover:border-primary hover:text-primary"
               }`}
             >
-              <Plus className="w-2.5 h-2.5" />
+              <Icon name="Plus" className="w-2.5 h-2.5" />
             </button>
           )}
         </div>
diff --git a/workbench/control_plane/src/app/workflows/components/WorkflowNode.tsx b/workbench/control_plane/src/app/workflows/components/WorkflowNode.tsx
index 403ea839..6a88bea5 100644
--- a/workbench/control_plane/src/app/workflows/components/WorkflowNode.tsx
+++ b/workbench/control_plane/src/app/workflows/components/WorkflowNode.tsx
@@ -18,9 +18,9 @@
  * canvas; issue badges come from design-time validation.
  */
 
+import AppIcon from "@/components/Icon";
 import { memo } from "react";
 import { Handle, Position, type NodeProps } from "@xyflow/react";
-import { AlertTriangle, Loader2 } from "lucide-react";
 import { NODE_CATEGORY_STYLE, categoryForType } from "../lib/types";
 import { FALLBACK_ICON, NODE_ICON, NODE_KIND_LABEL } from "../lib/nodeVisuals";
 import type { NodeType } from "../lib/types";
@@ -140,14 +140,14 @@ function WorkflowNodeInner(props: NodeProps) {
                 title={`${issues} validation issue${issues === 1 ? "" : "s"} — see the inspector`}
                 className="flex items-center gap-0.5 text-warning"
               >
-                <AlertTriangle className="w-3 h-3" />
+                <AppIcon name="AlertTriangle" className="w-3 h-3" />
                 {issues > 1 && (
                   <span className="text-[9px] font-medium">{issues}</span>
                 )}
               </span>
             )}
             {status === "running" && (
-              <Loader2 className="w-3 h-3 text-primary animate-spin" />
+              <AppIcon name="Loader2" className="w-3 h-3 text-primary animate-spin" />
             )}
           </span>
         </div>
diff --git a/workbench/control_plane/src/app/workflows/lib/nodeVisuals.ts b/workbench/control_plane/src/app/workflows/lib/nodeVisuals.ts
index 9954958b..7d574ddf 100644
--- a/workbench/control_plane/src/app/workflows/lib/nodeVisuals.ts
+++ b/workbench/control_plane/src/app/workflows/lib/nodeVisuals.ts
@@ -7,31 +7,21 @@
  * block looks the same wherever it appears — that identity is the point.
  */
 
-import {
-  Bot,
-  Boxes,
-  GitBranch,
-  LogOut,
-  SlidersHorizontal,
-  Timer,
-  UserCheck,
-  Wrench,
-  Zap,
-} from "lucide-react";
+import { themedIcon } from "@/components/Icon";
 import type { NodeType } from "./types";
 
 export type IconComponent = React.ComponentType<{ className?: string }>;
 
 export const NODE_ICON: Record<NodeType, IconComponent> = {
-  trigger: Zap,
-  agent: Bot,
-  tool: Wrench,
-  module: Boxes,
-  condition: GitBranch,
-  set: SlidersHorizontal,
-  approval: UserCheck,
-  wait: Timer,
-  output: LogOut,
+  trigger: themedIcon("Zap"),
+  agent: themedIcon("Bot"),
+  tool: themedIcon("Wrench"),
+  module: themedIcon("Boxes"),
+  condition: themedIcon("GitBranch"),
+  set: themedIcon("SlidersHorizontal"),
+  approval: themedIcon("UserCheck"),
+  wait: themedIcon("Timer"),
+  output: themedIcon("LogOut"),
 };
 
 /** The card's eyebrow — what kind of block this is, not what it is called. */
@@ -61,4 +51,4 @@ export const CATEGORY_LABEL: Record<string, string> = {
  * newer gateway). Read these as `NODE_ICON[type] ?? FALLBACK_ICON` — indexing,
  * not a call, so the icon component is not "created during render".
  */
-export const FALLBACK_ICON: IconComponent = Zap;
+export const FALLBACK_ICON: IconComponent = themedIcon("Zap");
diff --git a/workbench/control_plane/src/app/workflows/page.tsx b/workbench/control_plane/src/app/workflows/page.tsx
index 7cdec026..25959250 100644
--- a/workbench/control_plane/src/app/workflows/page.tsx
+++ b/workbench/control_plane/src/app/workflows/page.tsx
@@ -10,21 +10,9 @@
  *        modules /api/workflows/modules*
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
-import {
-  AlertTriangle,
-  Boxes,
-  Clock,
-  Copy,
-  Loader2,
-  Plus,
-  RefreshCw,
-  Search,
-  Trash2,
-  Workflow as WorkflowIcon,
-  Zap,
-} from "lucide-react";
 import Tabs from "@/components/Tabs";
 import FilterPills from "@/components/FilterPills";
 import ModuleStudio from "./components/ModuleStudio";
@@ -160,7 +148,7 @@ export default function WorkflowsPage() {
             title="Refresh"
             className="p-2 rounded-lg border border-border text-muted-foreground hover:bg-secondary tech-transition"
           >
-            <RefreshCw className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
+            <Icon name="RefreshCw" className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
           </button>
           {tab === "workflows" && (
             <button
@@ -169,9 +157,9 @@ export default function WorkflowsPage() {
               className="rounded-lg bg-primary px-3 sm:px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 tech-transition flex items-center gap-1.5 disabled:opacity-50"
             >
               {creating ? (
-                <Loader2 className="w-4 h-4 animate-spin" />
+                <Icon name="Loader2" className="w-4 h-4 animate-spin" />
               ) : (
-                <Plus className="w-4 h-4" />
+                <Icon name="Plus" className="w-4 h-4" />
               )}
               New workflow
             </button>
@@ -181,8 +169,8 @@ export default function WorkflowsPage() {
 
       <Tabs
         tabs={[
-          { id: "workflows", label: "Workflows", icon: WorkflowIcon, count: rows.length },
-          { id: "modules", label: "Module Studio", icon: Boxes },
+          { id: "workflows", label: "Workflows", icon: "Workflow", count: rows.length },
+          { id: "modules", label: "Module Studio", icon: "Boxes" },
         ]}
         activeTab={tab}
         onTabChange={setTab}
@@ -220,7 +208,7 @@ export default function WorkflowsPage() {
               onChange={setFilter}
             />
             <div className="relative pr-3 sm:pr-4 shrink-0">
-              <Search className="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none" />
+              <Icon name="Search" className="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none" />
               <input
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
@@ -234,7 +222,7 @@ export default function WorkflowsPage() {
             <div className="p-4 sm:p-6">
               {loading && (
                 <div className="flex flex-col items-center justify-center h-40 gap-3">
-                  <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
+                  <Icon name="Loader2" className="w-5 h-5 animate-spin text-muted-foreground" />
                   <p className="text-sm text-muted-foreground">Loading workflows…</p>
                 </div>
               )}
@@ -251,7 +239,7 @@ export default function WorkflowsPage() {
               )}
               {!loading && !error && filtered.length === 0 && rows.length > 0 && (
                 <div className="flex flex-col items-center justify-center h-48 gap-3 text-center">
-                  <Search className="w-8 h-8 text-muted-foreground/50" />
+                  <Icon name="Search" className="w-8 h-8 text-muted-foreground/50" />
                   <p className="text-sm text-muted-foreground">
                     No workflows match. Try a different search or filter.
                   </p>
@@ -259,7 +247,7 @@ export default function WorkflowsPage() {
               )}
               {!loading && !error && rows.length === 0 && (
                 <div className="flex flex-col items-center justify-center h-48 gap-3 text-center">
-                  <WorkflowIcon className="w-8 h-8 text-muted-foreground/50" />
+                  <Icon name="Workflow" className="w-8 h-8 text-muted-foreground/50" />
                   <p className="text-sm text-muted-foreground">
                     No workflows yet. Build your first automation — trigger →
                     agents → tools → done.
@@ -290,11 +278,11 @@ export default function WorkflowsPage() {
                     >
                       <div className="flex items-start justify-between gap-2">
                         <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-primary/20 to-accent/15 flex items-center justify-center shrink-0">
-                          <WorkflowIcon className="w-5 h-5 text-primary" />
+                          <Icon name="Workflow" className="w-5 h-5 text-primary" />
                         </div>
                         <div className="flex items-center gap-1">
                           {actioning === wf.id ? (
-                            <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground" />
+                            <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin text-muted-foreground" />
                           ) : (
                             <span className="hidden group-hover:flex items-center gap-1">
                               <button
@@ -302,7 +290,7 @@ export default function WorkflowsPage() {
                                 title="Duplicate workflow"
                                 className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary tech-transition"
                               >
-                                <Copy className="w-3.5 h-3.5" />
+                                <Icon name="Copy" className="w-3.5 h-3.5" />
                               </button>
                               <button
                                 onClick={(e) => onDelete(e, wf.id)}
@@ -317,7 +305,7 @@ export default function WorkflowsPage() {
                                     : "text-muted-foreground hover:text-destructive hover:bg-secondary"
                                 }`}
                               >
-                                <Trash2 className="w-3.5 h-3.5" />
+                                <Icon name="Trash2" className="w-3.5 h-3.5" />
                               </button>
                             </span>
                           )}
@@ -336,13 +324,13 @@ export default function WorkflowsPage() {
                       </div>
                       {wf.status === "disabled" && wf.disabled_reason && (
                         <div className="mt-2 flex items-start gap-1.5 rounded-lg border border-warning/20 bg-warning/10 px-2 py-1.5 text-[10px] leading-snug text-warning">
-                          <AlertTriangle className="w-3 h-3 shrink-0 mt-px" />
+                          <Icon name="AlertTriangle" className="w-3 h-3 shrink-0 mt-px" />
                           <span className="line-clamp-2">{wf.disabled_reason}</span>
                         </div>
                       )}
                       <div className="mt-3 flex items-center gap-3 text-[10px] text-muted-foreground">
                         <span className="flex items-center gap-1">
-                          <Zap className="w-3 h-3" />
+                          <Icon name="Zap" className="w-3 h-3" />
                           {wf.trigger_count ?? 0} trigger
                           {(wf.trigger_count ?? 0) === 1 ? "" : "s"}
                         </span>
@@ -356,7 +344,7 @@ export default function WorkflowsPage() {
                         )}
                         {wf.updated_at && (
                           <span className="flex items-center gap-1 ml-auto">
-                            <Clock className="w-3 h-3" />
+                            <Icon name="Clock" className="w-3 h-3" />
                             {new Date(wf.updated_at).toLocaleDateString()}
                           </span>
                         )}
diff --git a/workbench/control_plane/src/components/AccessGate.tsx b/workbench/control_plane/src/components/AccessGate.tsx
index abd9533f..20770688 100644
--- a/workbench/control_plane/src/components/AccessGate.tsx
+++ b/workbench/control_plane/src/components/AccessGate.tsx
@@ -12,8 +12,8 @@
  * sentence.
  */
 
+import Icon from "@/components/Icon";
 import { usePathname } from "next/navigation";
-import { ShieldOff } from "lucide-react";
 import Link from "next/link";
 import { useAccess } from "@/components/AccessProvider";
 import { canSeePath } from "@/lib/access";
@@ -37,7 +37,7 @@ export default function AccessGate({ children }: { children: React.ReactNode })
     <div className="flex h-full items-center justify-center p-8">
       <div className="max-w-md rounded-xl border border-border bg-card p-8 text-center">
         <div className="mx-auto mb-4 flex h-11 w-11 items-center justify-center rounded-full bg-muted">
-          <ShieldOff size={20} className="text-muted-foreground" />
+          <Icon name="ShieldOff" size={20} className="text-muted-foreground" />
         </div>
         <h1 className="text-base font-semibold text-foreground">
           {suspended ? "Your account is not active" : "You don't have access to this"}
diff --git a/workbench/control_plane/src/components/AgentChat.tsx b/workbench/control_plane/src/components/AgentChat.tsx
index a02782dd..8f25b67e 100644
--- a/workbench/control_plane/src/components/AgentChat.tsx
+++ b/workbench/control_plane/src/components/AgentChat.tsx
@@ -8,10 +8,10 @@
  * or dismiss the banner and configure later in the Integrations page.
  */
 
+import Icon from "@/components/Icon";
 import { useState, useRef, useEffect, useCallback, useMemo, useSyncExternalStore } from "react";
 import React from "react";
 import Link from "next/link";
-import { ArrowUp, Square, ListOrdered, CornerDownRight, ChevronDown, CheckCircle, LoaderCircle, Mail } from "lucide-react";
 import { useAgentChat } from "@/hooks/useAgentChat";
 import type { ArtifactEntry, ChatMessage } from "@/hooks/useAgentChat";
 import type { IntegrationStatus } from "@/app/api/integrations/status/route";
@@ -1698,7 +1698,7 @@ export default function AgentChat({
                     <div key={`mbx-${msg.id}-${k}`} className="flex items-center gap-2 my-3">
                       <div className="flex-1 h-px bg-primary/25" />
                       <span className="flex items-center gap-1 text-[10px] text-primary/80 font-medium shrink-0">
-                        <Mail size={10} /> Now working on {mk.label}
+                        <Icon name="Mail" size={10} /> Now working on {mk.label}
                       </span>
                       <div className="flex-1 h-px bg-primary/25" />
                     </div>
@@ -1763,7 +1763,7 @@ export default function AgentChat({
             ThinkingContainer is expanded or collapsed. */}
         {isRunActive && (
           <div className="max-w-3xl mx-auto mb-2 flex items-center gap-2 text-[11px] text-muted-foreground chat-fade-in">
-            <LoaderCircle className="text-sky-400 animate-spin shrink-0" size={12} strokeWidth={1.5} />
+            <Icon name="LoaderCircle" className="text-sky-400 animate-spin shrink-0" size={12} strokeWidth={1.5} />
             <span className="italic truncate">
               {liveToolName ? `Running ${liveToolName}…` : `${liveWorkingMsg}…`}
             </span>
@@ -1828,7 +1828,7 @@ export default function AgentChat({
                   <button type="button" onClick={handleStop}
                     className="h-9 w-9 rounded-xl bg-destructive/10 border border-destructive/30 text-destructive flex items-center justify-center hover:bg-destructive/20 tech-transition"
                     aria-label="Stop generation" title="Stop generation">
-                    <Square size={15} strokeWidth={2.5} fill="currentColor" />
+                    <Icon name="Square" size={15} strokeWidth={2.5} fill="currentColor" />
                   </button>
                   {/* Send/Queue/Steer — unified pill: button + dropdown toggle merged */}
                   {input.trim() && (
@@ -1847,9 +1847,9 @@ export default function AgentChat({
                           }`}
                           aria-label={SEND_MODE_LABELS[sendMode]}
                           title={`${SEND_MODE_LABELS[sendMode]} — Ctrl+Enter`}>
-                          {sendMode === "steer" ? <CornerDownRight size={14} strokeWidth={2} /> :
-                           sendMode === "queue" ? <ListOrdered size={14} strokeWidth={2} /> :
-                           <ArrowUp size={14} strokeWidth={2.5} />}
+                          {sendMode === "steer" ? <Icon name="CornerDownRight" size={14} strokeWidth={2} /> :
+                           sendMode === "queue" ? <Icon name="ListOrdered" size={14} strokeWidth={2} /> :
+                           <Icon name="ArrowUp" size={14} strokeWidth={2.5} />}
                           <span className="hidden sm:inline text-[11px]">{SEND_MODE_LABELS[sendMode]}</span>
                         </button>
                         {/* Dropdown toggle — divider + chevron */}
@@ -1861,7 +1861,7 @@ export default function AgentChat({
                             "bg-primary border-primary-foreground/20"
                           }`}
                           aria-label="Change send mode" title="Change how messages are sent">
-                          <ChevronDown size={14} strokeWidth={2.5} className="text-white/80" />
+                          <Icon name="ChevronDown" size={14} strokeWidth={2.5} className="text-white/80" />
                         </button>
                       </div>
                       {/* Dropdown menu */}
@@ -1880,13 +1880,13 @@ export default function AgentChat({
                                     m === "queue" ? "bg-sky-500/15 text-sky-400" :
                                     "bg-primary/15 text-primary"
                                   }`}>
-                                    {m === "steer" ? <CornerDownRight size={13} strokeWidth={2} /> :
-                                     m === "queue" ? <ListOrdered size={13} strokeWidth={2} /> :
-                                     <ArrowUp size={13} strokeWidth={2.5} />}
+                                    {m === "steer" ? <Icon name="CornerDownRight" size={13} strokeWidth={2} /> :
+                                     m === "queue" ? <Icon name="ListOrdered" size={13} strokeWidth={2} /> :
+                                     <Icon name="ArrowUp" size={13} strokeWidth={2.5} />}
                                   </span>
                                   {m === "steer" ? "Steer" : m === "queue" ? "Queue" : "Send"}
                                 </span>
-                                {m === sendMode && <CheckCircle size={13} className="text-emerald-400 shrink-0" />}
+                                {m === sendMode && <Icon name="CheckCircle" size={13} className="text-emerald-400 shrink-0" />}
                               </div>
                               <div className="text-muted-foreground mt-0.5 text-[10px] ml-8">
                                 {SEND_MODE_DESCRIPTIONS[m]}
@@ -1902,7 +1902,7 @@ export default function AgentChat({
                 <button type="submit" disabled={!input.trim()}
                   className="shrink-0 self-end h-9 w-9 rounded-xl bg-primary text-primary-foreground flex items-center justify-center disabled:opacity-25 disabled:cursor-not-allowed hover:opacity-90 tech-transition"
                   aria-label="Send" title="Send message">
-                  <ArrowUp size={16} strokeWidth={2.5} />
+                  <Icon name="ArrowUp" size={16} strokeWidth={2.5} />
                 </button>
               )}
             </div>
@@ -1965,7 +1965,7 @@ export default function AgentChat({
                       aria-expanded={showMailboxMenu}
                       className="flex items-center gap-1 px-2 py-1 rounded-md hover:bg-secondary hover:text-foreground tech-transition truncate max-w-[120px] sm:max-w-[170px]"
                     >
-                      <Mail size={11} className="shrink-0 text-muted-foreground/70" />
+                      <Icon name="Mail" size={11} className="shrink-0 text-muted-foreground/70" />
                       <span className="truncate">
                         {activeMailbox?.label ?? "Pick mailbox"}
                       </span>
diff --git a/workbench/control_plane/src/components/AppShell.tsx b/workbench/control_plane/src/components/AppShell.tsx
index 99725a82..a1254d93 100644
--- a/workbench/control_plane/src/components/AppShell.tsx
+++ b/workbench/control_plane/src/components/AppShell.tsx
@@ -13,6 +13,7 @@
  * rely on plain Tailwind responsive prefixes (kept in sync via the viewport meta).
  */
 
+import AppIcon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import {
@@ -24,7 +25,6 @@ import {
   type ReactNode,
 } from "react";
 import { useSession, signOut } from "next-auth/react";
-import { X, Monitor, Smartphone, LogOut, Command, Mail, Zap, Inbox, ListChecks, Plus, Sparkles, Mic, Upload, BookMarked, Video } from "lucide-react";
 import Sidebar from "@/components/Sidebar";
 import { useViewMode } from "@/components/ViewModeProvider";
 import { useActiveSessions } from "@/hooks/useActiveSessions";
@@ -98,7 +98,7 @@ export default function AppShell({ children }: { children: React.ReactNode }) {
             onClick={toggleView}
             className="fixed bottom-4 right-4 z-[60] flex items-center gap-1.5 rounded-full border border-border bg-popover/95 px-3 py-2 text-xs text-muted-foreground shadow-lg backdrop-blur hover:border-primary/50 tech-transition"
           >
-            <Smartphone size={14} />
+            <AppIcon name="Smartphone" size={14} />
             Mobile view
           </button>
         )}
@@ -162,9 +162,6 @@ export default function AppShell({ children }: { children: React.ReactNode }) {
 // Mobile bottom navigation bar — ChatGPT/DeepSeek-style 3-tab bar
 // ---------------------------------------------------------------------------
 
-import { MessageCircle, FolderOpen, Menu as MenuIcon, Filter, LayoutGrid, Play, FileCode, FlaskConical } from "lucide-react";
-import ThemedIcon from "@/components/Icon";
-
 function MobileBottomNavInner({
   pathname,
   toggleView,
@@ -190,7 +187,7 @@ function MobileBottomNavInner({
         {/* Branding doubles as the way home — the mobile shell has no top bar. */}
         <Link href="/" onClick={close} className="flex items-center gap-2.5">
           <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-            <Command size={14} strokeWidth={2.5} />
+            <AppIcon name="Command" size={14} strokeWidth={2.5} />
           </span>
           <div>
             <div className="text-sm font-semibold text-foreground">CommandCenter</div>
@@ -202,7 +199,7 @@ function MobileBottomNavInner({
           className="rounded-lg p-1.5 text-muted-foreground hover:bg-secondary"
           aria-label="Close"
         >
-          <X size={16} />
+          <AppIcon name="X" size={16} />
         </button>
       </div>
       <nav className="flex flex-col overflow-y-auto">
@@ -232,7 +229,7 @@ function MobileBottomNavInner({
                     }`}
                   >
                     <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-secondary text-muted-foreground">
-                      <ThemedIcon name={p.icon} size={15} strokeWidth={active ? 2.5 : 2} />
+                      <AppIcon name={p.icon} size={15} strokeWidth={active ? 2.5 : 2} />
                     </span>
                     <span className="text-sm font-medium">{p.label}</span>
                   </Link>
@@ -248,7 +245,7 @@ function MobileBottomNavInner({
           onClick={() => { toggleView(); close(); }}
           className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-muted-foreground hover:bg-secondary hover:text-foreground tech-transition"
         >
-          <Monitor size={16} className="shrink-0" />
+          <AppIcon name="Monitor" size={16} className="shrink-0" />
           Desktop view
         </button>
         {session?.user && (
@@ -256,7 +253,7 @@ function MobileBottomNavInner({
             onClick={() => signOut({ callbackUrl: "/signin" })}
             className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-muted-foreground hover:bg-secondary hover:text-foreground tech-transition"
           >
-            <LogOut size={16} className="shrink-0" />
+            <AppIcon name="LogOut" size={16} className="shrink-0" />
             Sign out
           </button>
         )}
@@ -309,7 +306,7 @@ function MobileBottomNavInner({
             isOpen ? "text-primary" : "text-muted-foreground hover:text-foreground"
           }`}
         >
-          <MenuIcon size={20} />
+          <AppIcon name="Menu" size={20} />
           <span className="text-[10px] font-medium leading-none">Menu</span>
         </button>
         {isEmailPage && (
@@ -318,21 +315,21 @@ function MobileBottomNavInner({
               onClick={() => dispatchNav("email-accounts")}
               className="flex flex-1 min-w-0 flex-col items-center gap-0.5 px-1 py-1 rounded-lg transition-colors text-muted-foreground hover:text-foreground"
             >
-              <Mail size={20} />
+              <AppIcon name="Mail" size={20} />
               <span className="text-[10px] font-medium leading-none">Inbox</span>
             </button>
             <button
               onClick={() => dispatchNav("email-automation")}
               className="flex flex-1 min-w-0 flex-col items-center gap-0.5 px-1 py-1 rounded-lg transition-colors text-muted-foreground hover:text-foreground"
             >
-              <Zap size={20} />
+              <AppIcon name="Zap" size={20} />
               <span className="text-[10px] font-medium leading-none">Automation</span>
             </button>
             <button
               onClick={() => dispatchNav("email-ai")}
               className="flex flex-1 min-w-0 flex-col items-center gap-0.5 px-1 py-1 rounded-lg transition-colors text-muted-foreground hover:text-foreground"
             >
-              <MessageCircle size={20} />
+              <AppIcon name="MessageCircle" size={20} />
               <span className="text-[10px] font-medium leading-none">AI Chat</span>
             </button>
           </>
@@ -343,7 +340,7 @@ function MobileBottomNavInner({
               onClick={() => dispatchNav("chats")}
               className="relative flex flex-1 min-w-0 flex-col items-center gap-0.5 px-1 py-1 rounded-lg transition-colors text-muted-foreground hover:text-foreground"
             >
-              <MessageCircle size={20} />
+              <AppIcon name="MessageCircle" size={20} />
               {activeCount > 0 && (
                 <span className="absolute -top-0.5 right-2 flex items-center justify-center min-w-[16px] h-4 px-1 rounded-full bg-success text-success-foreground text-[9px] font-bold animate-pulse">
                   {activeCount}
@@ -355,7 +352,7 @@ function MobileBottomNavInner({
               onClick={() => dispatchNav("files")}
               className="flex flex-1 min-w-0 flex-col items-center gap-0.5 px-1 py-1 rounded-lg transition-colors text-muted-foreground hover:text-foreground"
             >
-              <FolderOpen size={20} />
+              <AppIcon name="FolderOpen" size={20} />
               <span className="text-[10px] font-medium leading-none">Files</span>
             </button>
           </>
@@ -365,24 +362,24 @@ function MobileBottomNavInner({
             <TaskTab
               active={tasksSection === "inbox"}
               onClick={() => dispatchNav("tasks-inbox")}
-              icon={Inbox}
+              icon={themedIcon("Inbox")}
               label="Inbox"
             />
             <TaskTab
               active={tasksSection !== "inbox"}
               onClick={() => dispatchNav("tasks-lists")}
-              icon={ListChecks}
+              icon={themedIcon("ListChecks")}
               label="Lists"
             />
             <TaskTab
               onClick={() => dispatchNav("tasks-capture")}
-              icon={Plus}
+              icon={themedIcon("Plus")}
               label="Capture"
               accent
             />
             <TaskTab
               onClick={() => dispatchNav("tasks-assistant")}
-              icon={Sparkles}
+              icon={themedIcon("Sparkles")}
               label="Assistant"
             />
           </>
@@ -391,23 +388,23 @@ function MobileBottomNavInner({
           <>
             <TaskTab
               onClick={() => dispatchNav("notes-record")}
-              icon={Mic}
+              icon={themedIcon("Mic")}
               label="Record"
               accent
             />
             <TaskTab
               onClick={() => dispatchNav("notes-join")}
-              icon={Video}
+              icon={themedIcon("Video")}
               label="Join call"
             />
             <TaskTab
               onClick={() => dispatchNav("notes-upload")}
-              icon={Upload}
+              icon={themedIcon("Upload")}
               label="Upload"
             />
             <TaskTab
               onClick={() => dispatchNav("notes-glossary")}
-              icon={BookMarked}
+              icon={themedIcon("BookMarked")}
               label="Glossary"
             />
           </>
@@ -415,14 +412,14 @@ function MobileBottomNavInner({
         {isWhatsAppInbox && (
           <TaskTab
             onClick={() => dispatchNav("wa-triage")}
-            icon={Filter}
+            icon={themedIcon("Filter")}
             label="Triage"
           />
         )}
         {isWhatsAppPage && (
           <TaskTab
             onClick={() => dispatchNav("wa-sections")}
-            icon={LayoutGrid}
+            icon={themedIcon("LayoutGrid")}
             label="Sections"
           />
         )}
@@ -430,23 +427,23 @@ function MobileBottomNavInner({
           <>
             <TaskTab
               onClick={() => dispatchNav("workshop-chat")}
-              icon={Sparkles}
+              icon={themedIcon("Sparkles")}
               label="Chat"
               accent
             />
             <TaskTab
               onClick={() => dispatchNav("workshop-preview")}
-              icon={Play}
+              icon={themedIcon("Play")}
               label="Preview"
             />
             <TaskTab
               onClick={() => dispatchNav("workshop-code")}
-              icon={FileCode}
+              icon={themedIcon("FileCode")}
               label="Code"
             />
             <TaskTab
               onClick={() => dispatchNav("workshop-tests")}
-              icon={FlaskConical}
+              icon={themedIcon("FlaskConical")}
               label="Tests"
             />
           </>
@@ -464,7 +461,7 @@ function TaskTab({
 }: {
   active?: boolean;
   onClick: () => void;
-  icon: typeof Inbox;
+  icon: ThemedIcon;
   label: string;
   accent?: boolean;
 }) {
diff --git a/workbench/control_plane/src/components/ArtifactCard.tsx b/workbench/control_plane/src/components/ArtifactCard.tsx
index a1cf76f0..12c9fa4b 100644
--- a/workbench/control_plane/src/components/ArtifactCard.tsx
+++ b/workbench/control_plane/src/components/ArtifactCard.tsx
@@ -13,19 +13,10 @@
  *   /api/agent/workspace/{sessionId}/file?path={rel_path}
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useViewMode } from "@/components/ViewModeProvider";
 import { classifyArtifact, isRenderable } from "@/lib/artifactKind";
-import {
-  File,
-  FileCode,
-  FileText,
-  FileImage,
-  FileSpreadsheet,
-  Download,
-  Maximize2,
-  PanelLeft,
-} from "lucide-react";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -96,16 +87,16 @@ function fileIcon(artifact: ArtifactMeta): React.ReactNode {
   const ext = getExt(artifact.name);
   const mime = artifact.mimeType ?? "";
   if (IMAGE_EXTS.has(ext) || mime.startsWith("image/"))
-    return <FileImage size={15} className="shrink-0 text-purple-400" />;
+    return <Icon name="FileImage" size={15} className="shrink-0 text-purple-400" />;
   if (CODE_EXTS.has(ext))
-    return <FileCode size={15} className="shrink-0 text-blue-400" />;
+    return <Icon name="FileCode" size={15} className="shrink-0 text-blue-400" />;
   if (["md", "txt", "log", "rst", "csv"].includes(ext) || mime.startsWith("text/"))
-    return <FileText size={15} className="shrink-0 text-green-400" />;
+    return <Icon name="FileText" size={15} className="shrink-0 text-green-400" />;
   if (["pdf"].includes(ext) || mime === "application/pdf")
-    return <FileText size={15} className="shrink-0 text-red-400" />;
+    return <Icon name="FileText" size={15} className="shrink-0 text-red-400" />;
   if (["xlsx", "xls"].includes(ext))
-    return <FileSpreadsheet size={15} className="shrink-0 text-emerald-400" />;
-  return <File size={15} className="shrink-0 text-muted-foreground" />;
+    return <Icon name="FileSpreadsheet" size={15} className="shrink-0 text-emerald-400" />;
+  return <Icon name="File" size={15} className="shrink-0 text-muted-foreground" />;
 }
 
 // ─── Component ─────────────────────────────────────────────────────────────────
@@ -171,7 +162,7 @@ export default function ArtifactCard({
               className="rounded-lg bg-secondary/90 px-3 py-1.5 text-xs text-foreground hover:bg-secondary transition-colors flex items-center gap-1.5"
               title="Open full size"
             >
-              <Maximize2 size={13} />
+              <Icon name="Maximize2" size={13} />
               Open
             </button>
             <a
@@ -179,7 +170,7 @@ export default function ArtifactCard({
               download={artifact.name}
               className="rounded-lg bg-secondary/90 px-3 py-1.5 text-xs text-foreground hover:bg-secondary transition-colors flex items-center gap-1.5"
             >
-              <Download size={13} />
+              <Icon name="Download" size={13} />
               Download
             </a>
           </div>
@@ -251,7 +242,7 @@ export default function ArtifactCard({
             className="flex items-center gap-1.5 rounded-lg bg-primary/10 px-2.5 py-1.5 text-[11px] font-medium text-primary hover:bg-primary/20 transition-colors"
             title={isMobile ? "Open the rendered artifact" : "Open in side panel — edit + live preview"}
           >
-            {isMobile ? <Maximize2 size={13} /> : <PanelLeft size={13} />}
+            {isMobile ? <Icon name="Maximize2" size={13} /> : <Icon name="PanelLeft" size={13} />}
             Open
           </button>
         )}
@@ -261,7 +252,7 @@ export default function ArtifactCard({
             className="rounded-lg p-1.5 text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
             title={isDoc ? "Open in modal viewer" : "Open in viewer"}
           >
-            <Maximize2 size={14} />
+            <Icon name="Maximize2" size={14} />
           </button>
         )}
         <a
@@ -271,7 +262,7 @@ export default function ArtifactCard({
           className="rounded-lg p-1.5 text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
           title="Download"
         >
-          <Download size={14} />
+          <Icon name="Download" size={14} />
         </a>
       </div>
     </div>
diff --git a/workbench/control_plane/src/components/ArtifactSidebar.tsx b/workbench/control_plane/src/components/ArtifactSidebar.tsx
index 5b122534..57a94bf9 100644
--- a/workbench/control_plane/src/components/ArtifactSidebar.tsx
+++ b/workbench/control_plane/src/components/ArtifactSidebar.tsx
@@ -11,25 +11,8 @@
  *   artifactUpdates  — new FileEntry objects pushed in from SSE (ST-AV-06); merged into tree
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useRef, useState } from "react";
-import {
-  ChevronLeft,
-  ChevronRight,
-  ChevronDown,
-  ChevronRight as FolderArrow,
-  File,
-  FileCode,
-  FileText,
-  FileImage,
-  FileSpreadsheet,
-  RefreshCw,
-  Download,
-  Trash2,
-  PanelLeft,
-  History,
-  ArrowUpToLine,
-  FolderOpen,
-} from "lucide-react";
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
@@ -125,16 +108,16 @@ function fileIcon(entry: FileEntry) {
   const ext = entry.name.split(".").pop()?.toLowerCase() ?? "";
   const mime = entry.mime_type;
   if (["png", "jpg", "jpeg", "gif", "webp", "svg", "ico"].includes(ext) || mime.startsWith("image/"))
-    return <FileImage size={13} className="shrink-0 text-purple-400" />;
+    return <Icon name="FileImage" size={13} className="shrink-0 text-purple-400" />;
   if (["py", "ts", "tsx", "js", "jsx", "sh", "yaml", "yml", "toml", "json", "sql", "rs", "go", "java", "c", "cpp"].includes(ext))
-    return <FileCode size={13} className="shrink-0 text-blue-400" />;
+    return <Icon name="FileCode" size={13} className="shrink-0 text-blue-400" />;
   if (["md", "txt", "log", "rst", "csv"].includes(ext) || mime.startsWith("text/"))
-    return <FileText size={13} className="shrink-0 text-green-400" />;
+    return <Icon name="FileText" size={13} className="shrink-0 text-green-400" />;
   if (["pdf"].includes(ext) || mime === "application/pdf")
-    return <FileText size={13} className="shrink-0 text-red-400" />;
+    return <Icon name="FileText" size={13} className="shrink-0 text-red-400" />;
   if (["xlsx", "xls", "csv"].includes(ext))
-    return <FileSpreadsheet size={13} className="shrink-0 text-emerald-400" />;
-  return <File size={13} className="shrink-0 text-muted-foreground" />;
+    return <Icon name="FileSpreadsheet" size={13} className="shrink-0 text-emerald-400" />;
+  return <Icon name="File" size={13} className="shrink-0 text-muted-foreground" />;
 }
 
 // ─── TreeNodeRow ─────────────────────────────────────────────────────────────
@@ -177,7 +160,7 @@ function TreeNodeRow({
           onClick={() => setExpanded((e) => !e)}
         >
 
-          {expanded ? <ChevronDown size={11} className="shrink-0" /> : <FolderArrow size={11} className="shrink-0" />}
+          {expanded ? <Icon name="ChevronDown" size={11} className="shrink-0" /> : <Icon name="ChevronRight" size={11} className="shrink-0" />}
           <span className="truncate font-medium text-foreground">{node.name || "/"}</span>
         </button>
         {expanded && children.map((child) => (
@@ -266,7 +249,7 @@ function TreeNodeRow({
           className="shrink-0 text-muted-foreground hover:text-blue-400 transition-all p-0.5"
           title={`Download ${entry.name}`}
         >
-          <Download size={12} />
+          <Icon name="Download" size={12} />
         </a>
         {deletable && (
           <button
@@ -274,7 +257,7 @@ function TreeNodeRow({
             className="shrink-0 text-muted-foreground hover:text-red-400 transition-all p-0.5"
             title={`Delete ${entry.name}`}
           >
-            <Trash2 size={12} />
+            <Icon name="Trash2" size={12} />
           </button>
         )}
       </div>
@@ -302,7 +285,7 @@ function TreeNodeRow({
                   setMenu(null);
                 }}
               >
-                <PanelLeft size={13} className="shrink-0 text-muted-foreground" />
+                <Icon name="PanelLeft" size={13} className="shrink-0 text-muted-foreground" />
                 Open in side panel
               </button>
             )}
@@ -316,7 +299,7 @@ function TreeNodeRow({
                 }}
                 title="Move to Agent Data — permanent, prompt-shaping storage"
               >
-                <ArrowUpToLine size={13} className="shrink-0 text-muted-foreground" />
+                <Icon name="ArrowUpToLine" size={13} className="shrink-0 text-muted-foreground" />
                 {promoting ? "Promoting…" : "Promote to Agent Data"}
               </button>
             )}
@@ -327,7 +310,7 @@ function TreeNodeRow({
                 setMenu(null);
               }}
             >
-              <History size={13} className="shrink-0 text-muted-foreground" />
+              <Icon name="History" size={13} className="shrink-0 text-muted-foreground" />
               Version history
             </button>
             <a
@@ -336,7 +319,7 @@ function TreeNodeRow({
               className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-secondary transition-colors"
               onClick={() => setMenu(null)}
             >
-              <Download size={13} className="shrink-0 text-muted-foreground" />
+              <Icon name="Download" size={13} className="shrink-0 text-muted-foreground" />
               Download
             </a>
           </div>
@@ -353,7 +336,7 @@ function TreeNodeRow({
             onClick={(e) => e.stopPropagation()}
           >
             <div className="flex items-center gap-2 border-b border-border px-4 py-3">
-              <History size={14} className="text-muted-foreground" />
+              <Icon name="History" size={14} className="text-muted-foreground" />
               <span className="text-sm font-semibold text-foreground truncate">
                 {entry.name}
               </span>
@@ -516,7 +499,7 @@ export default function ArtifactSidebar({
               className="rounded p-1 text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
               title="Refresh file tree"
             >
-              <RefreshCw size={12} className={loading ? "animate-spin" : ""} />
+              <Icon name="RefreshCw" size={12} className={loading ? "animate-spin" : ""} />
             </button>
             <button
               onClick={onToggle}
@@ -524,7 +507,7 @@ export default function ArtifactSidebar({
               title="Collapse file browser"
             >
               {/* Chevron points toward the edge the panel collapses into. */}
-              {side === "right" ? <ChevronRight size={14} /> : <ChevronLeft size={14} />}
+              {side === "right" ? <Icon name="ChevronRight" size={14} /> : <Icon name="ChevronLeft" size={14} />}
             </button>
           </div>
         </div>
@@ -535,7 +518,7 @@ export default function ArtifactSidebar({
         <div className="flex flex-col flex-1 overflow-y-auto p-1.5 min-h-0">
           {loading && (
             <div className="flex items-center gap-1.5 px-2 py-3 text-xs text-muted-foreground">
-              <RefreshCw size={11} className="animate-spin" />
+              <Icon name="RefreshCw" size={11} className="animate-spin" />
               Loading…
             </div>
           )}
@@ -577,7 +560,7 @@ export default function ArtifactSidebar({
           className="flex w-full flex-1 cursor-pointer flex-col items-center py-2.5 text-muted-foreground hover:bg-secondary/40 hover:text-foreground transition-colors"
           title="Open file browser"
         >
-          <FolderOpen size={15} />
+          <Icon name="FolderOpen" size={15} />
           {files.length > 0 && (
             <span className="mt-1 rounded-full bg-secondary px-1 text-[10px]">
               {files.length}
diff --git a/workbench/control_plane/src/components/DocumentPane.tsx b/workbench/control_plane/src/components/DocumentPane.tsx
index 448e395e..ba2d164c 100644
--- a/workbench/control_plane/src/components/DocumentPane.tsx
+++ b/workbench/control_plane/src/components/DocumentPane.tsx
@@ -19,12 +19,12 @@
  * watches it stream in.
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
 import { useTheme } from "next-themes";
-import { Eye, Pencil, Save, RotateCcw, Download, Loader2 } from "lucide-react";
 import SandboxedHtml from "@/components/SandboxedHtml";
 import SandboxedReact from "@/components/SandboxedReact";
 import { buildIconMap, iconsUsedIn } from "@/lib/iconSvg";
@@ -165,7 +165,7 @@ export default function DocumentPane({ sessionId, path, name, live }: DocumentPa
       <span className="truncate text-xs font-medium text-foreground">{name}</span>
       {live && (
         <span className="flex items-center gap-1 rounded-full bg-primary/15 px-1.5 py-0.5 text-[10px] font-medium text-primary">
-          <Loader2 size={9} className="animate-spin" />
+          <Icon name="Loader2" size={9} className="animate-spin" />
           writing
         </span>
       )}
@@ -177,7 +177,7 @@ export default function DocumentPane({ sessionId, path, name, live }: DocumentPa
             className="flex items-center gap-1 rounded px-2 py-1 text-[11px] text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
             title="Rendered preview"
           >
-            <Eye size={12} /> Preview
+            <Icon name="Eye" size={12} /> Preview
           </button>
         )}
         {editable && mode === "preview" && (
@@ -186,7 +186,7 @@ export default function DocumentPane({ sessionId, path, name, live }: DocumentPa
             className="flex items-center gap-1 rounded px-2 py-1 text-[11px] text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
             title="Edit"
           >
-            <Pencil size={12} /> Edit
+            <Icon name="Pencil" size={12} /> Edit
           </button>
         )}
         {mode === "edit" && (
@@ -197,7 +197,7 @@ export default function DocumentPane({ sessionId, path, name, live }: DocumentPa
               className="flex items-center gap-1 rounded px-2 py-1 text-[11px] text-primary hover:bg-primary/10 transition-colors disabled:opacity-40"
               title="Save"
             >
-              <Save size={12} /> {saving ? "Saving…" : "Save"}
+              <Icon name="Save" size={12} /> {saving ? "Saving…" : "Save"}
             </button>
             <button
               onClick={cancelEdit}
@@ -205,7 +205,7 @@ export default function DocumentPane({ sessionId, path, name, live }: DocumentPa
               className="flex items-center gap-1 rounded px-2 py-1 text-[11px] text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
               title="Discard changes"
             >
-              <RotateCcw size={12} />
+              <Icon name="RotateCcw" size={12} />
             </button>
           </>
         )}
@@ -215,7 +215,7 @@ export default function DocumentPane({ sessionId, path, name, live }: DocumentPa
           className="flex items-center gap-1 rounded px-2 py-1 text-[11px] text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
           title={`Download ${name}`}
         >
-          <Download size={12} />
+          <Icon name="Download" size={12} />
         </a>
       </div>
     </div>
@@ -226,7 +226,7 @@ export default function DocumentPane({ sessionId, path, name, live }: DocumentPa
   if (loading) {
     body = (
       <div className="flex flex-1 items-center justify-center text-xs text-muted-foreground">
-        <Loader2 size={14} className="mr-2 animate-spin" /> Loading…
+        <Icon name="Loader2" size={14} className="mr-2 animate-spin" /> Loading…
       </div>
     );
   } else if (error) {
@@ -252,7 +252,7 @@ export default function DocumentPane({ sessionId, path, name, live }: DocumentPa
           download={name}
           className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 transition"
         >
-          <Download size={13} /> Download {name}
+          <Icon name="Download" size={13} /> Download {name}
         </a>
       </div>
     );
@@ -301,7 +301,7 @@ export default function DocumentPane({ sessionId, path, name, live }: DocumentPa
     body = live ? (
       <div className="flex-1 overflow-auto">
         <div className="flex items-center gap-1.5 border-b border-border/60 bg-card/40 px-3 py-1 text-[10px] text-muted-foreground">
-          <Loader2 size={9} className="animate-spin" />
+          <Icon name="Loader2" size={9} className="animate-spin" />
           building — renders when the agent finishes writing
         </div>
         <pre className="whitespace-pre-wrap break-words p-3 font-mono text-[12px] leading-relaxed text-muted-foreground">
diff --git a/workbench/control_plane/src/components/FileUploadButton.tsx b/workbench/control_plane/src/components/FileUploadButton.tsx
index 29bcb39f..fc82cc9e 100644
--- a/workbench/control_plane/src/components/FileUploadButton.tsx
+++ b/workbench/control_plane/src/components/FileUploadButton.tsx
@@ -17,8 +17,8 @@
  * briefly.  On error it flashes red.
  */
 
+import Icon from "@/components/Icon";
 import { useRef, useState, useCallback } from "react";
-import { Paperclip, Loader2, CheckCircle, AlertCircle } from "lucide-react";
 import type { FileEntry } from "@/components/ArtifactSidebar";
 
 type UploadState =
@@ -119,13 +119,13 @@ export default function FileUploadButton({
           }`}
         >
           {state.phase === "uploading" ? (
-            <Loader2 size={18} className="animate-spin" />
+            <Icon name="Loader2" size={18} className="animate-spin" />
           ) : state.phase === "success" ? (
-            <CheckCircle size={18} />
+            <Icon name="CheckCircle" size={18} />
           ) : state.phase === "error" ? (
-            <AlertCircle size={18} />
+            <Icon name="AlertCircle" size={18} />
           ) : (
-            <Paperclip size={18} />
+            <Icon name="Paperclip" size={18} />
           )}
         </button>
       </>
@@ -168,23 +168,23 @@ export default function FileUploadButton({
 
       {state.phase === "uploading" ? (
         <div className="flex items-center justify-center gap-2 py-3 px-4 text-sm text-amber-400">
-          <Loader2 size={16} className="animate-spin" />
+          <Icon name="Loader2" size={16} className="animate-spin" />
           Uploading {state.count} file{state.count > 1 ? "s" : ""}…
         </div>
       ) : state.phase === "success" ? (
         <div className="flex items-center justify-center gap-2 py-3 px-4 text-sm text-emerald-400">
-          <CheckCircle size={16} />
+          <Icon name="CheckCircle" size={16} />
           Uploaded {state.files.length} file{state.files.length > 1 ? "s" : ""}
         </div>
       ) : state.phase === "error" ? (
         <div className="flex items-center justify-center gap-2 py-3 px-4 text-sm text-red-400">
-          <AlertCircle size={16} />
+          <Icon name="AlertCircle" size={16} />
           {state.message}
         </div>
       ) : (
         children ?? (
           <div className="flex items-center justify-center gap-2 py-3 px-4 text-sm text-muted-foreground">
-            <Paperclip size={16} />
+            <Icon name="Paperclip" size={16} />
             Drop files here or click to upload
           </div>
         )
diff --git a/workbench/control_plane/src/components/Icon.tsx b/workbench/control_plane/src/components/Icon.tsx
index 81cded97..c41c1f3b 100644
--- a/workbench/control_plane/src/components/Icon.tsx
+++ b/workbench/control_plane/src/components/Icon.tsx
@@ -42,7 +42,11 @@ export type IconProps = {
    * their own weight — passing it is harmless so call sites need no edit.
    */
   strokeWidth?: number;
+  /** SVG paint attributes some call sites set (e.g. a filled star). */
+  fill?: string;
+  color?: string;
   style?: React.CSSProperties;
+  onClick?: React.MouseEventHandler<SVGSVGElement>;
   "aria-label"?: string;
   "aria-hidden"?: boolean;
 };
@@ -52,7 +56,10 @@ export default function Icon({
   size = 16,
   className,
   strokeWidth,
+  fill,
+  color,
   style,
+  onClick,
   ...aria
 }: IconProps) {
   const pack = useIconPack();
@@ -72,6 +79,8 @@ export default function Icon({
         height={size}
         className={className}
         style={style}
+        color={color}
+        onClick={onClick}
         // Iconify renders decorative markup; without a label it should be
         // invisible to assistive tech, matching Lucide's own default.
         aria-hidden={aria["aria-label"] ? undefined : true}
@@ -89,7 +98,48 @@ export default function Icon({
     size,
     className,
     strokeWidth,
+    fill,
+    color,
     style,
+    onClick,
     ...aria,
   });
 }
+
+/**
+ * A themed icon component bound to one name — what `themedIcon` returns.
+ * `displayName` is part of the type so bound icons are identifiable in React
+ * DevTools rather than as a wall of anonymous functions.
+ */
+export type ThemedIcon = ((props: Omit<IconProps, "name">) => React.ReactNode) & {
+  displayName?: string;
+};
+
+const bound = new Map<string, ThemedIcon>();
+
+/**
+ * A themed icon as a COMPONENT VALUE, for the many places that keep an icon in
+ * a lookup table rather than rendering it inline:
+ *
+ *     const META = { inbox: { icon: themedIcon("Inbox"), label: "Inbox" } };
+ *     …
+ *     <META.inbox.icon size={16} />
+ *
+ * This exists so those call sites migrate with a one-token edit — `Inbox`
+ * becomes `themedIcon("Inbox")` — instead of restructuring every table into
+ * name strings and threading a render helper through everything that reads
+ * them. Where such a table needs a TYPE, use `ThemedIcon`: `typeof` applied to
+ * a call expression is not valid TypeScript.
+ *
+ * Results are memoised per name because the return value is a component TYPE.
+ * A fresh function on every call would be a new type each render, and React
+ * would unmount and remount the icon instead of updating it.
+ */
+export function themedIcon(name: string): ThemedIcon {
+  const cached = bound.get(name);
+  if (cached) return cached;
+  const Bound: ThemedIcon = (props) => <Icon name={name} {...props} />;
+  Bound.displayName = `ThemedIcon(${name})`;
+  bound.set(name, Bound);
+  return Bound;
+}
diff --git a/workbench/control_plane/src/components/MessageBubble.tsx b/workbench/control_plane/src/components/MessageBubble.tsx
index 91f9c87e..67005bcf 100644
--- a/workbench/control_plane/src/components/MessageBubble.tsx
+++ b/workbench/control_plane/src/components/MessageBubble.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useState, useRef, useEffect, useMemo } from "react";
 import React from "react";
 import type { ChatMessage } from "@/hooks/useAgentChat";
@@ -18,7 +19,6 @@ import { useDismissedToolCards, dismissToolCard } from "@/lib/dismissedTools";
 import { openDoc, openGenUI } from "@/lib/sidePanelStore";
 import { AgentAvatar, useAgentAvatars } from "@/components/AgentAvatar";
 import { capabilityLabel, type RoomParticipant } from "@/lib/rooms";
-import { AppWindow, Bot, EyeOff } from "lucide-react";
 
 /** The only part of a room participant a message bubble needs: a face. */
 export type BubbleParticipant = Pick<
@@ -79,7 +79,7 @@ function AgentLabel({ agentName }: { agentName: string }) {
         libraryId={avatars[agentName]}
         size={18}
         title={agentName}
-        fallback={<Bot size={13} className="text-muted-foreground shrink-0" />}
+        fallback={<Icon name="Bot" size={13} className="text-muted-foreground shrink-0" />}
       />
       <span className="text-[11px] font-medium text-muted-foreground">
         {agentName}
@@ -230,7 +230,7 @@ function MessageBubble({
     return (
       <div className="rounded-xl border border-border bg-secondary/40 px-3.5 py-2.5">
         <div className="flex items-start gap-2">
-          <EyeOff size={14} className="mt-0.5 shrink-0 text-muted-foreground" />
+          <Icon name="EyeOff" size={14} className="mt-0.5 shrink-0 text-muted-foreground" />
           <div className="min-w-0 space-y-1">
             <p className="text-[12px] leading-relaxed text-muted-foreground">
               {message.content}
@@ -500,7 +500,7 @@ function MessageBubble({
                   })}
                   className="flex items-center gap-2 rounded-lg border border-border/60 bg-card/50 px-3 py-2 text-xs text-foreground hover:bg-secondary/60 transition-colors"
                 >
-                  <AppWindow size={13} className="text-primary" />
+                  <Icon name="AppWindow" size={13} className="text-primary" />
                   <span className="font-medium">{title}</span>
                   <span className="text-muted-foreground">
                     — open in side panel
diff --git a/workbench/control_plane/src/components/SidePanelEditor.tsx b/workbench/control_plane/src/components/SidePanelEditor.tsx
index 78f9fa5e..e9369d17 100644
--- a/workbench/control_plane/src/components/SidePanelEditor.tsx
+++ b/workbench/control_plane/src/components/SidePanelEditor.tsx
@@ -11,8 +11,8 @@
  * returns the same reference until a real change) to avoid React #185.
  */
 
+import Icon from "@/components/Icon";
 import { useEffect, useRef, useSyncExternalStore } from "react";
-import { X, PanelLeftClose, Loader2, FileText, Sparkles } from "lucide-react";
 import {
   subscribe,
   getState,
@@ -120,7 +120,7 @@ export default function SidePanelEditor() {
           className="flex w-full flex-1 cursor-pointer flex-col items-center py-2.5 text-muted-foreground hover:bg-secondary/60 hover:text-foreground transition-colors"
           title="Open document panel"
         >
-          <FileText size={15} />
+          <Icon name="FileText" size={15} />
           {docs.length > 0 && (
             <span className="mt-1 rounded-full bg-secondary px-1 text-[10px]">
               {docs.length}
@@ -168,7 +168,7 @@ export default function SidePanelEditor() {
                   }`}
                   title={d.path}
                 >
-                  {d.live && <Loader2 size={10} className="shrink-0 animate-spin text-primary" />}
+                  {d.live && <Icon name="Loader2" size={10} className="shrink-0 animate-spin text-primary" />}
                   <span className="truncate">{d.name}</span>
                   {/* Always rendered, never opacity-0: a hover-only close button
                       is invisible on touch, and undiscoverable on a pointer
@@ -183,7 +183,7 @@ export default function SidePanelEditor() {
                     aria-label={`Close ${d.name}`}
                     title={`Close ${d.name}`}
                   >
-                    <X size={12} />
+                    <Icon name="X" size={12} />
                   </button>
                 </div>
               );
@@ -195,7 +195,7 @@ export default function SidePanelEditor() {
           className="flex shrink-0 items-center border-l border-border px-2 text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
           title="Collapse document panel"
         >
-          <PanelLeftClose size={15} />
+          <Icon name="PanelLeftClose" size={15} />
         </button>
       </div>
 
@@ -204,7 +204,7 @@ export default function SidePanelEditor() {
         {active && active.kind === "genui" ? (
           <div className="flex-1 overflow-y-auto p-4">
             <div className="mb-3 flex items-center gap-2 text-[11px] text-muted-foreground">
-              <Sparkles size={12} className="text-primary" />
+              <Icon name="Sparkles" size={12} className="text-primary" />
               Interactive view — generated by the agent
             </div>
             <GenerativeUINode
@@ -231,7 +231,7 @@ export default function SidePanelEditor() {
           />
         ) : (
           <div className="flex flex-1 flex-col items-center justify-center gap-2 p-6 text-center">
-            <FileText size={22} className="text-muted-foreground/50" />
+            <Icon name="FileText" size={22} className="text-muted-foreground/50" />
             <p className="text-xs text-muted-foreground">No document open.</p>
             <p className="max-w-[16rem] text-[11px] text-muted-foreground/70">
               Open a file from the Files panel (or right-click → “Open in side panel”).
diff --git a/workbench/control_plane/src/components/Sidebar.tsx b/workbench/control_plane/src/components/Sidebar.tsx
index 3d9b8f95..7c84113e 100644
--- a/workbench/control_plane/src/components/Sidebar.tsx
+++ b/workbench/control_plane/src/components/Sidebar.tsx
@@ -6,7 +6,7 @@ import { useEffect, useState } from "react";
 import { useSession, signOut } from "next-auth/react";
 import { NAV_SECTIONS, visibleSections, type NavPane, type NavSection } from "@/lib/nav";
 import { useAccess } from "@/components/AccessProvider";
-import ThemedIcon from "@/components/Icon";
+import Icon from "@/components/Icon";
 import ThemeToggle from "@/components/ThemeToggle";
 
 /** Mirrors gateway/routes/apps/pins.py's PinnedApp — GET /api/apps/pins. */
@@ -123,7 +123,7 @@ export default function Sidebar() {
           <Link href="/" className="block min-w-0">
             <div className="flex items-center gap-2">
               <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-                <ThemedIcon name="Command" size={15} strokeWidth={2.5} />
+                <Icon name="Command" size={15} strokeWidth={2.5} />
               </span>
               <div>
                 <div className="text-sm font-semibold tracking-tight text-sidebar-foreground leading-tight">CommandCenter</div>
@@ -137,7 +137,7 @@ export default function Sidebar() {
           className="shrink-0 rounded-lg p-1.5 text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-foreground tech-transition"
           title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
         >
-          {collapsed ? <ThemedIcon name="ChevronRight" size={16} /> : <ThemedIcon name="ChevronLeft" size={16} />}
+          {collapsed ? <Icon name="ChevronRight" size={16} /> : <Icon name="ChevronLeft" size={16} />}
         </button>
       </div>
 
@@ -175,7 +175,7 @@ export default function Sidebar() {
                 className="ml-2 shrink-0 rounded-lg p-1.5 text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-foreground tech-transition"
                 title="Sign out"
               >
-                <ThemedIcon name="LogOut" size={14} />
+                <Icon name="LogOut" size={14} />
               </button>
               <ThemeToggle />
             </div>
@@ -261,7 +261,7 @@ function NavSectionBlock({
         }`}
       >
         <span>{section.label}</span>
-        <ThemedIcon
+        <Icon
           name="ChevronDown"
           size={12}
           className={`shrink-0 text-muted-foreground/50 group-hover:text-muted-foreground tech-transition ${
@@ -319,7 +319,7 @@ function NavLink({
             : "text-muted-foreground hover:bg-sidebar-accent hover:text-sidebar-foreground"
         }`}
       >
-        <ThemedIcon name={pane.icon} size={18} strokeWidth={active ? 2.5 : 2} />
+        <Icon name={pane.icon} size={18} strokeWidth={active ? 2.5 : 2} />
         {badge !== undefined && badge > 0 && (
           <span className="absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-amber-500 text-[8px] font-bold text-white">
             {badge > 9 ? "9+" : badge}
@@ -341,7 +341,7 @@ function NavLink({
         }`}
       >
         <div className="flex items-center gap-2.5">
-          <ThemedIcon name={pane.icon} size={16} strokeWidth={active ? 2.5 : 2} />
+          <Icon name={pane.icon} size={16} strokeWidth={active ? 2.5 : 2} />
           <span className="font-medium text-[13px]">{pane.label}</span>
           {badge !== undefined && badge > 0 && (
             <span className="ml-auto rounded-full bg-amber-500 px-1.5 py-0.5 text-[10px] font-bold text-white">
diff --git a/workbench/control_plane/src/components/Tabs.tsx b/workbench/control_plane/src/components/Tabs.tsx
index c8ecb100..c169894a 100644
--- a/workbench/control_plane/src/components/Tabs.tsx
+++ b/workbench/control_plane/src/components/Tabs.tsx
@@ -11,7 +11,7 @@
  *
  * Usage:
  *   <Tabs
- *     tabs={[{ id: "apis", label: "APIs", icon: Zap }, ...]}
+ *     tabs={[{ id: "apis", label: "APIs", icon: "Zap" }, ...]}
  *     activeTab={tab}
  *     onTabChange={setTab}
  *     variant="underline"
@@ -19,12 +19,17 @@
  */
 
 import React from "react";
-import type { LucideIcon } from "lucide-react";
+import Icon from "@/components/Icon";
 
 export interface TabDef {
   id: string;
   label: string;
-  icon?: LucideIcon;
+  /**
+   * Lucide icon NAME, e.g. "Zap". A name rather than a component so a tab bar
+   * cannot pin its icons to one pack while the rest of the app follows the
+   * theme — see DESIGN_SYSTEM.md.
+   */
+  icon?: string;
   /** Optional badge count shown next to label */
   count?: number;
   /** Optional tooltip / aria-description */
@@ -59,7 +64,6 @@ export default function Tabs({
         role="tablist"
       >
         {tabs.map((t) => {
-          const Icon = t.icon;
           const active = activeTab === t.id;
           return (
             <button
@@ -74,7 +78,7 @@ export default function Tabs({
                   : "border-transparent text-muted-foreground hover:text-foreground hover:bg-secondary/50"
               }`}
             >
-              {Icon && <Icon className="w-3.5 h-3.5" />}
+              {t.icon && <Icon name={t.icon} className="w-3.5 h-3.5" />}
               {t.label}
               {t.count !== undefined && (
                 <span className="ml-1 text-[10px] opacity-60">{t.count}</span>
@@ -96,7 +100,6 @@ export default function Tabs({
         role="tablist"
       >
         {tabs.map((t) => {
-          const Icon = t.icon;
           const active = activeTab === t.id;
           return (
             <button
@@ -111,7 +114,7 @@ export default function Tabs({
                   : "text-muted-foreground hover:text-foreground"
               }`}
             >
-              {Icon && <Icon className="w-3.5 h-3.5" />}
+              {t.icon && <Icon name={t.icon} className="w-3.5 h-3.5" />}
               {t.label}
               {t.count !== undefined && (
                 <span className="ml-1 opacity-50">{t.count}</span>
diff --git a/workbench/control_plane/src/components/ThemeToggle.tsx b/workbench/control_plane/src/components/ThemeToggle.tsx
index 70c809ef..ed589514 100644
--- a/workbench/control_plane/src/components/ThemeToggle.tsx
+++ b/workbench/control_plane/src/components/ThemeToggle.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useTheme } from "next-themes";
-import { Sun, Moon } from "lucide-react";
 import { useEffect, useState } from "react";
 
 /**
@@ -34,7 +34,7 @@ export default function ThemeToggle() {
       aria-label={isDark ? "Switch to light theme" : "Switch to dark theme"}
       title={isDark ? "Light mode" : "Dark mode"}
     >
-      {isDark ? <Sun size={15} /> : <Moon size={15} />}
+      {isDark ? <Icon name="Sun" size={15} /> : <Icon name="Moon" size={15} />}
     </button>
   );
 }
@@ -64,7 +64,7 @@ export function ThemeToggleMenuItem({ onClick }: { onClick?: () => void }) {
       }}
       className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-muted-foreground hover:bg-secondary hover:text-foreground tech-transition"
     >
-      {isDark ? <Sun size={16} className="shrink-0" /> : <Moon size={16} className="shrink-0" />}
+      {isDark ? <Icon name="Sun" size={16} className="shrink-0" /> : <Icon name="Moon" size={16} className="shrink-0" />}
       {isDark ? "Light mode" : "Dark mode"}
     </button>
   );
diff --git a/workbench/control_plane/src/components/ThinkingContainer.tsx b/workbench/control_plane/src/components/ThinkingContainer.tsx
index b9e292aa..810da916 100644
--- a/workbench/control_plane/src/components/ThinkingContainer.tsx
+++ b/workbench/control_plane/src/components/ThinkingContainer.tsx
@@ -19,21 +19,11 @@
  * see ai-company-brain/spec_chat_ux.md.
  */
 
+import AppIcon, { themedIcon } from "@/components/Icon";
+import type { ThemedIcon } from "@/components/Icon";
 import { useEffect, useMemo, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import {
-  Brain,
-  BookOpen,
-  Search,
-  SquarePen,
-  Terminal,
-  GitBranch,
-  Wrench,
-  Check,
-  X,
-  type LucideIcon,
-} from "lucide-react";
 import type { ToolEvent } from "@/components/MarkdownMessage";
 
 interface ThinkingContainerProps {
@@ -56,14 +46,14 @@ type ActionKind = "read" | "edit" | "search" | "run" | "delegate" | "think" | "o
 type IconKey = "brain" | "book" | "search" | "edit" | "terminal" | "branch" | "wrench";
 
 /** Map icon keys to their Lucide line-art components. */
-const ICON_MAP: Record<IconKey, LucideIcon> = {
-  brain: Brain,
-  book: BookOpen,
-  search: Search,
-  edit: SquarePen,
-  terminal: Terminal,
-  branch: GitBranch,
-  wrench: Wrench,
+const ICON_MAP: Record<IconKey, ThemedIcon> = {
+  brain: themedIcon("Brain"),
+  book: themedIcon("BookOpen"),
+  search: themedIcon("Search"),
+  edit: themedIcon("SquarePen"),
+  terminal: themedIcon("Terminal"),
+  branch: themedIcon("GitBranch"),
+  wrench: themedIcon("Wrench"),
 };
 
 function classifyTool(name: string): {
@@ -125,7 +115,7 @@ function ProseTimelineEntry({
 }: {
   text: string;
   live: boolean;
-  icon: LucideIcon;
+  icon: ThemedIcon;
   iconClass: string;
 }) {
   return (
@@ -478,11 +468,11 @@ export default function ThinkingContainer({
       >
         <span className="shrink-0 flex items-center justify-center w-4">
           {isActive ? (
-            hasError ? <X className="text-red-400" size={14} strokeWidth={2} /> : <Brain className="text-sky-400" size={14} strokeWidth={1.5} />
+            hasError ? <AppIcon name="X" className="text-red-400" size={14} strokeWidth={2} /> : <AppIcon name="Brain" className="text-sky-400" size={14} strokeWidth={1.5} />
           ) : hasError ? (
-            <X className="text-red-400" size={14} strokeWidth={2} />
+            <AppIcon name="X" className="text-red-400" size={14} strokeWidth={2} />
           ) : (
-            <Check className="text-emerald-500" size={14} strokeWidth={2} />
+            <AppIcon name="Check" className="text-emerald-500" size={14} strokeWidth={2} />
           )}
         </span>
         <span className={`text-xs font-medium min-w-0 truncate ${isActive ? "chat-shimmer-text" : "text-muted-foreground"}`}>
@@ -540,7 +530,7 @@ export default function ThinkingContainer({
                       key={`r-${item.blockIndex}`}
                       text={item.text}
                       live={live}
-                      icon={Brain}
+                      icon={themedIcon("Brain")}
                       iconClass={live ? "text-purple-400" : "text-muted-foreground/50"}
                     />
                   );
@@ -560,7 +550,7 @@ export default function ThinkingContainer({
                       key={`n-${item.blockIndex}`}
                       text={item.text}
                       live={live}
-                      icon={BookOpen}
+                      icon={themedIcon("BookOpen")}
                       iconClass={live ? "text-sky-400" : "text-muted-foreground/50"}
                     />
                   );
@@ -680,7 +670,7 @@ export default function ThinkingContainer({
 
                               {/* Sub-agent header */}
                               <div className="flex items-center gap-1.5 text-[10px] mb-1">
-                                <GitBranch className="text-rose-400" size={12} strokeWidth={1.5} />
+                                <AppIcon name="GitBranch" className="text-rose-400" size={12} strokeWidth={1.5} />
                                 <span className="text-rose-400 font-medium">{event.subAgentName}</span>
                                 {event.subAgentActive && (
                                   <span className="text-[9px] text-rose-400 animate-pulse">● running</span>
diff --git a/workbench/control_plane/src/components/ToolCardShell.tsx b/workbench/control_plane/src/components/ToolCardShell.tsx
index b12e92fe..92a50305 100644
--- a/workbench/control_plane/src/components/ToolCardShell.tsx
+++ b/workbench/control_plane/src/components/ToolCardShell.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import Icon from "@/components/Icon";
 import { useState } from "react";
-import { X, ChevronDown } from "lucide-react";
 
 /**
  * Shared chrome for an AG-UI tool card: a header row with a collapse toggle, an
@@ -33,7 +33,7 @@ export function ToolCardShell({
           onClick={() => setCollapsed((c) => !c)}
           className="flex items-center gap-1.5 flex-1 min-w-0 text-left text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
         >
-          <ChevronDown
+          <Icon name="ChevronDown"
             size={12}
             className={`flex-shrink-0 transition-transform ${collapsed ? "-rotate-90" : ""}`}
           />
@@ -47,7 +47,7 @@ export function ToolCardShell({
             aria-label="Dismiss"
             className="p-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors flex-shrink-0"
           >
-            <X size={12} />
+            <Icon name="X" size={12} />
           </button>
         )}
       </div>
@@ -77,7 +77,7 @@ export function DismissableCard({
         aria-label="Dismiss"
         className="absolute top-1.5 right-1.5 z-10 p-0.5 rounded text-muted-foreground bg-card/80 opacity-60 hover:opacity-100 hover:text-foreground hover:bg-secondary transition-opacity"
       >
-        <X size={12} />
+        <Icon name="X" size={12} />
       </button>
       {children}
     </div>
diff --git a/workbench/control_plane/src/components/email/EmailToolCards.tsx b/workbench/control_plane/src/components/email/EmailToolCards.tsx
index b8a4f335..9b98ec38 100644
--- a/workbench/control_plane/src/components/email/EmailToolCards.tsx
+++ b/workbench/control_plane/src/components/email/EmailToolCards.tsx
@@ -22,13 +22,9 @@
  * current selection — so they work in the chat app too.
  */
 
+import AppIcon from "@/components/Icon";
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
-import {
-  PenLine, Sparkles, CheckCircle2, Loader2, Send, Reply, Mail, MailOpen, Tag,
-  Archive, FolderInput, Trash2, X, RefreshCw, ExternalLink, Settings2, BookOpen,
-  Clock, Wrench, Search, ChevronDown, Star, Layers,
-} from "lucide-react";
 import type { ToolEvent } from "@/components/MarkdownMessage";
 import {
   saveDraftText, sendDraft, deleteRule, listRules, updateRule,
@@ -72,24 +68,24 @@ const GROUPS_TOOL = "present_email_groups";
  *  These used to render NO card, so their output only appeared in the thinking
  *  timeline ("does not show properly"). They render as a titled, scrollable
  *  full-text card (InfoResultCard) so the whole list is visible. */
-const INFO_META: Record<string, { icon: React.ElementType; label: string }> = {
-  list_accounts: { icon: Mail, label: "Accounts" },
-  get_unread_count: { icon: Mail, label: "Unread counts" },
-  generate_writing_style: { icon: PenLine, label: "Writing style" },
-  list_labels: { icon: Tag, label: "Labels" },
-  list_artifacts: { icon: BookOpen, label: "Files" },
-  get_sender_categories: { icon: Tag, label: "Sender categories" },
-  list_senders: { icon: Mail, label: "Top senders" },
-  get_rules_and_settings: { icon: Sparkles, label: "Rules & settings" },
-  list_rule_history: { icon: Clock, label: "Rule history" },
-  list_knowledge: { icon: BookOpen, label: "Knowledge base" },
-  list_cold_senders: { icon: Archive, label: "Cold senders" },
-  suggest_unsubscribes: { icon: Archive, label: "Unsubscribe candidates" },
-  get_account_overview: { icon: Mail, label: "Account overview" },
-  digest: { icon: Send, label: "Digest" },
-  get_digest: { icon: Send, label: "Digest" },
-  create_rules_from_prompt: { icon: Sparkles, label: "Rules created" },
-  test_rule_match: { icon: Wrench, label: "Rule match test" },
+const INFO_META: Record<string, { icon: string; label: string }> = {
+  list_accounts: { icon: "Mail", label: "Accounts" },
+  get_unread_count: { icon: "Mail", label: "Unread counts" },
+  generate_writing_style: { icon: "PenLine", label: "Writing style" },
+  list_labels: { icon: "Tag", label: "Labels" },
+  list_artifacts: { icon: "BookOpen", label: "Files" },
+  get_sender_categories: { icon: "Tag", label: "Sender categories" },
+  list_senders: { icon: "Mail", label: "Top senders" },
+  get_rules_and_settings: { icon: "Sparkles", label: "Rules & settings" },
+  list_rule_history: { icon: "Clock", label: "Rule history" },
+  list_knowledge: { icon: "BookOpen", label: "Knowledge base" },
+  list_cold_senders: { icon: "Archive", label: "Cold senders" },
+  suggest_unsubscribes: { icon: "Archive", label: "Unsubscribe candidates" },
+  get_account_overview: { icon: "Mail", label: "Account overview" },
+  digest: { icon: "Send", label: "Digest" },
+  get_digest: { icon: "Send", label: "Digest" },
+  create_rules_from_prompt: { icon: "Sparkles", label: "Rules created" },
+  test_rule_match: { icon: "Wrench", label: "Rule match test" },
 };
 const INFO_TOOLS = new Set(Object.keys(INFO_META));
 
@@ -98,16 +94,16 @@ const INFO_TOOLS = new Set(Object.keys(INFO_META));
  *  and rule classification pins from Fix (list_rule_patterns) — each with its own
  *  delete endpoint. */
 type PatternMeta = {
-  icon: React.ElementType;
+  icon: string;
   label: string;
   remove: (id: string) => Promise<void>;
 };
 const PATTERN_META: Record<string, PatternMeta> = {
   list_learned_patterns: {
-    icon: PenLine, label: "Learned writing preferences", remove: deleteLearnedPattern,
+    icon: "PenLine", label: "Learned writing preferences", remove: deleteLearnedPattern,
   },
   list_rule_patterns: {
-    icon: Sparkles, label: "Learned rule patterns", remove: deleteRulePattern,
+    icon: "Sparkles", label: "Learned rule patterns", remove: deleteRulePattern,
   },
 };
 // The consolidated list_patterns tool selects the store via its `kind` arg;
@@ -125,45 +121,45 @@ function patternMeta(e: ToolEvent): PatternMeta {
 }
 
 /** Friendly label + icon for the generic confirmation card (mutating tools). */
-const ACTION_META: Record<string, { icon: React.ElementType; label: string; danger?: boolean }> = {
-  manage_inbox: { icon: Archive, label: "Inbox updated" },
-  apply_labels: { icon: Tag, label: "Labels updated" },
-  move_to_folder: { icon: FolderInput, label: "Moved to folder" },
-  create_label: { icon: Tag, label: "Label ready" },
-  send_email: { icon: Send, label: "Email sent" },
-  send_reply: { icon: Reply, label: "Reply sent" },
-  send_draft: { icon: Send, label: "Draft sent" },
-  delete_rule: { icon: Trash2, label: "Rule deleted", danger: true },
-  reset_rules: { icon: Sparkles, label: "Rules reset", danger: true },
-  run_rules_now: { icon: Wrench, label: "Rules run" },
-  run_rules: { icon: Wrench, label: "Rules run" },
-  update_rule_state: { icon: Sparkles, label: "Rule updated" },
-  resolve_execution: { icon: CheckCircle2, label: "Execution resolved" },
-  learn_rule_pattern: { icon: Sparkles, label: "Pattern learned" },
-  install_default_rules: { icon: Sparkles, label: "Default rules installed" },
-  process_past_emails: { icon: Clock, label: "Processing past mail" },
-  approve_execution: { icon: CheckCircle2, label: "Approved" },
-  reject_execution: { icon: X, label: "Rejected" },
-  undo_execution: { icon: RefreshCw, label: "Undone" },
-  import_artifact: { icon: BookOpen, label: "Artifact imported" },
-  add_knowledge: { icon: BookOpen, label: "Knowledge added" },
-  update_knowledge: { icon: BookOpen, label: "Knowledge updated" },
-  save_knowledge: { icon: BookOpen, label: "Knowledge saved" },
-  delete_knowledge: { icon: Trash2, label: "Knowledge deleted", danger: true },
-  delete_learned_pattern: { icon: Trash2, label: "Pattern forgotten" },
-  delete_rule_pattern: { icon: Trash2, label: "Pattern forgotten" },
-  forget_pattern: { icon: Trash2, label: "Pattern forgotten" },
-  find_follow_ups: { icon: Clock, label: "Follow-ups scanned" },
-  mark_thread_done: { icon: CheckCircle2, label: "Thread updated" },
-  reclassify_reply_zero: { icon: RefreshCw, label: "Reply Zero reclassifying" },
-  unsubscribe_sender: { icon: Archive, label: "Unsubscribed", danger: true },
-  keep_newsletter: { icon: Mail, label: "Newsletter kept" },
-  set_cold_sender: { icon: Archive, label: "Cold sender updated" },
-  set_sender_status: { icon: Tag, label: "Sender updated" },
-  categorize_senders: { icon: Tag, label: "Categorizing senders" },
-  send_digest: { icon: Send, label: "Digest sent" },
-  sync_account: { icon: RefreshCw, label: "Syncing" },
-  resync_account: { icon: RefreshCw, label: "Re-syncing" },
+const ACTION_META: Record<string, { icon: string; label: string; danger?: boolean }> = {
+  manage_inbox: { icon: "Archive", label: "Inbox updated" },
+  apply_labels: { icon: "Tag", label: "Labels updated" },
+  move_to_folder: { icon: "FolderInput", label: "Moved to folder" },
+  create_label: { icon: "Tag", label: "Label ready" },
+  send_email: { icon: "Send", label: "Email sent" },
+  send_reply: { icon: "Reply", label: "Reply sent" },
+  send_draft: { icon: "Send", label: "Draft sent" },
+  delete_rule: { icon: "Trash2", label: "Rule deleted", danger: true },
+  reset_rules: { icon: "Sparkles", label: "Rules reset", danger: true },
+  run_rules_now: { icon: "Wrench", label: "Rules run" },
+  run_rules: { icon: "Wrench", label: "Rules run" },
+  update_rule_state: { icon: "Sparkles", label: "Rule updated" },
+  resolve_execution: { icon: "CheckCircle2", label: "Execution resolved" },
+  learn_rule_pattern: { icon: "Sparkles", label: "Pattern learned" },
+  install_default_rules: { icon: "Sparkles", label: "Default rules installed" },
+  process_past_emails: { icon: "Clock", label: "Processing past mail" },
+  approve_execution: { icon: "CheckCircle2", label: "Approved" },
+  reject_execution: { icon: "X", label: "Rejected" },
+  undo_execution: { icon: "RefreshCw", label: "Undone" },
+  import_artifact: { icon: "BookOpen", label: "Artifact imported" },
+  add_knowledge: { icon: "BookOpen", label: "Knowledge added" },
+  update_knowledge: { icon: "BookOpen", label: "Knowledge updated" },
+  save_knowledge: { icon: "BookOpen", label: "Knowledge saved" },
+  delete_knowledge: { icon: "Trash2", label: "Knowledge deleted", danger: true },
+  delete_learned_pattern: { icon: "Trash2", label: "Pattern forgotten" },
+  delete_rule_pattern: { icon: "Trash2", label: "Pattern forgotten" },
+  forget_pattern: { icon: "Trash2", label: "Pattern forgotten" },
+  find_follow_ups: { icon: "Clock", label: "Follow-ups scanned" },
+  mark_thread_done: { icon: "CheckCircle2", label: "Thread updated" },
+  reclassify_reply_zero: { icon: "RefreshCw", label: "Reply Zero reclassifying" },
+  unsubscribe_sender: { icon: "Archive", label: "Unsubscribed", danger: true },
+  keep_newsletter: { icon: "Mail", label: "Newsletter kept" },
+  set_cold_sender: { icon: "Archive", label: "Cold sender updated" },
+  set_sender_status: { icon: "Tag", label: "Sender updated" },
+  categorize_senders: { icon: "Tag", label: "Categorizing senders" },
+  send_digest: { icon: "Send", label: "Digest sent" },
+  sync_account: { icon: "RefreshCw", label: "Syncing" },
+  resync_account: { icon: "RefreshCw", label: "Re-syncing" },
 };
 
 /** True when this completed tool event has a rich card to render. read_email is
@@ -216,7 +212,7 @@ function ReadGroupCard({ events }: { events: ToolEvent[] }) {
   return (
     <ToolCardShell
       title={`Read ${n} message${n > 1 ? "s" : ""}`}
-      icon={<MailOpen size={12} />}
+      icon={<AppIcon name="MailOpen" size={12} />}
       defaultCollapsed
       onDismiss={() => events.forEach((e) => dismissToolCard(e.id))}
     >
@@ -245,7 +241,7 @@ function ThreadCard({ event, accountId }: { event: ToolEvent; accountId?: string
   return (
     <ToolCardShell
       title={title}
-      icon={<Mail size={12} />}
+      icon={<AppIcon name="Mail" size={12} />}
       defaultCollapsed
       onDismiss={() => dismissToolCard(event.id)}
     >
@@ -295,7 +291,7 @@ function ThreadBody({ event, accountId }: { event: ToolEvent; accountId?: string
   if (state === "loading") {
     return (
       <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground py-2">
-        <Loader2 size={11} className="animate-spin" /> Loading thread…
+        <AppIcon name="Loader2" size={11} className="animate-spin" /> Loading thread…
       </div>
     );
   }
@@ -539,7 +535,7 @@ function DraftResultCard({
   return (
     <div className="rounded-lg border border-primary/40 bg-primary/5 px-2.5 py-2">
       <div className="flex items-center gap-1.5 mb-1.5">
-        <PenLine size={12} className="text-primary" />
+        <AppIcon name="PenLine" size={12} className="text-primary" />
         <span className="text-[11px] font-medium text-foreground">Draft reply</span>
       </div>
       <textarea
@@ -552,11 +548,11 @@ function DraftResultCard({
       <div className="flex items-center gap-2 mt-1.5">
         {state === "sent" ? (
           <span className="flex items-center gap-1 text-[10px] text-emerald-500">
-            <Send size={11} /> Sent
+            <AppIcon name="Send" size={11} /> Sent
           </span>
         ) : state === "saved" ? (
           <span className="flex items-center gap-1 text-[10px] text-emerald-500">
-            <CheckCircle2 size={11} /> Saved to Drafts
+            <AppIcon name="CheckCircle2" size={11} /> Saved to Drafts
           </span>
         ) : (
           <>
@@ -565,7 +561,7 @@ function DraftResultCard({
               disabled={!canAct || state === "saving" || state === "sending"}
               className="flex items-center gap-1 text-[10px] px-2 py-1 rounded-md border border-border text-foreground hover:bg-secondary disabled:opacity-50"
             >
-              {state === "saving" ? <Loader2 size={11} className="animate-spin" /> : <PenLine size={11} />}
+              {state === "saving" ? <AppIcon name="Loader2" size={11} className="animate-spin" /> : <AppIcon name="PenLine" size={11} />}
               Save to Drafts
             </button>
             <button
@@ -573,7 +569,7 @@ function DraftResultCard({
               disabled={!canAct || state === "saving" || state === "sending"}
               className="flex items-center gap-1 text-[10px] px-2 py-1 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
             >
-              {state === "sending" ? <Loader2 size={11} className="animate-spin" /> : <Send size={11} />}
+              {state === "sending" ? <AppIcon name="Loader2" size={11} className="animate-spin" /> : <AppIcon name="Send" size={11} />}
               Send
             </button>
           </>
@@ -671,7 +667,7 @@ function RuleResultCard({
   return (
     <div className="rounded-lg border border-primary/40 bg-primary/5 px-2.5 py-2">
       <div className="flex items-center gap-2 pr-5">
-        <Sparkles size={13} className="text-primary flex-shrink-0" />
+        <AppIcon name="Sparkles" size={13} className="text-primary flex-shrink-0" />
         <div className="min-w-0 flex-1">
           <div className="text-[11px] font-medium text-foreground">
             {created ? "Created rule" : "Updated rule"}: {name}
@@ -697,7 +693,7 @@ function RuleResultCard({
             </button>
           </div>
         )}
-        {state === "busy" && <Loader2 size={12} className="animate-spin text-muted-foreground" />}
+        {state === "busy" && <AppIcon name="Loader2" size={12} className="animate-spin text-muted-foreground" />}
       </div>
 
       {/* When → Then summary (from the tool-call args). For update_rule these
@@ -787,13 +783,13 @@ function SettingsUpdatedCard({ event: e }: { event: ToolEvent }) {
   return (
     <div className="rounded-lg border border-primary/40 bg-primary/5 px-2.5 py-2">
       <div className="flex items-center gap-2 pr-5">
-        <Settings2 size={13} className="text-primary flex-shrink-0" />
+        <AppIcon name="Settings2" size={13} className="text-primary flex-shrink-0" />
         <span className="text-[11px] font-medium text-foreground flex-1">Settings updated</span>
         <button
           onClick={() => router.push("/email")}
           className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded border border-border text-muted-foreground hover:text-foreground hover:bg-secondary"
         >
-          <ExternalLink size={10} /> Open
+          <AppIcon name="ExternalLink" size={10} /> Open
         </button>
       </div>
       {changed.length > 0 && (
@@ -870,13 +866,13 @@ function parseEmailRows(result: string): ParsedRow[] {
   return rows;
 }
 
-const LIST_META: Record<string, { icon: React.ElementType; label: string }> = {
-  query_inbox: { icon: Mail, label: "Inbox results" },
-  find_priority: { icon: Clock, label: "Priority emails" },
-  get_important_emails: { icon: Clock, label: "Important to check" },
-  search_emails: { icon: Search, label: "Search results" },
-  find_urgent: { icon: Clock, label: "Urgent / needs attention" },
-  find_needs_reply: { icon: Reply, label: "Needs a reply" },
+const LIST_META: Record<string, { icon: string; label: string }> = {
+  query_inbox: { icon: "Mail", label: "Inbox results" },
+  find_priority: { icon: "Clock", label: "Priority emails" },
+  get_important_emails: { icon: "Clock", label: "Important to check" },
+  search_emails: { icon: "Search", label: "Search results" },
+  find_urgent: { icon: "Clock", label: "Urgent / needs attention" },
+  find_needs_reply: { icon: "Reply", label: "Needs a reply" },
 };
 
 /** Short per-tool chip shown on a row when several list tools are merged into
@@ -958,13 +954,13 @@ function EmailListCard({ events }: { events: ToolEvent[] }) {
   const distinctProv = new Set(rows.flatMap((r) => r.prov ?? []));
   const showProv = multi || distinctProv.size > 1;
   const meta = !multi
-    ? LIST_META[names[0]] ?? { icon: Mail, label: "Emails" }
+    ? LIST_META[names[0]] ?? { icon: "Mail", label: "Emails" }
     : names.some((n) =>
           n === "find_priority" || n === "get_important_emails" ||
           n === "find_needs_reply" || n === "find_urgent")
-      ? { icon: Clock, label: "High-priority emails" }
-      : { icon: Mail, label: "Emails" };
-  const Icon = meta.icon;
+      ? { icon: "Clock", label: "High-priority emails" }
+      : { icon: "Mail", label: "Emails" };
+  const iconName = meta.icon;
   const shown = expanded ? rows : rows.slice(0, 5);
 
   const set = (id: string, s: RowStatus) =>
@@ -1000,7 +996,7 @@ function EmailListCard({ events }: { events: ToolEvent[] }) {
     <div className="rounded-lg border border-sidebar-border bg-secondary/40 px-2.5 py-2">
       {/* pr-5 leaves room for the dismiss (X) overlay at the card's corner. */}
       <div className="flex items-center gap-1.5 mb-1.5 pr-5">
-        <Icon size={12} className="text-primary" />
+        <AppIcon name={iconName} size={12} className="text-primary" />
         <span className="text-[11px] font-medium text-foreground">{meta.label}</span>
         <span className="text-[10px] text-muted-foreground">({rows.length})</span>
         {actionable.length > 1 && (
@@ -1010,14 +1006,14 @@ function EmailListCard({ events }: { events: ToolEvent[] }) {
               title="Mark all as read"
               className="flex items-center gap-0.5 text-[9px] px-1.5 py-0.5 rounded border border-border text-muted-foreground hover:text-foreground hover:bg-secondary"
             >
-              <MailOpen size={10} /> Read all
+              <AppIcon name="MailOpen" size={10} /> Read all
             </button>
             <button
               onClick={() => actionable.forEach((r) => archive(r.id))}
               title="Archive all"
               className="flex items-center gap-0.5 text-[9px] px-1.5 py-0.5 rounded border border-border text-muted-foreground hover:text-foreground hover:bg-secondary"
             >
-              <Archive size={10} /> Archive all
+              <AppIcon name="Archive" size={10} /> Archive all
             </button>
           </div>
         )}
@@ -1124,7 +1120,7 @@ function EmailGroupsCard({ event: e }: { event: ToolEvent }) {
   return (
     <div className="rounded-lg border border-sidebar-border bg-secondary/40 px-2.5 py-2 min-w-0 overflow-hidden">
       <div className="flex items-center gap-1.5 mb-2 pr-5">
-        <Layers size={12} className="text-primary" />
+        <AppIcon name="Layers" size={12} className="text-primary" />
         <span className="text-[11px] font-medium text-foreground">
           Categorized emails
         </span>
@@ -1173,7 +1169,7 @@ function GroupSection({
           aria-expanded={open}
           className="flex items-center gap-1.5 flex-1 min-w-0 text-left"
         >
-          <ChevronDown
+          <AppIcon name="ChevronDown"
             size={11}
             className={`text-muted-foreground flex-shrink-0 transition-transform ${open ? "" : "-rotate-90"}`}
           />
@@ -1196,14 +1192,14 @@ function GroupSection({
               title="Mark all in this group as read"
               className="flex items-center gap-0.5 text-[9px] px-1.5 py-0.5 rounded border border-border text-muted-foreground hover:text-foreground hover:bg-secondary"
             >
-              <MailOpen size={10} /> Read all
+              <AppIcon name="MailOpen" size={10} /> Read all
             </button>
             <button
               onClick={() => actionable.forEach((r) => onArchive(r.id))}
               title="Archive all in this group"
               className="flex items-center gap-0.5 text-[9px] px-1.5 py-0.5 rounded border border-border text-muted-foreground hover:text-foreground hover:bg-secondary"
             >
-              <Archive size={10} /> Archive all
+              <AppIcon name="Archive" size={10} /> Archive all
             </button>
           </div>
         )}
@@ -1322,7 +1318,7 @@ function EmailRow({
           aria-expanded={open}
           className="flex items-center gap-1.5 flex-1 min-w-0 text-left px-1.5 py-1 rounded-md hover:bg-secondary/60"
         >
-          <ChevronDown
+          <AppIcon name="ChevronDown"
             size={11}
             className={`text-muted-foreground flex-shrink-0 transition-transform ${open ? "" : "-rotate-90"}`}
           />
@@ -1361,10 +1357,10 @@ function EmailRow({
         <div className="flex items-center flex-shrink-0 mr-0.5">
           {done ? (
             <span className="flex items-center gap-0.5 text-[9px] text-emerald-500 px-1">
-              <CheckCircle2 size={10} /> {archived ? "Archived" : "Read"}
+              <AppIcon name="CheckCircle2" size={10} /> {archived ? "Archived" : "Read"}
             </span>
           ) : status === "busy" ? (
-            <Loader2 size={12} className="animate-spin text-muted-foreground mx-1" />
+            <AppIcon name="Loader2" size={12} className="animate-spin text-muted-foreground mx-1" />
           ) : (
             <>
               <button
@@ -1377,9 +1373,9 @@ function EmailRow({
                 }`}
               >
                 {catBusy ? (
-                  <Loader2 size={11} className="animate-spin" />
+                  <AppIcon name="Loader2" size={11} className="animate-spin" />
                 ) : (
-                  <Tag size={11} />
+                  <AppIcon name="Tag" size={11} />
                 )}
               </button>
               <button
@@ -1388,7 +1384,7 @@ function EmailRow({
                 aria-label="Mark as read"
                 className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary"
               >
-                <MailOpen size={11} />
+                <AppIcon name="MailOpen" size={11} />
               </button>
               <button
                 onClick={archive}
@@ -1396,7 +1392,7 @@ function EmailRow({
                 aria-label="Archive"
                 className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary"
               >
-                <Archive size={11} />
+                <AppIcon name="Archive" size={11} />
               </button>
               <button
                 onClick={() => openEmail(row.id)}
@@ -1404,7 +1400,7 @@ function EmailRow({
                 aria-label="Open in inbox"
                 className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary"
               >
-                <ExternalLink size={11} />
+                <AppIcon name="ExternalLink" size={11} />
               </button>
             </>
           )}
@@ -1428,7 +1424,7 @@ function EmailRow({
         <div className="px-2 pb-2 pt-1.5 border-t border-border/50">
           {loading ? (
             <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground py-2">
-              <Loader2 size={11} className="animate-spin" /> Loading email…
+              <AppIcon name="Loader2" size={11} className="animate-spin" /> Loading email…
             </div>
           ) : error ? (
             <div className="text-[10px] text-muted-foreground py-1">
@@ -1471,7 +1467,7 @@ function EmailPreviewCard({ event: e }: { event: ToolEvent }) {
     return (
       <div className="rounded-lg border border-sidebar-border bg-secondary/40 px-2.5 py-2">
         <div className="flex items-center gap-2">
-          <Mail size={13} className="text-primary flex-shrink-0" />
+          <AppIcon name="Mail" size={13} className="text-primary flex-shrink-0" />
           <div className="min-w-0 flex-1">
             <div className="text-[11px] font-medium text-foreground truncate">{subject}</div>
             {from && <div className="text-[10px] text-muted-foreground truncate">{from}</div>}
@@ -1516,7 +1512,7 @@ function LabelUpdateCard({ event: e }: { event: ToolEvent }) {
       }`}
     >
       <div className="flex items-center gap-1.5">
-        <Tag size={12} className={failed ? "text-destructive" : "text-primary"} />
+        <AppIcon name="Tag" size={12} className={failed ? "text-destructive" : "text-primary"} />
         <span className="text-[11px] font-medium text-foreground">
           {failed ? "Couldn't update labels" : "Labels updated"}
           {count > 0 && (
@@ -1556,15 +1552,15 @@ function LabelUpdateCard({ event: e }: { event: ToolEvent }) {
 /** Per-action label/icon for manage_inbox (archive/trash/read/star/…). */
 const INBOX_ACTION_META: Record<
   string,
-  { icon: React.ElementType; verb: string; danger?: boolean }
+  { icon: string; verb: string; danger?: boolean }
 > = {
-  archive: { icon: Archive, verb: "Archived" },
-  trash: { icon: Trash2, verb: "Trashed", danger: true },
-  read: { icon: MailOpen, verb: "Marked read" },
-  unread: { icon: Mail, verb: "Marked unread" },
-  star: { icon: Star, verb: "Starred" },
-  unstar: { icon: Star, verb: "Unstarred" },
-  move: { icon: FolderInput, verb: "Moved" },
+  archive: { icon: "Archive", verb: "Archived" },
+  trash: { icon: "Trash2", verb: "Trashed", danger: true },
+  read: { icon: "MailOpen", verb: "Marked read" },
+  unread: { icon: "Mail", verb: "Marked unread" },
+  star: { icon: "Star", verb: "Starred" },
+  unstar: { icon: "Star", verb: "Unstarred" },
+  move: { icon: "FolderInput", verb: "Moved" },
 };
 
 /** manage_inbox result — names the action + email count ("Archived 3 emails")
@@ -1578,7 +1574,7 @@ function ManageInboxCard({ event: e }: { event: ToolEvent }) {
   // Unknown action or no count → fall back to the generic confirmation.
   if (!meta || count === 0) return <ActionResultCard event={e} />;
   const failed = e.status === "error";
-  const Icon = failed ? X : meta.icon;
+  const iconName = failed ? "X" : meta.icon;
 
   return (
     <div
@@ -1596,7 +1592,7 @@ function ManageInboxCard({ event: e }: { event: ToolEvent }) {
             failed ? "text-destructive" : meta.danger ? "text-amber-500" : "text-emerald-500"
           }
         >
-          <Icon size={13} />
+          <AppIcon name={iconName} size={13} />
         </span>
         <span className="text-[11px] font-medium text-foreground">
           {failed ? `Couldn't ${meta.verb.toLowerCase()}` : meta.verb}{" "}
@@ -1644,9 +1640,9 @@ function PatternListCard({
   meta,
 }: {
   event: ToolEvent;
-  meta: { icon: React.ElementType; label: string; remove: (id: string) => Promise<void> };
+  meta: { icon: string; label: string; remove: (id: string) => Promise<void> };
 }) {
-  const Icon = meta.icon;
+  const iconName = meta.icon;
   const [rows, setRows] = useState<PatternRow[]>(() => parsePatternRows(e.result || ""));
   const [busy, setBusy] = useState<string | null>(null);
   const [error, setError] = useState(false);
@@ -1669,7 +1665,7 @@ function PatternListCard({
     return (
       <ToolCardShell
         title={meta.label}
-        icon={<Icon size={12} />}
+        icon={<AppIcon name={iconName} size={12} />}
         onDismiss={() => dismissToolCard(e.id)}
       >
         <div className="text-[11px] text-muted-foreground whitespace-pre-wrap break-words">
@@ -1682,7 +1678,7 @@ function PatternListCard({
   return (
     <ToolCardShell
       title={`${meta.label} (${rows.length})`}
-      icon={<Icon size={12} />}
+      icon={<AppIcon name={iconName} size={12} />}
       onDismiss={() => dismissToolCard(e.id)}
     >
       <div className="space-y-1">
@@ -1710,9 +1706,9 @@ function PatternListCard({
               className="p-0.5 rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10 flex-shrink-0 disabled:opacity-50"
             >
               {busy === r.id ? (
-                <Loader2 size={11} className="animate-spin" />
+                <AppIcon name="Loader2" size={11} className="animate-spin" />
               ) : (
-                <Trash2 size={11} />
+                <AppIcon name="Trash2" size={11} />
               )}
             </button>
           </div>
@@ -1852,7 +1848,7 @@ function RulesOverviewCard({
   return (
     <ToolCardShell
       title={`Rules & settings (${rules.length})`}
-      icon={<Sparkles size={12} />}
+      icon={<AppIcon name="Sparkles" size={12} />}
       onDismiss={() => dismissToolCard(e.id)}
     >
       <div className="space-y-1 max-h-80 overflow-y-auto overflow-x-hidden scrollbar-thin pr-0.5">
@@ -1874,7 +1870,7 @@ function RulesOverviewCard({
                 </span>
               )}
               {busy === r.id ? (
-                <Loader2
+                <AppIcon name="Loader2"
                   size={11}
                   className="animate-spin text-muted-foreground flex-shrink-0"
                 />
@@ -1904,7 +1900,7 @@ function RulesOverviewCard({
                     aria-label="Delete this rule"
                     className="p-0.5 rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10 flex-shrink-0"
                   >
-                    <Trash2 size={11} />
+                    <AppIcon name="Trash2" size={11} />
                   </button>
                 </>
               )}
@@ -1954,7 +1950,7 @@ function LabelsCard({ event: e }: { event: ToolEvent }) {
   return (
     <ToolCardShell
       title={`Labels (${names.length})`}
-      icon={<Tag size={12} />}
+      icon={<AppIcon name="Tag" size={12} />}
       onDismiss={() => dismissToolCard(e.id)}
     >
       <div className="flex flex-wrap gap-1">
@@ -1974,27 +1970,27 @@ function LabelsCard({ event: e }: { event: ToolEvent }) {
  *  collapse + dismiss from ToolCardShell. Counts the bullet lines for the title.
  */
 /** Label for the consolidated list_senders tool, chosen by its `view` arg. */
-const SENDER_VIEW_META: Record<string, { icon: React.ElementType; label: string }> = {
-  top: { icon: Mail, label: "Top senders" },
-  categories: { icon: Tag, label: "Sender categories" },
-  unsubscribe: { icon: Archive, label: "Unsubscribe candidates" },
-  cold: { icon: Archive, label: "Cold senders" },
+const SENDER_VIEW_META: Record<string, { icon: string; label: string }> = {
+  top: { icon: "Mail", label: "Top senders" },
+  categories: { icon: "Tag", label: "Sender categories" },
+  unsubscribe: { icon: "Archive", label: "Unsubscribe candidates" },
+  cold: { icon: "Archive", label: "Cold senders" },
 };
 
 function InfoResultCard({ event: e }: { event: ToolEvent }) {
-  let meta = INFO_META[e.name] ?? { icon: Wrench, label: e.name.replace(/_/g, " ") };
+  let meta = INFO_META[e.name] ?? { icon: "Wrench", label: e.name.replace(/_/g, " ") };
   if (e.name === "list_senders") {
     const view = String((e.args as Record<string, unknown> | undefined)?.view ?? "top");
     meta = SENDER_VIEW_META[view] ?? SENDER_VIEW_META.top;
   }
-  const Icon = meta.icon;
+  const iconName = meta.icon;
   const text = (e.result || "").trim();
   const bullets = text.split("\n").filter((l) => l.trim().startsWith("•")).length;
   const title = bullets > 0 ? `${meta.label} (${bullets})` : meta.label;
   return (
     <ToolCardShell
       title={title}
-      icon={<Icon size={12} />}
+      icon={<AppIcon name={iconName} size={12} />}
       onDismiss={() => dismissToolCard(e.id)}
     >
       <div className="text-[11px] whitespace-pre-wrap break-words text-foreground/90 max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin">
@@ -2008,9 +2004,9 @@ function InfoResultCard({ event: e }: { event: ToolEvent }) {
 
 /** Confirmation card for any mutating tool — icon + label + result summary. */
 function ActionResultCard({ event: e }: { event: ToolEvent }) {
-  const meta = ACTION_META[e.name] ?? { icon: Wrench, label: e.name.replace(/_/g, " ") };
+  const meta = ACTION_META[e.name] ?? { icon: "Wrench", label: e.name.replace(/_/g, " ") };
   const failed = e.status === "error";
-  const Icon = failed ? X : meta.icon;
+  const iconName = failed ? "X" : meta.icon;
   const result = (e.result || "").trim();
   const detail = result.length > 160 ? result.slice(0, 160) + "…" : result;
 
@@ -2030,7 +2026,7 @@ function ActionResultCard({ event: e }: { event: ToolEvent }) {
             failed ? "text-destructive" : meta.danger ? "text-amber-500" : "text-emerald-500"
           }`}
         >
-          <Icon size={13} />
+          <AppIcon name={iconName} size={13} />
         </span>
         <div className="min-w-0 flex-1">
           <div className="text-[11px] font-medium text-foreground">{meta.label}</div>
diff --git a/workbench/control_plane/src/components/room/PresenceRail.tsx b/workbench/control_plane/src/components/room/PresenceRail.tsx
index d7c2181b..fa01bf46 100644
--- a/workbench/control_plane/src/components/room/PresenceRail.tsx
+++ b/workbench/control_plane/src/components/room/PresenceRail.tsx
@@ -14,18 +14,8 @@
  * reading it.
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useState } from "react";
-import {
-  Bot,
-  Eye,
-  KeyRound,
-  Loader2,
-  Lock,
-  Plus,
-  Trash2,
-  UserPlus,
-  X,
-} from "lucide-react";
 import { AgentAvatar, useAgentAvatars } from "@/components/AgentAvatar";
 import {
   addRoomAgent,
@@ -119,7 +109,7 @@ export function PresenceRail({
           className="self-end rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground lg:hidden"
           aria-label="Close room panel"
         >
-          <X className="h-4 w-4" />
+          <Icon name="X" className="h-4 w-4" />
         </button>
       )}
 
@@ -194,7 +184,7 @@ export function PresenceRail({
               className="ml-auto rounded-md p-0.5 text-muted-foreground hover:bg-secondary hover:text-foreground"
               title="Add an agent to this room"
             >
-              <Plus className="h-3.5 w-3.5" />
+              <Icon name="Plus" className="h-3.5 w-3.5" />
             </button>
           )}
         </h3>
@@ -205,7 +195,7 @@ export function PresenceRail({
               <AgentAvatar
                 libraryId={avatars[a.agentName] ?? null}
                 size={24}
-                fallback={<Bot className="h-3.5 w-3.5 text-muted-foreground" />}
+                fallback={<Icon name="Bot" className="h-3.5 w-3.5 text-muted-foreground" />}
               />
               <span className="min-w-0 flex-1">
                 <span className="block truncate text-[13px] text-foreground">
@@ -229,9 +219,9 @@ export function PresenceRail({
                   title="Remove from this room"
                 >
                   {busy === a.agentName ? (
-                    <Loader2 className="h-3 w-3 animate-spin" />
+                    <Icon name="Loader2" className="h-3 w-3 animate-spin" />
                   ) : (
-                    <Trash2 className="h-3 w-3" />
+                    <Icon name="Trash2" className="h-3 w-3" />
                   )}
                 </button>
               )}
@@ -253,7 +243,7 @@ export function PresenceRail({
                   }
                   className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] text-muted-foreground hover:bg-secondary hover:text-foreground disabled:opacity-50"
                 >
-                  <UserPlus className="h-3 w-3" />
+                  <Icon name="UserPlus" className="h-3 w-3" />
                   {name}
                 </button>
               </li>
@@ -304,17 +294,17 @@ export function PresenceRail({
         </h3>
         <ul className="space-y-1.5 text-[11px]">
           <li className="flex items-center gap-2 px-1">
-            <Eye className="h-3 w-3 shrink-0 text-muted-foreground" />
+            <Icon name="Eye" className="h-3 w-3 shrink-0 text-muted-foreground" />
             <span className="text-muted-foreground">Transcript, tools, files</span>
             <span className="ml-auto text-foreground">Everyone here</span>
           </li>
           <li className="flex items-center gap-2 px-1">
-            <Lock className="h-3 w-3 shrink-0 text-muted-foreground" />
+            <Icon name="Lock" className="h-3 w-3 shrink-0 text-muted-foreground" />
             <span className="text-muted-foreground">Your personal memory</span>
             <span className="ml-auto text-foreground">Private</span>
           </li>
           <li className="flex items-center gap-2 px-1">
-            <KeyRound className="h-3 w-3 shrink-0 text-muted-foreground" />
+            <Icon name="KeyRound" className="h-3 w-3 shrink-0 text-muted-foreground" />
             <span className="text-muted-foreground">Credentials and keys</span>
             <span className="ml-auto text-foreground">Never</span>
           </li>
diff --git a/workbench/control_plane/src/components/room/RoomHeader.tsx b/workbench/control_plane/src/components/room/RoomHeader.tsx
index 083c7f6a..da4948f3 100644
--- a/workbench/control_plane/src/components/room/RoomHeader.tsx
+++ b/workbench/control_plane/src/components/room/RoomHeader.tsx
@@ -13,8 +13,8 @@
  * that live only in a settings page are neither.
  */
 
+import Icon from "@/components/Icon";
 import { useState } from "react";
-import { AlertTriangle, Eye, Share2, Users } from "lucide-react";
 import {
   capabilityLabel,
   isShared as roomIsShared,
@@ -70,7 +70,7 @@ export function RoomHeader({
 
           {watching && (
             <span className="inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-[11px] text-muted-foreground">
-              <Eye className="h-3 w-3" />
+              <Icon name="Eye" className="h-3 w-3" />
               Watching
             </span>
           )}
@@ -80,7 +80,7 @@ export function RoomHeader({
             className="ml-auto inline-flex items-center gap-1.5 rounded-lg border border-border px-2.5 py-1 text-xs text-muted-foreground tech-transition hover:border-primary hover:text-foreground"
             title={shared ? "Manage who is in this room" : "Share this conversation"}
           >
-            {shared ? <Users className="h-3.5 w-3.5" /> : <Share2 className="h-3.5 w-3.5" />}
+            {shared ? <Icon name="Users" className="h-3.5 w-3.5" /> : <Icon name="Share2" className="h-3.5 w-3.5" />}
             {shared ? "Room" : "Share"}
           </button>
         </div>
@@ -88,7 +88,7 @@ export function RoomHeader({
         {/* The cap, stated. This is the one thing the header exists to say. */}
         {shared && suspended.length > 0 && (
           <p className="flex items-start gap-1.5 rounded-lg border border-destructive/40 bg-destructive/10 px-2.5 py-1.5 text-[11px] text-destructive">
-            <AlertTriangle className="mt-0.5 h-3 w-3 shrink-0" />
+            <Icon name="AlertTriangle" className="mt-0.5 h-3 w-3 shrink-0" />
             <span>
               {suspended.map((e) => e.split("@")[0]).join(", ")} is suspended, so
               the agents here can reach nothing until they are removed from the
@@ -99,7 +99,7 @@ export function RoomHeader({
 
         {shared && suspended.length === 0 && capped.length > 0 && !compact && (
           <p className="flex items-start gap-1.5 rounded-lg border border-warning/40 bg-warning/10 px-2.5 py-1.5 text-[11px] text-muted-foreground">
-            <AlertTriangle className="mt-0.5 h-3 w-3 shrink-0 text-warning" />
+            <Icon name="AlertTriangle" className="mt-0.5 h-3 w-3 shrink-0 text-warning" />
             <span>
               Unavailable in this room:{" "}
               <span className="text-foreground">
diff --git a/workbench/control_plane/src/components/room/ShareSheet.tsx b/workbench/control_plane/src/components/room/ShareSheet.tsx
index 35e1bc39..0fbaf982 100644
--- a/workbench/control_plane/src/components/room/ShareSheet.tsx
+++ b/workbench/control_plane/src/components/room/ShareSheet.tsx
@@ -19,17 +19,8 @@
  * mysterious failure three turns later.
  */
 
+import Icon from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  AlertTriangle,
-  Check,
-  Globe,
-  Loader2,
-  Search,
-  Shield,
-  Users,
-  X,
-} from "lucide-react";
 import {
   addParticipant,
   capabilityLabel,
@@ -123,7 +114,7 @@ export function ShareSheet({
         onClick={(e) => e.stopPropagation()}
       >
         <header className="flex items-center gap-3 border-b border-border px-5 py-4">
-          <Users className="h-4 w-4 text-primary" />
+          <Icon name="Users" className="h-4 w-4 text-primary" />
           <div className="flex-1">
             <h2 className="text-sm font-semibold text-foreground">
               Share this conversation
@@ -137,14 +128,14 @@ export function ShareSheet({
             className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
             aria-label="Close"
           >
-            <X className="h-4 w-4" />
+            <Icon name="X" className="h-4 w-4" />
           </button>
         </header>
 
         <div className="max-h-[70vh] overflow-y-auto px-5 py-4">
           {/* ── Who ──────────────────────────────────────────────────────── */}
           <div className="relative">
-            <Search className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+            <Icon name="Search" className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
             <input
               ref={inputRef}
               value={query}
@@ -190,7 +181,7 @@ export function ShareSheet({
                   >
                     {d.kind === "group" ? (
                       <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-secondary text-muted-foreground">
-                        <Users className="h-3 w-3" />
+                        <Icon name="Users" className="h-3 w-3" />
                       </span>
                     ) : (
                       <PersonAvatar
@@ -210,7 +201,7 @@ export function ShareSheet({
                       </span>
                     </span>
                     {busy === d.subject && (
-                      <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
+                      <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
                     )}
                   </button>
                 </li>
@@ -245,9 +236,9 @@ export function ShareSheet({
                   ) : (
                     <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-secondary text-muted-foreground">
                       {p.kind === "org" ? (
-                        <Globe className="h-3 w-3" />
+                        <Icon name="Globe" className="h-3 w-3" />
                       ) : (
-                        <Users className="h-3 w-3" />
+                        <Icon name="Users" className="h-3 w-3" />
                       )}
                     </span>
                   )}
@@ -301,7 +292,7 @@ export function ShareSheet({
                       title={isYou ? "Leave this room" : "Remove"}
                       className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-destructive"
                     >
-                      <X className="h-3.5 w-3.5" />
+                      <Icon name="X" className="h-3.5 w-3.5" />
                     </button>
                   )}
                 </li>
@@ -341,7 +332,7 @@ export function ShareSheet({
                   >
                     <span className="flex items-center gap-1.5 font-medium">
                       {room.settings.historyVisibility === value && (
-                        <Check className="h-3 w-3 text-primary" />
+                        <Icon name="Check" className="h-3 w-3 text-primary" />
                       )}
                       {label}
                     </span>
@@ -358,20 +349,20 @@ export function ShareSheet({
           <div className="rounded-lg border border-border bg-background/60 p-3">
             {room.cap.degraded ? (
               <p className="flex items-start gap-2 text-xs text-muted-foreground">
-                <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-warning" />
+                <Icon name="AlertTriangle" className="mt-0.5 h-3.5 w-3.5 shrink-0 text-warning" />
                 Could not work out what this room can reach right now. Treat the
                 list as unknown rather than as unrestricted.
               </p>
             ) : cappedCount === 0 ? (
               <p className="flex items-start gap-2 text-xs text-muted-foreground">
-                <Shield className="mt-0.5 h-3.5 w-3.5 shrink-0 text-success" />
+                <Icon name="Shield" className="mt-0.5 h-3.5 w-3.5 shrink-0 text-success" />
                 Everyone here holds the same access, so the agents lose nothing
                 by this conversation being shared.
               </p>
             ) : (
               <>
                 <p className="flex items-start gap-2 text-xs text-foreground">
-                  <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-warning" />
+                  <Icon name="AlertTriangle" className="mt-0.5 h-3.5 w-3.5 shrink-0 text-warning" />
                   A shared run acts with what <em>everyone</em> here holds, so
                   these are switched off in this conversation:
                 </p>
@@ -401,7 +392,7 @@ export function ShareSheet({
           </div>
 
           <p className="mt-4 flex items-start gap-2 text-[11px] text-faint">
-            <Shield className="mt-0.5 h-3 w-3 shrink-0" />
+            <Icon name="Shield" className="mt-0.5 h-3 w-3 shrink-0" />
             Your private memory is never used in a shared conversation, and no
             credential or key is ever visible to anyone here.
           </p>
diff --git a/workbench/control_plane/src/components/tasks/TaskToolCards.tsx b/workbench/control_plane/src/components/tasks/TaskToolCards.tsx
index 8a752a46..2eb253e3 100644
--- a/workbench/control_plane/src/components/tasks/TaskToolCards.tsx
+++ b/workbench/control_plane/src/components/tasks/TaskToolCards.tsx
@@ -22,13 +22,9 @@
  * `full_id: <uuid>` (lists) or `(id: <uuid>)` (schedules) for exactly this.
  */
 
+import AppIcon from "@/components/Icon";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import {
-  CalendarClock, CalendarDays, CheckCircle2, ClipboardList, ExternalLink,
-  FolderKanban, Inbox, ListChecks, ListTree, Loader2, Milestone, PenLine,
-  RefreshCw, Send, Sparkles, Star, Timer, Trash2, Users, Wrench, X, Zap,
-} from "lucide-react";
 import type { ToolEvent } from "@/components/MarkdownMessage";
 import { apiPatchItem, apiAgentPlanToday } from "@/app/tasks/lib/api";
 import { useTaskStore } from "@/app/tasks/lib/taskStore";
@@ -49,48 +45,48 @@ const PLAN_META: Record<string, { label: string; kind: "plan-today" | "replan-to
 };
 
 /** Read-only tools that return a titled text blob. */
-const INFO_META: Record<string, { icon: React.ElementType; label: string }> = {
-  gtd_inbox_insights: { icon: Inbox, label: "Inbox health" },
-  gtd_day_digest: { icon: CalendarDays, label: "Day summary" },
-  gtd_estimate_stats: { icon: Timer, label: "Estimate accuracy" },
-  gtd_accounts: { icon: Milestone, label: "Connected workspaces" },
-  gtd_people: { icon: Users, label: "People" },
-  gtd_list_projects: { icon: FolderKanban, label: "Projects" },
-  gtd_subtasks: { icon: ListTree, label: "Subtasks" },
-  gtd_detail: { icon: ClipboardList, label: "Task detail" },
-  gtd_clarify: { icon: Sparkles, label: "Clarify proposal" },
+const INFO_META: Record<string, { icon: string; label: string }> = {
+  gtd_inbox_insights: { icon: "Inbox", label: "Inbox health" },
+  gtd_day_digest: { icon: "CalendarDays", label: "Day summary" },
+  gtd_estimate_stats: { icon: "Timer", label: "Estimate accuracy" },
+  gtd_accounts: { icon: "Milestone", label: "Connected workspaces" },
+  gtd_people: { icon: "Users", label: "People" },
+  gtd_list_projects: { icon: "FolderKanban", label: "Projects" },
+  gtd_subtasks: { icon: "ListTree", label: "Subtasks" },
+  gtd_detail: { icon: "ClipboardList", label: "Task detail" },
+  gtd_clarify: { icon: "Sparkles", label: "Clarify proposal" },
 };
 const INFO_TOOLS = new Set(Object.keys(INFO_META));
 
 /** Friendly label + icon for the generic confirmation card (mutating tools). */
-const ACTION_META: Record<string, { icon: React.ElementType; label: string; danger?: boolean }> = {
-  gtd_capture: { icon: Inbox, label: "Captured to inbox" },
-  gtd_capture_many: { icon: Inbox, label: "Captured to inbox" },
-  gtd_organize: { icon: ListChecks, label: "Organized" },
-  gtd_update: { icon: PenLine, label: "Task updated" },
-  gtd_complete: { icon: CheckCircle2, label: "Task completed" },
-  gtd_move: { icon: Milestone, label: "Task moved" },
-  gtd_set_stage: { icon: Milestone, label: "Stage changed" },
-  gtd_delegate: { icon: Send, label: "Delegated" },
-  gtd_add_subtasks: { icon: ListTree, label: "Subtasks added" },
-  gtd_archive: { icon: Trash2, label: "Archived", danger: true },
-  gtd_schedule: { icon: CalendarClock, label: "Scheduled" },
-  gtd_unschedule: { icon: CalendarClock, label: "Unscheduled" },
-  gtd_set_one_thing: { icon: Star, label: "One Thing set" },
-  gtd_sync: { icon: RefreshCw, label: "Workspaces synced" },
-  gtd_plan_project: { icon: FolderKanban, label: "Project plan" },
+const ACTION_META: Record<string, { icon: string; label: string; danger?: boolean }> = {
+  gtd_capture: { icon: "Inbox", label: "Captured to inbox" },
+  gtd_capture_many: { icon: "Inbox", label: "Captured to inbox" },
+  gtd_organize: { icon: "ListChecks", label: "Organized" },
+  gtd_update: { icon: "PenLine", label: "Task updated" },
+  gtd_complete: { icon: "CheckCircle2", label: "Task completed" },
+  gtd_move: { icon: "Milestone", label: "Task moved" },
+  gtd_set_stage: { icon: "Milestone", label: "Stage changed" },
+  gtd_delegate: { icon: "Send", label: "Delegated" },
+  gtd_add_subtasks: { icon: "ListTree", label: "Subtasks added" },
+  gtd_archive: { icon: "Trash2", label: "Archived", danger: true },
+  gtd_schedule: { icon: "CalendarClock", label: "Scheduled" },
+  gtd_unschedule: { icon: "CalendarClock", label: "Unscheduled" },
+  gtd_set_one_thing: { icon: "Star", label: "One Thing set" },
+  gtd_sync: { icon: "RefreshCw", label: "Workspaces synced" },
+  gtd_plan_project: { icon: "FolderKanban", label: "Project plan" },
 };
 
 /** Context-sensitive relabels driven by the call's args. */
-function actionMeta(e: ToolEvent): { icon: React.ElementType; label: string; danger?: boolean } {
+function actionMeta(e: ToolEvent): { icon: string; label: string; danger?: boolean } {
   const args = (e.args ?? {}) as Record<string, unknown>;
   if (e.name === "gtd_complete" && args.undo)
-    return { icon: RefreshCw, label: "Task reopened" };
+    return { icon: "RefreshCw", label: "Task reopened" };
   if (e.name === "gtd_archive" && args.restore)
-    return { icon: RefreshCw, label: "Task restored" };
+    return { icon: "RefreshCw", label: "Task restored" };
   if (e.name === "gtd_set_one_thing" && !String(args.item_id ?? "").trim())
-    return { icon: Star, label: "One Thing cleared" };
-  return ACTION_META[e.name] ?? { icon: Wrench, label: e.name.replace(/_/g, " ") };
+    return { icon: "Star", label: "One Thing cleared" };
+  return ACTION_META[e.name] ?? { icon: "Wrench", label: e.name.replace(/_/g, " ") };
 }
 
 function hasTaskCard(e: ToolEvent): boolean {
@@ -209,10 +205,10 @@ function TaskRowView({ row }: { row: TaskRow }) {
       <div className="flex items-center flex-shrink-0 mr-0.5">
         {done ? (
           <span className="flex items-center gap-0.5 text-[9px] text-emerald-500 px-1">
-            <CheckCircle2 size={10} /> Done
+            <AppIcon name="CheckCircle2" size={10} /> Done
           </span>
         ) : state === "busy" ? (
-          <Loader2 size={12} className="animate-spin text-muted-foreground mx-1" />
+          <AppIcon name="Loader2" size={12} className="animate-spin text-muted-foreground mx-1" />
         ) : (
           <>
             <button
@@ -221,7 +217,7 @@ function TaskRowView({ row }: { row: TaskRow }) {
               aria-label="Mark done"
               className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary"
             >
-              <CheckCircle2 size={11} />
+              <AppIcon name="CheckCircle2" size={11} />
             </button>
             <button
               onClick={() => openTask(row.id)}
@@ -229,7 +225,7 @@ function TaskRowView({ row }: { row: TaskRow }) {
               aria-label="Open in Tasks"
               className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary"
             >
-              <ExternalLink size={11} />
+              <AppIcon name="ExternalLink" size={11} />
             </button>
           </>
         )}
@@ -253,7 +249,7 @@ function TaskListCard({ event: e }: { event: ToolEvent }) {
     return (
       <ToolCardShell
         title={title}
-        icon={<ListChecks size={12} />}
+        icon={<AppIcon name="ListChecks" size={12} />}
         onDismiss={() => dismissToolCard(e.id)}
       >
         <div className="text-[11px] text-muted-foreground whitespace-pre-wrap">
@@ -265,7 +261,7 @@ function TaskListCard({ event: e }: { event: ToolEvent }) {
   return (
     <ToolCardShell
       title={title}
-      icon={e.name === SCHEDULE_TOOL ? <CalendarClock size={12} /> : <ListChecks size={12} />}
+      icon={e.name === SCHEDULE_TOOL ? <AppIcon name="CalendarClock" size={12} /> : <AppIcon name="ListChecks" size={12} />}
       onDismiss={() => dismissToolCard(e.id)}
     >
       <div className="space-y-0.5 max-h-80 overflow-y-auto overflow-x-hidden scrollbar-thin">
@@ -312,7 +308,7 @@ function PlanResultCard({ event: e }: { event: ToolEvent }) {
   return (
     <ToolCardShell
       title={`${meta.label} ${applied ? "· applied" : "· proposed"}`}
-      icon={<CalendarDays size={12} />}
+      icon={<AppIcon name="CalendarDays" size={12} />}
       onDismiss={() => dismissToolCard(e.id)}
     >
       <div className="text-[11px] whitespace-pre-wrap break-words text-foreground/90 max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin">
@@ -322,11 +318,11 @@ function PlanResultCard({ event: e }: { event: ToolEvent }) {
         <div className="mt-2 flex items-center gap-2">
           {state === "applied" ? (
             <span className="flex items-center gap-1 text-[10px] text-emerald-500">
-              <CheckCircle2 size={11} /> Applied — calendar updated
+              <AppIcon name="CheckCircle2" size={11} /> Applied — calendar updated
             </span>
           ) : state === "failed" ? (
             <span className="flex items-center gap-1 text-[10px] text-destructive">
-              <X size={11} /> Couldn&apos;t apply — try again
+              <AppIcon name="X" size={11} /> Couldn&apos;t apply — try again
             </span>
           ) : null}
           {state !== "applied" && (
@@ -336,9 +332,9 @@ function PlanResultCard({ event: e }: { event: ToolEvent }) {
               className="inline-flex items-center gap-1 rounded-md border border-primary/50 bg-primary/10 px-2 py-1 text-[10px] font-medium text-primary hover:bg-primary/20 disabled:opacity-60"
             >
               {state === "busy" ? (
-                <Loader2 size={10} className="animate-spin" />
+                <AppIcon name="Loader2" size={10} className="animate-spin" />
               ) : (
-                <Zap size={10} />
+                <AppIcon name="Zap" size={10} />
               )}
               Apply plan
             </button>
@@ -353,7 +349,7 @@ function PlanResultCard({ event: e }: { event: ToolEvent }) {
 
 function InfoResultCard({ event: e }: { event: ToolEvent }) {
   const meta = INFO_META[e.name];
-  const Icon = meta.icon;
+  const iconName = meta.icon;
   const text = (e.result || "").trim();
   const openTask = useOpenTask();
   const args = (e.args ?? {}) as Record<string, unknown>;
@@ -361,7 +357,7 @@ function InfoResultCard({ event: e }: { event: ToolEvent }) {
   return (
     <ToolCardShell
       title={meta.label}
-      icon={<Icon size={12} />}
+      icon={<AppIcon name={iconName} size={12} />}
       onDismiss={() => dismissToolCard(e.id)}
     >
       <div className="text-[11px] whitespace-pre-wrap break-words text-foreground/90 max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin">
@@ -372,7 +368,7 @@ function InfoResultCard({ event: e }: { event: ToolEvent }) {
           onClick={() => openTask(itemId)}
           className="mt-1.5 inline-flex items-center gap-1 text-[10px] text-primary hover:underline"
         >
-          <ExternalLink size={10} /> Open in Tasks
+          <AppIcon name="ExternalLink" size={10} /> Open in Tasks
         </button>
       )}
     </ToolCardShell>
@@ -386,7 +382,7 @@ function InfoResultCard({ event: e }: { event: ToolEvent }) {
 function ActionResultCard({ event: e }: { event: ToolEvent }) {
   const meta = actionMeta(e);
   const failed = e.status === "error";
-  const Icon = failed ? X : meta.icon;
+  const iconName = failed ? "X" : meta.icon;
   const result = (e.result || "").trim();
   // Every _fmt_item line ends with `full_id: <uuid>`; capture results print
   // `(id: <uuid>)` instead — either is the jump target, args as last resort.
@@ -421,7 +417,7 @@ function ActionResultCard({ event: e }: { event: ToolEvent }) {
             failed ? "text-destructive" : meta.danger ? "text-amber-500" : "text-emerald-500"
           }`}
         >
-          <Icon size={13} />
+          <AppIcon name={iconName} size={13} />
         </span>
         <div className="min-w-0 flex-1">
           <div className="text-[11px] font-medium text-foreground">{meta.label}</div>
@@ -435,7 +431,7 @@ function ActionResultCard({ event: e }: { event: ToolEvent }) {
               onClick={() => openTask(itemId)}
               className="mt-1 inline-flex items-center gap-1 text-[10px] text-primary hover:underline"
             >
-              <ExternalLink size={10} /> Open in Tasks
+              <AppIcon name="ExternalLink" size={10} /> Open in Tasks
             </button>
           )}
         </div>
diff --git a/workbench/control_plane/src/lib/theme/icon-data/fluent.json b/workbench/control_plane/src/lib/theme/icon-data/fluent.json
index c33db93b..89e91230 100644
--- a/workbench/control_plane/src/lib/theme/icon-data/fluent.json
+++ b/workbench/control_plane/src/lib/theme/icon-data/fluent.json
@@ -1 +1 @@
-{"prefix":"fluent","icons":{"spinner-ios-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 3a7 7 0 0 0-7 7a.5.5 0 0 1-1 0a8 8 0 1 1 8 8a.5.5 0 0 1 0-1a7 7 0 1 0 0-14\"/>"},"checkmark-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3.374 10.168a.5.5 0 0 0-.748.664l4 4.5a.5.5 0 0 0 .728.022l10.5-10.5a.5.5 0 0 0-.707-.708L7.02 14.271z\"/>"},"checkmark-circle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14m3.358 4.646a.5.5 0 0 1 .058.638l-.058.07l-4.004 4.004a.5.5 0 0 1-.638.058l-.07-.058l-2-2a.5.5 0 0 1 .638-.765l.07.058L9 11.298l3.651-3.652a.5.5 0 0 1 .707 0\"/>"},"dismiss-20-regular":{"body":"<path fill=\"currentColor\" d=\"m4.089 4.216l.057-.07a.5.5 0 0 1 .638-.057l.07.057L10 9.293l5.146-5.147a.5.5 0 0 1 .638-.057l.07.057a.5.5 0 0 1 .057.638l-.057.07L10.707 10l5.147 5.146a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.638.057l-.07-.057L10 10.707l-5.146 5.147a.5.5 0 0 1-.638.057l-.07-.057a.5.5 0 0 1-.057-.638l.057-.07L9.293 10L4.146 4.854a.5.5 0 0 1-.057-.638l.057-.07z\"/>"},"dismiss-circle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14M7.81 7.114l.069.058L10 9.292l2.121-2.12a.5.5 0 0 1 .638-.058l.07.058a.5.5 0 0 1 .057.637l-.058.07L10.708 10l2.12 2.121a.5.5 0 0 1 .058.638l-.058.07a.5.5 0 0 1-.637.057l-.07-.058L10 10.708l-2.121 2.12a.5.5 0 0 1-.638.058l-.07-.058a.5.5 0 0 1-.057-.637l.058-.07L9.292 10l-2.12-2.121a.5.5 0 0 1-.058-.638l.058-.07a.5.5 0 0 1 .637-.057\"/>"},"warning-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.37 3.556c1.14-2.074 4.12-2.074 5.259 0l5.496 10.005c1.098 1.999-.35 4.444-2.63 4.444H4.504c-2.281 0-3.727-2.445-2.629-4.444zm4.383.481c-.76-1.383-2.746-1.382-3.506 0L2.751 14.042c-.732 1.333.232 2.963 1.753 2.963h10.991c1.52 0 2.485-1.63 1.753-2.963zM10 12.75a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5m0-6.25a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5\"/>"},"error-circle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14m0 9.5a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5M10 6a.5.5 0 0 1 .492.41l.008.09V11a.5.5 0 0 1-.992.09L9.5 11V6.5A.5.5 0 0 1 10 6\"/>"},"info-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.492 8.91A.5.5 0 0 0 9.5 9v4.502l.008.09a.5.5 0 0 0 .992-.09V9zm.307-2.16a.75.75 0 1 0-1.5 0a.75.75 0 0 0 1.5 0M18 10a8 8 0 1 0-16 0a8 8 0 0 0 16 0M3 10a7 7 0 1 1 14 0a7 7 0 0 1-14 0\"/>"},"question-circle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14m0 10.5a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5m0-8a2.5 2.5 0 0 1 1.651 4.377l-.154.125l-.219.163l-.087.072a2 2 0 0 0-.156.149c-.339.36-.535.856-.535 1.614a.5.5 0 0 1-1 0c0-1.012.293-1.752.805-2.298a3 3 0 0 1 .356-.323l.247-.185l.118-.1A1.5 1.5 0 1 0 8.5 8a.5.5 0 0 1-1 .001A2.5 2.5 0 0 1 10 5.5\"/>"},"alert-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.998 2c3.149 0 5.744 2.335 5.984 5.355l.014.223l.004.224l-.001 3.596l.925 2.222q.034.081.053.167l.016.086l.008.132a1 1 0 0 1-.749.963l-.116.027l-.135.01l-3.501-.001l-.005.161a2.5 2.5 0 0 1-4.99 0l-.005-.161H3.999a1 1 0 0 1-.26-.034l-.124-.042a1 1 0 0 1-.603-1.052l.021-.128l.043-.128l.923-2.219L4 7.793l.004-.225C4.127 4.451 6.771 2 9.998 2M11.5 15.004h-3l.007.141a1.5 1.5 0 0 0 1.349 1.348L10 16.5a1.5 1.5 0 0 0 1.493-1.355zM9.998 3c-2.623 0-4.77 1.924-4.98 4.385l-.014.212L5 7.802V11.5l-.038.192l-.963 2.313l11.958.002l.045-.002l-.964-2.313L15 11.5V7.812l-.004-.204C14.891 5.035 12.695 3 9.998 3\"/>"},"pulse-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.004 3a.5.5 0 0 1 .479.37l3.043 11.303l2.495-8.317a.5.5 0 0 1 .947-.032L15.347 10H17.5a.5.5 0 0 1 0 1H15a.5.5 0 0 1-.468-.324l-.98-2.612l-2.573 8.58a.5.5 0 0 1-.962-.014L6.986 5.37L5.48 10.637A.5.5 0 0 1 5 11H2.5a.5.5 0 0 1 0-1h2.123l1.896-6.637A.5.5 0 0 1 7.004 3\"/>"},"add-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2.5a.5.5 0 0 1 .5.5v6.5H17a.5.5 0 0 1 0 1h-6.5V17a.5.5 0 0 1-1 0v-6.5H3a.5.5 0 0 1 0-1h6.5V3a.5.5 0 0 1 .5-.5\"/>"},"subtract-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 10a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 3 10\"/>"},"delete-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.5 4h3a1.5 1.5 0 0 0-3 0m-1 0a2.5 2.5 0 0 1 5 0h5a.5.5 0 0 1 0 1h-1.054l-1.194 10.344A3 3 0 0 1 12.272 18H7.728a3 3 0 0 1-2.98-2.656L3.554 5H2.5a.5.5 0 0 1 0-1zM5.741 15.23A2 2 0 0 0 7.728 17h4.544a2 2 0 0 0 1.987-1.77L15.439 5H4.561zM8.5 7.5A.5.5 0 0 1 9 8v6a.5.5 0 0 1-1 0V8a.5.5 0 0 1 .5-.5M12 8a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z\"/>"},"edit-20-regular":{"body":"<path fill=\"currentColor\" d=\"M17.181 2.927a2.975 2.975 0 0 0-4.259-.054l-9.375 9.375a2.44 2.44 0 0 0-.656 1.194l-.877 3.95a.5.5 0 0 0 .596.597l3.927-.873a2.5 2.5 0 0 0 1.234-.678l9.358-9.358a2.975 2.975 0 0 0 .052-4.153m-3.552.653a1.975 1.975 0 1 1 2.793 2.793l-.671.671l-2.793-2.792zm-1.378 1.38l2.793 2.792l-7.98 7.98a1.5 1.5 0 0 1-.744.409l-3.16.702l.708-3.183c.059-.267.193-.511.386-.704z\"/>"},"edit-line-horizontal-3-20-regular":{"body":"<path fill=\"currentColor\" d=\"M12.922 2.873A2.975 2.975 0 0 1 17.13 7.08l-9.358 9.358a2.5 2.5 0 0 1-1.234.678l-3.926.873a.5.5 0 0 1-.597-.597l.877-3.95c.101-.452.329-.867.656-1.194zm3.535.743a1.975 1.975 0 0 0-2.828-.036l-.671.672l2.793 2.792l.67-.671c.758-.758.774-1.98.036-2.757m-1.413 4.135L12.25 4.96l-7.996 7.996a1.44 1.44 0 0 0-.387.704l-.707 3.183l3.159-.702c.282-.063.54-.205.744-.409zM2.5 3h8.88l-1 1H2.5a.5.5 0 0 1 0-1m0 3h5.88L7.378 7H2.5a.5.5 0 0 1 0-1m0 3h2.879l-1 1H2.5a.5.5 0 0 1 0-1\"/>"},"save-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 5a2 2 0 0 1 2-2h8.379a2 2 0 0 1 1.414.586l1.621 1.621A2 2 0 0 1 17 6.621V15a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1v-4.5A1.5 1.5 0 0 1 6.5 10h7a1.5 1.5 0 0 1 1.5 1.5V16a1 1 0 0 0 1-1V6.621a1 1 0 0 0-.293-.707l-1.621-1.621A1 1 0 0 0 13.379 4H13v2.5A1.5 1.5 0 0 1 11.5 8h-4A1.5 1.5 0 0 1 6 6.5V4zm2 0v2.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5V4zm7 12v-4.5a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0-.5.5V16z\"/>"},"copy-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7 7H5.5A1.5 1.5 0 0 0 4 8.5v6A1.5 1.5 0 0 0 5.5 16h4a1.5 1.5 0 0 0 1.413-1h1.037a2.5 2.5 0 0 1-2.45 2h-4A2.5 2.5 0 0 1 3 14.5v-6A2.5 2.5 0 0 1 5.5 6H7zm7.5-4A2.5 2.5 0 0 1 17 5.5v6a2.5 2.5 0 0 1-2.5 2.5h-4A2.5 2.5 0 0 1 8 11.5v-6A2.5 2.5 0 0 1 10.5 3zm-4 1A1.5 1.5 0 0 0 9 5.5v6a1.5 1.5 0 0 0 1.5 1.5h4a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 14.5 4z\"/>"},"arrow-download-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15.5 17a.5.5 0 0 1 .09.992L15.5 18h-11a.5.5 0 0 1-.09-.992L4.5 17zM10 2.002a.5.5 0 0 1 .492.41l.008.09l-.004 11.794l3.645-3.648a.5.5 0 0 1 .638-.059l.07.058a.5.5 0 0 1 .058.638l-.058.07l-4.492 4.5a.5.5 0 0 1-.255.136l-.106.01a.5.5 0 0 1-.395-.195l-4.457-4.451a.5.5 0 0 1 .637-.766l.07.058l3.645 3.641L9.5 2.502a.5.5 0 0 1 .5-.5\"/>"},"arrow-upload-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15 3.002a.5.5 0 0 0 .09-.992L15 2.002H4a.5.5 0 0 0-.09.992l.09.008zM9.5 18a.5.5 0 0 0 .492-.41L10 17.5L9.996 5.706l3.645 3.648a.5.5 0 0 0 .638.059l.07-.058a.5.5 0 0 0 .058-.638l-.058-.07l-4.492-4.5a.5.5 0 0 0-.255-.136L9.496 4a.5.5 0 0 0-.395.194L4.644 8.647a.5.5 0 0 0 .637.765l.07-.057l3.645-3.641L9 17.5a.5.5 0 0 0 .5.5\"/>"},"arrow-undo-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 2.5a.5.5 0 0 0-1 0v4.9a.6.6 0 0 0 .6.6h4.9a.5.5 0 0 0 0-1H5.906l3.473-3.019a4 4 0 0 1 5.248 6.038l-8.172 7.104a.5.5 0 0 0 .656.754l8.172-7.103a5 5 0 0 0-6.56-7.547L5 6.463z\"/>"},"arrow-counterclockwise-20-regular":{"body":"<path fill=\"currentColor\" d=\"M16 10A6 6 0 0 0 5.528 6H7.5a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 1 0v1.601a7 7 0 1 1-1.98 4.361a.5.5 0 0 1 .998.076A6 6 0 1 0 16 10\"/>"},"arrow-sync-20-regular":{"body":"<path fill=\"currentColor\" d=\"M11.414 3.635a.5.5 0 0 0 0-.707L9.293.807a.5.5 0 0 0-.707.707l.997.997a7.5 7.5 0 0 0-4.075 13.495a.5.5 0 0 0 .6-.8A6.5 6.5 0 0 1 10.066 3.5q.037 0 .073-.005L8.586 5.049a.5.5 0 0 0 .707.707zM8.586 16.363a.5.5 0 0 0 0 .707l2.121 2.121a.5.5 0 0 0 .707-.707l-.997-.997a7.5 7.5 0 0 0 4.075-13.495a.5.5 0 1 0-.6.8q.369.277.704.61A6.5 6.5 0 0 1 9.934 16.5l-.074.004l1.554-1.554a.5.5 0 1 0-.707-.707z\"/>"},"search-20-regular":{"body":"<path fill=\"currentColor\" d=\"M13.73 14.436a6.5 6.5 0 1 1 .707-.707l3.416 3.418a.5.5 0 0 1-.637.764l-.07-.057zm-.71-.71q.385-.32.707-.706a5.5 5.5 0 1 0-.707.707\"/>"},"filter-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.5 13h5a.5.5 0 0 1 .09.992L12.5 14h-5a.5.5 0 0 1-.09-.992zh5zm-2-4h9a.5.5 0 0 1 .09.992L14.5 10h-9a.5.5 0 0 1-.09-.992zh9zm-2-4h13a.5.5 0 0 1 .09.992L16.5 6h-13a.5.5 0 0 1-.09-.992zh13z\"/>"},"options-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14.95 5a2.5 2.5 0 0 0-4.9 0H2.5a.5.5 0 0 0 0 1h7.55a2.5 2.5 0 0 0 4.9 0h2.55a.5.5 0 0 0 0-1zM12.5 7a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m-2.55 7a2.5 2.5 0 0 0-4.9 0H2.5a.5.5 0 0 0 0 1h2.55a2.5 2.5 0 0 0 4.9 0h7.55a.5.5 0 0 0 0-1zM7.5 16a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3\"/>"},"settings-20-regular":{"body":"<path fill=\"currentColor\" d=\"M1.911 7.383a8.5 8.5 0 0 1 1.78-3.08a.5.5 0 0 1 .54-.135l1.918.686a1 1 0 0 0 1.32-.762l.366-2.006a.5.5 0 0 1 .388-.4a8.5 8.5 0 0 1 3.554 0a.5.5 0 0 1 .388.4l.366 2.006a1 1 0 0 0 1.32.762l1.919-.686a.5.5 0 0 1 .54.136a8.5 8.5 0 0 1 1.78 3.079a.5.5 0 0 1-.153.535l-1.555 1.32a1 1 0 0 0 0 1.524l1.555 1.32a.5.5 0 0 1 .152.535a8.5 8.5 0 0 1-1.78 3.08a.5.5 0 0 1-.54.135l-1.918-.686a1 1 0 0 0-1.32.762l-.366 2.007a.5.5 0 0 1-.388.399a8.5 8.5 0 0 1-3.554 0a.5.5 0 0 1-.388-.4l-.366-2.006a1 1 0 0 0-1.32-.762l-1.918.686a.5.5 0 0 1-.54-.136a8.5 8.5 0 0 1-1.78-3.079a.5.5 0 0 1 .152-.535l1.555-1.32a1 1 0 0 0 0-1.524l-1.555-1.32a.5.5 0 0 1-.152-.535m1.06-.006l1.294 1.098a2 2 0 0 1 0 3.05l-1.293 1.098c.292.782.713 1.51 1.244 2.152l1.596-.57q.155-.055.315-.085a2 2 0 0 1 2.326 1.609l.304 1.669a7.6 7.6 0 0 0 2.486 0l.304-1.67a1.998 1.998 0 0 1 2.641-1.524l1.596.571a7.5 7.5 0 0 0 1.245-2.152l-1.294-1.098a1.998 1.998 0 0 1 0-3.05l1.294-1.098a7.5 7.5 0 0 0-1.245-2.152l-1.596.57a2 2 0 0 1-2.64-1.524l-.305-1.669a7.6 7.6 0 0 0-2.486 0l-.304 1.669a2 2 0 0 1-2.64 1.525l-1.597-.571a7.5 7.5 0 0 0-1.244 2.152M7.502 10a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0m1 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 0 0-3 0\"/>"},"share-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.5 3a.5.5 0 0 1 0 1H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1.5a.5.5 0 0 1 1 0V14a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3zm3.797-.957a.5.5 0 0 1 .538.085l5 4.5a.5.5 0 0 1 0 .744l-5 4.5A.5.5 0 0 1 13 11.5V9.34c-1.4.128-2.665.78-3.7 1.608c-1.015.813-1.775 1.768-2.195 2.484l-.158.291A.5.5 0 0 1 6 13.5c0-2.049.382-4.284 1.518-6.024C8.61 5.808 10.368 4.643 13 4.513V2.5l.005-.073a.5.5 0 0 1 .292-.384M14 5a.5.5 0 0 1-.5.5c-2.588 0-4.177 1.045-5.144 2.523c-.685 1.049-1.073 2.34-1.246 3.684c.433-.52.96-1.054 1.565-1.54C9.943 9.153 11.6 8.316 13.5 8.316a.5.5 0 0 1 .5.5v1.56L17.75 7L14 3.623z\"/>"},"send-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2.184 2.112a.5.5 0 0 1 .54-.06l15 7.5a.5.5 0 0 1 0 .895l-15 7.5a.5.5 0 0 1-.707-.576L3.983 10L2.017 2.629a.5.5 0 0 1 .167-.517m2.7 8.388L3.27 16.556L16.382 10L3.269 3.444L4.884 9.5H11.5a.5.5 0 1 1 0 1z\"/>"},"eye-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3.26 11.602C3.942 8.327 6.793 6 10 6s6.057 2.327 6.74 5.602a.5.5 0 0 0 .98-.204C16.943 7.673 13.693 5 10 5s-6.943 2.673-7.72 6.398a.5.5 0 0 0 .98.204M10 8a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7m-2.5 3.5a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0\"/>"},"eye-off-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2.854 2.146a.5.5 0 1 0-.708.708l3.5 3.498a8.1 8.1 0 0 0-3.366 5.046a.5.5 0 1 0 .98.204a7.1 7.1 0 0 1 3.107-4.528L7.953 8.66a3.5 3.5 0 1 0 4.886 4.886l4.307 4.308a.5.5 0 0 0 .708-.708zm9.265 10.68A2.5 2.5 0 1 1 8.673 9.38zm-1.995-4.824l3.374 3.374a3.5 3.5 0 0 0-3.374-3.374M10 6c-.57 0-1.129.074-1.666.213l-.803-.803A7.7 7.7 0 0 1 10 5c3.693 0 6.942 2.673 7.72 6.398a.5.5 0 0 1-.98.204C16.058 8.327 13.207 6 10 6\"/>"},"chevron-down-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15.854 7.646a.5.5 0 0 1 .001.707l-5.465 5.484a.55.55 0 0 1-.78 0L4.147 8.353a.5.5 0 1 1 .708-.706L10 12.812l5.147-5.165a.5.5 0 0 1 .707-.001\"/>"},"chevron-up-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.147 12.353a.5.5 0 0 1-.001-.707L9.61 6.162a.55.55 0 0 1 .779 0l5.465 5.484a.5.5 0 0 1-.708.706L10 7.188l-5.146 5.164a.5.5 0 0 1-.707.001\"/>"},"chevron-left-20-regular":{"body":"<path fill=\"currentColor\" d=\"M12.353 15.854a.5.5 0 0 1-.707.001L6.162 10.39a.55.55 0 0 1 0-.78l5.484-5.464a.5.5 0 1 1 .706.708L7.188 10l5.164 5.147a.5.5 0 0 1 .001.707\"/>"},"chevron-right-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.646 4.147a.5.5 0 0 1 .707-.001l5.484 5.465a.55.55 0 0 1 0 .779l-5.484 5.465a.5.5 0 0 1-.706-.708L12.812 10L7.647 4.854a.5.5 0 0 1-.001-.707\"/>"},"arrow-left-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.159 16.867a.5.5 0 1 0 .674-.739l-6.168-5.63h13.831a.5.5 0 0 0 0-1H3.668l6.165-5.629a.5.5 0 0 0-.674-.738L2.243 9.445a.75.75 0 0 0-.24.631a.75.75 0 0 0 .24.477z\"/>"},"arrow-right-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.837 3.13a.5.5 0 0 0-.674.74L16.33 9.5H2.5a.5.5 0 0 0 0 1h13.828l-6.165 5.628a.5.5 0 0 0 .674.739l6.916-6.314a.747.747 0 0 0 0-1.108z\"/>"},"arrow-up-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3.133 9.16a.5.5 0 1 0 .738.675l5.631-6.168v13.831a.5.5 0 1 0 1 0V3.67l5.628 6.165a.5.5 0 0 0 .739-.674l-6.314-6.916a.75.75 0 0 0-.632-.24a.75.75 0 0 0-.476.24z\"/>"},"arrow-down-20-regular":{"body":"<path fill=\"currentColor\" d=\"M16.867 10.837a.5.5 0 1 0-.739-.674l-5.63 6.168V2.5a.5.5 0 0 0-1 0v13.828l-5.629-6.165a.5.5 0 0 0-.738.674l6.314 6.916a.747.747 0 0 0 1.108 0z\"/>"},"arrow-enter-left-20-regular":{"body":"<path fill=\"currentColor\" d=\"m3.76 12l3.333 3.136a.5.5 0 0 1-.686.728l-4.25-4a.5.5 0 0 1 0-.728l4.25-4a.5.5 0 1 1 .686.728L3.76 11H15a2 2 0 0 0 2-2V4.5a.5.5 0 0 1 1 0V9a3 3 0 0 1-3 3z\"/>"},"open-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-2.5a.5.5 0 0 1 1 0V14a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h2.5a.5.5 0 0 1 0 1zm5-.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V4.707l-4.146 4.147a.5.5 0 0 1-.708-.708L15.293 4H11.5a.5.5 0 0 1-.5-.5\"/>"},"more-horizontal-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6.25 10a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0m5 0a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0M15 11.25a1.25 1.25 0 1 0 0-2.5a1.25 1.25 0 0 0 0 2.5\"/>"},"more-vertical-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 6a1.25 1.25 0 1 1 0-2.5A1.25 1.25 0 0 1 10 6m0 5.25a1.25 1.25 0 1 1 0-2.5a1.25 1.25 0 0 1 0 2.5m-1.25 4a1.25 1.25 0 1 0 2.5 0a1.25 1.25 0 0 0-2.5 0\"/>"},"navigation-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2 4.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5m0 5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5m.5 4.5a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1z\"/>"},"panel-left-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2 6a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3zm6.5-2v11H15a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm-1 0H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2.5z\"/>"},"arrow-expand-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3.5 3a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0V4.707l3.146 3.147a.5.5 0 1 0 .708-.708L4.707 4H7.5a.5.5 0 0 0 0-1zm0 14a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 1 0v2.793l3.146-3.147a.5.5 0 0 1 .708.708L4.707 16H7.5a.5.5 0 0 1 0 1zM17 3.5a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 0 0 1h2.793l-3.147 3.146a.5.5 0 0 0 .708.708L16 4.707V7.5a.5.5 0 0 0 1 0zM16.5 17a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-1 0v2.793l-3.146-3.147a.5.5 0 0 0-.708.708L15.293 16H12.5a.5.5 0 0 0 0 1z\"/>"},"arrow-minimize-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.5 11a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0v-3.793l-5.146 5.147a.5.5 0 0 1-.708-.707L7.293 12H3.5a.5.5 0 0 1 0-1zm8.647-8.854a.5.5 0 1 1 .707.708L12.707 8H16.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 1 0v3.793z\"/>"},"mail-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15.5 4A2.5 2.5 0 0 1 18 6.5v8a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 14.5v-8A2.5 2.5 0 0 1 4.5 4zM17 7.961l-6.746 3.97a.5.5 0 0 1-.426.038l-.082-.038L3 7.963V14.5A1.5 1.5 0 0 0 4.5 16h11a1.5 1.5 0 0 0 1.5-1.5zM15.5 5h-11A1.5 1.5 0 0 0 3 6.5v.302l7 4.118l7-4.12v-.3A1.5 1.5 0 0 0 15.5 5\"/>"},"mail-read-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.743 2.071a.5.5 0 0 1 .514 0l6.772 4.063A2 2 0 0 1 18 7.85v6.65a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 14.5V7.85a2 2 0 0 1 .971-1.716zM10 3.083L3.486 6.992L3.472 7L10 10.917L16.528 7l-.013-.008zm7 4.8l-6.743 4.046a.5.5 0 0 1-.514 0L3 7.883V14.5A1.5 1.5 0 0 0 4.5 16h11a1.5 1.5 0 0 0 1.5-1.5z\"/>"},"mail-dismiss-20-regular":{"body":"<path fill=\"currentColor\" d=\"M19 5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.646-1.146a.5.5 0 0 0-.708-.708L14.5 4.793l-1.146-1.147a.5.5 0 0 0-.708.708L13.793 5.5l-1.147 1.146a.5.5 0 0 0 .708.708L14.5 6.207l1.146 1.147a.5.5 0 0 0 .708-.708L15.207 5.5zM17 14.5v-4.1a5.5 5.5 0 0 0 1-.657V14.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 14.5v-8A2.5 2.5 0 0 1 4.5 4h4.707a5.5 5.5 0 0 0-.185 1H4.5A1.5 1.5 0 0 0 3 6.5v.302l7 4.118l1.441-.848q.488.327 1.043.547l-2.23 1.312a.5.5 0 0 1-.426.038l-.082-.038L3 7.963V14.5A1.5 1.5 0 0 0 4.5 16h11a1.5 1.5 0 0 0 1.5-1.5\"/>"},"mail-inbox-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zm10 7h-3.5a.5.5 0 0 0-.5.5v.011l-.004.06a2.6 2.6 0 0 1-.256.955a1.7 1.7 0 0 1-.572.667c-.26.174-.63.307-1.168.307s-.907-.133-1.168-.307a1.7 1.7 0 0 1-.572-.667A2.6 2.6 0 0 1 8 10.511V10.5a.5.5 0 0 0-.5-.5H4V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2zM4 11h3.05c.047.264.137.616.315.974c.186.371.473.758.912 1.051c.443.295 1.01.475 1.723.475s1.28-.18 1.723-.475c.44-.293.726-.68.912-1.051c.178-.358.268-.71.315-.974H16v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z\"/>"},"arrow-reply-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.354 3.646a.5.5 0 0 1 0 .708L3.707 8H10.5a7.5 7.5 0 0 1 7.5 7.5a.5.5 0 0 1-1 0A6.5 6.5 0 0 0 10.5 9H3.707l3.647 3.646a.5.5 0 0 1-.708.708l-4.5-4.5a.5.5 0 0 1 0-.708l4.5-4.5a.5.5 0 0 1 .708 0\"/>"},"arrow-reply-all-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.354 3.646a.5.5 0 0 1 0 .708L3.207 8.5l4.147 4.146a.5.5 0 0 1-.708.708l-4.5-4.5a.5.5 0 0 1 0-.708l4.5-4.5a.5.5 0 0 1 .708 0m3 0a.5.5 0 0 1 0 .708L6.707 8H10.5a7.5 7.5 0 0 1 7.5 7.5a.5.5 0 0 1-1 0A6.5 6.5 0 0 0 10.5 9H6.707l3.647 3.646a.5.5 0 0 1-.708.708l-4.5-4.5a.5.5 0 0 1 0-.708l4.5-4.5a.5.5 0 0 1 .708 0\"/>"},"arrow-forward-20-regular":{"body":"<path fill=\"currentColor\" d=\"M12.646 3.646a.5.5 0 0 0 0 .708L16.293 8H9.5A7.5 7.5 0 0 0 2 15.5a.5.5 0 0 0 1 0A6.5 6.5 0 0 1 9.5 9h6.793l-3.647 3.646a.5.5 0 0 0 .708.708l4.5-4.5a.5.5 0 0 0 0-.708l-4.5-4.5a.5.5 0 0 0-.708 0\"/>"},"chat-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 1 1-3.613 15.14l-.121-.065l-3.645.91a.5.5 0 0 1-.62-.441v-.082l.014-.083l.91-3.644l-.063-.12a8 8 0 0 1-.83-2.887l-.025-.382L2 10a8 8 0 0 1 8-8m0 1a7 7 0 0 0-6.106 10.425a.5.5 0 0 1 .063.272l-.014.094l-.756 3.021l3.024-.754a.5.5 0 0 1 .188-.01l.091.021l.087.039A7 7 0 1 0 10 3m.5 8a.5.5 0 0 1 .09.992L10.5 12h-3a.5.5 0 0 1-.09-.992L7.5 11zm2-3a.5.5 0 0 1 .09.992L12.5 9h-5a.5.5 0 0 1-.09-.992L7.5 8z\"/>"},"chat-multiple-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.538 2a6.5 6.5 0 0 0-5.674 9.672l-.796 2.082a1 1 0 0 0 1.204 1.32l2.487-.697A6.5 6.5 0 1 0 8.539 2m-5.5 6.5a5.5 5.5 0 1 1 2.998 4.9l-.174-.09l-2.86.801l.969-2.536l-.128-.21A5.47 5.47 0 0 1 3.038 8.5m8.463 9.5a6.49 6.49 0 0 1-4.927-2.26a7.5 7.5 0 0 0 1.76.257A5.5 5.5 0 0 0 11.5 17c.902 0 1.752-.217 2.502-.6l.174-.09l2.86.801l-.969-2.536l.128-.21c.51-.834.805-1.814.805-2.865a5.47 5.47 0 0 0-.964-3.11a7.5 7.5 0 0 0-.235-1.763A6.48 6.48 0 0 1 18 11.5c0 1.151-.3 2.233-.825 3.172l.795 2.082a1 1 0 0 1-1.204 1.32l-2.487-.697c-.843.4-1.786.623-2.78.623\"/>"},"call-20-regular":{"body":"<path fill=\"currentColor\" d=\"m6.987 2.066l-.717.216a3.5 3.5 0 0 0-2.454 2.854c-.297 2.068.367 4.486 1.968 7.259c1.597 2.766 3.355 4.548 5.29 5.328a3.5 3.5 0 0 0 3.715-.705l.542-.514a2 2 0 0 0 .247-2.623l-1.356-1.88a1.5 1.5 0 0 0-1.655-.556l-2.051.627l-.053.01c-.226.033-.748-.456-1.398-1.582c-.68-1.178-.82-1.867-.633-2.045l1.043-.973a2.5 2.5 0 0 0 .575-2.85l-.662-1.471a2 2 0 0 0-2.4-1.095m1.49 1.505l.66 1.471a1.5 1.5 0 0 1-.344 1.71l-1.046.974C7.078 8.36 7.3 9.442 8.2 11c.846 1.466 1.618 2.19 2.448 2.064l.124-.026l2.088-.637a.5.5 0 0 1 .552.185l1.356 1.88a1 1 0 0 1-.123 1.312l-.543.514a2.5 2.5 0 0 1-2.653.503c-1.698-.684-3.303-2.311-4.798-4.9C5.152 9.3 4.545 7.093 4.806 5.278a2.5 2.5 0 0 1 1.753-2.039l.717-.216a1 1 0 0 1 1.2.548\"/>"},"attach-20-regular":{"body":"<path fill=\"currentColor\" d=\"m4.828 10.485l5.657-5.657a3 3 0 0 1 4.243 4.243L8.01 15.788a1.5 1.5 0 0 1-2.121-2.121l6.01-6.01a.5.5 0 1 0-.707-.708l-6.01 6.01a2.5 2.5 0 0 0 3.535 3.536l6.718-6.717A4 4 0 1 0 9.778 4.12L4.12 9.778a.5.5 0 0 0 .707.707\"/>"},"mention-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 0 1 8 8c0 2.5-1.378 3.996-3 3.996c-1.071 0-2.036-.652-2.567-1.815C11.82 13.26 10.76 14 9.5 14C7.497 14 6 12.134 6 10s1.497-4 3.5-4c1 0 1.875.466 2.5 1.198V6.5a.5.5 0 0 1 1 0V10l.013.39c.126 1.872 1.164 2.606 1.987 2.606c.878 0 2-.835 2-2.996a7 7 0 1 0-4.712 6.614a.54.54 0 0 1 .559.121c.253.253.176.68-.16.8A8 8 0 1 1 10 2m-.5 5C8.189 7 7 8.268 7 10s1.189 3 2.5 3s2.5-1.268 2.5-3s-1.189-3-2.5-3\"/>"},"person-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a4 4 0 1 0 0 8a4 4 0 0 0 0-8M7 6a3 3 0 1 1 6 0a3 3 0 0 1-6 0m-1.991 5A2 2 0 0 0 3 13c0 1.691.833 2.966 2.135 3.797C6.417 17.614 8.145 18 10 18s3.583-.386 4.865-1.203C16.167 15.967 17 14.69 17 13a2 2 0 0 0-2-2zM4 13c0-.553.448-1 1.009-1H15a1 1 0 0 1 1 1c0 1.309-.622 2.284-1.673 2.953C13.257 16.636 11.735 17 10 17s-3.257-.364-4.327-1.047C4.623 15.283 4 14.31 4 13\"/>"},"people-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.5 6.75a2.25 2.25 0 1 1 4.5 0a2.25 2.25 0 0 1-4.5 0M6.75 3.5a3.25 3.25 0 1 0 0 6.5a3.25 3.25 0 0 0 0-6.5m5.687 11.645c.538.22 1.215.355 2.063.355c1.881 0 2.921-.668 3.469-1.434a2.9 2.9 0 0 0 .521-1.36a2 2 0 0 0 .01-.137V12.5A1.5 1.5 0 0 0 17 11h-4.63c.24.29.42.629.525 1H17a.5.5 0 0 1 .5.5v.054l-.005.05a1.9 1.9 0 0 1-.34.88c-.327.459-1.037 1.016-2.655 1.016c-.732 0-1.278-.114-1.687-.281c-.082.28-.201.596-.376.926M1.5 13a2 2 0 0 1 2-2H10a2 2 0 0 1 2 2v.084l-.002.04l-.01.135a3.95 3.95 0 0 1-.67 1.806C10.617 16.08 9.263 17 6.75 17s-3.867-.92-4.568-1.934a3.95 3.95 0 0 1-.67-1.807a3 3 0 0 1-.012-.175zm1 .06v.018l.007.083a2.95 2.95 0 0 0 .498 1.336C3.492 15.201 4.513 16 6.75 16s3.258-.799 3.745-1.503a2.95 2.95 0 0 0 .498-1.336q.006-.057.006-.083l.001-.017V13a1 1 0 0 0-1-1H3.5a1 1 0 0 0-1 1zM13 7.5a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0M14.5 5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5\"/>"},"person-add-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9 2a4 4 0 1 0 0 8a4 4 0 0 0 0-8M6 6a3 3 0 1 1 6 0a3 3 0 0 1-6 0m-1.991 5A2 2 0 0 0 2 13c0 1.691.833 2.966 2.135 3.797C5.417 17.614 7.145 18 9 18q.617 0 1.21-.057a5.5 5.5 0 0 1-.618-.958Q9.301 17 9 17c-1.735 0-3.257-.364-4.327-1.047C3.623 15.283 3 14.31 3 13c0-.553.448-1 1.009-1h5.59q.277-.538.658-1zM14.5 19a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9m0-7a.5.5 0 0 1 .5.5V14h1.5a.5.5 0 0 1 0 1H15v1.5a.5.5 0 0 1-1 0V15h-1.5a.5.5 0 0 1 0-1H14v-1.5a.5.5 0 0 1 .5-.5\"/>"},"person-subtract-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a4 4 0 1 0 0 8a4 4 0 0 0 0-8M7 6a3 3 0 1 1 6 0a3 3 0 0 1-6 0m-1.991 5A2 2 0 0 0 3 13c0 1.691.833 2.966 2.135 3.797C6.417 17.614 8.145 18 10 18q.127 0 .255-.003a5.5 5.5 0 0 1-.659-1.004c-1.567-.052-2.937-.41-3.923-1.04C4.623 15.283 4 14.31 4 13c0-.553.448-1 1.009-1h4.59q.277-.538.658-1zM19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-7 0a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 0-1h-4a.5.5 0 0 0-.5.5\"/>"},"building-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6.75 6.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m.75 2.25a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m-.75 3.75a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m3.75-6.75a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0M9.75 9.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m.75 2.25a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m2.25.75a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5M4.5 18a.5.5 0 0 1-.5-.5v-14A1.5 1.5 0 0 1 5.5 2h6A1.5 1.5 0 0 1 13 3.5V8h1.5A1.5 1.5 0 0 1 16 9.5v8a.5.5 0 0 1-.5.5zM5 3.5V17h2v-2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5V17h2V9.5a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0-.5.5M12 15h-1.5v2H12zm-2.5 0H8v2h1.5z\"/>"},"document-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2zM5 4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1zm9.793 3H11.5a.5.5 0 0 1-.5-.5V3.207z\"/>"},"document-text-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6.5 10a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zM4 4a2 2 0 0 1 2-2h4.586a1.5 1.5 0 0 1 1.06.44l3.915 3.914A1.5 1.5 0 0 1 16 7.414V16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 10 6.5V3zm5.5 4h3.293L11 3.207V6.5a.5.5 0 0 0 .5.5\"/>"},"document-javascript-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4 4a2 2 0 0 1 2-2h4.586a1.5 1.5 0 0 1 1.06.44l3.915 3.914A1.5 1.5 0 0 1 16 7.414V16a2 2 0 0 1-2 2H8.5c.219-.29.375-.63.45-1H14a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 10 6.5V3H6a1 1 0 0 0-1 1v7.5q-.123.091-.232.198A1.5 1.5 0 0 0 4 11.085zm7.5 3h3.293L11 3.207V6.5a.5.5 0 0 0 .5.5m-8 5a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0V16a.5.5 0 0 0-1 0v.5a1.5 1.5 0 0 0 3 0v-4a.5.5 0 0 0-.5-.5M5 13.5a1.5 1.5 0 0 1 3 0a.5.5 0 0 1-1 0a.5.5 0 0 0-1 0v.382a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 8 16.118v.382a1.5 1.5 0 0 1-3 0a.5.5 0 0 1 1 0a.5.5 0 0 0 1 0v-.382a.5.5 0 0 0-.276-.447l-.895-.447A1.5 1.5 0 0 1 5 13.882z\"/>"},"document-table-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 10.5A1.5 1.5 0 0 1 7.5 9h5a1.5 1.5 0 0 1 1.5 1.5v4a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 6 14.5zM8 15v-2H7v1.5a.5.5 0 0 0 .5.5zm1-3h4v-1.5a.5.5 0 0 0-.5-.5H9zm0 3h3.5a.5.5 0 0 0 .5-.5V13H9zm-1.5-5a.5.5 0 0 0-.5.5V12h1v-2zM6 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2zM5 4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1zm9.793 3H11.5a.5.5 0 0 1-.5-.5V3.207z\"/>"},"image-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14 7.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0a.5.5 0 0 0 1 0M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm3-2a2 2 0 0 0-2 2v8c0 .373.102.722.28 1.02l4.669-4.588a1.5 1.5 0 0 1 2.102 0l4.67 4.588A2 2 0 0 0 16 14V6a2 2 0 0 0-2-2zm0 12h8c.37 0 .715-.1 1.012-.274l-4.662-4.58a.5.5 0 0 0-.7 0l-4.662 4.58A2 2 0 0 0 6 16\"/>"},"folder-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.5 3A2.5 2.5 0 0 0 2 5.5v9A2.5 2.5 0 0 0 4.5 17h11a2.5 2.5 0 0 0 2.5-2.5v-7A2.5 2.5 0 0 0 15.5 5H9.707L8.22 3.513A1.75 1.75 0 0 0 6.982 3zM3 5.5A1.5 1.5 0 0 1 4.5 4h2.482a.75.75 0 0 1 .53.22l1.28 1.28L7.44 6.854A.5.5 0 0 1 7.086 7H3zM3 8h4.086a1.5 1.5 0 0 0 1.06-.44L9.707 6H15.5A1.5 1.5 0 0 1 17 7.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5z\"/>"},"folder-open-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 5.5v6.604l1.5-2.6a3 3 0 0 1 2.599-1.5H15V7.5A1.5 1.5 0 0 0 13.5 6h-4a.5.5 0 0 1-.353-.146L7.44 4.146A.5.5 0 0 0 7.086 4H4.5A1.5 1.5 0 0 0 3 5.5m1.284 10.485q.106.015.22.015H13.9a2 2 0 0 0 1.732-1l2.163-3.745a1.5 1.5 0 0 0-1.3-2.25H7.1a2 2 0 0 0-1.732 1L3.205 13.75a1.5 1.5 0 0 0 1.079 2.235M2 14.46V5.5A2.5 2.5 0 0 1 4.5 3h2.586a1.5 1.5 0 0 1 1.06.44L9.708 5H13.5A2.5 2.5 0 0 1 16 7.5v.505h.496c1.925 0 3.128 2.083 2.166 3.75L16.499 15.5a3 3 0 0 1-2.598 1.5h-9.4q-.095 0-.186-.007a2.46 2.46 0 0 1-1.438-.592A2.5 2.5 0 0 1 2 14.461\"/>"},"folder-arrow-right-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.5 3A2.5 2.5 0 0 0 2 5.5v9A2.5 2.5 0 0 0 4.5 17h5.1a5.5 5.5 0 0 1-.393-1H4.5A1.5 1.5 0 0 1 3 14.5V8h4.086a1.5 1.5 0 0 0 1.06-.44L9.707 6H15.5A1.5 1.5 0 0 1 17 7.5v2.1q.538.276 1 .657V7.5A2.5 2.5 0 0 0 15.5 5H9.707L8.22 3.513A1.75 1.75 0 0 0 6.982 3zM3 5.5A1.5 1.5 0 0 1 4.5 4h2.482a.75.75 0 0 1 .53.22l1.28 1.28L7.44 6.854A.5.5 0 0 1 7.086 7H3zM14.5 10a4.5 4.5 0 1 1 0 9a4.5 4.5 0 0 1 0-9m2.353 4.854l.003-.003a.5.5 0 0 0 .144-.348v-.006a.5.5 0 0 0-.146-.35l-2-2a.5.5 0 0 0-.708.707L15.293 14H12.5a.5.5 0 0 0 0 1h2.793l-1.147 1.146a.5.5 0 0 0 .708.708z\"/>"},"board-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm3-2a2 2 0 0 0-2 2v1.058l5.5-.053V4zm4.5 0v8H16V6a2 2 0 0 0-2-2zm5.5 9h-5.5v3H14a2 2 0 0 0 2-2zm-6.5 3V8.005L4 8.058V14a2 2 0 0 0 2 2z\"/>"},"archive-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.5 10a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM2 4.75C2 3.784 2.784 3 3.75 3h12.5c.966 0 1.75.784 1.75 1.75v1.5c0 .698-.409 1.3-1 1.582V14a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7.832A1.75 1.75 0 0 1 2 6.25zM3.75 4a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h12.5a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75zM4 8v6a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8z\"/>"},"archive-arrow-back-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.5 10a.5.5 0 0 0 0 1h1.757c.313-.38.677-.716 1.08-1zM6 16h3.207q.149.524.393 1H6a3 3 0 0 1-3-3V7.832A1.75 1.75 0 0 1 2 6.25v-1.5C2 3.784 2.784 3 3.75 3h12.5c.966 0 1.75.784 1.75 1.75v1.5c0 .698-.409 1.3-1 1.582V9.6a5.5 5.5 0 0 0-1-.393V8H4v6a2 2 0 0 0 2 2M3.75 4a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h12.5a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75zM14.5 19a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9m-.896-6.396l-.897.896h1.543A2.75 2.75 0 0 1 17 16.25v.25a.5.5 0 0 1-1 0v-.25a1.75 1.75 0 0 0-1.75-1.75h-1.543l.897.896a.5.5 0 0 1-.708.708l-1.752-1.753a.5.5 0 0 1 .002-.705l1.75-1.75a.5.5 0 0 1 .708.708\"/>"},"book-open-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 16c-.456.607-1.182 1-2 1H3.5A1.5 1.5 0 0 1 2 15.5v-11A1.5 1.5 0 0 1 3.5 3H8c.818 0 1.544.393 2 1c.456-.607 1.182-1 2-1h4.5A1.5 1.5 0 0 1 18 4.5v11a1.5 1.5 0 0 1-1.5 1.5H12a2.5 2.5 0 0 1-2-1M3 4.5v11a.5.5 0 0 0 .5.5H8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 8 4H3.5a.5.5 0 0 0-.5.5m7.5 10A1.5 1.5 0 0 0 12 16h4.5a.5.5 0 0 0 .5-.5v-11a.5.5 0 0 0-.5-.5H12a1.5 1.5 0 0 0-1.5 1.5z\"/>"},"note-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14 3a3 3 0 0 1 2.995 2.824L17 6v4.379a2 2 0 0 1-.467 1.284l-.119.13l-4.621 4.621a2 2 0 0 1-1.238.578l-.176.008H6a3 3 0 0 1-2.995-2.824L3 14V6a3 3 0 0 1 2.824-2.995L6 3zm0 1H6a2 2 0 0 0-1.995 1.85L4 6v8a2 2 0 0 0 1.85 1.995L6 16h4v-3a3 3 0 0 1 2.824-2.995L13 10h3V6a2 2 0 0 0-1.85-1.995zm1.783 7.001L13 11a2 2 0 0 0-1.995 1.85L11 13v2.781l.086-.074l4.621-4.621q.04-.04.075-.085\"/>"},"clipboard-checkmark-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.085 3A1.5 1.5 0 0 1 8.5 2h3a1.5 1.5 0 0 1 1.415 1H14.5A1.5 1.5 0 0 1 16 4.5v4.707a5.5 5.5 0 0 0-1-.185V4.5a.5.5 0 0 0-.5-.5h-1.585A1.5 1.5 0 0 1 11.5 5h-3a1.5 1.5 0 0 1-1.415-1H5.5a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h4.1q.276.538.657 1H5.5A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3zM8.5 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.146-1.854a.5.5 0 0 0-.708 0L13.5 15.293l-.646-.647a.5.5 0 0 0-.708.708l1 1a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.708\"/>"},"grid-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.5 11A1.5 1.5 0 0 1 9 12.5v4A1.5 1.5 0 0 1 7.5 18h-4A1.5 1.5 0 0 1 2 16.5v-4A1.5 1.5 0 0 1 3.5 11zm9 0a1.5 1.5 0 0 1 1.5 1.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a1.5 1.5 0 0 1-1.5-1.5v-4a1.5 1.5 0 0 1 1.5-1.5zm-9 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5m9 0h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5m-9-10A1.5 1.5 0 0 1 9 3.5v4A1.5 1.5 0 0 1 7.5 9h-4A1.5 1.5 0 0 1 2 7.5v-4A1.5 1.5 0 0 1 3.5 2zm9 0A1.5 1.5 0 0 1 18 3.5v4A1.5 1.5 0 0 1 16.5 9h-4A1.5 1.5 0 0 1 11 7.5v-4A1.5 1.5 0 0 1 12.5 2zm-9 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5m9 0h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5\"/>"},"apps-list-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2 3.5A1.5 1.5 0 0 1 3.5 2h1A1.5 1.5 0 0 1 6 3.5v1A1.5 1.5 0 0 1 4.5 6h-1A1.5 1.5 0 0 1 2 4.5zM3.5 3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM2 9.5A1.5 1.5 0 0 1 3.5 8h1A1.5 1.5 0 0 1 6 9.5v1A1.5 1.5 0 0 1 4.5 12h-1A1.5 1.5 0 0 1 2 10.5zM3.5 9a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM2 15.5A1.5 1.5 0 0 1 3.5 14h1A1.5 1.5 0 0 1 6 15.5v1A1.5 1.5 0 0 1 4.5 18h-1A1.5 1.5 0 0 1 2 16.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM8 4.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5\"/>"},"column-triple-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 17a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2zm-1-2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1zm7 2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2zm-1-2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1zm7 2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2zm-1-2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1z\"/>"},"task-list-square-ltr-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.354 7.104a.5.5 0 0 0-.708-.708L7.234 7.808l-.397-.362a.5.5 0 0 0-.674.738l.75.685a.5.5 0 0 0 .69-.016zm0 4.292a.5.5 0 0 1 0 .708l-1.75 1.75a.5.5 0 0 1-.691.015l-.75-.685a.5.5 0 0 1 .674-.738l.397.363l1.412-1.413a.5.5 0 0 1 .708 0M11 12a.5.5 0 0 0 0 1h2.5a.5.5 0 0 0 0-1zm-.5-4.5A.5.5 0 0 1 11 7h2.5a.5.5 0 0 1 0 1H11a.5.5 0 0 1-.5-.5M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zM4 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z\"/>"},"text-bullet-list-tree-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 5.5a1 1 0 1 0 0-2a1 1 0 0 0 0 2m3-1a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m0 5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m4.5 4.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zm-2.5.5a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-5-4a1 1 0 1 0 0-2a1 1 0 0 0 0 2\"/>"},"checkbox-checked-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zM4 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm9.854 1.854a.5.5 0 0 0-.708-.708L8.5 11.793l-1.646-1.647a.5.5 0 0 0-.708.708l2 2a.5.5 0 0 0 .708 0z\"/>"},"square-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm3-2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z\"/>"},"circle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 3a7 7 0 1 0 0 14a7 7 0 0 0 0-14m-8 7a8 8 0 1 1 16 0a8 8 0 0 1-16 0\"/>"},"clock-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14m-.5 2a.5.5 0 0 1 .492.41L10 5.5V10h2.5a.5.5 0 0 1 .09.992L12.5 11h-3a.5.5 0 0 1-.492-.41L9 10.5v-5a.5.5 0 0 1 .5-.5\"/>"},"timer-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.5 2a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1zm7.656 1.929a.5.5 0 1 0-.707.707l1.414 1.414a.5.5 0 1 0 .707-.707zM9.5 6a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5m0 12a7 7 0 1 0 0-14a7 7 0 0 0 0 14m0-1a6 6 0 1 1 0-12a6 6 0 0 1 0 12\"/>"},"history-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 4a6 6 0 1 1-5.982 5.538a.5.5 0 1 0-.998-.076Q3 9.73 3 10a7 7 0 1 0 2-4.899V3.5a.5.5 0 0 0-1 0v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 0-1H5.528A5.98 5.98 0 0 1 10 4m0 2.5a.5.5 0 0 0-1 0v4a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 0-1H10z\"/>"},"calendar-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7 11a1 1 0 1 0 0-2a1 1 0 0 0 0 2m1 2a1 1 0 1 1-2 0a1 1 0 0 1 2 0m2-2a1 1 0 1 0 0-2a1 1 0 0 0 0 2m1 2a1 1 0 1 1-2 0a1 1 0 0 1 2 0m2-2a1 1 0 1 0 0-2a1 1 0 0 0 0 2m4-5.5A2.5 2.5 0 0 0 14.5 3h-9A2.5 2.5 0 0 0 3 5.5v9A2.5 2.5 0 0 0 5.5 17h9a2.5 2.5 0 0 0 2.5-2.5zM4 7h12v7.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 14.5zm1.5-3h9A1.5 1.5 0 0 1 16 5.5V6H4v-.5A1.5 1.5 0 0 1 5.5 4\"/>"},"calendar-ltr-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7 11a1 1 0 1 0 0-2a1 1 0 0 0 0 2m1 2a1 1 0 1 1-2 0a1 1 0 0 1 2 0m2-2a1 1 0 1 0 0-2a1 1 0 0 0 0 2m1 2a1 1 0 1 1-2 0a1 1 0 0 1 2 0m2-2a1 1 0 1 0 0-2a1 1 0 0 0 0 2m4-5.5A2.5 2.5 0 0 0 14.5 3h-9A2.5 2.5 0 0 0 3 5.5v9A2.5 2.5 0 0 0 5.5 17h9a2.5 2.5 0 0 0 2.5-2.5zM4 7h12v7.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 14.5zm1.5-3h9A1.5 1.5 0 0 1 16 5.5V6H4v-.5A1.5 1.5 0 0 1 5.5 4\"/>"},"calendar-clock-20-regular":{"body":"<path fill=\"currentColor\" d=\"M17 5.5A2.5 2.5 0 0 0 14.5 3h-9A2.5 2.5 0 0 0 3 5.5v9A2.5 2.5 0 0 0 5.5 17h4.1a5.5 5.5 0 0 1-.393-1H5.5A1.5 1.5 0 0 1 4 14.5V7h12v2.207q.524.149 1 .393zM5.5 4h9A1.5 1.5 0 0 1 16 5.5V6H4v-.5A1.5 1.5 0 0 1 5.5 4m9 15a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9m-.5-6.5a.5.5 0 0 1 1 0V14h1a.5.5 0 0 1 0 1h-1.5a.5.5 0 0 1-.5-.5z\"/>"},"calendar-add-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14.5 3A2.5 2.5 0 0 1 17 5.5v4.1a5.5 5.5 0 0 0-1-.393V7H4v7.5A1.5 1.5 0 0 0 5.5 16h3.707q.149.524.393 1H5.5A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3zm0 1h-9A1.5 1.5 0 0 0 4 5.5V6h12v-.5A1.5 1.5 0 0 0 14.5 4M19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-4-2a.5.5 0 0 0-1 0V14h-1.5a.5.5 0 0 0 0 1H14v1.5a.5.5 0 0 0 1 0V15h1.5a.5.5 0 0 0 0-1H15z\"/>"},"play-20-regular":{"body":"<path fill=\"currentColor\" d=\"M17.22 8.687a1.498 1.498 0 0 1 0 2.626l-9.997 5.499A1.5 1.5 0 0 1 5 15.499V4.501a1.5 1.5 0 0 1 2.223-1.313zm-.482 1.75a.5.5 0 0 0 0-.875L6.741 4.063A.5.5 0 0 0 6 4.501v10.998a.5.5 0 0 0 .741.438z\"/>"},"pause-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM4 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm9-2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm-1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1z\"/>"},"mic-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 13a3 3 0 0 0 3-3V5a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3m0-1a2 2 0 0 1-2-2V5a2 2 0 1 1 4 0v5a2 2 0 0 1-2 2M5 9.5a.5.5 0 0 1 .5.5a4.5 4.5 0 1 0 9 0a.5.5 0 0 1 1 0a5.5 5.5 0 0 1-5 5.478V17.5a.5.5 0 0 1-1 0v-2.022A5.5 5.5 0 0 1 4.5 10a.5.5 0 0 1 .5-.5\"/>"},"mic-off-20-regular":{"body":"<path fill=\"currentColor\" d=\"M12 5v4.879l.898.898Q13 10.404 13 10V5a3 3 0 0 0-5.998-.119L8 5.879V5a2 2 0 1 1 4 0M7 7.707L2.146 2.854a.5.5 0 1 1 .708-.708l15 15a.5.5 0 0 1-.708.708l-3.626-3.627a5.5 5.5 0 0 1-3.02 1.25V17.5a.5.5 0 0 1-1 0v-2.022A5.5 5.5 0 0 1 4.5 10a.5.5 0 0 1 1 0a4.5 4.5 0 0 0 7.309 3.516l-1.07-1.07A3 3 0 0 1 7 10zm4.016 4.016L8 8.707V10a2 2 0 0 0 3.016 1.723m3.787.959l-.742-.742A4.5 4.5 0 0 0 14.5 10a.5.5 0 0 1 1 0c0 .974-.253 1.888-.697 2.682\"/>"},"video-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 4a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h5a3 3 0 0 0 3-3v-.321l3.037 2.097a1.25 1.25 0 0 0 1.96-1.029V6.252a1.25 1.25 0 0 0-1.96-1.028L13 7.32V7a3 3 0 0 0-3-3zm8 4.536l3.605-2.49a.25.25 0 0 1 .392.206v7.495a.25.25 0 0 1-.392.206L13 11.463zM3 7a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/>"},"camera-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 6a4 4 0 1 0 0 8a4 4 0 0 0 0-8m-3 4a3 3 0 1 1 6 0a3 3 0 0 1-6 0m1.124-8a1.5 1.5 0 0 0-1.34.826L6.194 4h-1.69a2.5 2.5 0 0 0-2.5 2.5v8a2.5 2.5 0 0 0 2.5 2.5h11a2.5 2.5 0 0 0 2.5-2.5v-8a2.5 2.5 0 0 0-2.5-2.5h-1.69l-.584-1.17A1.5 1.5 0 0 0 11.888 2zm-.447 1.275A.5.5 0 0 1 8.124 3h3.764a.5.5 0 0 1 .448.276l.723 1.447a.5.5 0 0 0 .447.276h1.999a1.5 1.5 0 0 1 1.5 1.5V14.5a1.5 1.5 0 0 1-1.5 1.5h-11a1.5 1.5 0 0 1-1.5-1.5v-8a1.5 1.5 0 0 1 1.5-1.5h1.998a.5.5 0 0 0 .446-.276z\"/>"},"speaker-2-20-regular":{"body":"<path fill=\"currentColor\" d=\"M11.996 3.006c0-.873-1.04-1.327-1.68-.733L6.444 5.866a.5.5 0 0 1-.34.134H3.496a1.5 1.5 0 0 0-1.5 1.5v5a1.5 1.5 0 0 0 1.5 1.5h2.608a.5.5 0 0 1 .34.133l3.872 3.594c.64.593 1.68.14 1.68-.733zM7.124 6.599l3.872-3.593v13.988L7.124 13.4a1.5 1.5 0 0 0-1.02-.4H3.496a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5h2.608a1.5 1.5 0 0 0 1.02-.4m8.132-1.972a.5.5 0 0 1 .706.04a8 8 0 0 1 0 10.666a.5.5 0 0 1-.745-.667a7 7 0 0 0 0-9.333a.5.5 0 0 1 .039-.706m-1.176 8.306a.5.5 0 0 1-.183-.683a4.5 4.5 0 0 0 0-4.5a.5.5 0 1 1 .865-.5a5.5 5.5 0 0 1 .001 5.5a.5.5 0 0 1-.683.183\"/>"},"radio-button-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 3a7 7 0 1 0 0 14a7 7 0 0 0 0-14m-8 7a8 8 0 1 1 16 0a8 8 0 0 1-16 0\"/>"},"flash-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6.19 2.77c.131-.456.548-.77 1.022-.77h5.25c.725 0 1.237.71 1.007 1.398l-.002.008L12.205 7h2.564c.947 0 1.407 1.144.767 1.811l-.004.004l-8.676 8.858c-.755.782-2.06.06-1.796-.996l1.17-4.679H4.963a1.062 1.062 0 0 1-1.022-1.354zM7.213 3a.06.06 0 0 0-.06.045l-2.25 7.874c-.01.04.02.08.06.08H6.87a.5.5 0 0 1 .485.62l-1.325 5.3a.1.1 0 0 0-.003.03q0 .006.003.011q.005.013.03.03c.018.01.034.01.042.01l.01-.004a.1.1 0 0 0 .024-.018l.004-.004l8.675-8.856a.06.06 0 0 0 .017-.032a.1.1 0 0 0-.007-.044a.1.1 0 0 0-.025-.034q-.006-.007-.03-.008H11.5a.5.5 0 0 1-.472-.666l1.493-4.254a.062.062 0 0 0-.06-.08z\"/>"},"cloud-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 4c2.817 0 4.415 1.923 4.647 4.246h.07c1.814 0 3.283 1.512 3.283 3.377S16.53 15 14.718 15H5.282C3.469 15 2 13.488 2 11.623C2 9.82 3.373 8.347 5.102 8.251l.251-.005C5.587 5.908 7.183 4 10 4m0 1C7.886 5 6.551 6.316 6.348 8.345a1 1 0 0 1-.995.901h-.07C4.027 9.246 3 10.304 3 11.623C3 12.943 4.028 14 5.282 14h9.436C15.972 14 17 12.942 17 11.623c0-1.32-1.028-2.377-2.282-2.377h-.071a1 1 0 0 1-.995-.9C13.45 6.325 12.109 5 10 5\"/>"},"hard-drive-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2 12c0-.398.08-.791.237-1.156l2.414-5.632A2 2 0 0 1 6.489 4h7.104c.742 0 1.43.41 1.763 1.088c.571 1.162 1.633 3.424 2.454 5.774c.13.369.19.754.19 1.138v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm11.593-7H6.49a1 1 0 0 0-.919.606l-1.894 4.42Q3.834 10 4 10h12q.231 0 .447.05a57 57 0 0 0-1.988-4.521a.96.96 0 0 0-.866-.529M16 15a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1zm-1.25-1.25a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5\"/>"},"server-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.5 5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM7 12.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m.5 1.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM5 4.5A2.5 2.5 0 0 1 7.5 2h5A2.5 2.5 0 0 1 15 4.5v11a2.5 2.5 0 0 1-2.5 2.5h-5A2.5 2.5 0 0 1 5 15.5zM7.5 3A1.5 1.5 0 0 0 6 4.5v11A1.5 1.5 0 0 0 7.5 17h5a1.5 1.5 0 0 0 1.5-1.5v-11A1.5 1.5 0 0 0 12.5 3z\"/>"},"database-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4 5c0-1.007.875-1.755 1.904-2.223C6.978 2.289 8.427 2 10 2s3.022.289 4.096.777C15.125 3.245 16 3.993 16 5v10c0 1.007-.875 1.755-1.904 2.223C13.022 17.71 11.573 18 10 18s-3.022-.289-4.096-.777C4.875 16.755 4 16.007 4 15zm1 0c0 .374.356.875 1.318 1.313C7.234 6.729 8.536 7 10 7s2.766-.27 3.682-.687C14.644 5.875 15 5.373 15 5c0-.374-.356-.875-1.318-1.313C12.766 3.271 11.464 3 10 3s-2.766.27-3.682.687C5.356 4.125 5 4.627 5 5m10 1.698a5 5 0 0 1-.904.525C13.022 7.711 11.573 8 10 8s-3.022-.289-4.096-.777A5 5 0 0 1 5 6.698V15c0 .374.356.875 1.318 1.313c.916.416 2.218.687 3.682.687s2.766-.27 3.682-.687C14.644 15.875 15 15.373 15 15z\"/>"},"developer-board-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 7a3 3 0 1 0 0 6a3 3 0 0 0 0-6m-2 3a2 2 0 1 1 4 0a2 2 0 0 1-4 0m-.5-8a.5.5 0 0 1 .5.5V4h1.5V2.5a.5.5 0 0 1 1 0V4H12V2.5a.5.5 0 0 1 1 0V4h.5A2.5 2.5 0 0 1 16 6.5V7h1.5a.5.5 0 0 1 0 1H16v1.5h1.5a.5.5 0 0 1 0 1H16V12h1.5a.5.5 0 0 1 0 1H16v.5a2.5 2.5 0 0 1-2.5 2.5H13v1.5a.5.5 0 0 1-1 0V16h-1.5v1.5a.5.5 0 0 1-1 0V16H8v1.5a.5.5 0 0 1-1 0V16h-.5A2.5 2.5 0 0 1 4 13.5V13H2.5a.5.5 0 0 1 0-1H4v-1.5H2.5a.5.5 0 0 1 0-1H4V8H2.5a.5.5 0 0 1 0-1H4v-.5A2.5 2.5 0 0 1 6.5 4H7V2.5a.5.5 0 0 1 .5-.5M15 6.5A1.5 1.5 0 0 0 13.5 5h-7A1.5 1.5 0 0 0 5 6.5v7A1.5 1.5 0 0 0 6.5 15h7a1.5 1.5 0 0 0 1.5-1.5z\"/>"},"window-console-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5.646 9.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L7.293 11.5L5.646 9.854a.5.5 0 0 1 0-.708M14.5 13h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1M2.996 5.5a2.5 2.5 0 0 1 2.5-2.5h9a2.5 2.5 0 0 1 2.5 2.5V6H17v1h-.003v7.5a2.5 2.5 0 0 1-2.5 2.5h-9a2.5 2.5 0 0 1-2.5-2.5zm13 .5v-.5a1.5 1.5 0 0 0-1.5-1.5h-9a1.5 1.5 0 0 0-1.5 1.5V6zm-12 1v7.5a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5V7z\"/>"},"code-20-regular":{"body":"<path fill=\"currentColor\" d=\"M12.967 3.68a.5.5 0 0 0-.934-.36l-5 13a.5.5 0 1 0 .934.36zM5.825 6.12a.5.5 0 0 1 .055.706L3.159 10l2.72 3.175a.5.5 0 0 1-.759.65l-3-3.5a.5.5 0 0 1 0-.65l3-3.5a.5.5 0 0 1 .705-.054m8.35 8.26a.5.5 0 0 1-.055-.705l2.722-3.175l-2.722-3.174a.5.5 0 1 1 .76-.651l3 3.5a.5.5 0 0 1 0 .65l-3 3.5a.5.5 0 0 1-.705.055\"/>"},"branch-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 5a3 3 0 0 1-2.145 2.876c.178.223.416.483.72.744c.726.622 1.834 1.252 3.425 1.363a3 3 0 1 1 .168 1.01c-1.96-.078-3.342-.841-4.243-1.613a7 7 0 0 1-.425-.398v3.06a3 3 0 1 1-1 0V7.958A3 3 0 1 1 10 5M7.009 7a2 2 0 1 0-.018-4a2 2 0 0 0 .018 4M17 10a2 2 0 1 0-4 0a2 2 0 0 0 4 0M7 17a2 2 0 1 0 0-4a2 2 0 0 0 0 4\"/>"},"flowchart-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.5 3A1.5 1.5 0 0 0 3 4.5v2A1.5 1.5 0 0 0 4.5 8H5v3.84a1 1 0 0 0-.207.16L3 13.793a1 1 0 0 0 0 1.414L4.793 17a1 1 0 0 0 1.414 0L8 15.207q.094-.095.16-.207H12v.5a1.5 1.5 0 0 0 1.5 1.5h2a1.5 1.5 0 0 0 1.5-1.5v-2a1.5 1.5 0 0 0-1.5-1.5h-2a1.5 1.5 0 0 0-1.5 1.5v.5H8.16a1 1 0 0 0-.16-.207L6.207 12A1 1 0 0 0 6 11.84V8h.5A1.5 1.5 0 0 0 8 6.5v-2A1.5 1.5 0 0 0 6.5 3zM4 4.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5zm-.293 10L5.5 12.707L7.293 14.5L5.5 16.293zM13.5 13h2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5\"/>"},"plug-connected-20-regular":{"body":"<path fill=\"currentColor\" d=\"M17.854 2.854a.5.5 0 0 0-.708-.708l-2.668 2.669a4.036 4.036 0 0 0-5.332.331l-.3.3a1.49 1.49 0 0 0 0 2.108l3.6 3.6a1.49 1.49 0 0 0 2.107 0l.3-.3a4.036 4.036 0 0 0 .332-5.332zm-4.008 7.592a.49.49 0 0 1-.693 0l-3.6-3.6a.49.49 0 0 1 0-.692l.3-.3a3.036 3.036 0 0 1 4.293 4.292zm-6.292-1.6a1.49 1.49 0 0 0-2.107 0l-.3.3a4.036 4.036 0 0 0-.332 5.332l-2.669 2.668a.5.5 0 0 0 .708.708l2.668-2.669a4.036 4.036 0 0 0 5.332-.332l.3-.3a1.49 1.49 0 0 0 0-2.107zm-1.4.708a.49.49 0 0 1 .693 0l3.6 3.6a.49.49 0 0 1 0 .692l-.3.3a3.035 3.035 0 1 1-4.293-4.292z\"/>"},"power-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.5 2.5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0zM13.743 4a.5.5 0 1 0-.499.867a6.5 6.5 0 1 1-6.494.004a.5.5 0 1 0-.5-.866A7.5 7.5 0 1 0 13.743 4\"/>"},"puzzle-piece-20-regular":{"body":"<path fill=\"currentColor\" d=\"M11 3c-.69 0-1.25.56-1.25 1.25V5H6.5a.5.5 0 0 0-.5.5v3.25h-.75a1.25 1.25 0 1 0 0 2.5H6v3.25a.5.5 0 0 0 .5.5h3.25v.75a1.25 1.25 0 1 0 2.5 0V15h3.25a.5.5 0 0 0 .5-.5v-2.25h-.75a2.25 2.25 0 0 1 0-4.5H16V5.5a.5.5 0 0 0-.5-.5h-3.25v-.75C12.25 3.56 11.69 3 11 3M8.764 4a2.25 2.25 0 0 1 4.472 0H15.5A1.5 1.5 0 0 1 17 5.5v3.25h-1.75a1.25 1.25 0 1 0 0 2.5H17v3.25a1.5 1.5 0 0 1-1.5 1.5h-2.264a2.25 2.25 0 0 1-4.472 0H6.5A1.5 1.5 0 0 1 5 14.5v-2.264a2.25 2.25 0 0 1 0-4.472V5.5A1.5 1.5 0 0 1 6.5 4z\"/>"},"cube-multiple-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.205 2.513a5 5 0 0 1 3.59 0l4.243 1.632c.58.223.962.78.962 1.4v.141a2.5 2.5 0 0 0-.603-.333l-4.961-1.908a4 4 0 0 0-2.872 0L3.603 5.353A2.5 2.5 0 0 0 3 5.686v-.14a1.5 1.5 0 0 1 .962-1.4zM6.04 8.303a.5.5 0 0 1 .657-.263L10 9.456l3.303-1.416a.5.5 0 0 1 .394.92L10.5 10.33v3.17a.5.5 0 0 1-1 0v-3.17L6.303 8.96a.5.5 0 0 1-.263-.657m2.883-3.925a3 3 0 0 1 2.154 0l4.961 1.909c.58.222.962.779.962 1.4v6.626a1.5 1.5 0 0 1-.962 1.4l-4.961 1.908a3 3 0 0 1-2.154 0l-4.961-1.908a1.5 1.5 0 0 1-.962-1.4V7.687a1.5 1.5 0 0 1 .962-1.4zm1.795.934a2 2 0 0 0-1.436 0L4.321 7.22A.5.5 0 0 0 4 7.687v6.626a.5.5 0 0 0 .32.467l4.962 1.908a2 2 0 0 0 1.436 0l4.962-1.908a.5.5 0 0 0 .32-.467V7.687a.5.5 0 0 0-.32-.467z\"/>"},"box-20-regular":{"body":"<path fill=\"currentColor\" d=\"M11.3 2.48a3.5 3.5 0 0 0-2.6 0L2.943 4.785A1.5 1.5 0 0 0 2 6.176v7.646a1.5 1.5 0 0 0 .943 1.393L8.7 17.518a3.5 3.5 0 0 0 2.6 0l5.757-2.303A1.5 1.5 0 0 0 18 13.822V6.176a1.5 1.5 0 0 0-.943-1.392zm-2.228.93a2.5 2.5 0 0 1 1.857 0l5.225 2.09l-2.279.91l-6.154-2.46zM6.375 4.487l6.154 2.461L10 7.961L3.846 5.499zm4.125 4.35l6.5-2.6v7.584a.5.5 0 0 1-.314.465l-5.757 2.303q-.21.083-.429.128zm-1 0v7.88a2.5 2.5 0 0 1-.428-.128l-5.758-2.303A.5.5 0 0 1 3 13.822V6.238z\"/>"},"layer-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.505 3.117a1 1 0 0 0-1.011 0l-6.01 3.52a1 1 0 0 0 .003 1.726l6.009 3.502a1 1 0 0 0 1.007 0l6.009-3.502a1 1 0 0 0 .001-1.727zM9.494 4.276a1 1 0 0 1 1.01 0l5.504 3.223l-5.505 3.209a1 1 0 0 1-1.007 0L3.99 7.499zM3.07 9.65l6.438 3.623a1 1 0 0 0 .98 0l6.438-3.623a1 1 0 0 1-.415 1.26l-6.01 3.502a1 1 0 0 1-1.006 0l-6.01-3.502a1 1 0 0 1-.415-1.26m0 2.453l6.438 3.622a1 1 0 0 0 .98 0l6.438-3.622a1 1 0 0 1-.415 1.26l-6.01 3.502a1 1 0 0 1-1.006 0l-6.01-3.502a1 1 0 0 1-.415-1.26\"/>"},"globe-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 18a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-15c.657 0 1.407.59 2.022 1.908c.217.466.406 1.002.559 1.592H7.419c.153-.59.342-1.126.56-1.592C8.592 3.59 9.342 3 10 3M7.072 4.485A10.5 10.5 0 0 0 6.389 6.5H3.936a7.02 7.02 0 0 1 3.778-3.118c-.241.33-.456.704-.642 1.103M6.192 7.5A16 16 0 0 0 6 10c0 .87.067 1.712.193 2.5H3.46A7 7 0 0 1 3 10c0-.88.163-1.724.46-2.5zm.197 6c.176.743.407 1.422.683 2.015c.186.399.401.773.642 1.103A7.02 7.02 0 0 1 3.936 13.5zm1.03 0h5.162a9.3 9.3 0 0 1-.56 1.592C11.408 16.41 10.658 17 10 17s-1.407-.59-2.022-1.908A9.3 9.3 0 0 1 7.42 13.5m5.375-1H7.206A15 15 0 0 1 7 10c0-.883.073-1.725.206-2.5h5.588c.133.775.206 1.617.206 2.5s-.073 1.725-.206 2.5m.817 1h2.453a7.02 7.02 0 0 1-3.778 3.118c.241-.33.456-.704.642-1.103c.276-.593.507-1.272.683-2.015m2.93-1h-2.734c.126-.788.193-1.63.193-2.5s-.067-1.712-.193-2.5h2.733c.297.776.46 1.62.46 2.5s-.163 1.724-.46 2.5m-4.255-9.118A7.02 7.02 0 0 1 16.064 6.5H13.61a10.5 10.5 0 0 0-.683-2.015a6.6 6.6 0 0 0-.642-1.103\"/>"},"link-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8 6a.5.5 0 0 1 .09.992L8 7H6a3 3 0 0 0-.197 5.994L6 13h2a.5.5 0 0 1 .09.992L8 14H6a4 4 0 0 1-.22-7.994L6 6zm6 0a4 4 0 0 1 .22 7.994L14 14h-2a.5.5 0 0 1-.09-.992L12 13h2a3 3 0 0 0 .197-5.994L14 7h-2a.5.5 0 0 1-.09-.992L12 6zM6 9.5h8a.5.5 0 0 1 .09.992L14 10.5H6a.5.5 0 0 1-.09-.992zh8z\"/>"},"wrench-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9 6.5a4.5 4.5 0 0 1 6.352-4.102a.5.5 0 0 1 .148.809L13.207 5.5L14.5 6.793L16.793 4.5a.5.5 0 0 1 .809.147a4.5 4.5 0 0 1-5.207 6.216L6.03 17.311a2.357 2.357 0 0 1-3.374-3.293L9.082 7.36A4.5 4.5 0 0 1 9 6.5M13.5 3a3.5 3.5 0 0 0-3.387 4.386a.5.5 0 0 1-.125.473l-6.612 6.854a1.357 1.357 0 0 0 1.942 1.896l6.574-6.66a.5.5 0 0 1 .512-.124a3.5 3.5 0 0 0 4.521-4.044l-2.072 2.073a.5.5 0 0 1-.707 0l-2-2a.5.5 0 0 1 0-.708l2.073-2.072a3.5 3.5 0 0 0-.72-.074\"/>"},"beaker-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14 3a.5.5 0 0 1 0 1h-.996v4.684c0 .58.144 1.15.42 1.66l2.395 4.446a1.5 1.5 0 0 1-1.32 2.212H5.502a1.5 1.5 0 0 1-1.32-2.212l2.394-4.443a3.5 3.5 0 0 0 .418-1.66V4H6a.5.5 0 0 1 0-1zM7.994 4v4.687a4.5 4.5 0 0 1-.538 2.134L6.821 12h6.359l-.637-1.181a4.5 4.5 0 0 1-.539-2.135V4zm5.724 9H6.282l-1.22 2.264a.5.5 0 0 0 .44.738h8.997a.5.5 0 0 0 .44-.738z\"/>"},"rocket-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.755 6.426a1.998 1.998 0 1 1 2.825 2.827a1.998 1.998 0 0 1-2.825-2.827m2.119.708a.998.998 0 1 0-1.413 1.411a.998.998 0 0 0 1.413-1.411m-1.125 7.37a1.5 1.5 0 0 1-1.703-.295l-.61-.609l-.732 1.22a.5.5 0 0 1-.782.097l-2.83-2.831a.5.5 0 0 1 .096-.782l1.22-.732l-.61-.61a1.5 1.5 0 0 1-.295-1.703l-1.12-1.12a.5.5 0 0 1 0-.707l1.06-1.06a3 3 0 0 1 3.413-.589l.938-.937a6.29 6.29 0 0 1 6.33-1.557c.76.238 1.357.834 1.595 1.595a6.29 6.29 0 0 1-1.557 6.33l-.937.938a3 3 0 0 1-.59 3.413l-1.059 1.06a.5.5 0 0 1-.707 0zm4.076-11.26a5.29 5.29 0 0 0-5.324 1.309l-.816.815l.004.004l-.707.707l-.004-.004l-2.122 2.122l.004.004l-.403.403a.5.5 0 0 0 .048.651l4.248 4.247a.5.5 0 0 0 .652.047l.402-.401l.003.004l2.122-2.122l-.003-.004l.707-.707l.003.004l.816-.816a5.29 5.29 0 0 0 1.31-5.325a1.43 1.43 0 0 0-.94-.938m-3.307 10.615l.704.705l.707-.707a2 2 0 0 0 .52-1.93zm-4.438-8.3a2 2 0 0 0-1.93.52l-.706.707l.705.704zm.627 7.312l-1.57-1.57l-.886.53l1.925 1.926zm-2.904 2.04a.5.5 0 1 0-.707-.706l-1.768 1.768a.5.5 0 1 0 .707.707zM4.388 12.79a.5.5 0 0 1 0 .707l-.71.709a.5.5 0 0 1-.706-.708l.709-.708a.5.5 0 0 1 .707 0m2.83 3.537a.5.5 0 0 0-.707-.707l-.709.709a.5.5 0 1 0 .707.707z\"/>"},"bot-20-regular":{"body":"<path fill=\"currentColor\" d=\"M12 5.5a1 1 0 1 0 0 2a1 1 0 0 0 0-2m-5 1a1 1 0 1 1 2 0a1 1 0 0 1-2 0m3.5-4a.5.5 0 0 0-1 0V3h-3A1.5 1.5 0 0 0 5 4.5v4A1.5 1.5 0 0 0 6.5 10h7A1.5 1.5 0 0 0 15 8.5v-4A1.5 1.5 0 0 0 13.5 3h-3zM6.5 4h7a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5m3.75 13.998c2.616-.033 4.195-.595 5.122-1.44c.875-.8 1.089-1.777 1.123-2.556h.005v-.69a1.81 1.81 0 0 0-1.81-1.809H11.5V11.5h-3v.003H5.31c-1 0-1.81.81-1.81 1.81v.689h.005c.034.78.248 1.757 1.123 2.555c.927.846 2.506 1.408 5.122 1.441V18h.5zm-4.94-5.495h9.38a.81.81 0 0 1 .81.81v.437c0 .69-.131 1.456-.802 2.069C14.01 16.446 12.66 17 10 17s-4.01-.554-4.698-1.181c-.67-.613-.802-1.38-.802-2.069v-.438a.81.81 0 0 1 .81-.809\"/>"},"brain-circuit-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5.7 3.948a2.423 2.423 0 0 1 4.3-1a2.423 2.423 0 0 1 4.3 1l.125.627l.406.081A2.7 2.7 0 0 1 17 7.302V7.5c0 .726-.31 1.38-.805 1.837a3.248 3.248 0 0 1-.77 6.088l-.037.185A2.973 2.973 0 0 1 10 16.678a2.973 2.973 0 0 1-5.388-1.068l-.037-.185a3.248 3.248 0 0 1-.77-6.088A2.5 2.5 0 0 1 3 7.5v-.198a2.7 2.7 0 0 1 2.169-2.646l.406-.08zm8.3 6.967v.585a1.5 1.5 0 0 1-1.5 1.5h-2v2.027a1.973 1.973 0 0 0 3.907.387l.103-.512a.5.5 0 0 1 .392-.392l.291-.059a2.248 2.248 0 0 0-.28-4.445a1.5 1.5 0 0 1-.913.909m-1 0a1.5 1.5 0 1 1 1.895-1.968A1.5 1.5 0 0 0 16 7.5v-.198c0-.81-.571-1.506-1.365-1.665l-.733-.147a.5.5 0 0 1-.392-.392l-.191-.954a1.423 1.423 0 0 0-2.819.28V12h2a.5.5 0 0 0 .5-.5zM9.5 6V4.423a1.423 1.423 0 0 0-2.819-.279l-.19.954a.5.5 0 0 1-.393.392l-.733.147A1.7 1.7 0 0 0 4 7.302V7.5A1.5 1.5 0 0 0 5.5 9h1A1.5 1.5 0 0 1 8 10.5v.585a1.5 1.5 0 1 1-1 0V10.5a.5.5 0 0 0-.5-.5H5.248a2.248 2.248 0 0 0-.441 4.451l.291.059a.5.5 0 0 1 .392.392l.103.512a1.973 1.973 0 0 0 3.907-.387V7h-.585a1.5 1.5 0 1 1 0-1zM8 6.5a.5.5 0 1 0-1 0a.5.5 0 0 0 1 0M7.5 13a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1m6-3a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1\"/>"},"sparkle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.398 12.809a1.04 1.04 0 0 0 1.204-.003c.178-.13.313-.31.387-.518l.447-1.373a2.34 2.34 0 0 1 1.477-1.479l1.391-.45a1.045 1.045 0 0 0-.044-1.98l-1.375-.448a2.34 2.34 0 0 1-1.48-1.477l-.452-1.388a1.044 1.044 0 0 0-1.973.017l-.457 1.4a2.34 2.34 0 0 1-1.44 1.45l-1.39.447a1.045 1.045 0 0 0 .016 1.974l1.374.445a2.33 2.33 0 0 1 1.481 1.488l.452 1.391c.072.204.206.38.382.504m.085-7.415l.527-1.377l.44 1.377a3.33 3.33 0 0 0 2.117 2.114l1.406.53l-1.382.447a3.34 3.34 0 0 0-2.115 2.117l-.523 1.378l-.449-1.379a3.34 3.34 0 0 0-.8-1.31a3.4 3.4 0 0 0-1.312-.812l-1.378-.522l1.386-.45a3.36 3.36 0 0 0 1.29-.813a3.4 3.4 0 0 0 .793-1.3m6.052 11.457a.806.806 0 0 0 1.226-.398l.248-.762a1.1 1.1 0 0 1 .26-.42c.118-.12.262-.208.42-.26l.772-.252a.8.8 0 0 0-.023-1.52l-.764-.25a1.08 1.08 0 0 1-.68-.678l-.252-.773a.8.8 0 0 0-1.518.01l-.247.762a1.07 1.07 0 0 1-.665.679l-.773.252a.8.8 0 0 0 .008 1.518l.763.247c.16.054.304.143.422.261c.119.119.207.263.258.422l.253.774a.8.8 0 0 0 .292.388m-.913-2.793L12.443 14l.184-.064a2.11 2.11 0 0 0 1.3-1.317l.058-.178l.06.181a2.08 2.08 0 0 0 1.316 1.316l.195.063l-.18.06a2.08 2.08 0 0 0-1.317 1.32l-.059.181l-.058-.18a2.08 2.08 0 0 0-1.32-1.323\"/>"},"wand-20-regular":{"body":"<path fill=\"currentColor\" d=\"M16.5 2a.5.5 0 0 1 .5.5V3h.5a.5.5 0 0 1 0 1H17v.5a.5.5 0 0 1-1 0V4h-.5a.5.5 0 1 1 0-1h.5v-.5a.5.5 0 0 1 .5-.5m-10 4a.5.5 0 0 0 0-1H6v-.5a.5.5 0 0 0-1 0V5h-.5a.5.5 0 0 0 0 1H5v.5a.5.5 0 0 0 1 0V6zm9 9a.5.5 0 0 0 0-1H15v-.5a.5.5 0 0 0-1 0v.5h-.5a.5.5 0 1 0 0 1h.5v.5a.5.5 0 1 0 1 0V15zm-2.066-8.434a1.914 1.914 0 0 0-2.707 0l-8.166 8.166a1.914 1.914 0 1 0 2.707 2.707l8.166-8.166a1.914 1.914 0 0 0 0-2.707m-2 .707a.914.914 0 0 1 1.293 1.293l-.477.477l-1.293-1.293zM10.25 8.457l1.293 1.293l-6.982 6.982a.914.914 0 0 1-1.293-1.292z\"/>"},"lightbulb-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2c3.314 0 6 2.597 6 5.8c0 1.677-.745 3.216-2.204 4.594a.6.6 0 0 0-.145.213l-.026.081l-.936 3.917c-.184.771-.865 1.33-1.67 1.39l-.144.005h-1.75c-.818 0-1.535-.516-1.776-1.262l-.038-.133l-.935-3.916a.6.6 0 0 0-.17-.295c-1.39-1.312-2.133-2.77-2.2-4.355L4 7.8l.003-.191C4.108 4.494 6.753 2 10 2m2.045 13h-4.09l.319 1.334l.026.096c.097.3.376.522.712.563l.113.007h1.713l.106-.003a.86.86 0 0 0 .741-.525l.031-.1zM10 3C7.368 3 5.212 4.953 5.015 7.414l-.012.212L5 7.779l.004.217c.056 1.304.674 2.525 1.888 3.671c.188.178.33.398.414.64l.043.15L7.716 14h4.569l.387-1.615l.051-.15c.086-.215.218-.409.386-.568C14.383 10.465 15 9.181 15 7.8C15 5.157 12.769 3 10 3\"/>"},"target-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 11.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M5 10a5 5 0 1 1 10 0a5 5 0 0 1-10 0m5-4a4 4 0 1 0 0 8a4 4 0 0 0 0-8m-8 4a8 8 0 1 1 16 0a8 8 0 0 1-16 0m8-7a7 7 0 1 0 0 14a7 7 0 0 0 0-14\"/>"},"arrow-trending-lines-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14.5 2a.5.5 0 0 0 0 1h1.793L11.5 7.793L8.854 5.146a.5.5 0 0 0-.708 0l-5 5a.5.5 0 0 0 .708.708L8.5 6.207l2.646 2.647a.5.5 0 0 0 .708 0L17 3.707V5.5a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-.5-.5zm1 7a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 1 0v-8a.5.5 0 0 0-.5-.5m-8 2a.5.5 0 0 0-.5.5v6a.5.5 0 0 0 1 0v-6a.5.5 0 0 0-.5-.5m3.5 2.5a.5.5 0 0 1 1 0v4a.5.5 0 0 1-1 0zm-8 1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0z\"/>"},"data-bar-vertical-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 3a2 2 0 0 0-2 2v10a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2M4 5a1 1 0 0 1 2 0v10a1 1 0 1 1-2 0zm4 3a2 2 0 1 1 4 0v7a2 2 0 1 1-4 0zm2-1a1 1 0 0 0-1 1v7a1 1 0 1 0 2 0V8a1 1 0 0 0-1-1m3 4a2 2 0 1 1 4 0v4a2 2 0 1 1-4 0zm2-1a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0v-4a1 1 0 0 0-1-1\"/>"},"wifi-1-20-regular":{"body":"<path fill=\"currentColor\" d=\"M16.832 7.384c.41.409.796.877 1.133 1.365a.5.5 0 0 1-.823.568A8.612 8.612 0 0 0 3.946 8.091c-.348.348-.693.77-1.007 1.222a.5.5 0 0 1-.821-.57a10 10 0 0 1 1.121-1.36a9.61 9.61 0 0 1 13.593 0m-2.236 1.973a6.6 6.6 0 0 1 1.194 1.656a.5.5 0 0 1-.89.455a5.6 5.6 0 0 0-1.01-1.404a5.45 5.45 0 0 0-8.716 1.39a.5.5 0 1 1-.892-.452a6.45 6.45 0 0 1 10.315-1.645m-1.709 2.497c.355.354.647.79.85 1.254a.5.5 0 0 1-.916.401a3.1 3.1 0 0 0-.64-.948a3.033 3.033 0 0 0-4.29 0a3 3 0 0 0-.631.938a.5.5 0 1 1-.916-.401a4 4 0 0 1 .84-1.244a4.033 4.033 0 0 1 5.703 0m-1.924 1.933a1.298 1.298 0 1 1-1.836 1.836a1.298 1.298 0 0 1 1.836-1.836\"/>"},"weather-squalls-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6.568 6.11A3.248 3.248 0 0 1 13 6.75A3.25 3.25 0 0 1 9.75 10H2.5a.5.5 0 1 1 0-1h7.25a2.251 2.251 0 0 0 .002-4.5A2.25 2.25 0 0 0 7.55 6.307l-.059.291a.5.5 0 1 1-.98-.196zM13 10.5a2.5 2.5 0 1 1 2.5 2.5h-1.38c.24.357.379.787.379 1.25a2.254 2.254 0 0 1-2.255 2.25a2.264 2.264 0 0 1-2.233-1.888l-.005-.03a.5.5 0 1 1 .986-.164l.005.03c.101.605.63 1.052 1.247 1.052a1.25 1.25 0 1 0 .005-2.5H2.5a.5.5 0 0 1 0-1h13a1.5 1.5 0 1 0-1.5-1.5a.5.5 0 0 1-1 0\"/>"},"lock-closed-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 1a4 4 0 0 1 4 4v2.05a2.5 2.5 0 0 1 2 2.45v6a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 4 15.5v-6a2.5 2.5 0 0 1 2-2.45V5a4 4 0 0 1 4-4M6.5 8A1.5 1.5 0 0 0 5 9.5v6A1.5 1.5 0 0 0 6.5 17h7a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 13.5 8zm3.5 3.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2M10 2a3 3 0 0 0-3 3v2h6V5a3 3 0 0 0-3-3\"/>"},"lock-open-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15 1a4 4 0 0 1 4 4v.5a.5.5 0 0 1-1 0V5a3 3 0 1 0-6 0v2h1.5A2.5 2.5 0 0 1 16 9.5v6a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 4 15.5v-6A2.5 2.5 0 0 1 6.5 7H11V5a4 4 0 0 1 4-4M6.5 8A1.5 1.5 0 0 0 5 9.5v6A1.5 1.5 0 0 0 6.5 17h7a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 13.5 8zm3.5 3.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2\"/>"},"key-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15 6a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-2.5-4C9.424 2 7 4.424 7 7.5c0 .397.04.796.122 1.175c.058.27-.008.504-.142.638l-4.54 4.54A1.5 1.5 0 0 0 2 14.915V16.5A1.5 1.5 0 0 0 3.5 18h2A1.5 1.5 0 0 0 7 16.5V16h1a1 1 0 0 0 1-1v-1h1a1 1 0 0 0 1-1v-.18c.493.134 1.007.18 1.5.18c3.076 0 5.5-2.424 5.5-5.5S15.576 2 12.5 2M8 7.5C8 4.976 9.976 3 12.5 3S17 4.976 17 7.5S15.024 12 12.5 12c-.66 0-1.273-.095-1.776-.347A.5.5 0 0 0 10 12.1v.9H9a1 1 0 0 0-1 1v1H7a1 1 0 0 0-1 1v.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.586a.5.5 0 0 1 .146-.353l4.541-4.541c.432-.432.522-1.044.412-1.556A4.6 4.6 0 0 1 8 7.5\"/>"},"shield-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.723 2.084a.5.5 0 0 1 .554 0a15.05 15.05 0 0 0 6.294 2.421A.5.5 0 0 1 17 5v4.5c0 3.891-2.307 6.73-6.82 8.467a.5.5 0 0 1-.36 0C5.308 16.23 3 13.39 3 9.5V5a.5.5 0 0 1 .43-.495a15.05 15.05 0 0 0 6.293-2.421m-.124 1.262A16 16 0 0 1 4 5.428V9.5c0 3.392 1.968 5.863 6 7.463c4.032-1.6 6-4.071 6-7.463V5.428a16 16 0 0 1-5.6-2.082l-.4-.249z\"/>"},"shield-checkmark-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.723 2.084a.5.5 0 0 1 .554 0a15.05 15.05 0 0 0 6.294 2.421A.5.5 0 0 1 17 5v4.6a5.5 5.5 0 0 0-1-.393v-3.78a16 16 0 0 1-5.6-2.081l-.4-.249l-.4.249A16 16 0 0 1 4 5.428V9.5c0 3.242 1.798 5.643 5.478 7.246c.195.435.444.84.74 1.206l-.038.015a.5.5 0 0 1-.36 0C5.308 16.23 3 13.39 3 9.5V5a.5.5 0 0 1 .43-.495a15.05 15.05 0 0 0 6.293-2.421M19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.146-1.854a.5.5 0 0 0-.708 0L13.5 15.293l-.646-.647a.5.5 0 0 0-.708.708l1 1a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.708\"/>"},"shield-error-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 6a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0v-5A.5.5 0 0 1 10 6m0 8.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5M9.723 2.084a.5.5 0 0 1 .554 0a15.05 15.05 0 0 0 6.294 2.421A.5.5 0 0 1 17 5v4.5c0 3.891-2.307 6.73-6.82 8.467a.5.5 0 0 1-.36 0C5.308 16.23 3 13.39 3 9.5V5a.5.5 0 0 1 .43-.495a15.05 15.05 0 0 0 6.293-2.421m-.124 1.262A16 16 0 0 1 4 5.428V9.5c0 3.392 1.968 5.863 6 7.463c4.032-1.6 6-4.071 6-7.463V5.428a16 16 0 0 1-5.6-2.082l-.4-.249z\"/>"},"shield-dismiss-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.854 7.146a.5.5 0 1 0-.708.708L9.293 10l-2.147 2.146a.5.5 0 0 0 .708.708L10 10.707l2.146 2.147a.5.5 0 0 0 .708-.708L10.707 10l2.147-2.146a.5.5 0 0 0-.708-.708L10 9.293zm2.423-5.062a.5.5 0 0 0-.554 0a15.05 15.05 0 0 1-6.294 2.421A.5.5 0 0 0 3 5v4.5c0 3.891 2.307 6.73 6.82 8.467a.5.5 0 0 0 .36 0C14.693 16.23 17 13.39 17 9.5V5a.5.5 0 0 0-.43-.495a15.05 15.05 0 0 1-6.293-2.421M4 5.428a16 16 0 0 0 5.6-2.082l.4-.249l.4.249A16 16 0 0 0 16 5.428V9.5c0 3.392-1.968 5.863-6 7.463c-4.032-1.6-6-4.071-6-7.463z\"/>"},"sign-out-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.5 11.25a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5M11 3.5a.5.5 0 0 0-.576-.494l-7 1.07A.5.5 0 0 0 3 4.57v10.86a.5.5 0 0 0 .424.494l7 1.071a.5.5 0 0 0 .576-.494V10h5.172l-.997.874a.5.5 0 0 0 .658.752l1.996-1.75a.5.5 0 0 0 0-.752l-1.996-1.75a.499.499 0 1 0-.658.752l.997.874H11zm-1 .582V15.92L4 15V4.999zM12.5 16H12v-5h1v4.5a.5.5 0 0 1-.5.5M12 8V4h.5a.5.5 0 0 1 .5.5V8z\"/>"},"arrow-enter-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.5 17a.5.5 0 0 1 0-1H14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H7.5a.5.5 0 0 1 0-1H14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3zm.146-10.854a.5.5 0 0 1 .708 0l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708l2.647-2.646H1.5a.5.5 0 0 1 0-1h8.793L7.646 6.854a.5.5 0 0 1 0-.708\"/>"},"star-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.104 2.9a1 1 0 0 1 1.794 0l1.93 3.91l4.317.628a1 1 0 0 1 .554 1.706l-3.124 3.044l.738 4.3a1 1 0 0 1-1.451 1.054l-3.86-2.03l-3.862 2.03a1 1 0 0 1-1.45-1.055l.737-4.299l-3.124-3.044a1 1 0 0 1 .554-1.706l4.317-.627zm.897.442l-1.93 3.911a1 1 0 0 1-.753.547L3 8.428l3.124 3.044a1 1 0 0 1 .287.885l-.737 4.3l3.86-2.03a1 1 0 0 1 .931 0l3.861 2.03l-.737-4.3a1 1 0 0 1 .287-.885L17 8.428L12.683 7.8a1 1 0 0 1-.752-.547z\"/>"},"flag-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 13h11.5a.5.5 0 0 0 .416-.777L14.101 8l2.815-4.223A.5.5 0 0 0 16.5 3h-12a.5.5 0 0 0-.5.5v14a.5.5 0 0 0 1 0zm0-1V4h10.566l-2.482 3.723a.5.5 0 0 0 0 .554L15.566 12z\"/>"},"tag-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14 7a1 1 0 1 0 0-2a1 1 0 0 0 0 2m-2.87-5a2 2 0 0 0-1.426.584L3.022 9.249a2 2 0 0 0-.002 2.83l4.949 4.948a2 2 0 0 0 2.828 0l6.631-6.63a2 2 0 0 0 .586-1.418l-.008-4.95a2 2 0 0 0-1.986-1.997zm-.72 1.292A1 1 0 0 1 11.123 3l4.89.032a1 1 0 0 1 .993.999l.008 4.95a1 1 0 0 1-.293.708l-6.63 6.631a1 1 0 0 1-1.415 0l-4.949-4.948a1 1 0 0 1 .001-1.415z\"/>"},"tag-multiple-20-regular":{"body":"<path fill=\"currentColor\" d=\"M13.5 6.5a1 1 0 1 0 0-2a1 1 0 0 0 0 2M9.207 2.586A2 2 0 0 1 10.621 2h4.452a2 2 0 0 1 2 2v4.374a2 2 0 0 1-.593 1.422l-5.818 5.76a2 2 0 0 1-2.82-.008l-4.385-4.384a2 2 0 0 1 0-2.828zM10.621 3a1 1 0 0 0-.707.293l-5.75 5.75a1 1 0 0 0 0 1.414l4.384 4.384a1 1 0 0 0 1.41.004l5.819-5.76a1 1 0 0 0 .296-.71V4a1 1 0 0 0-1-1zm-7.624 8.8a2 2 0 0 0 .46 2.114l2.977 2.977a4 4 0 0 0 5.642.014l4.404-4.36a2 2 0 0 0 .593-1.42v-.573l-4.997 4.953a4 4 0 0 1-.147.14l-.556.55a3 3 0 0 1-4.232-.01l-.499-.5a4 4 0 0 1-.208-.194l-2.977-2.977a2 2 0 0 1-.46-.714\"/>"},"weather-sunny-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 10 2m0 12a4 4 0 1 0 0-8a4 4 0 0 0 0 8m0-1a3 3 0 1 1 0-6a3 3 0 0 1 0 6m7.5-2.5a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1zM10 16a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5m-6.5-5.5a.5.5 0 0 0 0-1H2.463a.5.5 0 0 0 0 1zm.646-6.354a.5.5 0 0 1 .708 0l1 1a.5.5 0 1 1-.708.708l-1-1a.5.5 0 0 1 0-.708m.708 11.708a.5.5 0 0 1-.708-.708l1-1a.5.5 0 0 1 .708.708zm11-11.708a.5.5 0 0 0-.708 0l-1 1a.5.5 0 0 0 .708.708l1-1a.5.5 0 0 0 0-.708m-.708 11.708a.5.5 0 0 0 .708-.708l-1-1a.5.5 0 0 0-.708.708z\"/>"},"weather-moon-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15.493 13.497a6.98 6.98 0 0 1-11.483.892c2.831-1.087 4.558-2.42 5.593-4.397c1.048-2 1.337-4.16.76-6.909a6.98 6.98 0 0 1 5.13 10.414M5.457 16.918A7.981 7.981 0 1 0 9.88 2.035a.6.6 0 0 0-.614.74c.688 2.819.434 4.876-.55 6.753c-.934 1.784-2.544 3.031-5.55 4.107a.6.6 0 0 0-.292.903a7.95 7.95 0 0 0 2.582 2.38\"/>"},"desktop-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4 2a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3v2H5.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1H13v-2h3a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm8 13v2H8v-2zM3 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z\"/>"},"phone-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9 14a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zM7 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM6 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1z\"/>"},"home-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.998 2.388a1.5 1.5 0 0 1 2.005 0l5.5 4.942A1.5 1.5 0 0 1 17 8.445V15.5a1.5 1.5 0 0 1-1.5 1.5H13a1.5 1.5 0 0 1-1.5-1.5V12a.5.5 0 0 0-.5-.5H9a.5.5 0 0 0-.5.5v3.5A1.5 1.5 0 0 1 7 17H4.5A1.5 1.5 0 0 1 3 15.5V8.445c0-.425.18-.83.498-1.115zm1.336.744a.5.5 0 0 0-.668 0l-5.5 4.942A.5.5 0 0 0 4 8.445V15.5a.5.5 0 0 0 .5.5H7a.5.5 0 0 0 .5-.5V12A1.5 1.5 0 0 1 9 10.5h2a1.5 1.5 0 0 1 1.5 1.5v3.5a.5.5 0 0 0 .5.5h2.5a.5.5 0 0 0 .5-.5V8.445a.5.5 0 0 0-.166-.371z\"/>"},"keyboard-shift-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.861 2.528a1.492 1.492 0 0 1 2.278 0l6.62 7.803c.553.651.093 1.654-.759 1.654h-3.01v5.012A1 1 0 0 1 12.994 18H7.007a1 1 0 0 1-.998-1.003v-5.012H3c-.85 0-1.31-1.003-.759-1.654zm1.518.65a.497.497 0 0 0-.759 0L3 10.983h3.508a.5.5 0 0 1 .499.501v5.514h5.986v-5.514a.5.5 0 0 1 .499-.501H17z\"/>"},"location-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5.05 4.051a7 7 0 0 1 9.9 0a7.005 7.005 0 0 1 0 9.904l-1.128 1.114l-2.436 2.37a1.993 1.993 0 0 1-2.64.117l-.132-.117l-2.043-1.985l-1.52-1.5a7.005 7.005 0 0 1 0-9.903m9.195.705a6 6 0 0 0-8.49 0a6.01 6.01 0 0 0-.175 8.311l.175.183l.57.567l2.982 2.905l.093.08a1 1 0 0 0 1.2 0l.093-.08l2.23-2.168l1.322-1.304l.176-.183a6.01 6.01 0 0 0-.176-8.31M10 6.25a2.75 2.75 0 1 1-.001 5.5a2.75 2.75 0 0 1 0-5.5m0 1a1.75 1.75 0 1 0 0 3.5a1.75 1.75 0 0 0 0-3.5\"/>"},"briefcase-20-regular":{"body":"<path fill=\"currentColor\" d=\"M11.25 2c.966 0 1.75.784 1.75 1.75V5h2a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-2.996-2.846L2 14V8a3 3 0 0 1 3-3h2V3.75C7 2.784 7.784 2 8.75 2zM17 11.231A3 3 0 0 1 15 12h-4v.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5V12H5a2.98 2.98 0 0 1-2-.769V14l.01.204A2 2 0 0 0 5 16h10a2 2 0 0 0 2-2zM5 6a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h4v-.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v.5h4a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm3.75-3a.75.75 0 0 0-.75.75V5h4V3.75a.75.75 0 0 0-.75-.75z\"/>"},"payment-20-regular":{"body":"<path fill=\"currentColor\" d=\"M13.5 13a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zM2 6.75A2.75 2.75 0 0 1 4.75 4h10.5A2.75 2.75 0 0 1 18 6.75v6.5A2.75 2.75 0 0 1 15.25 16H4.75A2.75 2.75 0 0 1 2 13.25zM4.75 5A1.75 1.75 0 0 0 3 6.75V8h14V6.75A1.75 1.75 0 0 0 15.25 5zM17 9H3v4.25c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0 0 17 13.25z\"/>"},"currency-dollar-euro-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5.5 2a.5.5 0 0 0-.5.5v.535A3.5 3.5 0 0 0 2 6.5v.129c0 1.43.84 2.726 2.144 3.311l.856.383v5.613a2.5 2.5 0 0 1-2-2.45V12.5a.5.5 0 1 0-1 0v.985a3.5 3.5 0 0 0 3 3.464v.546a.5.5 0 0 0 1 0v-.546a3.5 3.5 0 0 0 3-3.464v-.12a3.62 3.62 0 0 0-2.14-3.304L6 9.676V4.05A2.5 2.5 0 0 1 8 6.5v1a.5.5 0 0 0 1 0v-1a3.5 3.5 0 0 0-3-3.465V2.5a.5.5 0 0 0-.5-.5M3 6.5a2.5 2.5 0 0 1 2-2.45v5.178l-.447-.2A2.63 2.63 0 0 1 3 6.627zm3 9.436v-5.164l.451.202A2.62 2.62 0 0 1 8 13.366v.12a2.5 2.5 0 0 1-2 2.45M12 10q0-.512.057-1H13.5a.5.5 0 1 0 0-1h-1.265c.216-.886.57-1.672 1.02-2.307C14.02 4.609 15.033 4 16.096 4c.392 0 .817.112 1.127.313a.5.5 0 1 0 .545-.838C17.273 3.153 16.652 3 16.097 3c-1.475 0-2.761.846-3.659 2.115c-.568.804-.993 1.79-1.229 2.885h-.71a.5.5 0 1 0 0 1h.552A10 10 0 0 0 11 10h-.505a.5.5 0 0 0 0 1h.556c.154 1.493.65 2.843 1.387 3.885c.898 1.269 2.184 2.115 3.66 2.115c.54 0 1.175-.129 1.684-.478a.5.5 0 0 0-.565-.825c-.296.203-.715.303-1.12.303c-1.064 0-2.076-.609-2.843-1.693c-.612-.865-1.047-2.011-1.197-3.307h1.438a.5.5 0 0 0 0-1z\"/>"},"thumb-like-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.052 2.294c.34-.977 1.632-1.427 2.43-.59c.164.17.326.354.436.519c.32.48.455 1.113.504 1.73c.05.627.016 1.301-.048 1.912a19 19 0 0 1-.241 1.583l-.01.052h.883a3 3 0 0 1 2.952 3.537l-.684 3.761a4.5 4.5 0 0 1-5.612 3.537l-5.6-1.527a2.5 2.5 0 0 1-1.793-1.922l-.353-1.765c-.278-1.389.784-2.559 1.913-3.005a2.8 2.8 0 0 0 .84-.49c1.707-1.514 2.325-2.723 3.385-4.85c.354-.71.718-1.676.998-2.482m1.965 5.585v-.002l.002-.007l.007-.031a14 14 0 0 0 .126-.584c.076-.388.167-.92.227-1.495c.061-.577.09-1.184.046-1.728c-.044-.556-.16-.985-.34-1.255a3 3 0 0 0-.326-.383c-.199-.208-.628-.16-.762.228c-.283.814-.664 1.83-1.048 2.6c-1.067 2.141-1.756 3.502-3.616 5.152c-.34.302-.744.517-1.136.672c-.88.348-1.447 1.148-1.3 1.879l.352 1.765a1.5 1.5 0 0 0 1.077 1.153l5.6 1.527a3.5 3.5 0 0 0 4.364-2.75l.684-3.762A2 2 0 0 0 14.006 8.5h-1.505a.5.5 0 0 1-.484-.621\"/>"},"stethoscope-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2.5 2a.5.5 0 0 0-.5.5v5a4.5 4.5 0 0 0 4 4.473V13a5 5 0 0 0 10 0v-1.05a2.5 2.5 0 1 0-1 0V13a4 4 0 1 1-8 0v-1.027A4.5 4.5 0 0 0 11 7.5v-5a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 0 0 1H10v4.5a3.5 3.5 0 0 1-7 0V3h1.5a.5.5 0 0 0 0-1zm13 6a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3\"/>"},"color-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 0 1 3.388 15.249a3.77 3.77 0 0 1-3.291-.059c-.974-.503-1.696-1.467-1.648-2.731c.017-.445.082-.867.143-1.243c.063-.387.118-.712.136-1.015c.018-.297-.004-.533-.078-.732c-.07-.191-.2-.381-.45-.569c-.313-.235-.58-.275-.845-.237c-.3.043-.614.188-1.014.387c-.735.365-1.776.942-2.974.332c-1.102-.562-1.424-1.868-1.22-2.917A8 8 0 0 1 10 2m0 1a7 7 0 0 0-6.871 5.655c-.153.788.126 1.547.691 1.835c.684.348 1.251.074 2.076-.336c.38-.188.834-.412 1.318-.481c.52-.075 1.054.028 1.586.427c.39.292.645.634.788 1.021c.14.379.162.768.14 1.14c-.022.366-.09.753-.149 1.116a9 9 0 0 0-.13 1.12c-.032.812.418 1.448 1.108 1.805a2.77 2.77 0 0 0 2.407.042A7.002 7.002 0 0 0 10 3m2.5 10a1 1 0 1 1 0 2a1 1 0 0 1 0-2m2-2.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2m0-3a1 1 0 1 1 0 2a1 1 0 0 1 0-2m-2-2.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2m-3-.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2\"/>"},"person-settings-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9 2a4 4 0 1 0 0 8a4 4 0 0 0 0-8M6 6a3 3 0 1 1 6 0a3 3 0 0 1-6 0m-1.991 5A2 2 0 0 0 2 13c0 1.691.833 2.966 2.135 3.797C5.417 17.614 7.145 18 9 18q.617 0 1.21-.057a5.5 5.5 0 0 1-.618-.958Q9.301 17 9 17c-1.735 0-3.257-.364-4.327-1.047C3.623 15.283 3 14.31 3 13c0-.553.448-1 1.009-1h5.59q.277-.538.658-1zm6.626 2.92a2 2 0 0 0 1.43-2.478l-.155-.557q.382-.293.821-.497l.338.358a2 2 0 0 0 2.91.001l.324-.344q.448.212.835.518l-.126.423a2 2 0 0 0 1.456 2.519l.349.082a4.7 4.7 0 0 1 .01 1.017l-.46.117a2 2 0 0 0-1.431 2.479l.156.556q-.383.294-.822.498l-.338-.358a2 2 0 0 0-2.909-.002l-.325.344a4.3 4.3 0 0 1-.835-.518l.127-.422a2 2 0 0 0-1.456-2.52l-.35-.082a4.7 4.7 0 0 1-.01-1.016zm4.865.58a1 1 0 1 0-2 0a1 1 0 0 0 2 0\"/>"},"person-search-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a4 4 0 1 0 0 8a4 4 0 0 0 0-8M7 6a3 3 0 1 1 6 0a3 3 0 0 1-6 0m7.865 10.797c-1.071.683-2.454 1.064-3.962 1.171a1.5 1.5 0 0 0-.342-.529l-.44-.44c1.685-.016 3.16-.379 4.206-1.046C15.377 15.283 16 14.31 16 13a1 1 0 0 0-1-1H8.744a4.5 4.5 0 0 0-.502-1H15a2 2 0 0 1 2 2c0 1.691-.833 2.966-2.135 3.797M4.5 17c.786 0 1.512-.26 2.096-.697l2.55 2.55a.5.5 0 1 0 .708-.707l-2.55-2.55A3.5 3.5 0 1 0 4.5 17m0-1a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5\"/>"},"add-square-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zM4 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm6.5.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 1 0 1 0v-3h3a.5.5 0 1 0 0-1h-3z\"/>"},"clipboard-task-list-ltr-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.354 7.854a.5.5 0 0 0-.708-.708L7.234 8.558l-.397-.362a.5.5 0 0 0-.674.738l.75.685a.5.5 0 0 0 .69-.016zm0 4.292a.5.5 0 0 1 0 .708l-1.75 1.75a.5.5 0 0 1-.691.015l-.75-.685a.5.5 0 0 1 .674-.738l.397.363l1.412-1.413a.5.5 0 0 1 .708 0M11 12.75a.5.5 0 0 0 0 1h2.5a.5.5 0 0 0 0-1zm-.5-4.5a.5.5 0 0 1 .5-.5h2.5a.5.5 0 0 1 0 1H11a.5.5 0 0 1-.5-.5M8.5 2a1.5 1.5 0 0 0-1.415 1H5.5A1.5 1.5 0 0 0 4 4.5v12A1.5 1.5 0 0 0 5.5 18h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 14.5 3h-1.585A1.5 1.5 0 0 0 11.5 2zM8 3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M5.5 4h1.585A1.5 1.5 0 0 0 8.5 5h3a1.5 1.5 0 0 0 1.415-1H14.5a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-12a.5.5 0 0 1 .5-.5\"/>"},"organization-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a3 3 0 0 0-.5 5.96V9.5h-3A1.5 1.5 0 0 0 5 11v1.042a3.001 3.001 0 1 0 1 0V11a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1.042a3.001 3.001 0 1 0 1 0V11a1.5 1.5 0 0 0-1.5-1.5h-3V7.96A3.001 3.001 0 0 0 10 2M8 5a2 2 0 1 1 4 0a2 2 0 0 1-4 0M3.5 15a2 2 0 1 1 4.001 0A2 2 0 0 1 3.5 15m11-2a2 2 0 1 1 0 4.001a2 2 0 0 1 0-4.001\"/>"},"alert-badge-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.998 2c1.09 0 2.113.28 2.995.77a3 3 0 0 0-.63.797A5.16 5.16 0 0 0 9.999 3c-2.623 0-4.77 1.924-4.98 4.385l-.014.212L5 7.802V11.5l-.038.192l-.963 2.313l11.958.002l.045-.002l-.963-2.313L15 11.5V8c.351 0 .688-.06 1-.17v3.568l.925 2.222q.033.081.053.167l.015.086l.009.132a1 1 0 0 1-.75.963l-.116.027l-.134.01l-3.502-.001l-.005.161a2.5 2.5 0 0 1-4.99 0l-.005-.161H4a1 1 0 0 1-.26-.034l-.125-.042a1 1 0 0 1-.603-1.052l.022-.128l.042-.128l.923-2.219L4 7.793l.005-.225C4.127 4.451 6.77 2 9.998 2M11.5 15.004h-3l.007.141a1.5 1.5 0 0 0 1.349 1.348L10 16.5a1.5 1.5 0 0 0 1.493-1.355zm1.707-10.89c.15-.305.376-.565.653-.757a2 2 0 1 1-.653.757\"/>"},"megaphone-20-regular":{"body":"<path fill=\"currentColor\" d=\"M18 4.802a1.5 1.5 0 0 0-1.887-1.45l-13 3.467A1.5 1.5 0 0 0 2 8.269v2.51a1.5 1.5 0 0 0 1.026 1.423L5 12.86v.89a3.25 3.25 0 0 0 6.27 1.2l4.756 1.586A1.5 1.5 0 0 0 18 15.113zm-7.68 9.832A2.251 2.251 0 0 1 6 13.75v-.556zm6.051-10.316a.5.5 0 0 1 .629.484v10.31a.5.5 0 0 1-.658.475l-13-4.333A.5.5 0 0 1 3 10.779V8.27a.5.5 0 0 1 .371-.484z\"/>"},"news-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 6.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5M10.5 9a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zm-.5 3.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5M5.5 9a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm.5 3v-2h2v2zM2 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1a2 2 0 0 1 2 2v5.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 13.5zm13 0a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v8.5A1.5 1.5 0 0 0 4.5 15h11a1.5 1.5 0 0 0 1.5-1.5V8a1 1 0 0 0-1-1v6.5a.5.5 0 0 1-1 0z\"/>"},"handshake-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.244 3.012a.5.5 0 0 0-.39.186l-.089.066C8.04 2.73 6.072 3.122 4.702 4.442a4.69 4.69 0 0 0-1.374 4.31l-.05.046l-.779.75a1.53 1.53 0 0 0 0 2.22c.398.384.95.528 1.463.432c.063.289.21.564.443.788c.307.296.706.449 1.108.46c.011.387.17.771.477 1.067s.707.45 1.109.46c.01.387.17.772.477 1.068a1.676 1.676 0 0 0 2.202.092l.437.42c.64.617 1.678.617 2.318 0c.306-.294.465-.676.479-1.062c.4-.012.795-.165 1.1-.459s.465-.677.477-1.063a1.66 1.66 0 0 0 1.087-.459c.243-.233.393-.522.451-.824a1.67 1.67 0 0 0 1.44-.436a1.53 1.53 0 0 0 0-2.221l-.72-.693l.147-.55a4.5 4.5 0 0 0-.42-3.336c-.836-1.506-2.458-2.436-4.212-2.436h-1.23l-.159-.004zm2.453 3.716l2.405 2.317l.003.002l1.741 1.678a.574.574 0 0 1 0 .833a.63.63 0 0 1-.865 0l-1.321-1.272a.52.52 0 0 0-.72 0l-.014.012a.48.48 0 0 0 0 .694l1.03.992c.24.23.24.604 0 .835a.63.63 0 0 1-.8.055a.524.524 0 0 0-.669.046a.477.477 0 0 0-.041.645a.574.574 0 0 1-.054.775a.63.63 0 0 1-.81.048a.524.524 0 0 0-.674.038a.477.477 0 0 0-.043.648a.58.58 0 0 1-.053.788a.637.637 0 0 1-.877 0l-.433-.417l.158-.152a1.53 1.53 0 0 0 0-2.221a1.66 1.66 0 0 0-1.108-.46a1.54 1.54 0 0 0-.477-1.068a1.66 1.66 0 0 0-1.109-.459a1.54 1.54 0 0 0-.477-1.068a1.67 1.67 0 0 0-1.463-.431a1.55 1.55 0 0 0-.443-.788a1.66 1.66 0 0 0-1.292-.454a3.74 3.74 0 0 1 1.13-3.208A4.06 4.06 0 0 1 8.708 4.04L7.253 5.11a1.703 1.703 0 0 0-.33 2.44a1.81 1.81 0 0 0 2.477.336l1.576-1.157zm-4.852-.813l2.592-1.903h.536a2 2 0 0 1 .147.004h1.242c1.404 0 2.685.745 3.338 1.922c.442.796.558 1.721.327 2.594l-.003.01l-2.76-2.667a.5.5 0 0 0-.353-.147h-2.1a.5.5 0 0 0-.295.097L8.808 7.079a.81.81 0 0 1-1.1-.149a.703.703 0 0 1 .137-1.015m.442 8.61l.01-.01l.778-.75l.009-.008a.63.63 0 0 1 .856.009a.574.574 0 0 1 0 .833l-.779.75a.63.63 0 0 1-.865 0a.574.574 0 0 1-.01-.824m.077-1.462l-.01.009l-.778.75l-.01.009a.63.63 0 0 1-.855-.01a.574.574 0 0 1-.007-.826l.007-.007l.778-.75l.007-.007a.63.63 0 0 1 .858.007a.574.574 0 0 1 .01.825m-1.595-1.519l-.779.75l-.007.007a.63.63 0 0 1-.858-.007a.574.574 0 0 1 0-.833l.778-.75a.63.63 0 0 1 .866 0a.574.574 0 0 1 .007.827zm-1.906-1.219l-.778.75a.63.63 0 0 1-.866 0a.574.574 0 0 1 0-.834l.779-.75a.63.63 0 0 1 .865 0a.574.574 0 0 1 0 .834\"/>"},"building-bank-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 5.874a.833.833 0 1 0 0-1.667a.833.833 0 0 0 0 1.667m6 7.466V8h.092c.893 0 1.26-1.148.53-1.665l-5.85-4.152a1.33 1.33 0 0 0-1.544 0L3.376 6.335c-.728.517-.363 1.664.53 1.664H4v5.34c-.601.386-1 1.06-1 1.827v1.333a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-1.333c0-.767-.398-1.441-1-1.826M9.806 2.999a.33.33 0 0 1 .385 0l5.639 4H4.168zm5.192 5v5.006a2 2 0 0 0-.166-.006h-1.834V8zM5 13.005V8h2v5H5.166q-.084 0-.167.006m.167.994h9.667c.644 0 1.166.522 1.166 1.167V16H4v-.833C4 14.522 4.523 14 5.167 14M9.5 13H8V8h1.5zm1 0V8H12v5z\"/>"},"receipt-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v7h3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm11 8v3a2 2 0 0 0 2-2v-1zm-1 3V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v9a2 2 0 0 0 2 2zM6 6.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5m0 3a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5m0 3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5\"/>"},"wallet-20-regular":{"body":"<path fill=\"currentColor\" d=\"M13.5 11a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1zM3 4.5A1.5 1.5 0 0 1 4.5 3H14a2 2 0 0 1 2 2v.268A2 2 0 0 1 17 7v8a2 2 0 0 1-2 2H5.5A2.5 2.5 0 0 1 3 14.5zM14 4H4.5a.5.5 0 0 0 0 1H15a1 1 0 0 0-1-1M4.5 6q-.264-.001-.5-.085V14.5A1.5 1.5 0 0 0 5.5 16H15a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1z\"/>"},"cart-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2.997 3.496a.5.5 0 0 1 .5-.5h.438c.727 0 1.145.473 1.387.945c.165.323.284.717.383 1.059H16a1 1 0 0 1 .962 1.272l-1.496 5.275A2 2 0 0 1 13.542 13H8.463a2 2 0 0 1-1.93-1.473l-.642-2.355l-.01-.032l-1.03-3.498l-.1-.337c-.1-.346-.188-.652-.32-.909c-.159-.31-.305-.4-.496-.4h-.438a.5.5 0 0 1-.5-.5M6.845 8.87l.653 2.396a1 1 0 0 0 .965.736h5.08a1 1 0 0 0 .961-.727L16 6H6zM10 15.499a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0a.5.5 0 0 0 1 0m6 0a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0a.5.5 0 0 0 1 0\"/>"},"vehicle-truck-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8 12a1 1 0 1 1-2 0a1 1 0 0 1 2 0m5 1a1 1 0 1 0 0-2a1 1 0 0 0 0 2m-5 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M4 2a2 2 0 0 0-2 2v10.5A1.5 1.5 0 0 0 3.5 16H4v.5A1.5 1.5 0 0 0 5.5 18h1A1.5 1.5 0 0 0 8 16.5V16h4v.5a1.5 1.5 0 0 0 1.5 1.5h1a1.5 1.5 0 0 0 1.5-1.5V16h.5a1.5 1.5 0 0 0 1.5-1.5V4a2 2 0 0 0-2-2zm9 14.5V16h2v.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5M7 16v.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5V16zM3 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v10.5a.5.5 0 0 1-.5.5H16V9.746q0-.307-.075-.606l-.75-3.004A1.5 1.5 0 0 0 13.718 5H6.281a1.5 1.5 0 0 0-1.455 1.136L4.075 9.14A2.5 2.5 0 0 0 4 9.746V15h-.5a.5.5 0 0 1-.5-.5zm2 11v-5h10v5zm.14-6l.656-2.621A.5.5 0 0 1 6.28 6h7.438a.5.5 0 0 1 .485.379L14.86 9z\"/>"},"building-factory-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.435 2a1.5 1.5 0 0 0-1.497 1.4l-.866 13A1.5 1.5 0 0 0 3.568 18h2.863a1.5 1.5 0 0 0 1.496-1.6l-.866-13A1.5 1.5 0 0 0 5.564 2zm-.499 1.467a.5.5 0 0 1 .5-.467h1.128a.5.5 0 0 1 .499.467l.867 13a.5.5 0 0 1-.5.533H3.569a.5.5 0 0 1-.498-.533zM16.5 18H8.43a2.5 2.5 0 0 0 .45-1H10v-4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4h.5a.5.5 0 0 0 .5-.5V6.623l-4.166 3.749a.5.5 0 0 1-.835-.372V6.623l-3.51 3.16l-.085-1.27l3.761-3.385A.5.5 0 0 1 13 5.5v3.377l4.165-3.749A.5.5 0 0 1 18 5.5v11a1.5 1.5 0 0 1-1.5 1.5M11 17h4v-4h-4z\"/>"},"person-support-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 14.5a2 2 0 0 1-1.994-1.84A6.002 6.002 0 0 1 10 1a6 6 0 0 1 5.98 5.5a.47.47 0 0 1-.48.5a.54.54 0 0 1-.525-.5a5 5 0 1 0-6.79 5.16A2 2 0 1 1 10 14.5M5.009 12H5.1c.39.381.823.717 1.292 1H5.009C4.448 13 4 13.447 4 14c0 1.309.622 2.284 1.673 2.953C6.743 17.636 8.265 18 10 18s3.257-.364 4.327-1.047C15.377 16.283 16 15.31 16 14a1 1 0 0 0-1-1h-2.041a3 3 0 0 0 0-1H15a2 2 0 0 1 2 2c0 1.691-.833 2.966-2.135 3.797C13.583 18.614 11.855 19 10 19s-3.583-.386-4.865-1.203C3.833 16.967 3 15.69 3 14c0-1.113.903-2 2.009-2M14 7a4 4 0 0 1-1.87 3.387a3 3 0 0 0-.93-.637a3 3 0 1 0-2.4 0c-.35.153-.665.37-.93.637a4 4 0 0 1-1.638-2.042A4 4 0 0 1 6 7a4 4 0 1 1 8 0\"/>"}},"lastModified":1785042646,"width":20,"height":20}
+{"prefix":"fluent","icons":{"spinner-ios-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 3a7 7 0 0 0-7 7a.5.5 0 0 1-1 0a8 8 0 1 1 8 8a.5.5 0 0 1 0-1a7 7 0 1 0 0-14\"/>"},"checkmark-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3.374 10.168a.5.5 0 0 0-.748.664l4 4.5a.5.5 0 0 0 .728.022l10.5-10.5a.5.5 0 0 0-.707-.708L7.02 14.271z\"/>"},"checkmark-circle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14m3.358 4.646a.5.5 0 0 1 .058.638l-.058.07l-4.004 4.004a.5.5 0 0 1-.638.058l-.07-.058l-2-2a.5.5 0 0 1 .638-.765l.07.058L9 11.298l3.651-3.652a.5.5 0 0 1 .707 0\"/>"},"dismiss-20-regular":{"body":"<path fill=\"currentColor\" d=\"m4.089 4.216l.057-.07a.5.5 0 0 1 .638-.057l.07.057L10 9.293l5.146-5.147a.5.5 0 0 1 .638-.057l.07.057a.5.5 0 0 1 .057.638l-.057.07L10.707 10l5.147 5.146a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.638.057l-.07-.057L10 10.707l-5.146 5.147a.5.5 0 0 1-.638.057l-.07-.057a.5.5 0 0 1-.057-.638l.057-.07L9.293 10L4.146 4.854a.5.5 0 0 1-.057-.638l.057-.07z\"/>"},"dismiss-circle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14M7.81 7.114l.069.058L10 9.292l2.121-2.12a.5.5 0 0 1 .638-.058l.07.058a.5.5 0 0 1 .057.637l-.058.07L10.708 10l2.12 2.121a.5.5 0 0 1 .058.638l-.058.07a.5.5 0 0 1-.637.057l-.07-.058L10 10.708l-2.121 2.12a.5.5 0 0 1-.638.058l-.07-.058a.5.5 0 0 1-.057-.637l.058-.07L9.292 10l-2.12-2.121a.5.5 0 0 1-.058-.638l.058-.07a.5.5 0 0 1 .637-.057\"/>"},"warning-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.37 3.556c1.14-2.074 4.12-2.074 5.259 0l5.496 10.005c1.098 1.999-.35 4.444-2.63 4.444H4.504c-2.281 0-3.727-2.445-2.629-4.444zm4.383.481c-.76-1.383-2.746-1.382-3.506 0L2.751 14.042c-.732 1.333.232 2.963 1.753 2.963h10.991c1.52 0 2.485-1.63 1.753-2.963zM10 12.75a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5m0-6.25a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5\"/>"},"error-circle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14m0 9.5a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5M10 6a.5.5 0 0 1 .492.41l.008.09V11a.5.5 0 0 1-.992.09L9.5 11V6.5A.5.5 0 0 1 10 6\"/>"},"info-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.492 8.91A.5.5 0 0 0 9.5 9v4.502l.008.09a.5.5 0 0 0 .992-.09V9zm.307-2.16a.75.75 0 1 0-1.5 0a.75.75 0 0 0 1.5 0M18 10a8 8 0 1 0-16 0a8 8 0 0 0 16 0M3 10a7 7 0 1 1 14 0a7 7 0 0 1-14 0\"/>"},"question-circle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14m0 10.5a.75.75 0 1 1 0 1.5a.75.75 0 0 1 0-1.5m0-8a2.5 2.5 0 0 1 1.651 4.377l-.154.125l-.219.163l-.087.072a2 2 0 0 0-.156.149c-.339.36-.535.856-.535 1.614a.5.5 0 0 1-1 0c0-1.012.293-1.752.805-2.298a3 3 0 0 1 .356-.323l.247-.185l.118-.1A1.5 1.5 0 1 0 8.5 8a.5.5 0 0 1-1 .001A2.5 2.5 0 0 1 10 5.5\"/>"},"alert-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.998 2c3.149 0 5.744 2.335 5.984 5.355l.014.223l.004.224l-.001 3.596l.925 2.222q.034.081.053.167l.016.086l.008.132a1 1 0 0 1-.749.963l-.116.027l-.135.01l-3.501-.001l-.005.161a2.5 2.5 0 0 1-4.99 0l-.005-.161H3.999a1 1 0 0 1-.26-.034l-.124-.042a1 1 0 0 1-.603-1.052l.021-.128l.043-.128l.923-2.219L4 7.793l.004-.225C4.127 4.451 6.771 2 9.998 2M11.5 15.004h-3l.007.141a1.5 1.5 0 0 0 1.349 1.348L10 16.5a1.5 1.5 0 0 0 1.493-1.355zM9.998 3c-2.623 0-4.77 1.924-4.98 4.385l-.014.212L5 7.802V11.5l-.038.192l-.963 2.313l11.958.002l.045-.002l-.964-2.313L15 11.5V7.812l-.004-.204C14.891 5.035 12.695 3 9.998 3\"/>"},"pulse-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.004 3a.5.5 0 0 1 .479.37l3.043 11.303l2.495-8.317a.5.5 0 0 1 .947-.032L15.347 10H17.5a.5.5 0 0 1 0 1H15a.5.5 0 0 1-.468-.324l-.98-2.612l-2.573 8.58a.5.5 0 0 1-.962-.014L6.986 5.37L5.48 10.637A.5.5 0 0 1 5 11H2.5a.5.5 0 0 1 0-1h2.123l1.896-6.637A.5.5 0 0 1 7.004 3\"/>"},"add-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2.5a.5.5 0 0 1 .5.5v6.5H17a.5.5 0 0 1 0 1h-6.5V17a.5.5 0 0 1-1 0v-6.5H3a.5.5 0 0 1 0-1h6.5V3a.5.5 0 0 1 .5-.5\"/>"},"subtract-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 10a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 3 10\"/>"},"delete-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.5 4h3a1.5 1.5 0 0 0-3 0m-1 0a2.5 2.5 0 0 1 5 0h5a.5.5 0 0 1 0 1h-1.054l-1.194 10.344A3 3 0 0 1 12.272 18H7.728a3 3 0 0 1-2.98-2.656L3.554 5H2.5a.5.5 0 0 1 0-1zM5.741 15.23A2 2 0 0 0 7.728 17h4.544a2 2 0 0 0 1.987-1.77L15.439 5H4.561zM8.5 7.5A.5.5 0 0 1 9 8v6a.5.5 0 0 1-1 0V8a.5.5 0 0 1 .5-.5M12 8a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z\"/>"},"edit-20-regular":{"body":"<path fill=\"currentColor\" d=\"M17.181 2.927a2.975 2.975 0 0 0-4.259-.054l-9.375 9.375a2.44 2.44 0 0 0-.656 1.194l-.877 3.95a.5.5 0 0 0 .596.597l3.927-.873a2.5 2.5 0 0 0 1.234-.678l9.358-9.358a2.975 2.975 0 0 0 .052-4.153m-3.552.653a1.975 1.975 0 1 1 2.793 2.793l-.671.671l-2.793-2.792zm-1.378 1.38l2.793 2.792l-7.98 7.98a1.5 1.5 0 0 1-.744.409l-3.16.702l.708-3.183c.059-.267.193-.511.386-.704z\"/>"},"edit-line-horizontal-3-20-regular":{"body":"<path fill=\"currentColor\" d=\"M12.922 2.873A2.975 2.975 0 0 1 17.13 7.08l-9.358 9.358a2.5 2.5 0 0 1-1.234.678l-3.926.873a.5.5 0 0 1-.597-.597l.877-3.95c.101-.452.329-.867.656-1.194zm3.535.743a1.975 1.975 0 0 0-2.828-.036l-.671.672l2.793 2.792l.67-.671c.758-.758.774-1.98.036-2.757m-1.413 4.135L12.25 4.96l-7.996 7.996a1.44 1.44 0 0 0-.387.704l-.707 3.183l3.159-.702c.282-.063.54-.205.744-.409zM2.5 3h8.88l-1 1H2.5a.5.5 0 0 1 0-1m0 3h5.88L7.378 7H2.5a.5.5 0 0 1 0-1m0 3h2.879l-1 1H2.5a.5.5 0 0 1 0-1\"/>"},"save-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 5a2 2 0 0 1 2-2h8.379a2 2 0 0 1 1.414.586l1.621 1.621A2 2 0 0 1 17 6.621V15a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1v-4.5A1.5 1.5 0 0 1 6.5 10h7a1.5 1.5 0 0 1 1.5 1.5V16a1 1 0 0 0 1-1V6.621a1 1 0 0 0-.293-.707l-1.621-1.621A1 1 0 0 0 13.379 4H13v2.5A1.5 1.5 0 0 1 11.5 8h-4A1.5 1.5 0 0 1 6 6.5V4zm2 0v2.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5V4zm7 12v-4.5a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0-.5.5V16z\"/>"},"copy-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7 7H5.5A1.5 1.5 0 0 0 4 8.5v6A1.5 1.5 0 0 0 5.5 16h4a1.5 1.5 0 0 0 1.413-1h1.037a2.5 2.5 0 0 1-2.45 2h-4A2.5 2.5 0 0 1 3 14.5v-6A2.5 2.5 0 0 1 5.5 6H7zm7.5-4A2.5 2.5 0 0 1 17 5.5v6a2.5 2.5 0 0 1-2.5 2.5h-4A2.5 2.5 0 0 1 8 11.5v-6A2.5 2.5 0 0 1 10.5 3zm-4 1A1.5 1.5 0 0 0 9 5.5v6a1.5 1.5 0 0 0 1.5 1.5h4a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 14.5 4z\"/>"},"arrow-download-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15.5 17a.5.5 0 0 1 .09.992L15.5 18h-11a.5.5 0 0 1-.09-.992L4.5 17zM10 2.002a.5.5 0 0 1 .492.41l.008.09l-.004 11.794l3.645-3.648a.5.5 0 0 1 .638-.059l.07.058a.5.5 0 0 1 .058.638l-.058.07l-4.492 4.5a.5.5 0 0 1-.255.136l-.106.01a.5.5 0 0 1-.395-.195l-4.457-4.451a.5.5 0 0 1 .637-.766l.07.058l3.645 3.641L9.5 2.502a.5.5 0 0 1 .5-.5\"/>"},"arrow-upload-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15 3.002a.5.5 0 0 0 .09-.992L15 2.002H4a.5.5 0 0 0-.09.992l.09.008zM9.5 18a.5.5 0 0 0 .492-.41L10 17.5L9.996 5.706l3.645 3.648a.5.5 0 0 0 .638.059l.07-.058a.5.5 0 0 0 .058-.638l-.058-.07l-4.492-4.5a.5.5 0 0 0-.255-.136L9.496 4a.5.5 0 0 0-.395.194L4.644 8.647a.5.5 0 0 0 .637.765l.07-.057l3.645-3.641L9 17.5a.5.5 0 0 0 .5.5\"/>"},"arrow-undo-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 2.5a.5.5 0 0 0-1 0v4.9a.6.6 0 0 0 .6.6h4.9a.5.5 0 0 0 0-1H5.906l3.473-3.019a4 4 0 0 1 5.248 6.038l-8.172 7.104a.5.5 0 0 0 .656.754l8.172-7.103a5 5 0 0 0-6.56-7.547L5 6.463z\"/>"},"arrow-counterclockwise-20-regular":{"body":"<path fill=\"currentColor\" d=\"M16 10A6 6 0 0 0 5.528 6H7.5a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 1 0v1.601a7 7 0 1 1-1.98 4.361a.5.5 0 0 1 .998.076A6 6 0 1 0 16 10\"/>"},"arrow-sync-20-regular":{"body":"<path fill=\"currentColor\" d=\"M11.414 3.635a.5.5 0 0 0 0-.707L9.293.807a.5.5 0 0 0-.707.707l.997.997a7.5 7.5 0 0 0-4.075 13.495a.5.5 0 0 0 .6-.8A6.5 6.5 0 0 1 10.066 3.5q.037 0 .073-.005L8.586 5.049a.5.5 0 0 0 .707.707zM8.586 16.363a.5.5 0 0 0 0 .707l2.121 2.121a.5.5 0 0 0 .707-.707l-.997-.997a7.5 7.5 0 0 0 4.075-13.495a.5.5 0 1 0-.6.8q.369.277.704.61A6.5 6.5 0 0 1 9.934 16.5l-.074.004l1.554-1.554a.5.5 0 1 0-.707-.707z\"/>"},"search-20-regular":{"body":"<path fill=\"currentColor\" d=\"M13.73 14.436a6.5 6.5 0 1 1 .707-.707l3.416 3.418a.5.5 0 0 1-.637.764l-.07-.057zm-.71-.71q.385-.32.707-.706a5.5 5.5 0 1 0-.707.707\"/>"},"filter-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.5 13h5a.5.5 0 0 1 .09.992L12.5 14h-5a.5.5 0 0 1-.09-.992zh5zm-2-4h9a.5.5 0 0 1 .09.992L14.5 10h-9a.5.5 0 0 1-.09-.992zh9zm-2-4h13a.5.5 0 0 1 .09.992L16.5 6h-13a.5.5 0 0 1-.09-.992zh13z\"/>"},"options-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14.95 5a2.5 2.5 0 0 0-4.9 0H2.5a.5.5 0 0 0 0 1h7.55a2.5 2.5 0 0 0 4.9 0h2.55a.5.5 0 0 0 0-1zM12.5 7a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3m-2.55 7a2.5 2.5 0 0 0-4.9 0H2.5a.5.5 0 0 0 0 1h2.55a2.5 2.5 0 0 0 4.9 0h7.55a.5.5 0 0 0 0-1zM7.5 16a1.5 1.5 0 1 1 0-3a1.5 1.5 0 0 1 0 3\"/>"},"settings-20-regular":{"body":"<path fill=\"currentColor\" d=\"M1.911 7.383a8.5 8.5 0 0 1 1.78-3.08a.5.5 0 0 1 .54-.135l1.918.686a1 1 0 0 0 1.32-.762l.366-2.006a.5.5 0 0 1 .388-.4a8.5 8.5 0 0 1 3.554 0a.5.5 0 0 1 .388.4l.366 2.006a1 1 0 0 0 1.32.762l1.919-.686a.5.5 0 0 1 .54.136a8.5 8.5 0 0 1 1.78 3.079a.5.5 0 0 1-.153.535l-1.555 1.32a1 1 0 0 0 0 1.524l1.555 1.32a.5.5 0 0 1 .152.535a8.5 8.5 0 0 1-1.78 3.08a.5.5 0 0 1-.54.135l-1.918-.686a1 1 0 0 0-1.32.762l-.366 2.007a.5.5 0 0 1-.388.399a8.5 8.5 0 0 1-3.554 0a.5.5 0 0 1-.388-.4l-.366-2.006a1 1 0 0 0-1.32-.762l-1.918.686a.5.5 0 0 1-.54-.136a8.5 8.5 0 0 1-1.78-3.079a.5.5 0 0 1 .152-.535l1.555-1.32a1 1 0 0 0 0-1.524l-1.555-1.32a.5.5 0 0 1-.152-.535m1.06-.006l1.294 1.098a2 2 0 0 1 0 3.05l-1.293 1.098c.292.782.713 1.51 1.244 2.152l1.596-.57q.155-.055.315-.085a2 2 0 0 1 2.326 1.609l.304 1.669a7.6 7.6 0 0 0 2.486 0l.304-1.67a1.998 1.998 0 0 1 2.641-1.524l1.596.571a7.5 7.5 0 0 0 1.245-2.152l-1.294-1.098a1.998 1.998 0 0 1 0-3.05l1.294-1.098a7.5 7.5 0 0 0-1.245-2.152l-1.596.57a2 2 0 0 1-2.64-1.524l-.305-1.669a7.6 7.6 0 0 0-2.486 0l-.304 1.669a2 2 0 0 1-2.64 1.525l-1.597-.571a7.5 7.5 0 0 0-1.244 2.152M7.502 10a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0m1 0a1.5 1.5 0 1 0 3 0a1.5 1.5 0 0 0-3 0\"/>"},"share-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.5 3a.5.5 0 0 1 0 1H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1.5a.5.5 0 0 1 1 0V14a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3zm3.797-.957a.5.5 0 0 1 .538.085l5 4.5a.5.5 0 0 1 0 .744l-5 4.5A.5.5 0 0 1 13 11.5V9.34c-1.4.128-2.665.78-3.7 1.608c-1.015.813-1.775 1.768-2.195 2.484l-.158.291A.5.5 0 0 1 6 13.5c0-2.049.382-4.284 1.518-6.024C8.61 5.808 10.368 4.643 13 4.513V2.5l.005-.073a.5.5 0 0 1 .292-.384M14 5a.5.5 0 0 1-.5.5c-2.588 0-4.177 1.045-5.144 2.523c-.685 1.049-1.073 2.34-1.246 3.684c.433-.52.96-1.054 1.565-1.54C9.943 9.153 11.6 8.316 13.5 8.316a.5.5 0 0 1 .5.5v1.56L17.75 7L14 3.623z\"/>"},"send-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2.184 2.112a.5.5 0 0 1 .54-.06l15 7.5a.5.5 0 0 1 0 .895l-15 7.5a.5.5 0 0 1-.707-.576L3.983 10L2.017 2.629a.5.5 0 0 1 .167-.517m2.7 8.388L3.27 16.556L16.382 10L3.269 3.444L4.884 9.5H11.5a.5.5 0 1 1 0 1z\"/>"},"eye-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3.26 11.602C3.942 8.327 6.793 6 10 6s6.057 2.327 6.74 5.602a.5.5 0 0 0 .98-.204C16.943 7.673 13.693 5 10 5s-6.943 2.673-7.72 6.398a.5.5 0 0 0 .98.204M10 8a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7m-2.5 3.5a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0\"/>"},"eye-off-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2.854 2.146a.5.5 0 1 0-.708.708l3.5 3.498a8.1 8.1 0 0 0-3.366 5.046a.5.5 0 1 0 .98.204a7.1 7.1 0 0 1 3.107-4.528L7.953 8.66a3.5 3.5 0 1 0 4.886 4.886l4.307 4.308a.5.5 0 0 0 .708-.708zm9.265 10.68A2.5 2.5 0 1 1 8.673 9.38zm-1.995-4.824l3.374 3.374a3.5 3.5 0 0 0-3.374-3.374M10 6c-.57 0-1.129.074-1.666.213l-.803-.803A7.7 7.7 0 0 1 10 5c3.693 0 6.942 2.673 7.72 6.398a.5.5 0 0 1-.98.204C16.058 8.327 13.207 6 10 6\"/>"},"chevron-down-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15.854 7.646a.5.5 0 0 1 .001.707l-5.465 5.484a.55.55 0 0 1-.78 0L4.147 8.353a.5.5 0 1 1 .708-.706L10 12.812l5.147-5.165a.5.5 0 0 1 .707-.001\"/>"},"chevron-up-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.147 12.353a.5.5 0 0 1-.001-.707L9.61 6.162a.55.55 0 0 1 .779 0l5.465 5.484a.5.5 0 0 1-.708.706L10 7.188l-5.146 5.164a.5.5 0 0 1-.707.001\"/>"},"chevron-left-20-regular":{"body":"<path fill=\"currentColor\" d=\"M12.353 15.854a.5.5 0 0 1-.707.001L6.162 10.39a.55.55 0 0 1 0-.78l5.484-5.464a.5.5 0 1 1 .706.708L7.188 10l5.164 5.147a.5.5 0 0 1 .001.707\"/>"},"chevron-right-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.646 4.147a.5.5 0 0 1 .707-.001l5.484 5.465a.55.55 0 0 1 0 .779l-5.484 5.465a.5.5 0 0 1-.706-.708L12.812 10L7.647 4.854a.5.5 0 0 1-.001-.707\"/>"},"arrow-left-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.159 16.867a.5.5 0 1 0 .674-.739l-6.168-5.63h13.831a.5.5 0 0 0 0-1H3.668l6.165-5.629a.5.5 0 0 0-.674-.738L2.243 9.445a.75.75 0 0 0-.24.631a.75.75 0 0 0 .24.477z\"/>"},"arrow-right-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.837 3.13a.5.5 0 0 0-.674.74L16.33 9.5H2.5a.5.5 0 0 0 0 1h13.828l-6.165 5.628a.5.5 0 0 0 .674.739l6.916-6.314a.747.747 0 0 0 0-1.108z\"/>"},"arrow-up-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3.133 9.16a.5.5 0 1 0 .738.675l5.631-6.168v13.831a.5.5 0 1 0 1 0V3.67l5.628 6.165a.5.5 0 0 0 .739-.674l-6.314-6.916a.75.75 0 0 0-.632-.24a.75.75 0 0 0-.476.24z\"/>"},"arrow-down-20-regular":{"body":"<path fill=\"currentColor\" d=\"M16.867 10.837a.5.5 0 1 0-.739-.674l-5.63 6.168V2.5a.5.5 0 0 0-1 0v13.828l-5.629-6.165a.5.5 0 0 0-.738.674l6.314 6.916a.747.747 0 0 0 1.108 0z\"/>"},"arrow-enter-left-20-regular":{"body":"<path fill=\"currentColor\" d=\"m3.76 12l3.333 3.136a.5.5 0 0 1-.686.728l-4.25-4a.5.5 0 0 1 0-.728l4.25-4a.5.5 0 1 1 .686.728L3.76 11H15a2 2 0 0 0 2-2V4.5a.5.5 0 0 1 1 0V9a3 3 0 0 1-3 3z\"/>"},"open-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-2.5a.5.5 0 0 1 1 0V14a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h2.5a.5.5 0 0 1 0 1zm5-.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V4.707l-4.146 4.147a.5.5 0 0 1-.708-.708L15.293 4H11.5a.5.5 0 0 1-.5-.5\"/>"},"more-horizontal-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6.25 10a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0m5 0a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0M15 11.25a1.25 1.25 0 1 0 0-2.5a1.25 1.25 0 0 0 0 2.5\"/>"},"more-vertical-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 6a1.25 1.25 0 1 1 0-2.5A1.25 1.25 0 0 1 10 6m0 5.25a1.25 1.25 0 1 1 0-2.5a1.25 1.25 0 0 1 0 2.5m-1.25 4a1.25 1.25 0 1 0 2.5 0a1.25 1.25 0 0 0-2.5 0\"/>"},"navigation-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2 4.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5m0 5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5m.5 4.5a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1z\"/>"},"panel-left-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2 6a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3zm6.5-2v11H15a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm-1 0H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2.5z\"/>"},"arrow-expand-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3.5 3a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0V4.707l3.146 3.147a.5.5 0 1 0 .708-.708L4.707 4H7.5a.5.5 0 0 0 0-1zm0 14a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 1 0v2.793l3.146-3.147a.5.5 0 0 1 .708.708L4.707 16H7.5a.5.5 0 0 1 0 1zM17 3.5a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 0 0 1h2.793l-3.147 3.146a.5.5 0 0 0 .708.708L16 4.707V7.5a.5.5 0 0 0 1 0zM16.5 17a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-1 0v2.793l-3.146-3.147a.5.5 0 0 0-.708.708L15.293 16H12.5a.5.5 0 0 0 0 1z\"/>"},"arrow-minimize-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.5 11a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0v-3.793l-5.146 5.147a.5.5 0 0 1-.708-.707L7.293 12H3.5a.5.5 0 0 1 0-1zm8.647-8.854a.5.5 0 1 1 .707.708L12.707 8H16.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 1 0v3.793z\"/>"},"mail-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15.5 4A2.5 2.5 0 0 1 18 6.5v8a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 14.5v-8A2.5 2.5 0 0 1 4.5 4zM17 7.961l-6.746 3.97a.5.5 0 0 1-.426.038l-.082-.038L3 7.963V14.5A1.5 1.5 0 0 0 4.5 16h11a1.5 1.5 0 0 0 1.5-1.5zM15.5 5h-11A1.5 1.5 0 0 0 3 6.5v.302l7 4.118l7-4.12v-.3A1.5 1.5 0 0 0 15.5 5\"/>"},"mail-read-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.743 2.071a.5.5 0 0 1 .514 0l6.772 4.063A2 2 0 0 1 18 7.85v6.65a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 14.5V7.85a2 2 0 0 1 .971-1.716zM10 3.083L3.486 6.992L3.472 7L10 10.917L16.528 7l-.013-.008zm7 4.8l-6.743 4.046a.5.5 0 0 1-.514 0L3 7.883V14.5A1.5 1.5 0 0 0 4.5 16h11a1.5 1.5 0 0 0 1.5-1.5z\"/>"},"mail-dismiss-20-regular":{"body":"<path fill=\"currentColor\" d=\"M19 5.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.646-1.146a.5.5 0 0 0-.708-.708L14.5 4.793l-1.146-1.147a.5.5 0 0 0-.708.708L13.793 5.5l-1.147 1.146a.5.5 0 0 0 .708.708L14.5 6.207l1.146 1.147a.5.5 0 0 0 .708-.708L15.207 5.5zM17 14.5v-4.1a5.5 5.5 0 0 0 1-.657V14.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 14.5v-8A2.5 2.5 0 0 1 4.5 4h4.707a5.5 5.5 0 0 0-.185 1H4.5A1.5 1.5 0 0 0 3 6.5v.302l7 4.118l1.441-.848q.488.327 1.043.547l-2.23 1.312a.5.5 0 0 1-.426.038l-.082-.038L3 7.963V14.5A1.5 1.5 0 0 0 4.5 16h11a1.5 1.5 0 0 0 1.5-1.5\"/>"},"mail-inbox-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zm10 7h-3.5a.5.5 0 0 0-.5.5v.011l-.004.06a2.6 2.6 0 0 1-.256.955a1.7 1.7 0 0 1-.572.667c-.26.174-.63.307-1.168.307s-.907-.133-1.168-.307a1.7 1.7 0 0 1-.572-.667A2.6 2.6 0 0 1 8 10.511V10.5a.5.5 0 0 0-.5-.5H4V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2zM4 11h3.05c.047.264.137.616.315.974c.186.371.473.758.912 1.051c.443.295 1.01.475 1.723.475s1.28-.18 1.723-.475c.44-.293.726-.68.912-1.051c.178-.358.268-.71.315-.974H16v3a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z\"/>"},"arrow-reply-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.354 3.646a.5.5 0 0 1 0 .708L3.707 8H10.5a7.5 7.5 0 0 1 7.5 7.5a.5.5 0 0 1-1 0A6.5 6.5 0 0 0 10.5 9H3.707l3.647 3.646a.5.5 0 0 1-.708.708l-4.5-4.5a.5.5 0 0 1 0-.708l4.5-4.5a.5.5 0 0 1 .708 0\"/>"},"arrow-reply-all-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.354 3.646a.5.5 0 0 1 0 .708L3.207 8.5l4.147 4.146a.5.5 0 0 1-.708.708l-4.5-4.5a.5.5 0 0 1 0-.708l4.5-4.5a.5.5 0 0 1 .708 0m3 0a.5.5 0 0 1 0 .708L6.707 8H10.5a7.5 7.5 0 0 1 7.5 7.5a.5.5 0 0 1-1 0A6.5 6.5 0 0 0 10.5 9H6.707l3.647 3.646a.5.5 0 0 1-.708.708l-4.5-4.5a.5.5 0 0 1 0-.708l4.5-4.5a.5.5 0 0 1 .708 0\"/>"},"arrow-forward-20-regular":{"body":"<path fill=\"currentColor\" d=\"M12.646 3.646a.5.5 0 0 0 0 .708L16.293 8H9.5A7.5 7.5 0 0 0 2 15.5a.5.5 0 0 0 1 0A6.5 6.5 0 0 1 9.5 9h6.793l-3.647 3.646a.5.5 0 0 0 .708.708l4.5-4.5a.5.5 0 0 0 0-.708l-4.5-4.5a.5.5 0 0 0-.708 0\"/>"},"chat-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 1 1-3.613 15.14l-.121-.065l-3.645.91a.5.5 0 0 1-.62-.441v-.082l.014-.083l.91-3.644l-.063-.12a8 8 0 0 1-.83-2.887l-.025-.382L2 10a8 8 0 0 1 8-8m0 1a7 7 0 0 0-6.106 10.425a.5.5 0 0 1 .063.272l-.014.094l-.756 3.021l3.024-.754a.5.5 0 0 1 .188-.01l.091.021l.087.039A7 7 0 1 0 10 3m.5 8a.5.5 0 0 1 .09.992L10.5 12h-3a.5.5 0 0 1-.09-.992L7.5 11zm2-3a.5.5 0 0 1 .09.992L12.5 9h-5a.5.5 0 0 1-.09-.992L7.5 8z\"/>"},"chat-multiple-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.538 2a6.5 6.5 0 0 0-5.674 9.672l-.796 2.082a1 1 0 0 0 1.204 1.32l2.487-.697A6.5 6.5 0 1 0 8.539 2m-5.5 6.5a5.5 5.5 0 1 1 2.998 4.9l-.174-.09l-2.86.801l.969-2.536l-.128-.21A5.47 5.47 0 0 1 3.038 8.5m8.463 9.5a6.49 6.49 0 0 1-4.927-2.26a7.5 7.5 0 0 0 1.76.257A5.5 5.5 0 0 0 11.5 17c.902 0 1.752-.217 2.502-.6l.174-.09l2.86.801l-.969-2.536l.128-.21c.51-.834.805-1.814.805-2.865a5.47 5.47 0 0 0-.964-3.11a7.5 7.5 0 0 0-.235-1.763A6.48 6.48 0 0 1 18 11.5c0 1.151-.3 2.233-.825 3.172l.795 2.082a1 1 0 0 1-1.204 1.32l-2.487-.697c-.843.4-1.786.623-2.78.623\"/>"},"call-20-regular":{"body":"<path fill=\"currentColor\" d=\"m6.987 2.066l-.717.216a3.5 3.5 0 0 0-2.454 2.854c-.297 2.068.367 4.486 1.968 7.259c1.597 2.766 3.355 4.548 5.29 5.328a3.5 3.5 0 0 0 3.715-.705l.542-.514a2 2 0 0 0 .247-2.623l-1.356-1.88a1.5 1.5 0 0 0-1.655-.556l-2.051.627l-.053.01c-.226.033-.748-.456-1.398-1.582c-.68-1.178-.82-1.867-.633-2.045l1.043-.973a2.5 2.5 0 0 0 .575-2.85l-.662-1.471a2 2 0 0 0-2.4-1.095m1.49 1.505l.66 1.471a1.5 1.5 0 0 1-.344 1.71l-1.046.974C7.078 8.36 7.3 9.442 8.2 11c.846 1.466 1.618 2.19 2.448 2.064l.124-.026l2.088-.637a.5.5 0 0 1 .552.185l1.356 1.88a1 1 0 0 1-.123 1.312l-.543.514a2.5 2.5 0 0 1-2.653.503c-1.698-.684-3.303-2.311-4.798-4.9C5.152 9.3 4.545 7.093 4.806 5.278a2.5 2.5 0 0 1 1.753-2.039l.717-.216a1 1 0 0 1 1.2.548\"/>"},"attach-20-regular":{"body":"<path fill=\"currentColor\" d=\"m4.828 10.485l5.657-5.657a3 3 0 0 1 4.243 4.243L8.01 15.788a1.5 1.5 0 0 1-2.121-2.121l6.01-6.01a.5.5 0 1 0-.707-.708l-6.01 6.01a2.5 2.5 0 0 0 3.535 3.536l6.718-6.717A4 4 0 1 0 9.778 4.12L4.12 9.778a.5.5 0 0 0 .707.707\"/>"},"mention-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 0 1 8 8c0 2.5-1.378 3.996-3 3.996c-1.071 0-2.036-.652-2.567-1.815C11.82 13.26 10.76 14 9.5 14C7.497 14 6 12.134 6 10s1.497-4 3.5-4c1 0 1.875.466 2.5 1.198V6.5a.5.5 0 0 1 1 0V10l.013.39c.126 1.872 1.164 2.606 1.987 2.606c.878 0 2-.835 2-2.996a7 7 0 1 0-4.712 6.614a.54.54 0 0 1 .559.121c.253.253.176.68-.16.8A8 8 0 1 1 10 2m-.5 5C8.189 7 7 8.268 7 10s1.189 3 2.5 3s2.5-1.268 2.5-3s-1.189-3-2.5-3\"/>"},"person-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a4 4 0 1 0 0 8a4 4 0 0 0 0-8M7 6a3 3 0 1 1 6 0a3 3 0 0 1-6 0m-1.991 5A2 2 0 0 0 3 13c0 1.691.833 2.966 2.135 3.797C6.417 17.614 8.145 18 10 18s3.583-.386 4.865-1.203C16.167 15.967 17 14.69 17 13a2 2 0 0 0-2-2zM4 13c0-.553.448-1 1.009-1H15a1 1 0 0 1 1 1c0 1.309-.622 2.284-1.673 2.953C13.257 16.636 11.735 17 10 17s-3.257-.364-4.327-1.047C4.623 15.283 4 14.31 4 13\"/>"},"people-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.5 6.75a2.25 2.25 0 1 1 4.5 0a2.25 2.25 0 0 1-4.5 0M6.75 3.5a3.25 3.25 0 1 0 0 6.5a3.25 3.25 0 0 0 0-6.5m5.687 11.645c.538.22 1.215.355 2.063.355c1.881 0 2.921-.668 3.469-1.434a2.9 2.9 0 0 0 .521-1.36a2 2 0 0 0 .01-.137V12.5A1.5 1.5 0 0 0 17 11h-4.63c.24.29.42.629.525 1H17a.5.5 0 0 1 .5.5v.054l-.005.05a1.9 1.9 0 0 1-.34.88c-.327.459-1.037 1.016-2.655 1.016c-.732 0-1.278-.114-1.687-.281c-.082.28-.201.596-.376.926M1.5 13a2 2 0 0 1 2-2H10a2 2 0 0 1 2 2v.084l-.002.04l-.01.135a3.95 3.95 0 0 1-.67 1.806C10.617 16.08 9.263 17 6.75 17s-3.867-.92-4.568-1.934a3.95 3.95 0 0 1-.67-1.807a3 3 0 0 1-.012-.175zm1 .06v.018l.007.083a2.95 2.95 0 0 0 .498 1.336C3.492 15.201 4.513 16 6.75 16s3.258-.799 3.745-1.503a2.95 2.95 0 0 0 .498-1.336q.006-.057.006-.083l.001-.017V13a1 1 0 0 0-1-1H3.5a1 1 0 0 0-1 1zM13 7.5a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0M14.5 5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5\"/>"},"person-add-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9 2a4 4 0 1 0 0 8a4 4 0 0 0 0-8M6 6a3 3 0 1 1 6 0a3 3 0 0 1-6 0m-1.991 5A2 2 0 0 0 2 13c0 1.691.833 2.966 2.135 3.797C5.417 17.614 7.145 18 9 18q.617 0 1.21-.057a5.5 5.5 0 0 1-.618-.958Q9.301 17 9 17c-1.735 0-3.257-.364-4.327-1.047C3.623 15.283 3 14.31 3 13c0-.553.448-1 1.009-1h5.59q.277-.538.658-1zM14.5 19a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9m0-7a.5.5 0 0 1 .5.5V14h1.5a.5.5 0 0 1 0 1H15v1.5a.5.5 0 0 1-1 0V15h-1.5a.5.5 0 0 1 0-1H14v-1.5a.5.5 0 0 1 .5-.5\"/>"},"person-subtract-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a4 4 0 1 0 0 8a4 4 0 0 0 0-8M7 6a3 3 0 1 1 6 0a3 3 0 0 1-6 0m-1.991 5A2 2 0 0 0 3 13c0 1.691.833 2.966 2.135 3.797C6.417 17.614 8.145 18 10 18q.127 0 .255-.003a5.5 5.5 0 0 1-.659-1.004c-1.567-.052-2.937-.41-3.923-1.04C4.623 15.283 4 14.31 4 13c0-.553.448-1 1.009-1h4.59q.277-.538.658-1zM19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-7 0a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 0-1h-4a.5.5 0 0 0-.5.5\"/>"},"building-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6.75 6.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m.75 2.25a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m-.75 3.75a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m3.75-6.75a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0M9.75 9.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m.75 2.25a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m2.25.75a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5M4.5 18a.5.5 0 0 1-.5-.5v-14A1.5 1.5 0 0 1 5.5 2h6A1.5 1.5 0 0 1 13 3.5V8h1.5A1.5 1.5 0 0 1 16 9.5v8a.5.5 0 0 1-.5.5zM5 3.5V17h2v-2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5V17h2V9.5a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0-.5.5M12 15h-1.5v2H12zm-2.5 0H8v2h1.5z\"/>"},"document-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2zM5 4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1zm9.793 3H11.5a.5.5 0 0 1-.5-.5V3.207z\"/>"},"document-text-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6.5 10a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zM4 4a2 2 0 0 1 2-2h4.586a1.5 1.5 0 0 1 1.06.44l3.915 3.914A1.5 1.5 0 0 1 16 7.414V16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 10 6.5V3zm5.5 4h3.293L11 3.207V6.5a.5.5 0 0 0 .5.5\"/>"},"document-javascript-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4 4a2 2 0 0 1 2-2h4.586a1.5 1.5 0 0 1 1.06.44l3.915 3.914A1.5 1.5 0 0 1 16 7.414V16a2 2 0 0 1-2 2H8.5c.219-.29.375-.63.45-1H14a1 1 0 0 0 1-1V8h-3.5A1.5 1.5 0 0 1 10 6.5V3H6a1 1 0 0 0-1 1v7.5q-.123.091-.232.198A1.5 1.5 0 0 0 4 11.085zm7.5 3h3.293L11 3.207V6.5a.5.5 0 0 0 .5.5m-8 5a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0V16a.5.5 0 0 0-1 0v.5a1.5 1.5 0 0 0 3 0v-4a.5.5 0 0 0-.5-.5M5 13.5a1.5 1.5 0 0 1 3 0a.5.5 0 0 1-1 0a.5.5 0 0 0-1 0v.382a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 8 16.118v.382a1.5 1.5 0 0 1-3 0a.5.5 0 0 1 1 0a.5.5 0 0 0 1 0v-.382a.5.5 0 0 0-.276-.447l-.895-.447A1.5 1.5 0 0 1 5 13.882z\"/>"},"document-table-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 10.5A1.5 1.5 0 0 1 7.5 9h5a1.5 1.5 0 0 1 1.5 1.5v4a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 6 14.5zM8 15v-2H7v1.5a.5.5 0 0 0 .5.5zm1-3h4v-1.5a.5.5 0 0 0-.5-.5H9zm0 3h3.5a.5.5 0 0 0 .5-.5V13H9zm-1.5-5a.5.5 0 0 0-.5.5V12h1v-2zM6 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2zM5 4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1zm9.793 3H11.5a.5.5 0 0 1-.5-.5V3.207z\"/>"},"image-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14 7.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0a.5.5 0 0 0 1 0M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm3-2a2 2 0 0 0-2 2v8c0 .373.102.722.28 1.02l4.669-4.588a1.5 1.5 0 0 1 2.102 0l4.67 4.588A2 2 0 0 0 16 14V6a2 2 0 0 0-2-2zm0 12h8c.37 0 .715-.1 1.012-.274l-4.662-4.58a.5.5 0 0 0-.7 0l-4.662 4.58A2 2 0 0 0 6 16\"/>"},"folder-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.5 3A2.5 2.5 0 0 0 2 5.5v9A2.5 2.5 0 0 0 4.5 17h11a2.5 2.5 0 0 0 2.5-2.5v-7A2.5 2.5 0 0 0 15.5 5H9.707L8.22 3.513A1.75 1.75 0 0 0 6.982 3zM3 5.5A1.5 1.5 0 0 1 4.5 4h2.482a.75.75 0 0 1 .53.22l1.28 1.28L7.44 6.854A.5.5 0 0 1 7.086 7H3zM3 8h4.086a1.5 1.5 0 0 0 1.06-.44L9.707 6H15.5A1.5 1.5 0 0 1 17 7.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5z\"/>"},"folder-open-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 5.5v6.604l1.5-2.6a3 3 0 0 1 2.599-1.5H15V7.5A1.5 1.5 0 0 0 13.5 6h-4a.5.5 0 0 1-.353-.146L7.44 4.146A.5.5 0 0 0 7.086 4H4.5A1.5 1.5 0 0 0 3 5.5m1.284 10.485q.106.015.22.015H13.9a2 2 0 0 0 1.732-1l2.163-3.745a1.5 1.5 0 0 0-1.3-2.25H7.1a2 2 0 0 0-1.732 1L3.205 13.75a1.5 1.5 0 0 0 1.079 2.235M2 14.46V5.5A2.5 2.5 0 0 1 4.5 3h2.586a1.5 1.5 0 0 1 1.06.44L9.708 5H13.5A2.5 2.5 0 0 1 16 7.5v.505h.496c1.925 0 3.128 2.083 2.166 3.75L16.499 15.5a3 3 0 0 1-2.598 1.5h-9.4q-.095 0-.186-.007a2.46 2.46 0 0 1-1.438-.592A2.5 2.5 0 0 1 2 14.461\"/>"},"folder-arrow-right-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.5 3A2.5 2.5 0 0 0 2 5.5v9A2.5 2.5 0 0 0 4.5 17h5.1a5.5 5.5 0 0 1-.393-1H4.5A1.5 1.5 0 0 1 3 14.5V8h4.086a1.5 1.5 0 0 0 1.06-.44L9.707 6H15.5A1.5 1.5 0 0 1 17 7.5v2.1q.538.276 1 .657V7.5A2.5 2.5 0 0 0 15.5 5H9.707L8.22 3.513A1.75 1.75 0 0 0 6.982 3zM3 5.5A1.5 1.5 0 0 1 4.5 4h2.482a.75.75 0 0 1 .53.22l1.28 1.28L7.44 6.854A.5.5 0 0 1 7.086 7H3zM14.5 10a4.5 4.5 0 1 1 0 9a4.5 4.5 0 0 1 0-9m2.353 4.854l.003-.003a.5.5 0 0 0 .144-.348v-.006a.5.5 0 0 0-.146-.35l-2-2a.5.5 0 0 0-.708.707L15.293 14H12.5a.5.5 0 0 0 0 1h2.793l-1.147 1.146a.5.5 0 0 0 .708.708z\"/>"},"board-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm3-2a2 2 0 0 0-2 2v1.058l5.5-.053V4zm4.5 0v8H16V6a2 2 0 0 0-2-2zm5.5 9h-5.5v3H14a2 2 0 0 0 2-2zm-6.5 3V8.005L4 8.058V14a2 2 0 0 0 2 2z\"/>"},"archive-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.5 10a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM2 4.75C2 3.784 2.784 3 3.75 3h12.5c.966 0 1.75.784 1.75 1.75v1.5c0 .698-.409 1.3-1 1.582V14a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V7.832A1.75 1.75 0 0 1 2 6.25zM3.75 4a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h12.5a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75zM4 8v6a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8z\"/>"},"archive-arrow-back-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.5 10a.5.5 0 0 0 0 1h1.757c.313-.38.677-.716 1.08-1zM6 16h3.207q.149.524.393 1H6a3 3 0 0 1-3-3V7.832A1.75 1.75 0 0 1 2 6.25v-1.5C2 3.784 2.784 3 3.75 3h12.5c.966 0 1.75.784 1.75 1.75v1.5c0 .698-.409 1.3-1 1.582V9.6a5.5 5.5 0 0 0-1-.393V8H4v6a2 2 0 0 0 2 2M3.75 4a.75.75 0 0 0-.75.75v1.5c0 .414.336.75.75.75h12.5a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 0-.75-.75zM14.5 19a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9m-.896-6.396l-.897.896h1.543A2.75 2.75 0 0 1 17 16.25v.25a.5.5 0 0 1-1 0v-.25a1.75 1.75 0 0 0-1.75-1.75h-1.543l.897.896a.5.5 0 0 1-.708.708l-1.752-1.753a.5.5 0 0 1 .002-.705l1.75-1.75a.5.5 0 0 1 .708.708\"/>"},"book-open-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 16c-.456.607-1.182 1-2 1H3.5A1.5 1.5 0 0 1 2 15.5v-11A1.5 1.5 0 0 1 3.5 3H8c.818 0 1.544.393 2 1c.456-.607 1.182-1 2-1h4.5A1.5 1.5 0 0 1 18 4.5v11a1.5 1.5 0 0 1-1.5 1.5H12a2.5 2.5 0 0 1-2-1M3 4.5v11a.5.5 0 0 0 .5.5H8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 8 4H3.5a.5.5 0 0 0-.5.5m7.5 10A1.5 1.5 0 0 0 12 16h4.5a.5.5 0 0 0 .5-.5v-11a.5.5 0 0 0-.5-.5H12a1.5 1.5 0 0 0-1.5 1.5z\"/>"},"note-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14 3a3 3 0 0 1 2.995 2.824L17 6v4.379a2 2 0 0 1-.467 1.284l-.119.13l-4.621 4.621a2 2 0 0 1-1.238.578l-.176.008H6a3 3 0 0 1-2.995-2.824L3 14V6a3 3 0 0 1 2.824-2.995L6 3zm0 1H6a2 2 0 0 0-1.995 1.85L4 6v8a2 2 0 0 0 1.85 1.995L6 16h4v-3a3 3 0 0 1 2.824-2.995L13 10h3V6a2 2 0 0 0-1.85-1.995zm1.783 7.001L13 11a2 2 0 0 0-1.995 1.85L11 13v2.781l.086-.074l4.621-4.621q.04-.04.075-.085\"/>"},"clipboard-checkmark-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.085 3A1.5 1.5 0 0 1 8.5 2h3a1.5 1.5 0 0 1 1.415 1H14.5A1.5 1.5 0 0 1 16 4.5v4.707a5.5 5.5 0 0 0-1-.185V4.5a.5.5 0 0 0-.5-.5h-1.585A1.5 1.5 0 0 1 11.5 5h-3a1.5 1.5 0 0 1-1.415-1H5.5a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h4.1q.276.538.657 1H5.5A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3zM8.5 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.146-1.854a.5.5 0 0 0-.708 0L13.5 15.293l-.646-.647a.5.5 0 0 0-.708.708l1 1a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.708\"/>"},"grid-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.5 11A1.5 1.5 0 0 1 9 12.5v4A1.5 1.5 0 0 1 7.5 18h-4A1.5 1.5 0 0 1 2 16.5v-4A1.5 1.5 0 0 1 3.5 11zm9 0a1.5 1.5 0 0 1 1.5 1.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a1.5 1.5 0 0 1-1.5-1.5v-4a1.5 1.5 0 0 1 1.5-1.5zm-9 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5m9 0h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5m-9-10A1.5 1.5 0 0 1 9 3.5v4A1.5 1.5 0 0 1 7.5 9h-4A1.5 1.5 0 0 1 2 7.5v-4A1.5 1.5 0 0 1 3.5 2zm9 0A1.5 1.5 0 0 1 18 3.5v4A1.5 1.5 0 0 1 16.5 9h-4A1.5 1.5 0 0 1 11 7.5v-4A1.5 1.5 0 0 1 12.5 2zm-9 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5m9 0h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5\"/>"},"apps-list-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2 3.5A1.5 1.5 0 0 1 3.5 2h1A1.5 1.5 0 0 1 6 3.5v1A1.5 1.5 0 0 1 4.5 6h-1A1.5 1.5 0 0 1 2 4.5zM3.5 3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM2 9.5A1.5 1.5 0 0 1 3.5 8h1A1.5 1.5 0 0 1 6 9.5v1A1.5 1.5 0 0 1 4.5 12h-1A1.5 1.5 0 0 1 2 10.5zM3.5 9a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM2 15.5A1.5 1.5 0 0 1 3.5 14h1A1.5 1.5 0 0 1 6 15.5v1A1.5 1.5 0 0 1 4.5 18h-1A1.5 1.5 0 0 1 2 16.5zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM8 4.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5\"/>"},"column-triple-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 17a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2zm-1-2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1zm7 2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2zm-1-2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1zm7 2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2zm-1-2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1z\"/>"},"task-list-square-ltr-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.354 7.104a.5.5 0 0 0-.708-.708L7.234 7.808l-.397-.362a.5.5 0 0 0-.674.738l.75.685a.5.5 0 0 0 .69-.016zm0 4.292a.5.5 0 0 1 0 .708l-1.75 1.75a.5.5 0 0 1-.691.015l-.75-.685a.5.5 0 0 1 .674-.738l.397.363l1.412-1.413a.5.5 0 0 1 .708 0M11 12a.5.5 0 0 0 0 1h2.5a.5.5 0 0 0 0-1zm-.5-4.5A.5.5 0 0 1 11 7h2.5a.5.5 0 0 1 0 1H11a.5.5 0 0 1-.5-.5M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zM4 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z\"/>"},"text-bullet-list-tree-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 5.5a1 1 0 1 0 0-2a1 1 0 0 0 0 2m3-1a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m0 5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m4.5 4.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1zm-2.5.5a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-5-4a1 1 0 1 0 0-2a1 1 0 0 0 0 2\"/>"},"checkbox-checked-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zM4 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm9.854 1.854a.5.5 0 0 0-.708-.708L8.5 11.793l-1.646-1.647a.5.5 0 0 0-.708.708l2 2a.5.5 0 0 0 .708 0z\"/>"},"square-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm3-2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z\"/>"},"circle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 3a7 7 0 1 0 0 14a7 7 0 0 0 0-14m-8 7a8 8 0 1 1 16 0a8 8 0 0 1-16 0\"/>"},"clock-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14m-.5 2a.5.5 0 0 1 .492.41L10 5.5V10h2.5a.5.5 0 0 1 .09.992L12.5 11h-3a.5.5 0 0 1-.492-.41L9 10.5v-5a.5.5 0 0 1 .5-.5\"/>"},"timer-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.5 2a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1zm7.656 1.929a.5.5 0 1 0-.707.707l1.414 1.414a.5.5 0 1 0 .707-.707zM9.5 6a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5m0 12a7 7 0 1 0 0-14a7 7 0 0 0 0 14m0-1a6 6 0 1 1 0-12a6 6 0 0 1 0 12\"/>"},"history-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 4a6 6 0 1 1-5.982 5.538a.5.5 0 1 0-.998-.076Q3 9.73 3 10a7 7 0 1 0 2-4.899V3.5a.5.5 0 0 0-1 0v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 0-1H5.528A5.98 5.98 0 0 1 10 4m0 2.5a.5.5 0 0 0-1 0v4a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 0-1H10z\"/>"},"calendar-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7 11a1 1 0 1 0 0-2a1 1 0 0 0 0 2m1 2a1 1 0 1 1-2 0a1 1 0 0 1 2 0m2-2a1 1 0 1 0 0-2a1 1 0 0 0 0 2m1 2a1 1 0 1 1-2 0a1 1 0 0 1 2 0m2-2a1 1 0 1 0 0-2a1 1 0 0 0 0 2m4-5.5A2.5 2.5 0 0 0 14.5 3h-9A2.5 2.5 0 0 0 3 5.5v9A2.5 2.5 0 0 0 5.5 17h9a2.5 2.5 0 0 0 2.5-2.5zM4 7h12v7.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 14.5zm1.5-3h9A1.5 1.5 0 0 1 16 5.5V6H4v-.5A1.5 1.5 0 0 1 5.5 4\"/>"},"calendar-ltr-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7 11a1 1 0 1 0 0-2a1 1 0 0 0 0 2m1 2a1 1 0 1 1-2 0a1 1 0 0 1 2 0m2-2a1 1 0 1 0 0-2a1 1 0 0 0 0 2m1 2a1 1 0 1 1-2 0a1 1 0 0 1 2 0m2-2a1 1 0 1 0 0-2a1 1 0 0 0 0 2m4-5.5A2.5 2.5 0 0 0 14.5 3h-9A2.5 2.5 0 0 0 3 5.5v9A2.5 2.5 0 0 0 5.5 17h9a2.5 2.5 0 0 0 2.5-2.5zM4 7h12v7.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 4 14.5zm1.5-3h9A1.5 1.5 0 0 1 16 5.5V6H4v-.5A1.5 1.5 0 0 1 5.5 4\"/>"},"calendar-clock-20-regular":{"body":"<path fill=\"currentColor\" d=\"M17 5.5A2.5 2.5 0 0 0 14.5 3h-9A2.5 2.5 0 0 0 3 5.5v9A2.5 2.5 0 0 0 5.5 17h4.1a5.5 5.5 0 0 1-.393-1H5.5A1.5 1.5 0 0 1 4 14.5V7h12v2.207q.524.149 1 .393zM5.5 4h9A1.5 1.5 0 0 1 16 5.5V6H4v-.5A1.5 1.5 0 0 1 5.5 4m9 15a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9m-.5-6.5a.5.5 0 0 1 1 0V14h1a.5.5 0 0 1 0 1h-1.5a.5.5 0 0 1-.5-.5z\"/>"},"calendar-add-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14.5 3A2.5 2.5 0 0 1 17 5.5v4.1a5.5 5.5 0 0 0-1-.393V7H4v7.5A1.5 1.5 0 0 0 5.5 16h3.707q.149.524.393 1H5.5A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3zm0 1h-9A1.5 1.5 0 0 0 4 5.5V6h12v-.5A1.5 1.5 0 0 0 14.5 4M19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-4-2a.5.5 0 0 0-1 0V14h-1.5a.5.5 0 0 0 0 1H14v1.5a.5.5 0 0 0 1 0V15h1.5a.5.5 0 0 0 0-1H15z\"/>"},"play-20-regular":{"body":"<path fill=\"currentColor\" d=\"M17.22 8.687a1.498 1.498 0 0 1 0 2.626l-9.997 5.499A1.5 1.5 0 0 1 5 15.499V4.501a1.5 1.5 0 0 1 2.223-1.313zm-.482 1.75a.5.5 0 0 0 0-.875L6.741 4.063A.5.5 0 0 0 6 4.501v10.998a.5.5 0 0 0 .741.438z\"/>"},"pause-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM4 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm9-2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm-1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1z\"/>"},"mic-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 13a3 3 0 0 0 3-3V5a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3m0-1a2 2 0 0 1-2-2V5a2 2 0 1 1 4 0v5a2 2 0 0 1-2 2M5 9.5a.5.5 0 0 1 .5.5a4.5 4.5 0 1 0 9 0a.5.5 0 0 1 1 0a5.5 5.5 0 0 1-5 5.478V17.5a.5.5 0 0 1-1 0v-2.022A5.5 5.5 0 0 1 4.5 10a.5.5 0 0 1 .5-.5\"/>"},"mic-off-20-regular":{"body":"<path fill=\"currentColor\" d=\"M12 5v4.879l.898.898Q13 10.404 13 10V5a3 3 0 0 0-5.998-.119L8 5.879V5a2 2 0 1 1 4 0M7 7.707L2.146 2.854a.5.5 0 1 1 .708-.708l15 15a.5.5 0 0 1-.708.708l-3.626-3.627a5.5 5.5 0 0 1-3.02 1.25V17.5a.5.5 0 0 1-1 0v-2.022A5.5 5.5 0 0 1 4.5 10a.5.5 0 0 1 1 0a4.5 4.5 0 0 0 7.309 3.516l-1.07-1.07A3 3 0 0 1 7 10zm4.016 4.016L8 8.707V10a2 2 0 0 0 3.016 1.723m3.787.959l-.742-.742A4.5 4.5 0 0 0 14.5 10a.5.5 0 0 1 1 0c0 .974-.253 1.888-.697 2.682\"/>"},"video-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 4a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h5a3 3 0 0 0 3-3v-.321l3.037 2.097a1.25 1.25 0 0 0 1.96-1.029V6.252a1.25 1.25 0 0 0-1.96-1.028L13 7.32V7a3 3 0 0 0-3-3zm8 4.536l3.605-2.49a.25.25 0 0 1 .392.206v7.495a.25.25 0 0 1-.392.206L13 11.463zM3 7a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/>"},"camera-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 6a4 4 0 1 0 0 8a4 4 0 0 0 0-8m-3 4a3 3 0 1 1 6 0a3 3 0 0 1-6 0m1.124-8a1.5 1.5 0 0 0-1.34.826L6.194 4h-1.69a2.5 2.5 0 0 0-2.5 2.5v8a2.5 2.5 0 0 0 2.5 2.5h11a2.5 2.5 0 0 0 2.5-2.5v-8a2.5 2.5 0 0 0-2.5-2.5h-1.69l-.584-1.17A1.5 1.5 0 0 0 11.888 2zm-.447 1.275A.5.5 0 0 1 8.124 3h3.764a.5.5 0 0 1 .448.276l.723 1.447a.5.5 0 0 0 .447.276h1.999a1.5 1.5 0 0 1 1.5 1.5V14.5a1.5 1.5 0 0 1-1.5 1.5h-11a1.5 1.5 0 0 1-1.5-1.5v-8a1.5 1.5 0 0 1 1.5-1.5h1.998a.5.5 0 0 0 .446-.276z\"/>"},"speaker-2-20-regular":{"body":"<path fill=\"currentColor\" d=\"M11.996 3.006c0-.873-1.04-1.327-1.68-.733L6.444 5.866a.5.5 0 0 1-.34.134H3.496a1.5 1.5 0 0 0-1.5 1.5v5a1.5 1.5 0 0 0 1.5 1.5h2.608a.5.5 0 0 1 .34.133l3.872 3.594c.64.593 1.68.14 1.68-.733zM7.124 6.599l3.872-3.593v13.988L7.124 13.4a1.5 1.5 0 0 0-1.02-.4H3.496a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5h2.608a1.5 1.5 0 0 0 1.02-.4m8.132-1.972a.5.5 0 0 1 .706.04a8 8 0 0 1 0 10.666a.5.5 0 0 1-.745-.667a7 7 0 0 0 0-9.333a.5.5 0 0 1 .039-.706m-1.176 8.306a.5.5 0 0 1-.183-.683a4.5 4.5 0 0 0 0-4.5a.5.5 0 1 1 .865-.5a5.5 5.5 0 0 1 .001 5.5a.5.5 0 0 1-.683.183\"/>"},"radio-button-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 3a7 7 0 1 0 0 14a7 7 0 0 0 0-14m-8 7a8 8 0 1 1 16 0a8 8 0 0 1-16 0\"/>"},"flash-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6.19 2.77c.131-.456.548-.77 1.022-.77h5.25c.725 0 1.237.71 1.007 1.398l-.002.008L12.205 7h2.564c.947 0 1.407 1.144.767 1.811l-.004.004l-8.676 8.858c-.755.782-2.06.06-1.796-.996l1.17-4.679H4.963a1.062 1.062 0 0 1-1.022-1.354zM7.213 3a.06.06 0 0 0-.06.045l-2.25 7.874c-.01.04.02.08.06.08H6.87a.5.5 0 0 1 .485.62l-1.325 5.3a.1.1 0 0 0-.003.03q0 .006.003.011q.005.013.03.03c.018.01.034.01.042.01l.01-.004a.1.1 0 0 0 .024-.018l.004-.004l8.675-8.856a.06.06 0 0 0 .017-.032a.1.1 0 0 0-.007-.044a.1.1 0 0 0-.025-.034q-.006-.007-.03-.008H11.5a.5.5 0 0 1-.472-.666l1.493-4.254a.062.062 0 0 0-.06-.08z\"/>"},"cloud-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 4c2.817 0 4.415 1.923 4.647 4.246h.07c1.814 0 3.283 1.512 3.283 3.377S16.53 15 14.718 15H5.282C3.469 15 2 13.488 2 11.623C2 9.82 3.373 8.347 5.102 8.251l.251-.005C5.587 5.908 7.183 4 10 4m0 1C7.886 5 6.551 6.316 6.348 8.345a1 1 0 0 1-.995.901h-.07C4.027 9.246 3 10.304 3 11.623C3 12.943 4.028 14 5.282 14h9.436C15.972 14 17 12.942 17 11.623c0-1.32-1.028-2.377-2.282-2.377h-.071a1 1 0 0 1-.995-.9C13.45 6.325 12.109 5 10 5\"/>"},"hard-drive-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2 12c0-.398.08-.791.237-1.156l2.414-5.632A2 2 0 0 1 6.489 4h7.104c.742 0 1.43.41 1.763 1.088c.571 1.162 1.633 3.424 2.454 5.774c.13.369.19.754.19 1.138v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm11.593-7H6.49a1 1 0 0 0-.919.606l-1.894 4.42Q3.834 10 4 10h12q.231 0 .447.05a57 57 0 0 0-1.988-4.521a.96.96 0 0 0-.866-.529M16 15a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1zm-1.25-1.25a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5\"/>"},"server-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.5 5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM7 12.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m.5 1.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM5 4.5A2.5 2.5 0 0 1 7.5 2h5A2.5 2.5 0 0 1 15 4.5v11a2.5 2.5 0 0 1-2.5 2.5h-5A2.5 2.5 0 0 1 5 15.5zM7.5 3A1.5 1.5 0 0 0 6 4.5v11A1.5 1.5 0 0 0 7.5 17h5a1.5 1.5 0 0 0 1.5-1.5v-11A1.5 1.5 0 0 0 12.5 3z\"/>"},"database-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4 5c0-1.007.875-1.755 1.904-2.223C6.978 2.289 8.427 2 10 2s3.022.289 4.096.777C15.125 3.245 16 3.993 16 5v10c0 1.007-.875 1.755-1.904 2.223C13.022 17.71 11.573 18 10 18s-3.022-.289-4.096-.777C4.875 16.755 4 16.007 4 15zm1 0c0 .374.356.875 1.318 1.313C7.234 6.729 8.536 7 10 7s2.766-.27 3.682-.687C14.644 5.875 15 5.373 15 5c0-.374-.356-.875-1.318-1.313C12.766 3.271 11.464 3 10 3s-2.766.27-3.682.687C5.356 4.125 5 4.627 5 5m10 1.698a5 5 0 0 1-.904.525C13.022 7.711 11.573 8 10 8s-3.022-.289-4.096-.777A5 5 0 0 1 5 6.698V15c0 .374.356.875 1.318 1.313c.916.416 2.218.687 3.682.687s2.766-.27 3.682-.687C14.644 15.875 15 15.373 15 15z\"/>"},"developer-board-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 7a3 3 0 1 0 0 6a3 3 0 0 0 0-6m-2 3a2 2 0 1 1 4 0a2 2 0 0 1-4 0m-.5-8a.5.5 0 0 1 .5.5V4h1.5V2.5a.5.5 0 0 1 1 0V4H12V2.5a.5.5 0 0 1 1 0V4h.5A2.5 2.5 0 0 1 16 6.5V7h1.5a.5.5 0 0 1 0 1H16v1.5h1.5a.5.5 0 0 1 0 1H16V12h1.5a.5.5 0 0 1 0 1H16v.5a2.5 2.5 0 0 1-2.5 2.5H13v1.5a.5.5 0 0 1-1 0V16h-1.5v1.5a.5.5 0 0 1-1 0V16H8v1.5a.5.5 0 0 1-1 0V16h-.5A2.5 2.5 0 0 1 4 13.5V13H2.5a.5.5 0 0 1 0-1H4v-1.5H2.5a.5.5 0 0 1 0-1H4V8H2.5a.5.5 0 0 1 0-1H4v-.5A2.5 2.5 0 0 1 6.5 4H7V2.5a.5.5 0 0 1 .5-.5M15 6.5A1.5 1.5 0 0 0 13.5 5h-7A1.5 1.5 0 0 0 5 6.5v7A1.5 1.5 0 0 0 6.5 15h7a1.5 1.5 0 0 0 1.5-1.5z\"/>"},"window-console-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5.646 9.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L7.293 11.5L5.646 9.854a.5.5 0 0 1 0-.708M14.5 13h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1M2.996 5.5a2.5 2.5 0 0 1 2.5-2.5h9a2.5 2.5 0 0 1 2.5 2.5V6H17v1h-.003v7.5a2.5 2.5 0 0 1-2.5 2.5h-9a2.5 2.5 0 0 1-2.5-2.5zm13 .5v-.5a1.5 1.5 0 0 0-1.5-1.5h-9a1.5 1.5 0 0 0-1.5 1.5V6zm-12 1v7.5a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5V7z\"/>"},"code-20-regular":{"body":"<path fill=\"currentColor\" d=\"M12.967 3.68a.5.5 0 0 0-.934-.36l-5 13a.5.5 0 1 0 .934.36zM5.825 6.12a.5.5 0 0 1 .055.706L3.159 10l2.72 3.175a.5.5 0 0 1-.759.65l-3-3.5a.5.5 0 0 1 0-.65l3-3.5a.5.5 0 0 1 .705-.054m8.35 8.26a.5.5 0 0 1-.055-.705l2.722-3.175l-2.722-3.174a.5.5 0 1 1 .76-.651l3 3.5a.5.5 0 0 1 0 .65l-3 3.5a.5.5 0 0 1-.705.055\"/>"},"branch-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 5a3 3 0 0 1-2.145 2.876c.178.223.416.483.72.744c.726.622 1.834 1.252 3.425 1.363a3 3 0 1 1 .168 1.01c-1.96-.078-3.342-.841-4.243-1.613a7 7 0 0 1-.425-.398v3.06a3 3 0 1 1-1 0V7.958A3 3 0 1 1 10 5M7.009 7a2 2 0 1 0-.018-4a2 2 0 0 0 .018 4M17 10a2 2 0 1 0-4 0a2 2 0 0 0 4 0M7 17a2 2 0 1 0 0-4a2 2 0 0 0 0 4\"/>"},"flowchart-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.5 3A1.5 1.5 0 0 0 3 4.5v2A1.5 1.5 0 0 0 4.5 8H5v3.84a1 1 0 0 0-.207.16L3 13.793a1 1 0 0 0 0 1.414L4.793 17a1 1 0 0 0 1.414 0L8 15.207q.094-.095.16-.207H12v.5a1.5 1.5 0 0 0 1.5 1.5h2a1.5 1.5 0 0 0 1.5-1.5v-2a1.5 1.5 0 0 0-1.5-1.5h-2a1.5 1.5 0 0 0-1.5 1.5v.5H8.16a1 1 0 0 0-.16-.207L6.207 12A1 1 0 0 0 6 11.84V8h.5A1.5 1.5 0 0 0 8 6.5v-2A1.5 1.5 0 0 0 6.5 3zM4 4.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5zm-.293 10L5.5 12.707L7.293 14.5L5.5 16.293zM13.5 13h2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5\"/>"},"plug-connected-20-regular":{"body":"<path fill=\"currentColor\" d=\"M17.854 2.854a.5.5 0 0 0-.708-.708l-2.668 2.669a4.036 4.036 0 0 0-5.332.331l-.3.3a1.49 1.49 0 0 0 0 2.108l3.6 3.6a1.49 1.49 0 0 0 2.107 0l.3-.3a4.036 4.036 0 0 0 .332-5.332zm-4.008 7.592a.49.49 0 0 1-.693 0l-3.6-3.6a.49.49 0 0 1 0-.692l.3-.3a3.036 3.036 0 0 1 4.293 4.292zm-6.292-1.6a1.49 1.49 0 0 0-2.107 0l-.3.3a4.036 4.036 0 0 0-.332 5.332l-2.669 2.668a.5.5 0 0 0 .708.708l2.668-2.669a4.036 4.036 0 0 0 5.332-.332l.3-.3a1.49 1.49 0 0 0 0-2.107zm-1.4.708a.49.49 0 0 1 .693 0l3.6 3.6a.49.49 0 0 1 0 .692l-.3.3a3.035 3.035 0 1 1-4.293-4.292z\"/>"},"power-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.5 2.5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0zM13.743 4a.5.5 0 1 0-.499.867a6.5 6.5 0 1 1-6.494.004a.5.5 0 1 0-.5-.866A7.5 7.5 0 1 0 13.743 4\"/>"},"puzzle-piece-20-regular":{"body":"<path fill=\"currentColor\" d=\"M11 3c-.69 0-1.25.56-1.25 1.25V5H6.5a.5.5 0 0 0-.5.5v3.25h-.75a1.25 1.25 0 1 0 0 2.5H6v3.25a.5.5 0 0 0 .5.5h3.25v.75a1.25 1.25 0 1 0 2.5 0V15h3.25a.5.5 0 0 0 .5-.5v-2.25h-.75a2.25 2.25 0 0 1 0-4.5H16V5.5a.5.5 0 0 0-.5-.5h-3.25v-.75C12.25 3.56 11.69 3 11 3M8.764 4a2.25 2.25 0 0 1 4.472 0H15.5A1.5 1.5 0 0 1 17 5.5v3.25h-1.75a1.25 1.25 0 1 0 0 2.5H17v3.25a1.5 1.5 0 0 1-1.5 1.5h-2.264a2.25 2.25 0 0 1-4.472 0H6.5A1.5 1.5 0 0 1 5 14.5v-2.264a2.25 2.25 0 0 1 0-4.472V5.5A1.5 1.5 0 0 1 6.5 4z\"/>"},"cube-multiple-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.205 2.513a5 5 0 0 1 3.59 0l4.243 1.632c.58.223.962.78.962 1.4v.141a2.5 2.5 0 0 0-.603-.333l-4.961-1.908a4 4 0 0 0-2.872 0L3.603 5.353A2.5 2.5 0 0 0 3 5.686v-.14a1.5 1.5 0 0 1 .962-1.4zM6.04 8.303a.5.5 0 0 1 .657-.263L10 9.456l3.303-1.416a.5.5 0 0 1 .394.92L10.5 10.33v3.17a.5.5 0 0 1-1 0v-3.17L6.303 8.96a.5.5 0 0 1-.263-.657m2.883-3.925a3 3 0 0 1 2.154 0l4.961 1.909c.58.222.962.779.962 1.4v6.626a1.5 1.5 0 0 1-.962 1.4l-4.961 1.908a3 3 0 0 1-2.154 0l-4.961-1.908a1.5 1.5 0 0 1-.962-1.4V7.687a1.5 1.5 0 0 1 .962-1.4zm1.795.934a2 2 0 0 0-1.436 0L4.321 7.22A.5.5 0 0 0 4 7.687v6.626a.5.5 0 0 0 .32.467l4.962 1.908a2 2 0 0 0 1.436 0l4.962-1.908a.5.5 0 0 0 .32-.467V7.687a.5.5 0 0 0-.32-.467z\"/>"},"box-20-regular":{"body":"<path fill=\"currentColor\" d=\"M11.3 2.48a3.5 3.5 0 0 0-2.6 0L2.943 4.785A1.5 1.5 0 0 0 2 6.176v7.646a1.5 1.5 0 0 0 .943 1.393L8.7 17.518a3.5 3.5 0 0 0 2.6 0l5.757-2.303A1.5 1.5 0 0 0 18 13.822V6.176a1.5 1.5 0 0 0-.943-1.392zm-2.228.93a2.5 2.5 0 0 1 1.857 0l5.225 2.09l-2.279.91l-6.154-2.46zM6.375 4.487l6.154 2.461L10 7.961L3.846 5.499zm4.125 4.35l6.5-2.6v7.584a.5.5 0 0 1-.314.465l-5.757 2.303q-.21.083-.429.128zm-1 0v7.88a2.5 2.5 0 0 1-.428-.128l-5.758-2.303A.5.5 0 0 1 3 13.822V6.238z\"/>"},"layer-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.505 3.117a1 1 0 0 0-1.011 0l-6.01 3.52a1 1 0 0 0 .003 1.726l6.009 3.502a1 1 0 0 0 1.007 0l6.009-3.502a1 1 0 0 0 .001-1.727zM9.494 4.276a1 1 0 0 1 1.01 0l5.504 3.223l-5.505 3.209a1 1 0 0 1-1.007 0L3.99 7.499zM3.07 9.65l6.438 3.623a1 1 0 0 0 .98 0l6.438-3.623a1 1 0 0 1-.415 1.26l-6.01 3.502a1 1 0 0 1-1.006 0l-6.01-3.502a1 1 0 0 1-.415-1.26m0 2.453l6.438 3.622a1 1 0 0 0 .98 0l6.438-3.622a1 1 0 0 1-.415 1.26l-6.01 3.502a1 1 0 0 1-1.006 0l-6.01-3.502a1 1 0 0 1-.415-1.26\"/>"},"globe-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 18a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-15c.657 0 1.407.59 2.022 1.908c.217.466.406 1.002.559 1.592H7.419c.153-.59.342-1.126.56-1.592C8.592 3.59 9.342 3 10 3M7.072 4.485A10.5 10.5 0 0 0 6.389 6.5H3.936a7.02 7.02 0 0 1 3.778-3.118c-.241.33-.456.704-.642 1.103M6.192 7.5A16 16 0 0 0 6 10c0 .87.067 1.712.193 2.5H3.46A7 7 0 0 1 3 10c0-.88.163-1.724.46-2.5zm.197 6c.176.743.407 1.422.683 2.015c.186.399.401.773.642 1.103A7.02 7.02 0 0 1 3.936 13.5zm1.03 0h5.162a9.3 9.3 0 0 1-.56 1.592C11.408 16.41 10.658 17 10 17s-1.407-.59-2.022-1.908A9.3 9.3 0 0 1 7.42 13.5m5.375-1H7.206A15 15 0 0 1 7 10c0-.883.073-1.725.206-2.5h5.588c.133.775.206 1.617.206 2.5s-.073 1.725-.206 2.5m.817 1h2.453a7.02 7.02 0 0 1-3.778 3.118c.241-.33.456-.704.642-1.103c.276-.593.507-1.272.683-2.015m2.93-1h-2.734c.126-.788.193-1.63.193-2.5s-.067-1.712-.193-2.5h2.733c.297.776.46 1.62.46 2.5s-.163 1.724-.46 2.5m-4.255-9.118A7.02 7.02 0 0 1 16.064 6.5H13.61a10.5 10.5 0 0 0-.683-2.015a6.6 6.6 0 0 0-.642-1.103\"/>"},"link-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8 6a.5.5 0 0 1 .09.992L8 7H6a3 3 0 0 0-.197 5.994L6 13h2a.5.5 0 0 1 .09.992L8 14H6a4 4 0 0 1-.22-7.994L6 6zm6 0a4 4 0 0 1 .22 7.994L14 14h-2a.5.5 0 0 1-.09-.992L12 13h2a3 3 0 0 0 .197-5.994L14 7h-2a.5.5 0 0 1-.09-.992L12 6zM6 9.5h8a.5.5 0 0 1 .09.992L14 10.5H6a.5.5 0 0 1-.09-.992zh8z\"/>"},"wrench-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9 6.5a4.5 4.5 0 0 1 6.352-4.102a.5.5 0 0 1 .148.809L13.207 5.5L14.5 6.793L16.793 4.5a.5.5 0 0 1 .809.147a4.5 4.5 0 0 1-5.207 6.216L6.03 17.311a2.357 2.357 0 0 1-3.374-3.293L9.082 7.36A4.5 4.5 0 0 1 9 6.5M13.5 3a3.5 3.5 0 0 0-3.387 4.386a.5.5 0 0 1-.125.473l-6.612 6.854a1.357 1.357 0 0 0 1.942 1.896l6.574-6.66a.5.5 0 0 1 .512-.124a3.5 3.5 0 0 0 4.521-4.044l-2.072 2.073a.5.5 0 0 1-.707 0l-2-2a.5.5 0 0 1 0-.708l2.073-2.072a3.5 3.5 0 0 0-.72-.074\"/>"},"beaker-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14 3a.5.5 0 0 1 0 1h-.996v4.684c0 .58.144 1.15.42 1.66l2.395 4.446a1.5 1.5 0 0 1-1.32 2.212H5.502a1.5 1.5 0 0 1-1.32-2.212l2.394-4.443a3.5 3.5 0 0 0 .418-1.66V4H6a.5.5 0 0 1 0-1zM7.994 4v4.687a4.5 4.5 0 0 1-.538 2.134L6.821 12h6.359l-.637-1.181a4.5 4.5 0 0 1-.539-2.135V4zm5.724 9H6.282l-1.22 2.264a.5.5 0 0 0 .44.738h8.997a.5.5 0 0 0 .44-.738z\"/>"},"rocket-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.755 6.426a1.998 1.998 0 1 1 2.825 2.827a1.998 1.998 0 0 1-2.825-2.827m2.119.708a.998.998 0 1 0-1.413 1.411a.998.998 0 0 0 1.413-1.411m-1.125 7.37a1.5 1.5 0 0 1-1.703-.295l-.61-.609l-.732 1.22a.5.5 0 0 1-.782.097l-2.83-2.831a.5.5 0 0 1 .096-.782l1.22-.732l-.61-.61a1.5 1.5 0 0 1-.295-1.703l-1.12-1.12a.5.5 0 0 1 0-.707l1.06-1.06a3 3 0 0 1 3.413-.589l.938-.937a6.29 6.29 0 0 1 6.33-1.557c.76.238 1.357.834 1.595 1.595a6.29 6.29 0 0 1-1.557 6.33l-.937.938a3 3 0 0 1-.59 3.413l-1.059 1.06a.5.5 0 0 1-.707 0zm4.076-11.26a5.29 5.29 0 0 0-5.324 1.309l-.816.815l.004.004l-.707.707l-.004-.004l-2.122 2.122l.004.004l-.403.403a.5.5 0 0 0 .048.651l4.248 4.247a.5.5 0 0 0 .652.047l.402-.401l.003.004l2.122-2.122l-.003-.004l.707-.707l.003.004l.816-.816a5.29 5.29 0 0 0 1.31-5.325a1.43 1.43 0 0 0-.94-.938m-3.307 10.615l.704.705l.707-.707a2 2 0 0 0 .52-1.93zm-4.438-8.3a2 2 0 0 0-1.93.52l-.706.707l.705.704zm.627 7.312l-1.57-1.57l-.886.53l1.925 1.926zm-2.904 2.04a.5.5 0 1 0-.707-.706l-1.768 1.768a.5.5 0 1 0 .707.707zM4.388 12.79a.5.5 0 0 1 0 .707l-.71.709a.5.5 0 0 1-.706-.708l.709-.708a.5.5 0 0 1 .707 0m2.83 3.537a.5.5 0 0 0-.707-.707l-.709.709a.5.5 0 1 0 .707.707z\"/>"},"bot-20-regular":{"body":"<path fill=\"currentColor\" d=\"M12 5.5a1 1 0 1 0 0 2a1 1 0 0 0 0-2m-5 1a1 1 0 1 1 2 0a1 1 0 0 1-2 0m3.5-4a.5.5 0 0 0-1 0V3h-3A1.5 1.5 0 0 0 5 4.5v4A1.5 1.5 0 0 0 6.5 10h7A1.5 1.5 0 0 0 15 8.5v-4A1.5 1.5 0 0 0 13.5 3h-3zM6.5 4h7a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5m3.75 13.998c2.616-.033 4.195-.595 5.122-1.44c.875-.8 1.089-1.777 1.123-2.556h.005v-.69a1.81 1.81 0 0 0-1.81-1.809H11.5V11.5h-3v.003H5.31c-1 0-1.81.81-1.81 1.81v.689h.005c.034.78.248 1.757 1.123 2.555c.927.846 2.506 1.408 5.122 1.441V18h.5zm-4.94-5.495h9.38a.81.81 0 0 1 .81.81v.437c0 .69-.131 1.456-.802 2.069C14.01 16.446 12.66 17 10 17s-4.01-.554-4.698-1.181c-.67-.613-.802-1.38-.802-2.069v-.438a.81.81 0 0 1 .81-.809\"/>"},"brain-circuit-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5.7 3.948a2.423 2.423 0 0 1 4.3-1a2.423 2.423 0 0 1 4.3 1l.125.627l.406.081A2.7 2.7 0 0 1 17 7.302V7.5c0 .726-.31 1.38-.805 1.837a3.248 3.248 0 0 1-.77 6.088l-.037.185A2.973 2.973 0 0 1 10 16.678a2.973 2.973 0 0 1-5.388-1.068l-.037-.185a3.248 3.248 0 0 1-.77-6.088A2.5 2.5 0 0 1 3 7.5v-.198a2.7 2.7 0 0 1 2.169-2.646l.406-.08zm8.3 6.967v.585a1.5 1.5 0 0 1-1.5 1.5h-2v2.027a1.973 1.973 0 0 0 3.907.387l.103-.512a.5.5 0 0 1 .392-.392l.291-.059a2.248 2.248 0 0 0-.28-4.445a1.5 1.5 0 0 1-.913.909m-1 0a1.5 1.5 0 1 1 1.895-1.968A1.5 1.5 0 0 0 16 7.5v-.198c0-.81-.571-1.506-1.365-1.665l-.733-.147a.5.5 0 0 1-.392-.392l-.191-.954a1.423 1.423 0 0 0-2.819.28V12h2a.5.5 0 0 0 .5-.5zM9.5 6V4.423a1.423 1.423 0 0 0-2.819-.279l-.19.954a.5.5 0 0 1-.393.392l-.733.147A1.7 1.7 0 0 0 4 7.302V7.5A1.5 1.5 0 0 0 5.5 9h1A1.5 1.5 0 0 1 8 10.5v.585a1.5 1.5 0 1 1-1 0V10.5a.5.5 0 0 0-.5-.5H5.248a2.248 2.248 0 0 0-.441 4.451l.291.059a.5.5 0 0 1 .392.392l.103.512a1.973 1.973 0 0 0 3.907-.387V7h-.585a1.5 1.5 0 1 1 0-1zM8 6.5a.5.5 0 1 0-1 0a.5.5 0 0 0 1 0M7.5 13a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1m6-3a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1\"/>"},"sparkle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.398 12.809a1.04 1.04 0 0 0 1.204-.003c.178-.13.313-.31.387-.518l.447-1.373a2.34 2.34 0 0 1 1.477-1.479l1.391-.45a1.045 1.045 0 0 0-.044-1.98l-1.375-.448a2.34 2.34 0 0 1-1.48-1.477l-.452-1.388a1.044 1.044 0 0 0-1.973.017l-.457 1.4a2.34 2.34 0 0 1-1.44 1.45l-1.39.447a1.045 1.045 0 0 0 .016 1.974l1.374.445a2.33 2.33 0 0 1 1.481 1.488l.452 1.391c.072.204.206.38.382.504m.085-7.415l.527-1.377l.44 1.377a3.33 3.33 0 0 0 2.117 2.114l1.406.53l-1.382.447a3.34 3.34 0 0 0-2.115 2.117l-.523 1.378l-.449-1.379a3.34 3.34 0 0 0-.8-1.31a3.4 3.4 0 0 0-1.312-.812l-1.378-.522l1.386-.45a3.36 3.36 0 0 0 1.29-.813a3.4 3.4 0 0 0 .793-1.3m6.052 11.457a.806.806 0 0 0 1.226-.398l.248-.762a1.1 1.1 0 0 1 .26-.42c.118-.12.262-.208.42-.26l.772-.252a.8.8 0 0 0-.023-1.52l-.764-.25a1.08 1.08 0 0 1-.68-.678l-.252-.773a.8.8 0 0 0-1.518.01l-.247.762a1.07 1.07 0 0 1-.665.679l-.773.252a.8.8 0 0 0 .008 1.518l.763.247c.16.054.304.143.422.261c.119.119.207.263.258.422l.253.774a.8.8 0 0 0 .292.388m-.913-2.793L12.443 14l.184-.064a2.11 2.11 0 0 0 1.3-1.317l.058-.178l.06.181a2.08 2.08 0 0 0 1.316 1.316l.195.063l-.18.06a2.08 2.08 0 0 0-1.317 1.32l-.059.181l-.058-.18a2.08 2.08 0 0 0-1.32-1.323\"/>"},"wand-20-regular":{"body":"<path fill=\"currentColor\" d=\"M16.5 2a.5.5 0 0 1 .5.5V3h.5a.5.5 0 0 1 0 1H17v.5a.5.5 0 0 1-1 0V4h-.5a.5.5 0 1 1 0-1h.5v-.5a.5.5 0 0 1 .5-.5m-10 4a.5.5 0 0 0 0-1H6v-.5a.5.5 0 0 0-1 0V5h-.5a.5.5 0 0 0 0 1H5v.5a.5.5 0 0 0 1 0V6zm9 9a.5.5 0 0 0 0-1H15v-.5a.5.5 0 0 0-1 0v.5h-.5a.5.5 0 1 0 0 1h.5v.5a.5.5 0 1 0 1 0V15zm-2.066-8.434a1.914 1.914 0 0 0-2.707 0l-8.166 8.166a1.914 1.914 0 1 0 2.707 2.707l8.166-8.166a1.914 1.914 0 0 0 0-2.707m-2 .707a.914.914 0 0 1 1.293 1.293l-.477.477l-1.293-1.293zM10.25 8.457l1.293 1.293l-6.982 6.982a.914.914 0 0 1-1.293-1.292z\"/>"},"lightbulb-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2c3.314 0 6 2.597 6 5.8c0 1.677-.745 3.216-2.204 4.594a.6.6 0 0 0-.145.213l-.026.081l-.936 3.917c-.184.771-.865 1.33-1.67 1.39l-.144.005h-1.75c-.818 0-1.535-.516-1.776-1.262l-.038-.133l-.935-3.916a.6.6 0 0 0-.17-.295c-1.39-1.312-2.133-2.77-2.2-4.355L4 7.8l.003-.191C4.108 4.494 6.753 2 10 2m2.045 13h-4.09l.319 1.334l.026.096c.097.3.376.522.712.563l.113.007h1.713l.106-.003a.86.86 0 0 0 .741-.525l.031-.1zM10 3C7.368 3 5.212 4.953 5.015 7.414l-.012.212L5 7.779l.004.217c.056 1.304.674 2.525 1.888 3.671c.188.178.33.398.414.64l.043.15L7.716 14h4.569l.387-1.615l.051-.15c.086-.215.218-.409.386-.568C14.383 10.465 15 9.181 15 7.8C15 5.157 12.769 3 10 3\"/>"},"target-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 11.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M5 10a5 5 0 1 1 10 0a5 5 0 0 1-10 0m5-4a4 4 0 1 0 0 8a4 4 0 0 0 0-8m-8 4a8 8 0 1 1 16 0a8 8 0 0 1-16 0m8-7a7 7 0 1 0 0 14a7 7 0 0 0 0-14\"/>"},"arrow-trending-lines-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14.5 2a.5.5 0 0 0 0 1h1.793L11.5 7.793L8.854 5.146a.5.5 0 0 0-.708 0l-5 5a.5.5 0 0 0 .708.708L8.5 6.207l2.646 2.647a.5.5 0 0 0 .708 0L17 3.707V5.5a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-.5-.5zm1 7a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 1 0v-8a.5.5 0 0 0-.5-.5m-8 2a.5.5 0 0 0-.5.5v6a.5.5 0 0 0 1 0v-6a.5.5 0 0 0-.5-.5m3.5 2.5a.5.5 0 0 1 1 0v4a.5.5 0 0 1-1 0zm-8 1a.5.5 0 0 1 1 0v3a.5.5 0 0 1-1 0z\"/>"},"data-bar-vertical-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 3a2 2 0 0 0-2 2v10a2 2 0 1 0 4 0V5a2 2 0 0 0-2-2M4 5a1 1 0 0 1 2 0v10a1 1 0 1 1-2 0zm4 3a2 2 0 1 1 4 0v7a2 2 0 1 1-4 0zm2-1a1 1 0 0 0-1 1v7a1 1 0 1 0 2 0V8a1 1 0 0 0-1-1m3 4a2 2 0 1 1 4 0v4a2 2 0 1 1-4 0zm2-1a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0v-4a1 1 0 0 0-1-1\"/>"},"wifi-1-20-regular":{"body":"<path fill=\"currentColor\" d=\"M16.832 7.384c.41.409.796.877 1.133 1.365a.5.5 0 0 1-.823.568A8.612 8.612 0 0 0 3.946 8.091c-.348.348-.693.77-1.007 1.222a.5.5 0 0 1-.821-.57a10 10 0 0 1 1.121-1.36a9.61 9.61 0 0 1 13.593 0m-2.236 1.973a6.6 6.6 0 0 1 1.194 1.656a.5.5 0 0 1-.89.455a5.6 5.6 0 0 0-1.01-1.404a5.45 5.45 0 0 0-8.716 1.39a.5.5 0 1 1-.892-.452a6.45 6.45 0 0 1 10.315-1.645m-1.709 2.497c.355.354.647.79.85 1.254a.5.5 0 0 1-.916.401a3.1 3.1 0 0 0-.64-.948a3.033 3.033 0 0 0-4.29 0a3 3 0 0 0-.631.938a.5.5 0 1 1-.916-.401a4 4 0 0 1 .84-1.244a4.033 4.033 0 0 1 5.703 0m-1.924 1.933a1.298 1.298 0 1 1-1.836 1.836a1.298 1.298 0 0 1 1.836-1.836\"/>"},"weather-squalls-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6.568 6.11A3.248 3.248 0 0 1 13 6.75A3.25 3.25 0 0 1 9.75 10H2.5a.5.5 0 1 1 0-1h7.25a2.251 2.251 0 0 0 .002-4.5A2.25 2.25 0 0 0 7.55 6.307l-.059.291a.5.5 0 1 1-.98-.196zM13 10.5a2.5 2.5 0 1 1 2.5 2.5h-1.38c.24.357.379.787.379 1.25a2.254 2.254 0 0 1-2.255 2.25a2.264 2.264 0 0 1-2.233-1.888l-.005-.03a.5.5 0 1 1 .986-.164l.005.03c.101.605.63 1.052 1.247 1.052a1.25 1.25 0 1 0 .005-2.5H2.5a.5.5 0 0 1 0-1h13a1.5 1.5 0 1 0-1.5-1.5a.5.5 0 0 1-1 0\"/>"},"lock-closed-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 1a4 4 0 0 1 4 4v2.05a2.5 2.5 0 0 1 2 2.45v6a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 4 15.5v-6a2.5 2.5 0 0 1 2-2.45V5a4 4 0 0 1 4-4M6.5 8A1.5 1.5 0 0 0 5 9.5v6A1.5 1.5 0 0 0 6.5 17h7a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 13.5 8zm3.5 3.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2M10 2a3 3 0 0 0-3 3v2h6V5a3 3 0 0 0-3-3\"/>"},"lock-open-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15 1a4 4 0 0 1 4 4v.5a.5.5 0 0 1-1 0V5a3 3 0 1 0-6 0v2h1.5A2.5 2.5 0 0 1 16 9.5v6a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 4 15.5v-6A2.5 2.5 0 0 1 6.5 7H11V5a4 4 0 0 1 4-4M6.5 8A1.5 1.5 0 0 0 5 9.5v6A1.5 1.5 0 0 0 6.5 17h7a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 13.5 8zm3.5 3.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2\"/>"},"key-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15 6a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-2.5-4C9.424 2 7 4.424 7 7.5c0 .397.04.796.122 1.175c.058.27-.008.504-.142.638l-4.54 4.54A1.5 1.5 0 0 0 2 14.915V16.5A1.5 1.5 0 0 0 3.5 18h2A1.5 1.5 0 0 0 7 16.5V16h1a1 1 0 0 0 1-1v-1h1a1 1 0 0 0 1-1v-.18c.493.134 1.007.18 1.5.18c3.076 0 5.5-2.424 5.5-5.5S15.576 2 12.5 2M8 7.5C8 4.976 9.976 3 12.5 3S17 4.976 17 7.5S15.024 12 12.5 12c-.66 0-1.273-.095-1.776-.347A.5.5 0 0 0 10 12.1v.9H9a1 1 0 0 0-1 1v1H7a1 1 0 0 0-1 1v.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1.586a.5.5 0 0 1 .146-.353l4.541-4.541c.432-.432.522-1.044.412-1.556A4.6 4.6 0 0 1 8 7.5\"/>"},"shield-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.723 2.084a.5.5 0 0 1 .554 0a15.05 15.05 0 0 0 6.294 2.421A.5.5 0 0 1 17 5v4.5c0 3.891-2.307 6.73-6.82 8.467a.5.5 0 0 1-.36 0C5.308 16.23 3 13.39 3 9.5V5a.5.5 0 0 1 .43-.495a15.05 15.05 0 0 0 6.293-2.421m-.124 1.262A16 16 0 0 1 4 5.428V9.5c0 3.392 1.968 5.863 6 7.463c4.032-1.6 6-4.071 6-7.463V5.428a16 16 0 0 1-5.6-2.082l-.4-.249z\"/>"},"shield-checkmark-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.723 2.084a.5.5 0 0 1 .554 0a15.05 15.05 0 0 0 6.294 2.421A.5.5 0 0 1 17 5v4.6a5.5 5.5 0 0 0-1-.393v-3.78a16 16 0 0 1-5.6-2.081l-.4-.249l-.4.249A16 16 0 0 1 4 5.428V9.5c0 3.242 1.798 5.643 5.478 7.246c.195.435.444.84.74 1.206l-.038.015a.5.5 0 0 1-.36 0C5.308 16.23 3 13.39 3 9.5V5a.5.5 0 0 1 .43-.495a15.05 15.05 0 0 0 6.293-2.421M19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.146-1.854a.5.5 0 0 0-.708 0L13.5 15.293l-.646-.647a.5.5 0 0 0-.708.708l1 1a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0 0-.708\"/>"},"shield-error-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 6a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0v-5A.5.5 0 0 1 10 6m0 8.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5M9.723 2.084a.5.5 0 0 1 .554 0a15.05 15.05 0 0 0 6.294 2.421A.5.5 0 0 1 17 5v4.5c0 3.891-2.307 6.73-6.82 8.467a.5.5 0 0 1-.36 0C5.308 16.23 3 13.39 3 9.5V5a.5.5 0 0 1 .43-.495a15.05 15.05 0 0 0 6.293-2.421m-.124 1.262A16 16 0 0 1 4 5.428V9.5c0 3.392 1.968 5.863 6 7.463c4.032-1.6 6-4.071 6-7.463V5.428a16 16 0 0 1-5.6-2.082l-.4-.249z\"/>"},"shield-dismiss-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.854 7.146a.5.5 0 1 0-.708.708L9.293 10l-2.147 2.146a.5.5 0 0 0 .708.708L10 10.707l2.146 2.147a.5.5 0 0 0 .708-.708L10.707 10l2.147-2.146a.5.5 0 0 0-.708-.708L10 9.293zm2.423-5.062a.5.5 0 0 0-.554 0a15.05 15.05 0 0 1-6.294 2.421A.5.5 0 0 0 3 5v4.5c0 3.891 2.307 6.73 6.82 8.467a.5.5 0 0 0 .36 0C14.693 16.23 17 13.39 17 9.5V5a.5.5 0 0 0-.43-.495a15.05 15.05 0 0 1-6.293-2.421M4 5.428a16 16 0 0 0 5.6-2.082l.4-.249l.4.249A16 16 0 0 0 16 5.428V9.5c0 3.392-1.968 5.863-6 7.463c-4.032-1.6-6-4.071-6-7.463z\"/>"},"sign-out-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.5 11.25a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5M11 3.5a.5.5 0 0 0-.576-.494l-7 1.07A.5.5 0 0 0 3 4.57v10.86a.5.5 0 0 0 .424.494l7 1.071a.5.5 0 0 0 .576-.494V10h5.172l-.997.874a.5.5 0 0 0 .658.752l1.996-1.75a.5.5 0 0 0 0-.752l-1.996-1.75a.499.499 0 1 0-.658.752l.997.874H11zm-1 .582V15.92L4 15V4.999zM12.5 16H12v-5h1v4.5a.5.5 0 0 1-.5.5M12 8V4h.5a.5.5 0 0 1 .5.5V8z\"/>"},"arrow-enter-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.5 17a.5.5 0 0 1 0-1H14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H7.5a.5.5 0 0 1 0-1H14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3zm.146-10.854a.5.5 0 0 1 .708 0l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708l2.647-2.646H1.5a.5.5 0 0 1 0-1h8.793L7.646 6.854a.5.5 0 0 1 0-.708\"/>"},"star-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.104 2.9a1 1 0 0 1 1.794 0l1.93 3.91l4.317.628a1 1 0 0 1 .554 1.706l-3.124 3.044l.738 4.3a1 1 0 0 1-1.451 1.054l-3.86-2.03l-3.862 2.03a1 1 0 0 1-1.45-1.055l.737-4.299l-3.124-3.044a1 1 0 0 1 .554-1.706l4.317-.627zm.897.442l-1.93 3.911a1 1 0 0 1-.753.547L3 8.428l3.124 3.044a1 1 0 0 1 .287.885l-.737 4.3l3.86-2.03a1 1 0 0 1 .931 0l3.861 2.03l-.737-4.3a1 1 0 0 1 .287-.885L17 8.428L12.683 7.8a1 1 0 0 1-.752-.547z\"/>"},"flag-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 13h11.5a.5.5 0 0 0 .416-.777L14.101 8l2.815-4.223A.5.5 0 0 0 16.5 3h-12a.5.5 0 0 0-.5.5v14a.5.5 0 0 0 1 0zm0-1V4h10.566l-2.482 3.723a.5.5 0 0 0 0 .554L15.566 12z\"/>"},"tag-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14 7a1 1 0 1 0 0-2a1 1 0 0 0 0 2m-2.87-5a2 2 0 0 0-1.426.584L3.022 9.249a2 2 0 0 0-.002 2.83l4.949 4.948a2 2 0 0 0 2.828 0l6.631-6.63a2 2 0 0 0 .586-1.418l-.008-4.95a2 2 0 0 0-1.986-1.997zm-.72 1.292A1 1 0 0 1 11.123 3l4.89.032a1 1 0 0 1 .993.999l.008 4.95a1 1 0 0 1-.293.708l-6.63 6.631a1 1 0 0 1-1.415 0l-4.949-4.948a1 1 0 0 1 .001-1.415z\"/>"},"tag-multiple-20-regular":{"body":"<path fill=\"currentColor\" d=\"M13.5 6.5a1 1 0 1 0 0-2a1 1 0 0 0 0 2M9.207 2.586A2 2 0 0 1 10.621 2h4.452a2 2 0 0 1 2 2v4.374a2 2 0 0 1-.593 1.422l-5.818 5.76a2 2 0 0 1-2.82-.008l-4.385-4.384a2 2 0 0 1 0-2.828zM10.621 3a1 1 0 0 0-.707.293l-5.75 5.75a1 1 0 0 0 0 1.414l4.384 4.384a1 1 0 0 0 1.41.004l5.819-5.76a1 1 0 0 0 .296-.71V4a1 1 0 0 0-1-1zm-7.624 8.8a2 2 0 0 0 .46 2.114l2.977 2.977a4 4 0 0 0 5.642.014l4.404-4.36a2 2 0 0 0 .593-1.42v-.573l-4.997 4.953a4 4 0 0 1-.147.14l-.556.55a3 3 0 0 1-4.232-.01l-.499-.5a4 4 0 0 1-.208-.194l-2.977-2.977a2 2 0 0 1-.46-.714\"/>"},"weather-sunny-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 10 2m0 12a4 4 0 1 0 0-8a4 4 0 0 0 0 8m0-1a3 3 0 1 1 0-6a3 3 0 0 1 0 6m7.5-2.5a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1zM10 16a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5m-6.5-5.5a.5.5 0 0 0 0-1H2.463a.5.5 0 0 0 0 1zm.646-6.354a.5.5 0 0 1 .708 0l1 1a.5.5 0 1 1-.708.708l-1-1a.5.5 0 0 1 0-.708m.708 11.708a.5.5 0 0 1-.708-.708l1-1a.5.5 0 0 1 .708.708zm11-11.708a.5.5 0 0 0-.708 0l-1 1a.5.5 0 0 0 .708.708l1-1a.5.5 0 0 0 0-.708m-.708 11.708a.5.5 0 0 0 .708-.708l-1-1a.5.5 0 0 0-.708.708z\"/>"},"weather-moon-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15.493 13.497a6.98 6.98 0 0 1-11.483.892c2.831-1.087 4.558-2.42 5.593-4.397c1.048-2 1.337-4.16.76-6.909a6.98 6.98 0 0 1 5.13 10.414M5.457 16.918A7.981 7.981 0 1 0 9.88 2.035a.6.6 0 0 0-.614.74c.688 2.819.434 4.876-.55 6.753c-.934 1.784-2.544 3.031-5.55 4.107a.6.6 0 0 0-.292.903a7.95 7.95 0 0 0 2.582 2.38\"/>"},"desktop-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4 2a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3v2H5.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1H13v-2h3a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm8 13v2H8v-2zM3 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z\"/>"},"phone-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9 14a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zM7 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM6 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1z\"/>"},"home-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.998 2.388a1.5 1.5 0 0 1 2.005 0l5.5 4.942A1.5 1.5 0 0 1 17 8.445V15.5a1.5 1.5 0 0 1-1.5 1.5H13a1.5 1.5 0 0 1-1.5-1.5V12a.5.5 0 0 0-.5-.5H9a.5.5 0 0 0-.5.5v3.5A1.5 1.5 0 0 1 7 17H4.5A1.5 1.5 0 0 1 3 15.5V8.445c0-.425.18-.83.498-1.115zm1.336.744a.5.5 0 0 0-.668 0l-5.5 4.942A.5.5 0 0 0 4 8.445V15.5a.5.5 0 0 0 .5.5H7a.5.5 0 0 0 .5-.5V12A1.5 1.5 0 0 1 9 10.5h2a1.5 1.5 0 0 1 1.5 1.5v3.5a.5.5 0 0 0 .5.5h2.5a.5.5 0 0 0 .5-.5V8.445a.5.5 0 0 0-.166-.371z\"/>"},"keyboard-shift-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.861 2.528a1.492 1.492 0 0 1 2.278 0l6.62 7.803c.553.651.093 1.654-.759 1.654h-3.01v5.012A1 1 0 0 1 12.994 18H7.007a1 1 0 0 1-.998-1.003v-5.012H3c-.85 0-1.31-1.003-.759-1.654zm1.518.65a.497.497 0 0 0-.759 0L3 10.983h3.508a.5.5 0 0 1 .499.501v5.514h5.986v-5.514a.5.5 0 0 1 .499-.501H17z\"/>"},"location-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5.05 4.051a7 7 0 0 1 9.9 0a7.005 7.005 0 0 1 0 9.904l-1.128 1.114l-2.436 2.37a1.993 1.993 0 0 1-2.64.117l-.132-.117l-2.043-1.985l-1.52-1.5a7.005 7.005 0 0 1 0-9.903m9.195.705a6 6 0 0 0-8.49 0a6.01 6.01 0 0 0-.175 8.311l.175.183l.57.567l2.982 2.905l.093.08a1 1 0 0 0 1.2 0l.093-.08l2.23-2.168l1.322-1.304l.176-.183a6.01 6.01 0 0 0-.176-8.31M10 6.25a2.75 2.75 0 1 1-.001 5.5a2.75 2.75 0 0 1 0-5.5m0 1a1.75 1.75 0 1 0 0 3.5a1.75 1.75 0 0 0 0-3.5\"/>"},"briefcase-20-regular":{"body":"<path fill=\"currentColor\" d=\"M11.25 2c.966 0 1.75.784 1.75 1.75V5h2a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-2.996-2.846L2 14V8a3 3 0 0 1 3-3h2V3.75C7 2.784 7.784 2 8.75 2zM17 11.231A3 3 0 0 1 15 12h-4v.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5V12H5a2.98 2.98 0 0 1-2-.769V14l.01.204A2 2 0 0 0 5 16h10a2 2 0 0 0 2-2zM5 6a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h4v-.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v.5h4a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm3.75-3a.75.75 0 0 0-.75.75V5h4V3.75a.75.75 0 0 0-.75-.75z\"/>"},"payment-20-regular":{"body":"<path fill=\"currentColor\" d=\"M13.5 13a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zM2 6.75A2.75 2.75 0 0 1 4.75 4h10.5A2.75 2.75 0 0 1 18 6.75v6.5A2.75 2.75 0 0 1 15.25 16H4.75A2.75 2.75 0 0 1 2 13.25zM4.75 5A1.75 1.75 0 0 0 3 6.75V8h14V6.75A1.75 1.75 0 0 0 15.25 5zM17 9H3v4.25c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0 0 17 13.25z\"/>"},"currency-dollar-euro-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5.5 2a.5.5 0 0 0-.5.5v.535A3.5 3.5 0 0 0 2 6.5v.129c0 1.43.84 2.726 2.144 3.311l.856.383v5.613a2.5 2.5 0 0 1-2-2.45V12.5a.5.5 0 1 0-1 0v.985a3.5 3.5 0 0 0 3 3.464v.546a.5.5 0 0 0 1 0v-.546a3.5 3.5 0 0 0 3-3.464v-.12a3.62 3.62 0 0 0-2.14-3.304L6 9.676V4.05A2.5 2.5 0 0 1 8 6.5v1a.5.5 0 0 0 1 0v-1a3.5 3.5 0 0 0-3-3.465V2.5a.5.5 0 0 0-.5-.5M3 6.5a2.5 2.5 0 0 1 2-2.45v5.178l-.447-.2A2.63 2.63 0 0 1 3 6.627zm3 9.436v-5.164l.451.202A2.62 2.62 0 0 1 8 13.366v.12a2.5 2.5 0 0 1-2 2.45M12 10q0-.512.057-1H13.5a.5.5 0 1 0 0-1h-1.265c.216-.886.57-1.672 1.02-2.307C14.02 4.609 15.033 4 16.096 4c.392 0 .817.112 1.127.313a.5.5 0 1 0 .545-.838C17.273 3.153 16.652 3 16.097 3c-1.475 0-2.761.846-3.659 2.115c-.568.804-.993 1.79-1.229 2.885h-.71a.5.5 0 1 0 0 1h.552A10 10 0 0 0 11 10h-.505a.5.5 0 0 0 0 1h.556c.154 1.493.65 2.843 1.387 3.885c.898 1.269 2.184 2.115 3.66 2.115c.54 0 1.175-.129 1.684-.478a.5.5 0 0 0-.565-.825c-.296.203-.715.303-1.12.303c-1.064 0-2.076-.609-2.843-1.693c-.612-.865-1.047-2.011-1.197-3.307h1.438a.5.5 0 0 0 0-1z\"/>"},"thumb-like-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.052 2.294c.34-.977 1.632-1.427 2.43-.59c.164.17.326.354.436.519c.32.48.455 1.113.504 1.73c.05.627.016 1.301-.048 1.912a19 19 0 0 1-.241 1.583l-.01.052h.883a3 3 0 0 1 2.952 3.537l-.684 3.761a4.5 4.5 0 0 1-5.612 3.537l-5.6-1.527a2.5 2.5 0 0 1-1.793-1.922l-.353-1.765c-.278-1.389.784-2.559 1.913-3.005a2.8 2.8 0 0 0 .84-.49c1.707-1.514 2.325-2.723 3.385-4.85c.354-.71.718-1.676.998-2.482m1.965 5.585v-.002l.002-.007l.007-.031a14 14 0 0 0 .126-.584c.076-.388.167-.92.227-1.495c.061-.577.09-1.184.046-1.728c-.044-.556-.16-.985-.34-1.255a3 3 0 0 0-.326-.383c-.199-.208-.628-.16-.762.228c-.283.814-.664 1.83-1.048 2.6c-1.067 2.141-1.756 3.502-3.616 5.152c-.34.302-.744.517-1.136.672c-.88.348-1.447 1.148-1.3 1.879l.352 1.765a1.5 1.5 0 0 0 1.077 1.153l5.6 1.527a3.5 3.5 0 0 0 4.364-2.75l.684-3.762A2 2 0 0 0 14.006 8.5h-1.505a.5.5 0 0 1-.484-.621\"/>"},"stethoscope-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2.5 2a.5.5 0 0 0-.5.5v5a4.5 4.5 0 0 0 4 4.473V13a5 5 0 0 0 10 0v-1.05a2.5 2.5 0 1 0-1 0V13a4 4 0 1 1-8 0v-1.027A4.5 4.5 0 0 0 11 7.5v-5a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 0 0 1H10v4.5a3.5 3.5 0 0 1-7 0V3h1.5a.5.5 0 0 0 0-1zm13 6a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3\"/>"},"color-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 0 1 3.388 15.249a3.77 3.77 0 0 1-3.291-.059c-.974-.503-1.696-1.467-1.648-2.731c.017-.445.082-.867.143-1.243c.063-.387.118-.712.136-1.015c.018-.297-.004-.533-.078-.732c-.07-.191-.2-.381-.45-.569c-.313-.235-.58-.275-.845-.237c-.3.043-.614.188-1.014.387c-.735.365-1.776.942-2.974.332c-1.102-.562-1.424-1.868-1.22-2.917A8 8 0 0 1 10 2m0 1a7 7 0 0 0-6.871 5.655c-.153.788.126 1.547.691 1.835c.684.348 1.251.074 2.076-.336c.38-.188.834-.412 1.318-.481c.52-.075 1.054.028 1.586.427c.39.292.645.634.788 1.021c.14.379.162.768.14 1.14c-.022.366-.09.753-.149 1.116a9 9 0 0 0-.13 1.12c-.032.812.418 1.448 1.108 1.805a2.77 2.77 0 0 0 2.407.042A7.002 7.002 0 0 0 10 3m2.5 10a1 1 0 1 1 0 2a1 1 0 0 1 0-2m2-2.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2m0-3a1 1 0 1 1 0 2a1 1 0 0 1 0-2m-2-2.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2m-3-.5a1 1 0 1 1 0 2a1 1 0 0 1 0-2\"/>"},"person-settings-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9 2a4 4 0 1 0 0 8a4 4 0 0 0 0-8M6 6a3 3 0 1 1 6 0a3 3 0 0 1-6 0m-1.991 5A2 2 0 0 0 2 13c0 1.691.833 2.966 2.135 3.797C5.417 17.614 7.145 18 9 18q.617 0 1.21-.057a5.5 5.5 0 0 1-.618-.958Q9.301 17 9 17c-1.735 0-3.257-.364-4.327-1.047C3.623 15.283 3 14.31 3 13c0-.553.448-1 1.009-1h5.59q.277-.538.658-1zm6.626 2.92a2 2 0 0 0 1.43-2.478l-.155-.557q.382-.293.821-.497l.338.358a2 2 0 0 0 2.91.001l.324-.344q.448.212.835.518l-.126.423a2 2 0 0 0 1.456 2.519l.349.082a4.7 4.7 0 0 1 .01 1.017l-.46.117a2 2 0 0 0-1.431 2.479l.156.556q-.383.294-.822.498l-.338-.358a2 2 0 0 0-2.909-.002l-.325.344a4.3 4.3 0 0 1-.835-.518l.127-.422a2 2 0 0 0-1.456-2.52l-.35-.082a4.7 4.7 0 0 1-.01-1.016zm4.865.58a1 1 0 1 0-2 0a1 1 0 0 0 2 0\"/>"},"person-search-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a4 4 0 1 0 0 8a4 4 0 0 0 0-8M7 6a3 3 0 1 1 6 0a3 3 0 0 1-6 0m7.865 10.797c-1.071.683-2.454 1.064-3.962 1.171a1.5 1.5 0 0 0-.342-.529l-.44-.44c1.685-.016 3.16-.379 4.206-1.046C15.377 15.283 16 14.31 16 13a1 1 0 0 0-1-1H8.744a4.5 4.5 0 0 0-.502-1H15a2 2 0 0 1 2 2c0 1.691-.833 2.966-2.135 3.797M4.5 17c.786 0 1.512-.26 2.096-.697l2.55 2.55a.5.5 0 1 0 .708-.707l-2.55-2.55A3.5 3.5 0 1 0 4.5 17m0-1a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5\"/>"},"add-square-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zM4 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm6.5.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 1 0 1 0v-3h3a.5.5 0 1 0 0-1h-3z\"/>"},"clipboard-task-list-ltr-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.354 7.854a.5.5 0 0 0-.708-.708L7.234 8.558l-.397-.362a.5.5 0 0 0-.674.738l.75.685a.5.5 0 0 0 .69-.016zm0 4.292a.5.5 0 0 1 0 .708l-1.75 1.75a.5.5 0 0 1-.691.015l-.75-.685a.5.5 0 0 1 .674-.738l.397.363l1.412-1.413a.5.5 0 0 1 .708 0M11 12.75a.5.5 0 0 0 0 1h2.5a.5.5 0 0 0 0-1zm-.5-4.5a.5.5 0 0 1 .5-.5h2.5a.5.5 0 0 1 0 1H11a.5.5 0 0 1-.5-.5M8.5 2a1.5 1.5 0 0 0-1.415 1H5.5A1.5 1.5 0 0 0 4 4.5v12A1.5 1.5 0 0 0 5.5 18h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 14.5 3h-1.585A1.5 1.5 0 0 0 11.5 2zM8 3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M5.5 4h1.585A1.5 1.5 0 0 0 8.5 5h3a1.5 1.5 0 0 0 1.415-1H14.5a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-12a.5.5 0 0 1 .5-.5\"/>"},"organization-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a3 3 0 0 0-.5 5.96V9.5h-3A1.5 1.5 0 0 0 5 11v1.042a3.001 3.001 0 1 0 1 0V11a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v1.042a3.001 3.001 0 1 0 1 0V11a1.5 1.5 0 0 0-1.5-1.5h-3V7.96A3.001 3.001 0 0 0 10 2M8 5a2 2 0 1 1 4 0a2 2 0 0 1-4 0M3.5 15a2 2 0 1 1 4.001 0A2 2 0 0 1 3.5 15m11-2a2 2 0 1 1 0 4.001a2 2 0 0 1 0-4.001\"/>"},"alert-badge-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.998 2c1.09 0 2.113.28 2.995.77a3 3 0 0 0-.63.797A5.16 5.16 0 0 0 9.999 3c-2.623 0-4.77 1.924-4.98 4.385l-.014.212L5 7.802V11.5l-.038.192l-.963 2.313l11.958.002l.045-.002l-.963-2.313L15 11.5V8c.351 0 .688-.06 1-.17v3.568l.925 2.222q.033.081.053.167l.015.086l.009.132a1 1 0 0 1-.75.963l-.116.027l-.134.01l-3.502-.001l-.005.161a2.5 2.5 0 0 1-4.99 0l-.005-.161H4a1 1 0 0 1-.26-.034l-.125-.042a1 1 0 0 1-.603-1.052l.022-.128l.042-.128l.923-2.219L4 7.793l.005-.225C4.127 4.451 6.77 2 9.998 2M11.5 15.004h-3l.007.141a1.5 1.5 0 0 0 1.349 1.348L10 16.5a1.5 1.5 0 0 0 1.493-1.355zm1.707-10.89c.15-.305.376-.565.653-.757a2 2 0 1 1-.653.757\"/>"},"megaphone-20-regular":{"body":"<path fill=\"currentColor\" d=\"M18 4.802a1.5 1.5 0 0 0-1.887-1.45l-13 3.467A1.5 1.5 0 0 0 2 8.269v2.51a1.5 1.5 0 0 0 1.026 1.423L5 12.86v.89a3.25 3.25 0 0 0 6.27 1.2l4.756 1.586A1.5 1.5 0 0 0 18 15.113zm-7.68 9.832A2.251 2.251 0 0 1 6 13.75v-.556zm6.051-10.316a.5.5 0 0 1 .629.484v10.31a.5.5 0 0 1-.658.475l-13-4.333A.5.5 0 0 1 3 10.779V8.27a.5.5 0 0 1 .371-.484z\"/>"},"news-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 6.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5M10.5 9a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1zm-.5 3.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5M5.5 9a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm.5 3v-2h2v2zM2 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1a2 2 0 0 1 2 2v5.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 13.5zm13 0a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v8.5A1.5 1.5 0 0 0 4.5 15h11a1.5 1.5 0 0 0 1.5-1.5V8a1 1 0 0 0-1-1v6.5a.5.5 0 0 1-1 0z\"/>"},"handshake-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.244 3.012a.5.5 0 0 0-.39.186l-.089.066C8.04 2.73 6.072 3.122 4.702 4.442a4.69 4.69 0 0 0-1.374 4.31l-.05.046l-.779.75a1.53 1.53 0 0 0 0 2.22c.398.384.95.528 1.463.432c.063.289.21.564.443.788c.307.296.706.449 1.108.46c.011.387.17.771.477 1.067s.707.45 1.109.46c.01.387.17.772.477 1.068a1.676 1.676 0 0 0 2.202.092l.437.42c.64.617 1.678.617 2.318 0c.306-.294.465-.676.479-1.062c.4-.012.795-.165 1.1-.459s.465-.677.477-1.063a1.66 1.66 0 0 0 1.087-.459c.243-.233.393-.522.451-.824a1.67 1.67 0 0 0 1.44-.436a1.53 1.53 0 0 0 0-2.221l-.72-.693l.147-.55a4.5 4.5 0 0 0-.42-3.336c-.836-1.506-2.458-2.436-4.212-2.436h-1.23l-.159-.004zm2.453 3.716l2.405 2.317l.003.002l1.741 1.678a.574.574 0 0 1 0 .833a.63.63 0 0 1-.865 0l-1.321-1.272a.52.52 0 0 0-.72 0l-.014.012a.48.48 0 0 0 0 .694l1.03.992c.24.23.24.604 0 .835a.63.63 0 0 1-.8.055a.524.524 0 0 0-.669.046a.477.477 0 0 0-.041.645a.574.574 0 0 1-.054.775a.63.63 0 0 1-.81.048a.524.524 0 0 0-.674.038a.477.477 0 0 0-.043.648a.58.58 0 0 1-.053.788a.637.637 0 0 1-.877 0l-.433-.417l.158-.152a1.53 1.53 0 0 0 0-2.221a1.66 1.66 0 0 0-1.108-.46a1.54 1.54 0 0 0-.477-1.068a1.66 1.66 0 0 0-1.109-.459a1.54 1.54 0 0 0-.477-1.068a1.67 1.67 0 0 0-1.463-.431a1.55 1.55 0 0 0-.443-.788a1.66 1.66 0 0 0-1.292-.454a3.74 3.74 0 0 1 1.13-3.208A4.06 4.06 0 0 1 8.708 4.04L7.253 5.11a1.703 1.703 0 0 0-.33 2.44a1.81 1.81 0 0 0 2.477.336l1.576-1.157zm-4.852-.813l2.592-1.903h.536a2 2 0 0 1 .147.004h1.242c1.404 0 2.685.745 3.338 1.922c.442.796.558 1.721.327 2.594l-.003.01l-2.76-2.667a.5.5 0 0 0-.353-.147h-2.1a.5.5 0 0 0-.295.097L8.808 7.079a.81.81 0 0 1-1.1-.149a.703.703 0 0 1 .137-1.015m.442 8.61l.01-.01l.778-.75l.009-.008a.63.63 0 0 1 .856.009a.574.574 0 0 1 0 .833l-.779.75a.63.63 0 0 1-.865 0a.574.574 0 0 1-.01-.824m.077-1.462l-.01.009l-.778.75l-.01.009a.63.63 0 0 1-.855-.01a.574.574 0 0 1-.007-.826l.007-.007l.778-.75l.007-.007a.63.63 0 0 1 .858.007a.574.574 0 0 1 .01.825m-1.595-1.519l-.779.75l-.007.007a.63.63 0 0 1-.858-.007a.574.574 0 0 1 0-.833l.778-.75a.63.63 0 0 1 .866 0a.574.574 0 0 1 .007.827zm-1.906-1.219l-.778.75a.63.63 0 0 1-.866 0a.574.574 0 0 1 0-.834l.779-.75a.63.63 0 0 1 .865 0a.574.574 0 0 1 0 .834\"/>"},"building-bank-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 5.874a.833.833 0 1 0 0-1.667a.833.833 0 0 0 0 1.667m6 7.466V8h.092c.893 0 1.26-1.148.53-1.665l-5.85-4.152a1.33 1.33 0 0 0-1.544 0L3.376 6.335c-.728.517-.363 1.664.53 1.664H4v5.34c-.601.386-1 1.06-1 1.827v1.333a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-1.333c0-.767-.398-1.441-1-1.826M9.806 2.999a.33.33 0 0 1 .385 0l5.639 4H4.168zm5.192 5v5.006a2 2 0 0 0-.166-.006h-1.834V8zM5 13.005V8h2v5H5.166q-.084 0-.167.006m.167.994h9.667c.644 0 1.166.522 1.166 1.167V16H4v-.833C4 14.522 4.523 14 5.167 14M9.5 13H8V8h1.5zm1 0V8H12v5z\"/>"},"receipt-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v7h3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm11 8v3a2 2 0 0 0 2-2v-1zm-1 3V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v9a2 2 0 0 0 2 2zM6 6.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5m0 3a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5m0 3a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5\"/>"},"wallet-20-regular":{"body":"<path fill=\"currentColor\" d=\"M13.5 11a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1zM3 4.5A1.5 1.5 0 0 1 4.5 3H14a2 2 0 0 1 2 2v.268A2 2 0 0 1 17 7v8a2 2 0 0 1-2 2H5.5A2.5 2.5 0 0 1 3 14.5zM14 4H4.5a.5.5 0 0 0 0 1H15a1 1 0 0 0-1-1M4.5 6q-.264-.001-.5-.085V14.5A1.5 1.5 0 0 0 5.5 16H15a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1z\"/>"},"cart-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2.997 3.496a.5.5 0 0 1 .5-.5h.438c.727 0 1.145.473 1.387.945c.165.323.284.717.383 1.059H16a1 1 0 0 1 .962 1.272l-1.496 5.275A2 2 0 0 1 13.542 13H8.463a2 2 0 0 1-1.93-1.473l-.642-2.355l-.01-.032l-1.03-3.498l-.1-.337c-.1-.346-.188-.652-.32-.909c-.159-.31-.305-.4-.496-.4h-.438a.5.5 0 0 1-.5-.5M6.845 8.87l.653 2.396a1 1 0 0 0 .965.736h5.08a1 1 0 0 0 .961-.727L16 6H6zM10 15.499a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0a.5.5 0 0 0 1 0m6 0a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0a.5.5 0 0 0 1 0\"/>"},"vehicle-truck-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8 12a1 1 0 1 1-2 0a1 1 0 0 1 2 0m5 1a1 1 0 1 0 0-2a1 1 0 0 0 0 2m-5 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M4 2a2 2 0 0 0-2 2v10.5A1.5 1.5 0 0 0 3.5 16H4v.5A1.5 1.5 0 0 0 5.5 18h1A1.5 1.5 0 0 0 8 16.5V16h4v.5a1.5 1.5 0 0 0 1.5 1.5h1a1.5 1.5 0 0 0 1.5-1.5V16h.5a1.5 1.5 0 0 0 1.5-1.5V4a2 2 0 0 0-2-2zm9 14.5V16h2v.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5M7 16v.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5V16zM3 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v10.5a.5.5 0 0 1-.5.5H16V9.746q0-.307-.075-.606l-.75-3.004A1.5 1.5 0 0 0 13.718 5H6.281a1.5 1.5 0 0 0-1.455 1.136L4.075 9.14A2.5 2.5 0 0 0 4 9.746V15h-.5a.5.5 0 0 1-.5-.5zm2 11v-5h10v5zm.14-6l.656-2.621A.5.5 0 0 1 6.28 6h7.438a.5.5 0 0 1 .485.379L14.86 9z\"/>"},"building-factory-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.435 2a1.5 1.5 0 0 0-1.497 1.4l-.866 13A1.5 1.5 0 0 0 3.568 18h2.863a1.5 1.5 0 0 0 1.496-1.6l-.866-13A1.5 1.5 0 0 0 5.564 2zm-.499 1.467a.5.5 0 0 1 .5-.467h1.128a.5.5 0 0 1 .499.467l.867 13a.5.5 0 0 1-.5.533H3.569a.5.5 0 0 1-.498-.533zM16.5 18H8.43a2.5 2.5 0 0 0 .45-1H10v-4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4h.5a.5.5 0 0 0 .5-.5V6.623l-4.166 3.749a.5.5 0 0 1-.835-.372V6.623l-3.51 3.16l-.085-1.27l3.761-3.385A.5.5 0 0 1 13 5.5v3.377l4.165-3.749A.5.5 0 0 1 18 5.5v11a1.5 1.5 0 0 1-1.5 1.5M11 17h4v-4h-4z\"/>"},"person-support-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 14.5a2 2 0 0 1-1.994-1.84A6.002 6.002 0 0 1 10 1a6 6 0 0 1 5.98 5.5a.47.47 0 0 1-.48.5a.54.54 0 0 1-.525-.5a5 5 0 1 0-6.79 5.16A2 2 0 1 1 10 14.5M5.009 12H5.1c.39.381.823.717 1.292 1H5.009C4.448 13 4 13.447 4 14c0 1.309.622 2.284 1.673 2.953C6.743 17.636 8.265 18 10 18s3.257-.364 4.327-1.047C15.377 16.283 16 15.31 16 14a1 1 0 0 0-1-1h-2.041a3 3 0 0 0 0-1H15a2 2 0 0 1 2 2c0 1.691-.833 2.966-2.135 3.797C13.583 18.614 11.855 19 10 19s-3.583-.386-4.865-1.203C3.833 16.967 3 15.69 3 14c0-1.113.903-2 2.009-2M14 7a4 4 0 0 1-1.87 3.387a3 3 0 0 0-.93-.637a3 3 0 1 0-2.4 0c-.35.153-.665.37-.93.637a4 4 0 0 1-1.638-2.042A4 4 0 0 1 6 7a4 4 0 1 1 8 0\"/>"},"text-bold-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5.5 4.25C5.5 3.56 6.06 3 6.75 3h3.501c2.403 0 3.999 1.988 3.999 4c0 .872-.3 1.738-.834 2.44c.904.703 1.581 1.802 1.581 3.31c0 2.863-2.437 4.246-4.244 4.246H6.75c-.69 0-1.25-.56-1.25-1.25zM8 11v3.496h2.753c.811 0 1.744-.62 1.744-1.746c0-1.129-.937-1.75-1.744-1.75zm0-2.5h2.248A1.5 1.5 0 0 0 11.75 7c0-.78-.62-1.5-1.499-1.5H8z\"/>"},"text-italic-20-regular":{"body":"<path fill=\"currentColor\" d=\"M16 3a.5.5 0 0 1 0 1h-3.157L8.227 16H11.5a.5.5 0 0 1 0 1H4a.5.5 0 0 1 0-1h3.156l4.615-12H8.5a.5.5 0 0 1 0-1z\"/>"},"text-underline-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 3.5a.5.5 0 0 0-1 0v6.455C5 12.736 7.234 15 10 15s5-2.264 5-5.045V3.5a.5.5 0 0 0-1 0v6.455C14 12.194 12.204 14 10 14s-4-1.806-4-4.045zm-1 13a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5\"/>"},"text-strikethrough-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6.528 4.026C7.428 3.403 8.654 3 10 3c2.688 0 4.326 1.434 4.9 2.2a.5.5 0 0 1-.8.6C13.674 5.232 12.312 4 10 4c-1.153 0-2.178.347-2.903.849C6.36 5.359 6 5.976 6 6.5c0 .909.432 1.484 1.167 1.933c.362.22.784.403 1.249.567H6.23C5.498 8.43 5 7.637 5 6.5c0-.976.64-1.86 1.528-2.474M16.5 10a.5.5 0 0 1 0 1h-2.73c.732.57 1.23 1.363 1.23 2.5c0 1.228-.721 2.12-1.677 2.681c-.945.556-2.163.819-3.323.819c-1.126 0-2.078-.128-2.893-.478c-.827-.356-1.477-.925-2.023-1.745a.5.5 0 0 1 .832-.554c.454.68.96 1.111 1.586 1.38C8.141 15.878 8.94 16 10 16c1.028 0 2.06-.237 2.817-.681c.748-.44 1.183-1.047 1.183-1.819c0-.909-.432-1.484-1.167-1.933A6.7 6.7 0 0 0 11.585 11H3.5a.5.5 0 0 1 0-1z\"/>"},"text-clear-formatting-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 2a.5.5 0 0 1 .466.318l3.5 8.956a.5.5 0 0 1-.931.364l-1.03-2.635H4.008l-1.042 2.68a.5.5 0 1 1-.932-.363l3.5-9.001A.5.5 0 0 1 6 2m.002 1.877L4.397 8.003h3.217zM11.5 2a.5.5 0 0 1 .5.5v3.523h.004q.338-.609.926-.953q.595-.345 1.332-.345q1.332 0 2.15.994q.819.994.818 2.643q0 .213-.013.414l-.044-.044a2.5 2.5 0 0 0-1.154-.656q-.06-.997-.533-1.614q-.54-.703-1.474-.703q-.899 0-1.474.724q-.436.551-.538 1.366v1.03q.08.645.367 1.123L11 11.37V2.5a.5.5 0 0 1 .5-.5M9.44 16.466a1.5 1.5 0 0 1 0-2.122l4.904-4.904a1.5 1.5 0 0 1 2.122-.001l2.095 2.095a1.5 1.5 0 0 1 0 2.122L14.215 18h2.531a.5.5 0 1 1 0 1h-4.092v-.001a1.5 1.5 0 0 1-1.12-.438zm5.611-6.319l-3.598 3.598l2.802 2.803l3.598-3.599a.5.5 0 0 0 .001-.708l-2.095-2.095a.5.5 0 0 0-.708.001m-1.503 7.108l-2.802-2.802l-.598.598a.5.5 0 0 0-.002.708l2.095 2.095a.5.5 0 0 0 .709-.001z\"/>"},"text-align-left-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2 4.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m0 5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5m.5 4.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1z\"/>"},"text-align-center-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4 4.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m-2 5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5M6.5 14a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1z\"/>"},"text-align-right-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 4.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m-4 5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5M9.5 14a.5.5 0 0 0 0 1h8a.5.5 0 0 0 0-1z\"/>"},"text-bullet-list-ltr-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 5.5a1 1 0 1 0 0-2a1 1 0 0 0 0 2m3-1a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m0 5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m.5 4.5a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1zm-2.5.5a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-1-4a1 1 0 1 0 0-2a1 1 0 0 0 0 2\"/>"},"text-number-list-ltr-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 1.5a.5.5 0 0 0-.385-.487a.51.51 0 0 0-.564.266a3.5 3.5 0 0 1-.317.471a3 3 0 0 1-.957.803a.5.5 0 1 0 .447.894c.3-.15.558-.336.776-.529V5.5a.5.5 0 0 0 1 0zM2.646 7.646a.5.5 0 0 0 .704.71l.007-.005l.043-.036A1.5 1.5 0 0 1 4.313 8c.227.004.41.065.524.149c.096.07.163.17.163.351c0 .202-.07.32-.21.436c-.152.126-.349.224-.619.357l-.145.072c-.313.157-.702.364-1.005.697c-.322.354-.521.819-.521 1.438a.5.5 0 0 0 .5.5h2.5a.5.5 0 0 0 0-1H3.59a1 1 0 0 1 .17-.265c.166-.183.402-.32.714-.475l.12-.06c.263-.128.585-.286.835-.496C5.758 9.431 6 9.048 6 8.5c0-.504-.223-.9-.568-1.155C5.106 7.103 4.7 7.006 4.326 7h-.009a2.5 2.5 0 0 0-1.655.632l-.01.008l-.003.004l-.001.001zm.016-.014l-.016.014s.101-.09.016-.014M4.25 15a.5.5 0 1 0 0 1c.343 0 .532.097.628.183a.37.37 0 0 1 .129.298c-.008.194-.186.519-.757.519c-.412 0-.626-.102-.723-.166a.4.4 0 0 1-.088-.076l-.004-.005a.5.5 0 0 0-.882.47v.002l.001.001l.002.004l.003.006l.01.016l.023.04q.029.046.079.106c.067.08.165.177.302.268c.278.186.69.334 1.277.334c1.03 0 1.726-.675 1.756-1.481a1.37 1.37 0 0 0-.396-1.02c.278-.282.41-.65.396-1.018C5.976 13.675 5.279 13 4.25 13c-.587 0-.999.148-1.277.334a1.4 1.4 0 0 0-.38.374l-.025.04l-.009.016l-.003.006l-.002.003v.002l-.001.001a.5.5 0 0 0 .882.47l.004-.004a.4.4 0 0 1 .088-.076c.097-.064.31-.166.723-.166c.57 0 .75.325.757.519a.37.37 0 0 1-.13.298c-.095.086-.284.183-.627.183m-.815-.753l-.002.003v-.001l.005-.008l.004-.008l.003-.004l.001-.003l.001-.002zM8.5 4a.5.5 0 1 0 0 1h8a.5.5 0 0 0 0-1zm0 5a.5.5 0 1 0 0 1h8a.5.5 0 0 0 0-1zM8 14.5a.5.5 0 0 1 .5-.5h8a.5.5 0 1 1 0 1h-8a.5.5 0 0 1-.5-.5\"/>"},"table-20-regular":{"body":"<path fill=\"currentColor\" d=\"M17 5.5A2.5 2.5 0 0 0 14.5 3h-9A2.5 2.5 0 0 0 3 5.5v9A2.5 2.5 0 0 0 5.5 17h9a2.5 2.5 0 0 0 2.5-2.5zm-13 9V13h3v3H5.5l-.144-.007A1.5 1.5 0 0 1 4 14.5m8-1.5v3H8v-3zm2.5 3H13v-3h3v1.5l-.007.145A1.5 1.5 0 0 1 14.5 16M12 8v4H8V8zm1 0h3v4h-3zm-1-4v3H8V4zm1 0h1.5l.145.007A1.5 1.5 0 0 1 16 5.5V7h-3zM7 4v3H4V5.5l.007-.144A1.5 1.5 0 0 1 5.5 4zm0 4v4H4V8z\"/>"},"arrow-redo-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15.003 2.5a.5.5 0 0 1 1 0v4.9a.6.6 0 0 1-.6.6h-4.9a.5.5 0 0 1 0-1h3.594l-3.473-3.019a4 4 0 1 0-5.248 6.038l8.172 7.104a.5.5 0 1 1-.656.754L4.72 10.774a5 5 0 1 1 6.56-7.547l3.723 3.236z\"/>"},"link-dismiss-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8 4a.5.5 0 0 1 .09.992L8 5H6a3 3 0 0 0-.197 5.994L6 11h2a.5.5 0 0 1 .09.992L8 12H6a4 4 0 0 1-.22-7.994L6 4zm6 0a4 4 0 0 1 3.52 5.902a5.5 5.5 0 0 0-.883-.471a3 3 0 0 0-2.44-4.424L14 5h-2a.5.5 0 0 1-.09-.992L12 4zM6 7.5h8a.5.5 0 0 1 .09.992L14 8.5H6a.5.5 0 0 1-.09-.992zm13 7a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-2.732-1.06a.5.5 0 0 0-.707-.708l-1.061 1.06l-1.06-1.06a.5.5 0 0 0-.708.707l1.06 1.061l-1.06 1.06a.5.5 0 0 0 .707.708l1.061-1.06l1.06 1.06a.5.5 0 0 0 .708-.707l-1.06-1.061z\"/>"},"image-off-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2.854 2.146a.5.5 0 1 0-.708.708l1.409 1.408A2.98 2.98 0 0 0 3 6v8a3 3 0 0 0 3 3h8a2.98 2.98 0 0 0 1.738-.555l1.408 1.409a.5.5 0 0 0 .708-.708zm6.56 7.975a1.5 1.5 0 0 0-.465.311l-4.67 4.588A2 2 0 0 1 4 14V6c0-.37.101-.718.277-1.016zM6 16c-.37 0-.715-.1-1.012-.274l4.662-4.58a.5.5 0 0 1 .7 0l4.662 4.58A2 2 0 0 1 14 16zM16 6v7.879l.898.898Q17 14.404 17 14V6a3 3 0 0 0-3-3H6q-.405 0-.777.102L6.12 4H14a2 2 0 0 1 2 2m-2 1.5a1.5 1.5 0 1 0-3 0a1.5 1.5 0 0 0 3 0m-1 0a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0\"/>"},"eraser-20-regular":{"body":"<path fill=\"currentColor\" d=\"M11.197 2.44a1.5 1.5 0 0 1 2.121 0l4.243 4.242a1.5 1.5 0 0 1 0 2.121L9.364 17H14.5a.5.5 0 1 1 0 1H7.82a1.5 1.5 0 0 1-1.14-.437L2.437 13.32a1.5 1.5 0 0 1 0-2.121zm1.414.706a.5.5 0 0 0-.707 0L5.538 9.512l4.95 4.95l6.366-6.366a.5.5 0 0 0 0-.707zM9.781 15.17l-4.95-4.95l-1.687 1.687a.5.5 0 0 0 0 .707l4.243 4.243a.5.5 0 0 0 .707 0z\"/>"},"pen-20-regular":{"body":"<path fill=\"currentColor\" d=\"M17.18 2.926a2.975 2.975 0 0 0-4.26-.054l-9.375 9.375a2.44 2.44 0 0 0-.655 1.194l-.878 3.95a.5.5 0 0 0 .597.597l3.926-.873a2.5 2.5 0 0 0 1.234-.678l7.98-7.98l.337.336a1 1 0 0 1 0 1.414l-.94.94a.5.5 0 0 0 .708.706l.939-.94a2 2 0 0 0 0-2.828l-.336-.336l.67-.67a2.975 2.975 0 0 0 .052-4.153m-3.553.653a1.975 1.975 0 0 1 2.793 2.793L7.062 15.73a1.5 1.5 0 0 1-.744.409l-3.16.702l.708-3.183a1.43 1.43 0 0 1 .387-.704z\"/>"},"panel-left-contract-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.821 10.5H14.5a.5.5 0 0 0 0-1h-3.679l.999-.874a.5.5 0 1 0-.659-.752l-2 1.75a.5.5 0 0 0 0 .752l2 1.75a.5.5 0 1 0 .659-.752zM4 4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM3 6a1 1 0 0 1 1-1h3v10H4a1 1 0 0 1-1-1zm5 9V5h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1z\"/>"},"panel-left-expand-20-regular":{"body":"<path fill=\"currentColor\" d=\"m13.179 10.5l-.998.874a.5.5 0 0 0 .658.752l2-1.75a.5.5 0 0 0 0-.752l-2-1.75a.5.5 0 1 0-.659.752l1 .874H9.5a.5.5 0 0 0 0 1zM2 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2zm2 1a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h3v10zm4 0V5h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1z\"/>"},"panel-right-20-regular":{"body":"<path fill=\"currentColor\" d=\"M18 6a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3zm-6.5-2v11H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm1 0H15a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-2.5z\"/>"},"column-double-compare-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7 3H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2M3 4h4a1 1 0 0 1 1 1v1H2V5a1 1 0 0 1 1-1m4 12H3a1 1 0 0 1-1-1V7h6v8a1 1 0 0 1-1 1M17 3h-4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2m-4 1h4a1 1 0 0 1 1 1v5h-6V5a1 1 0 0 1 1-1m4 12h-4a1 1 0 0 1-1-1v-2h6v2a1 1 0 0 1-1 1\"/>"},"row-triple-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 3.5A1.5 1.5 0 0 1 4.5 2h11A1.5 1.5 0 0 1 17 3.5v1A1.5 1.5 0 0 1 15.5 6h-11A1.5 1.5 0 0 1 3 4.5zM4.5 3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM3 9.5A1.5 1.5 0 0 1 4.5 8h11A1.5 1.5 0 0 1 17 9.5v1a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 10.5zM4.5 9a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm0 5A1.5 1.5 0 0 0 3 15.5v1A1.5 1.5 0 0 0 4.5 18h11a1.5 1.5 0 0 0 1.5-1.5v-1a1.5 1.5 0 0 0-1.5-1.5zM4 15.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5z\"/>"},"slide-layout-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5.5 14A1.5 1.5 0 0 1 4 12.5v-5A1.5 1.5 0 0 1 5.5 6h9A1.5 1.5 0 0 1 16 7.5v5a1.5 1.5 0 0 1-1.5 1.5zm0-7a.5.5 0 0 0-.5.5V9h10V7.5a.5.5 0 0 0-.5-.5zM7 10H5v2.5a.5.5 0 0 0 .5.5H7zm1 3h6.5a.5.5 0 0 0 .5-.5V10H8zM2 6.5A2.5 2.5 0 0 1 4.5 4h11A2.5 2.5 0 0 1 18 6.5v7a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 2 13.5zM4.5 5A1.5 1.5 0 0 0 3 6.5v7A1.5 1.5 0 0 0 4.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 15.5 5z\"/>"},"window-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zM4 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2zm0 1h12v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z\"/>"},"re-order-dots-vertical-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7 5a1 1 0 1 0 0-2a1 1 0 0 0 0 2m0 6a1 1 0 1 0 0-2a1 1 0 0 0 0 2m1 5a1 1 0 1 1-2 0a1 1 0 0 1 2 0m5-11a1 1 0 1 0 0-2a1 1 0 0 0 0 2m1 5a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-1 7a1 1 0 1 0 0-2a1 1 0 0 0 0 2\"/>"},"auto-fit-width-20-regular":{"body":"<path fill=\"currentColor\" d=\"M18 4a.5.5 0 0 0-1 0v11a.5.5 0 0 0 1 0zM3 4a.5.5 0 0 0-1 0v11a.5.5 0 0 0 1 0zm11.854 5.146a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L13.293 10H6.707l1.147 1.146a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L6.707 9h6.586l-1.147-1.146a.5.5 0 0 1 .708-.708z\"/>"},"chevron-up-down-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14.911 7.216a.5.5 0 0 1-.765.638L10 3.707L5.854 7.854l-.07.057a.5.5 0 0 1-.638-.765l4.5-4.5l.07-.057a.5.5 0 0 1 .638.057l4.5 4.5zM5.09 12.784a.5.5 0 0 1 .765-.638L10 16.293l4.146-4.147l.07-.057a.5.5 0 0 1 .638.765l-4.5 4.5l-.07.057a.5.5 0 0 1-.638-.057l-4.5-4.5z\"/>"},"arrow-sort-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2.354 7.354L4.998 4.71V16.5a.5.5 0 0 0 1 0V4.705l2.649 2.65a.5.5 0 0 0 .707-.708l-3.49-3.49l-.01-.01A.5.5 0 0 0 5.5 3h-.002a.5.5 0 0 0-.383.179L1.646 6.647a.5.5 0 1 0 .708.707m15.293 5.292l-2.644 2.644V3.5a.5.5 0 0 0-1 0v11.795l-2.65-2.65a.5.5 0 0 0-.707.708l3.49 3.49l.01.01a.5.5 0 0 0 .355.147h.002a.5.5 0 0 0 .383-.179l3.468-3.468a.5.5 0 1 0-.707-.707\"/>"},"arrow-sort-up-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.998 4.71L6.354 7.354a.5.5 0 1 1-.708-.707L9.115 3.18A.5.5 0 0 1 9.498 3H9.5a.5.5 0 0 1 .354.147l.01.01l3.49 3.49a.5.5 0 1 1-.707.707l-2.65-2.649V16.5a.5.5 0 0 1-1 0z\"/>"},"arrow-sort-down-20-regular":{"body":"<path fill=\"currentColor\" d=\"m10.003 15.29l2.644-2.644a.5.5 0 0 1 .707.707L9.886 16.82a.5.5 0 0 1-.384.179h-.001a.5.5 0 0 1-.354-.147l-.01-.01l-3.49-3.49a.5.5 0 1 1 .707-.707l2.648 2.649V3.5a.5.5 0 0 1 1 0z\"/>"},"search-info-20-regular":{"body":"<path fill=\"currentColor\" d=\"M13.73 14.436a6.5 6.5 0 1 1 .707-.707l3.416 3.418a.5.5 0 0 1-.637.764l-.07-.057zm-.71-.71q.385-.32.707-.706a5.5 5.5 0 1 0-.707.707M9.5 8.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V9a.5.5 0 0 1 .5-.5m0-1a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5\"/>"},"arrow-up-right-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.5 4a.5.5 0 1 1 0-1h8a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4.707L3.854 16.854a.5.5 0 0 1-.708-.708L15.293 4z\"/>"},"arrow-down-right-20-regular":{"body":"<path fill=\"currentColor\" d=\"M8.5 16a.5.5 0 0 0 0 1h8a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-1 0v6.793L3.854 3.146a.5.5 0 1 0-.708.708L15.293 16z\"/>"},"arrow-export-up-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.646 2.146a.5.5 0 0 1 .708 0l4 4a.5.5 0 0 1-.708.708L10.5 3.707V14.5a.5.5 0 0 1-1 0V3.707L6.354 6.854a.5.5 0 1 1-.708-.708zM4 17.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5\"/>"},"arrow-turn-right-down-20-regular":{"body":"<path fill=\"currentColor\" d=\"M16.854 11.146a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L12 14.293V8a2 2 0 0 0-2-2H3.5a.5.5 0 0 1 0-1H10a3 3 0 0 1 3 3v6.293l3.146-3.147a.5.5 0 0 1 .708 0\"/>"},"next-20-regular":{"body":"<path fill=\"currentColor\" d=\"M17 3.5a.5.5 0 0 0-1 0v13a.5.5 0 1 0 1 0zM3 4.252c0-1 1.117-1.595 1.947-1.038l8.5 5.707a1.25 1.25 0 0 1 .007 2.071l-8.5 5.793A1.25 1.25 0 0 1 3 15.752zm1.39-.207a.25.25 0 0 0-.39.207v11.5c0 .2.225.32.391.207l8.5-5.793a.25.25 0 0 0-.002-.414z\"/>"},"arrow-clockwise-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4 10a6 6 0 0 1 10.472-4H12.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-1 0v1.601a7 7 0 1 0 1.98 4.361a.5.5 0 1 0-.998.076Q16 9.766 16 10a6 6 0 0 1-12 0\"/>"},"hourglass-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5.922 18q-.383 0-.727-.156a2.2 2.2 0 0 1-.617-.422A1.88 1.88 0 0 1 4 16.078q0-.61.125-1.187a5.3 5.3 0 0 1 .984-2.125a5.7 5.7 0 0 1 .829-.868l1.82-1.515a.498.498 0 0 0 0-.766l-1.82-1.523A5.35 5.35 0 0 1 4.5 6.227A5.5 5.5 0 0 1 4 3.922q0-.383.156-.727t.422-.617A1.88 1.88 0 0 1 5.922 2h8.156q.383 0 .727.156t.617.422A1.88 1.88 0 0 1 16 3.922a5.45 5.45 0 0 1-.492 2.305a5.3 5.3 0 0 1-1.445 1.867l-1.82 1.523a.497.497 0 0 0 0 .766l1.82 1.515q.468.39.828.86q.36.468.601 1.008q.243.538.375 1.117q.133.578.133 1.195q0 .383-.156.727t-.422.617a1.88 1.88 0 0 1-1.344.578zm8.117-1a.95.95 0 0 0 .68-.281a.9.9 0 0 0 .203-.305A1.3 1.3 0 0 0 15 16.04q0-.992-.406-1.86a4.4 4.4 0 0 0-1.172-1.507l-1.82-1.524a1.5 1.5 0 0 1-.399-.515a1.51 1.51 0 0 1 0-1.273q.141-.306.399-.516l1.82-1.516a4.3 4.3 0 0 0 1.164-1.5q.406-.867.414-1.867a.95.95 0 0 0-.281-.68a.9.9 0 0 0-.305-.203A1.3 1.3 0 0 0 14.04 3H5.961a1 1 0 0 0-.375.07a.9.9 0 0 0-.305.211a1 1 0 0 0-.203.305q-.07.164-.078.375q0 .484.102.953q.1.47.312.906q.21.438.492.813t.672.695l1.82 1.516q.258.21.399.515a1.51 1.51 0 0 1 0 1.274q-.141.297-.399.515l-1.82 1.524a4.3 4.3 0 0 0-1.164 1.508A4.45 4.45 0 0 0 5 16.04q0 .202.07.374a.9.9 0 0 0 .211.305q.141.132.305.203q.164.07.375.078z\"/>"},"checkmark-starburst-20-regular":{"body":"<path fill=\"currentColor\" d=\"M11.54 1.898a2.42 2.42 0 0 1 3.103 1.285l.424.976a1.5 1.5 0 0 0 .777.776l.975.425a2.417 2.417 0 0 1 1.285 3.101l-.39.99a1.5 1.5 0 0 0 0 1.1l.39.988a2.42 2.42 0 0 1-1.285 3.103l-.975.424a1.5 1.5 0 0 0-.777.777l-.424.975a2.42 2.42 0 0 1-3.103 1.285l-.989-.39a1.5 1.5 0 0 0-1.098 0l-.99.39a2.417 2.417 0 0 1-3.102-1.285l-.425-.975a1.5 1.5 0 0 0-.776-.777l-.976-.424a2.42 2.42 0 0 1-1.285-3.103l.39-.989a1.5 1.5 0 0 0 0-1.098l-.39-.99A2.417 2.417 0 0 1 3.184 5.36l.976-.425a1.5 1.5 0 0 0 .776-.776l.425-.976a2.417 2.417 0 0 1 3.101-1.285l.99.39a1.5 1.5 0 0 0 1.1 0zm2.186 1.684a1.42 1.42 0 0 0-1.82-.753l-.989.39a2.5 2.5 0 0 1-1.83 0l-.99-.39a1.417 1.417 0 0 0-1.82.753l-.424.975a2.5 2.5 0 0 1-1.295 1.295l-.975.425a1.417 1.417 0 0 0-.754 1.818l.39.99a2.5 2.5 0 0 1 0 1.831l-.39.99c-.28.71.054 1.514.754 1.819l.975.424a2.5 2.5 0 0 1 1.295 1.295l.425.975a1.417 1.417 0 0 0 1.818.753l.99-.39a2.5 2.5 0 0 1 1.831 0l.99.39c.71.28 1.514-.053 1.819-.753l.424-.975a2.5 2.5 0 0 1 1.295-1.295l.975-.424c.7-.305 1.033-1.11.753-1.82l-.39-.989a2.5 2.5 0 0 1 0-1.83l.39-.99a1.417 1.417 0 0 0-.753-1.82l-.975-.424a2.5 2.5 0 0 1-1.295-1.295zm-1.08 4.065a.5.5 0 0 1 .708.707l-4 4a.5.5 0 0 1-.707 0l-2-2a.5.5 0 1 1 .707-.707L9 11.293z\"/>"},"subtract-circle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6 10a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 6 10m4 8a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-1a7 7 0 1 1 0-14a7 7 0 0 1 0 14\"/>"},"pause-circle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2a8 8 0 1 1 0 16a8 8 0 0 1 0-16m0 1a7 7 0 1 0 0 14a7 7 0 0 0 0-14M8.5 6.5A.5.5 0 0 1 9 7v6a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5m3 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5\"/>"},"gauge-20-regular":{"body":"<path fill=\"currentColor\" d=\"M12.466 5.057a.5.5 0 0 1-.647.284a5.001 5.001 0 0 0-5.355 8.195a.5.5 0 1 1-.707.707a6 6 0 0 1 6.425-9.834a.5.5 0 0 1 .284.648m2.478 2.477a.5.5 0 0 1 .647.285a6 6 0 0 1-1.348 6.424a.5.5 0 1 1-.707-.707a5 5 0 0 0 1.123-5.354a.5.5 0 0 1 .284-.648m-.859-1.715a.5.5 0 0 0-.635-.011l-.177.14a335 335 0 0 0-1.91 1.531c-.532.431-1.078.877-1.513 1.242c-.218.182-.41.346-.56.478a4 4 0 0 0-.344.328a1.5 1.5 0 1 0 2.282 1.948c.072-.084.17-.232.27-.39c.107-.17.239-.385.385-.628c.292-.488.646-1.096.989-1.69a301 301 0 0 0 1.213-2.126l.111-.196a.5.5 0 0 0-.11-.626M10 18a8 8 0 1 0 0-16a8 8 0 0 0 0 16m0-1a7 7 0 1 1 0-14a7 7 0 0 1 0 14\"/>"},"text-bullet-list-add-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 5.5a1 1 0 1 0 0-2a1 1 0 0 0 0 2m3-1a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m0 5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m4.022 5.5q.047-.516.185-1H6.5a.5.5 0 0 0 0 1zM4 14.5a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-1-4a1 1 0 1 0 0-2a1 1 0 0 0 0 2m17 5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-4-2a.5.5 0 0 0-1 0V15h-1.5a.5.5 0 0 0 0 1H15v1.5a.5.5 0 0 0 1 0V16h1.5a.5.5 0 0 0 0-1H16z\"/>"},"clipboard-error-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.085 3A1.5 1.5 0 0 1 8.5 2h3a1.5 1.5 0 0 1 1.415 1H14.5A1.5 1.5 0 0 1 16 4.5v4.707a5.5 5.5 0 0 0-1-.185V4.5a.5.5 0 0 0-.5-.5h-1.585A1.5 1.5 0 0 1 11.5 5h-3a1.5 1.5 0 0 1-1.415-1H5.5a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h4.1q.276.538.657 1H5.5A1.5 1.5 0 0 1 4 16.5v-12A1.5 1.5 0 0 1 5.5 3zM8.5 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0M14.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5m0 5.125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25\"/>"},"folder-add-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.5 3A2.5 2.5 0 0 0 2 5.5v9A2.5 2.5 0 0 0 4.5 17h5.1a5.5 5.5 0 0 1-.393-1H4.5A1.5 1.5 0 0 1 3 14.5V8h4.086a1.5 1.5 0 0 0 1.06-.44L9.707 6H15.5A1.5 1.5 0 0 1 17 7.5v2.1q.538.276 1 .657V7.5A2.5 2.5 0 0 0 15.5 5H9.707L8.22 3.513A1.75 1.75 0 0 0 6.982 3zM3 5.5A1.5 1.5 0 0 1 4.5 4h2.482a.75.75 0 0 1 .53.22l1.28 1.28L7.44 6.854A.5.5 0 0 1 7.086 7H3zm16 9a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-4-2a.5.5 0 0 0-1 0V14h-1.5a.5.5 0 0 0 0 1H14v1.5a.5.5 0 0 0 1 0V15h1.5a.5.5 0 0 0 0-1H15z\"/>"},"book-star-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4 16V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v11a1 1 0 0 1-1 1H5a1 1 0 0 0 1 1h9.5a.5.5 0 0 1 0 1H6a2 2 0 0 1-2-2M15 4a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v11h10zm-4.546 1.29a.5.5 0 0 0-.907 0l-.822 1.77l-1.937.234a.5.5 0 0 0-.28.863l1.429 1.328L7.56 11.4a.5.5 0 0 0 .734.533L10 10.985l1.706.948a.5.5 0 0 0 .733-.533l-.375-1.915l1.43-1.328a.5.5 0 0 0-.281-.863l-1.937-.235zm-.94 2.443L10 6.687l.486 1.046a.5.5 0 0 0 .393.286l1.145.138l-.845.785a.5.5 0 0 0-.15.463l.222 1.131l-1.008-.56a.5.5 0 0 0-.486 0l-1.007.56l.221-1.131a.5.5 0 0 0-.15-.463l-.844-.785L9.12 8.02a.5.5 0 0 0 .394-.286\"/>"},"pin-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.122 3.137a2 2 0 0 1 3.203-.52l4.057 4.057a2 2 0 0 1-.52 3.203l-3.458 1.73a1.5 1.5 0 0 0-.722.784l-1.436 3.59a1 1 0 0 1-1.636.336L7 13.707l-3.293 3.292H3v-.707L6.293 13l-2.61-2.61a1 1 0 0 1 .335-1.636l3.59-1.436a1.5 1.5 0 0 0 .785-.721zm2.496.187a1 1 0 0 0-1.601.26l-1.73 3.459A2.5 2.5 0 0 1 7.98 8.246L4.39 9.682l5.927 5.928l1.436-3.59a2.5 2.5 0 0 1 1.204-1.308l3.458-1.73a1 1 0 0 0 .26-1.6z\"/>"},"pin-off-20-regular":{"body":"<path fill=\"currentColor\" d=\"M2.854 2.146a.5.5 0 1 0-.708.708l4.75 4.75l-2.878 1.15a1 1 0 0 0-.335 1.636L6.293 13L3 16.293V17h.707L7 13.707l2.61 2.61a1 1 0 0 0 1.636-.335l1.15-2.878l4.75 4.75a.5.5 0 0 0 .708-.708zm8.774 10.189l-1.31 3.275L4.39 9.683l3.275-1.31zm1.329-1.622l-.08.042l.743.744l3.242-1.621a2 2 0 0 0 .52-3.203l-4.057-4.057a2 2 0 0 0-3.203.52L8.502 6.38l.743.744q.023-.04.042-.08l1.73-3.459a1 1 0 0 1 1.601-.26l4.057 4.057a1 1 0 0 1-.26 1.602z\"/>"},"mail-multiple-20-regular":{"body":"<path fill=\"currentColor\" d=\"M16 5.5A2.5 2.5 0 0 0 13.5 3h-9A2.5 2.5 0 0 0 2 5.5v7A2.5 2.5 0 0 0 4.5 15h9a2.5 2.5 0 0 0 2.5-2.5zM9.254 9.931L15 6.961V12.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 3 12.5V6.963l5.746 2.968l.082.038a.5.5 0 0 0 .426-.038M4.5 4h9A1.5 1.5 0 0 1 15 5.5v.301L9 8.92L3 5.802V5.5A1.5 1.5 0 0 1 4.5 4m2 13a2.5 2.5 0 0 1-2-1h9a3.5 3.5 0 0 0 3.5-3.5v-7c.607.456 1 1.182 1 2v5a4.5 4.5 0 0 1-4.5 4.5z\"/>"},"comment-text-20-regular":{"body":"<path fill=\"currentColor\" d=\"M15.4 13.842h-4.92L6.206 17H6.2v-3.158H4.6c-.896 0-1.6-.713-1.6-1.566v-6.71C3 4.713 3.704 4 4.6 4h10.8c.896 0 1.6.713 1.6 1.566v6.71c0 .853-.704 1.566-1.6 1.566m-10 3.762c.33.437.957.526 1.399.2l4.011-2.962h4.59c1.436 0 2.6-1.149 2.6-2.566v-6.71C18 4.149 16.836 3 15.4 3H4.6C3.164 3 2 4.149 2 5.566v6.71c0 1.418 1.164 2.566 2.6 2.566h.6v2.171c0 .213.07.42.2.591M9.5 10H15a.5.5 0 0 0 0-1H9.5a.5.5 0 0 0 0 1m-2-1H5a.5.5 0 0 0 0 1h2.5a.5.5 0 0 0 0-1M5 11a.5.5 0 0 0 0 1h5.5a.5.5 0 0 0 0-1zm7.5 1a.5.5 0 0 1 0-1H15a.5.5 0 0 1 0 1z\"/>"},"chat-help-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.25 7.307C9.09 7.491 9 7.745 9 8a.5.5 0 0 1-1 0c0-.473.161-.97.5-1.354C8.847 6.252 9.36 6 10 6s1.153.252 1.5.646c.339.385.5.88.5 1.354c0 .49-.116.87-.302 1.19c-.163.279-.376.5-.545.677l-.042.043c-.186.195-.329.354-.434.554c-.1.191-.177.444-.177.829a.5.5 0 1 1-1 0c0-.532.11-.947.291-1.293c.177-.337.41-.584.598-.781l.022-.023c.188-.197.322-.337.423-.51c.095-.163.166-.369.166-.686c0-.255-.089-.51-.25-.693C10.597 7.134 10.36 7 10 7s-.597.134-.75.307m.75 6.905a.7.7 0 1 0 0-1.399a.7.7 0 0 0 0 1.4M2 10a8 8 0 1 1 4.262 7.075l-3.64.91a.5.5 0 0 1-.607-.606l.91-3.641A8 8 0 0 1 2 10m8-7a7 7 0 0 0-6.107 10.425a.5.5 0 0 1 .05.366l-.756 3.022l3.022-.756a.5.5 0 0 1 .366.05A7 7 0 1 0 10 3\"/>"},"call-inbound-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6.535 2.116c-1.04-.264-2.13-.152-2.984.326c-.87.486-1.48 1.348-1.51 2.501c-.046 1.802.371 4.22 2.027 7.058c1.635 2.803 3.44 4.483 4.938 5.481c.946.631 1.991.648 2.884.237c.88-.405 1.594-1.214 1.965-2.217a1.84 1.84 0 0 0-.12-1.536l-.954-1.702a2.5 2.5 0 0 0-3.074-1.114l-.666.255c-.323.123-.62.066-.788-.1c-.565-.555-.969-1.308-1.152-2.12c-.058-.256.06-.558.342-.771l.601-.454a2.5 2.5 0 0 0 .663-3.239l-.972-1.695a1.93 1.93 0 0 0-1.2-.91M3.041 4.97c.02-.774.412-1.327.998-1.655c.602-.337 1.424-.44 2.25-.23a.93.93 0 0 1 .579.439l.971 1.695a1.5 1.5 0 0 1-.397 1.943l-.601.454c-.52.392-.88 1.064-.716 1.789c.222.982.713 1.913 1.427 2.614c.522.512 1.266.542 1.846.32l.666-.255a1.5 1.5 0 0 1 1.845.668l.953 1.703c.12.214.14.47.055.7c-.29.785-.835 1.374-1.445 1.655c-.597.275-1.272.267-1.911-.16c-1.371-.914-3.07-2.481-4.63-5.153C3.37 8.817 3 6.583 3.042 4.97m14.813-2.117a.5.5 0 1 0-.708-.707L12 7.292V3.5a.5.5 0 0 0-1 0v5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 0-1h-3.793z\"/>"},"call-dismiss-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6.535 2.116c-1.04-.264-2.13-.152-2.984.326c-.87.486-1.48 1.348-1.51 2.501c-.046 1.802.371 4.22 2.027 7.058c1.635 2.803 3.44 4.483 4.938 5.481c.946.631 1.991.648 2.884.237c.88-.405 1.594-1.214 1.965-2.217a1.84 1.84 0 0 0-.12-1.536l-.954-1.702a2.5 2.5 0 0 0-3.074-1.114l-.666.255c-.323.123-.62.066-.788-.1c-.565-.555-.969-1.308-1.152-2.12c-.058-.256.06-.558.342-.771l.601-.454a2.5 2.5 0 0 0 .663-3.239l-.972-1.695a1.93 1.93 0 0 0-1.2-.91M3.041 4.97c.02-.774.412-1.327.998-1.655c.602-.337 1.424-.44 2.25-.23a.93.93 0 0 1 .579.439l.971 1.695a1.5 1.5 0 0 1-.397 1.943l-.601.454c-.52.392-.88 1.064-.716 1.789c.222.982.713 1.913 1.427 2.614c.522.512 1.266.542 1.846.32l.666-.255a1.5 1.5 0 0 1 1.845.668l.953 1.703c.12.214.14.47.055.7c-.29.785-.835 1.374-1.445 1.655c-.597.275-1.272.267-1.911-.16c-1.371-.914-3.07-2.481-4.63-5.153C3.37 8.817 3 6.583 3.042 4.97m14.813-2.824a.5.5 0 0 1 0 .707L15.207 5.5l2.647 2.646a.5.5 0 0 1-.708.707L14.5 6.207l-2.646 2.646a.5.5 0 0 1-.708-.707L13.793 5.5l-2.647-2.647a.5.5 0 0 1 .708-.707L14.5 4.792l2.646-2.646a.5.5 0 0 1 .708 0\"/>"},"headphones-20-regular":{"body":"<path fill=\"currentColor\" d=\"M3 10a7 7 0 0 1 14 0v1h-3.5a.5.5 0 0 0-.5.5v6a.5.5 0 0 0 .5.5H16a2 2 0 0 0 2-2v-6a8 8 0 1 0-16 0v6a2 2 0 0 0 2 2h2.5a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5H3zm0 2h3v5H4a1 1 0 0 1-1-1zm14 0v4a1 1 0 0 1-1 1h-2v-5z\"/>"},"sound-wave-circle-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9.996 2.999a7 7 0 1 0 0 14a7 7 0 0 0 0-14m-8 7a8 8 0 1 1 16 0a8 8 0 0 1-16 0M6 8.5a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0V9a.5.5 0 0 1 .5-.5m5.5 0a.5.5 0 0 0-1 0v3a.5.5 0 0 0 1 0zM8.5 7a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0v-5a.5.5 0 0 1 .5-.5m5.5.5a.5.5 0 0 0-1 0v5a.5.5 0 0 0 1 0z\"/>"},"keyboard-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 12.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m6.502-4.495a.752.752 0 1 0 0-1.505a.752.752 0 0 0 0 1.505m3.753-.753a.752.752 0 1 1-1.505 0a.752.752 0 0 1 1.505 0m-9.753.753a.752.752 0 1 0 0-1.505a.752.752 0 0 0 0 1.505M7.75 9.752a.752.752 0 1 1-1.505 0a.752.752 0 0 1 1.505 0m2.252.753a.752.752 0 1 0 0-1.505a.752.752 0 0 0 0 1.505m3.757-.753a.752.752 0 1 1-1.504 0a.752.752 0 0 1 1.504 0M8.503 8.005a.752.752 0 1 0 0-1.505a.752.752 0 0 0 0 1.505M2 5.5A1.5 1.5 0 0 1 3.5 4h13A1.5 1.5 0 0 1 18 5.5v8a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 2 13.5zM3.5 5a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5z\"/>"},"print-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 4.5A1.5 1.5 0 0 1 6.5 3h7A1.5 1.5 0 0 1 15 4.5V5h.5A2.5 2.5 0 0 1 18 7.5v5a1.5 1.5 0 0 1-1.5 1.5H15v1.5a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 5 15.5V14H3.5A1.5 1.5 0 0 1 2 12.5v-5A2.5 2.5 0 0 1 4.5 5H5zM6 5h8v-.5a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0-.5.5zm-1 8v-1.5A1.5 1.5 0 0 1 6.5 10h7a1.5 1.5 0 0 1 1.5 1.5V13h1.5a.5.5 0 0 0 .5-.5v-5A1.5 1.5 0 0 0 15.5 6h-11A1.5 1.5 0 0 0 3 7.5v5a.5.5 0 0 0 .5.5zm1.5-2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5z\"/>"},"qr-code-20-regular":{"body":"<path fill=\"currentColor\" d=\"M11 15h2v2h-2zm4 0h2v2h-2zm-4-4h2v2h-2zm2 2h2v2h-2zm2-2h2v2h-2zM3 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zm0 1h2v2H5zm-2 8a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1zm0 1h2v2H5zm6-8a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zm0 1h2v2h-2z\"/>"},"link-square-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.5 3A1.5 1.5 0 0 0 3 4.5v6A1.5 1.5 0 0 0 4.5 12H6v1H4.5A2.5 2.5 0 0 1 2 10.5v-6A2.5 2.5 0 0 1 4.5 2h6A2.5 2.5 0 0 1 13 4.5v6a2.5 2.5 0 0 1-2.5 2.5H9v-1h1.5a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 10.5 3zm5 4H11v1H9.5A1.5 1.5 0 0 0 8 9.5v6A1.5 1.5 0 0 0 9.5 17h6a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 15.5 8H14V7h1.5A2.5 2.5 0 0 1 18 9.5v6a2.5 2.5 0 0 1-2.5 2.5h-6A2.5 2.5 0 0 1 7 15.5v-6A2.5 2.5 0 0 1 9.5 7\"/>"},"branch-fork-20-regular":{"body":"<path fill=\"currentColor\" d=\"M9 5a3 3 0 1 0-3.5 2.959v4.082a3 3 0 1 0 1 0V11H12a2.5 2.5 0 0 0 2.5-2.5v-.541a3 3 0 1 0-1 0V8.5A1.5 1.5 0 0 1 12 10H6.5V7.959A3 3 0 0 0 9 5M6 7a2 2 0 1 1 0-4a2 2 0 0 1 0 4m0 10a2 2 0 1 1 0-4a2 2 0 0 1 0 4M16 5a2 2 0 1 1-4 0a2 2 0 0 1 4 0\"/>"},"cloud-arrow-up-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10 2c2.817 0 4.415 1.923 4.647 4.246h.07C16.532 6.246 18 7.758 18 9.623q0 .143-.011.283a5.8 5.8 0 0 0-1.114-1.062c-.31-.933-1.163-1.598-2.157-1.598h-.071a1 1 0 0 1-.995-.9C13.45 4.325 12.109 3 10 3C7.886 3 6.551 4.316 6.348 6.345a1 1 0 0 1-.995.901h-.07C4.027 7.246 3 8.304 3 9.623C3 10.943 4.028 12 5.282 12h2.666a5.7 5.7 0 0 0-.177 1H5.282C3.469 13 2 11.488 2 9.623C2 7.82 3.373 6.347 5.102 6.251l.251-.005C5.587 3.908 7.183 2 10 2m3.5 7a4.5 4.5 0 1 1 0 9a4.5 4.5 0 0 1 0-9m1.602 4.898a.562.562 0 1 0 .796-.796l-2-2a.56.56 0 0 0-.796 0l-2 2a.562.562 0 1 0 .796.796L13 12.796V15.5a.5.5 0 0 0 1 0v-2.704z\"/>"},"money-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7 9a2 2 0 1 1 4 0a2 2 0 0 1-4 0m2-1a1 1 0 1 0 0 2a1 1 0 0 0 0-2M3.5 4A1.5 1.5 0 0 0 2 5.5v7A1.5 1.5 0 0 0 3.5 14h11a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 14.5 4zM3 5.5a.5.5 0 0 1 .5-.5H5v1a1 1 0 0 1-1 1H3zM3 8h1a2 2 0 0 0 2-2V5h6v1a2 2 0 0 0 2 2h1v2h-1a2 2 0 0 0-2 2v1H6v-1a2 2 0 0 0-2-2H3zm10-3h1.5a.5.5 0 0 1 .5.5V7h-1a1 1 0 0 1-1-1zm2 6v1.5a.5.5 0 0 1-.5.5H13v-1a1 1 0 0 1 1-1zM5 13H3.5a.5.5 0 0 1-.5-.5V11h1a1 1 0 0 1 1 1zm12-.5a2.5 2.5 0 0 1-2.5 2.5H4.085A1.5 1.5 0 0 0 5.5 16h9a3.5 3.5 0 0 0 3.5-3.5v-5a1.5 1.5 0 0 0-1-1.415z\"/>"},"diamond-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7.876 1.878a3 3 0 0 1 4.243 0l5.999 5.998a3 3 0 0 1 0 4.244l-5.999 5.998a3 3 0 0 1-4.243 0L1.878 12.12a3 3 0 0 1 0-4.244zm3.536.707a2 2 0 0 0-2.829 0L2.585 8.583a2.004 2.004 0 0 0 0 2.83l5.998 5.998c.781.78 2.048.78 2.83 0l5.997-5.999a2 2 0 0 0 0-2.829z\"/>"},"drink-coffee-20-regular":{"body":"<path fill=\"currentColor\" d=\"M5 2.5a.5.5 0 0 0-1 0c0 1.002.686 1.515 1.16 1.87l.04.03c.526.394.8.63.8 1.1a.5.5 0 0 0 1 0c0-1.002-.686-1.515-1.16-1.87L5.8 3.6c-.526-.394-.8-.63-.8-1.1m10 5.435V9h1a3 3 0 1 1 0 6h-1.803A6 6 0 0 1 3 12V7.935C3 7.419 3.419 7 3.935 7h10.13c.517 0 .935.419.935.935M4 8v4a5 5 0 0 0 10 0V8zm11 4a6 6 0 0 1-.341 2H16a2 2 0 1 0 0-4h-1zM7.5 2a.5.5 0 0 1 .5.5c0 .47.274.706.8 1.1l.04.03c.474.355 1.16.868 1.16 1.87a.5.5 0 0 1-1 0c0-.47-.274-.706-.8-1.1l-.04-.03C7.686 4.015 7 3.502 7 2.5a.5.5 0 0 1 .5-.5m3.5.5a.5.5 0 0 0-1 0c0 1.002.686 1.515 1.16 1.87l.04.03c.526.394.8.63.8 1.1a.5.5 0 0 0 1 0c0-1.002-.686-1.515-1.16-1.87l-.04-.03c-.526-.394-.8-.63-.8-1.1\"/>"},"run-20-regular":{"body":"<path fill=\"currentColor\" d=\"M6.995 2.413a.51.51 0 0 0-.583-.408a.49.49 0 0 0-.403.575l.01.053c-1.729.572-2.748 1.489-3.327 2.513c-.565 1-.677 2.05-.69 2.854H2v.005l-.67.837a1.5 1.5 0 0 0 .331 2.18l8.655 5.86A6.5 6.5 0 0 0 13.96 18h2.79A2.25 2.25 0 0 0 19 15.75c0-1.26-1.024-2.178-2.07-2.51c-.609-.193-1.18-.509-1.514-1.005l-3.017-5.19q.094-.014.187-.03a.49.49 0 0 0 .403-.574a.51.51 0 0 0-.583-.409c-2.56.433-4.968-1.208-5.41-3.619M11.27 7.09l3.29 5.662l.016.026c.515.775 1.34 1.19 2.053 1.416c.485.154.888.449 1.13.807H13.99a3.5 3.5 0 0 1-1.958-.598l-1.693-1.143l1.032-.596a1.25 1.25 0 0 0 .458-1.708l-.768-1.33a1.25 1.25 0 0 0-1.708-.457l-2.737 1.58l-.95-.64l.71-.41a1.25 1.25 0 0 0 .457-1.708L4.738 4.36c.411-.29.923-.552 1.562-.767c.801 2.011 2.765 3.372 4.969 3.496m-1.986 6.663l.05.088l.043-.025l2.098 1.415a4.5 4.5 0 0 0 2.517.77h3.984c-.116.57-.62 1-1.225 1h-2.79a5.5 5.5 0 0 1-3.084-.946l-8.654-5.86a.5.5 0 0 1-.11-.727l.286-.359l4.153 2.801l.014.024l.011-.007zm.134-1.115L7.54 11.37l2.314-1.336a.25.25 0 0 1 .342.091l.768 1.33a.25.25 0 0 1-.092.342zm-5.854-7q.168-.3.416-.593L5.97 8.49a.25.25 0 0 1-.092.341l-1.132.654L3 8.308V8.18c0-.765.082-1.691.563-2.543\"/>"},"mountain-location-top-20-regular":{"body":"<path fill=\"currentColor\" d=\"M10.987 5.238q-.124.19-.245.364a.894.894 0 0 1-1.511-.039a18 18 0 0 1-.234-.35C8.497 4.452 8 3.552 8 3a2 2 0 1 1 4 0c0 .551-.498 1.45-.996 2.214zM11 3a1 1 0 1 0-2 0a1 1 0 0 0 2 0M8.435 6.17a19 19 0 0 1-.256-.379l-5.355 5.641A3 3 0 0 0 2 13.498V15a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1.502a3 3 0 0 0-.824-2.066l-5.355-5.64q-.131.199-.256.378q-.166.24-.376.408l2.268 2.39c-1.265.075-2.298.543-3.196.95q-.363.167-.7.307c-.66.27-1.264.44-1.916.393c-.557-.04-1.192-.24-1.96-.747L8.81 6.578a2 2 0 0 1-.376-.408m-3.448 4.437c.94.649 1.783.952 2.587 1.009c.879.063 1.65-.173 2.365-.466c.277-.113.545-.233.81-.351c1.13-.507 2.201-.987 3.684-.804l2.018 2.126a2 2 0 0 1 .55 1.377V15a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-1.502a2 2 0 0 1 .55-1.377z\"/>"},"door-20-regular":{"body":"<path fill=\"currentColor\" d=\"M7 11a1 1 0 1 0 0-2a1 1 0 0 0 0 2M4 4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2 13h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1\"/>"},"calendar-cancel-20-regular":{"body":"<path fill=\"currentColor\" d=\"M14.5 3A2.5 2.5 0 0 1 17 5.5v4.1a5.5 5.5 0 0 0-1-.393V7H4v7.5A1.5 1.5 0 0 0 5.5 16h3.707q.149.524.393 1H5.5A2.5 2.5 0 0 1 3 14.5v-9A2.5 2.5 0 0 1 5.5 3zm0 1h-9A1.5 1.5 0 0 0 4 5.5V6h12v-.5A1.5 1.5 0 0 0 14.5 4M19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0m-4.5.707l1.146 1.147a.5.5 0 0 0 .708-.708L15.207 14.5l1.147-1.146a.5.5 0 0 0-.708-.708L14.5 13.793l-1.146-1.147a.5.5 0 0 0-.708.708l1.147 1.146l-1.147 1.146a.5.5 0 0 0 .708.708z\"/>"},"alert-off-20-regular":{"body":"<path fill=\"currentColor\" d=\"M4.004 7.568a5.6 5.6 0 0 1 .58-2.277L2.146 2.854a.5.5 0 1 1 .708-.708l15 15a.5.5 0 0 1-.708.708l-2.849-2.85H12.5l-.005.161a2.5 2.5 0 0 1-4.99 0l-.005-.161H3.999a1 1 0 0 1-.26-.034l-.124-.042a1 1 0 0 1-.603-1.052l.021-.128l.043-.128l.923-2.219L4 7.793zm9.295 6.438l-7.96-7.96a4.6 4.6 0 0 0-.322 1.339l-.013.212L5 7.802V11.5l-.038.192l-.963 2.313zm-1.8.998h-3l.008.141a1.5 1.5 0 0 0 1.349 1.348L10 16.5a1.5 1.5 0 0 0 1.493-1.355zm3.54-3.312l.874 2.1l.852.852a.98.98 0 0 0 .236-.64l-.008-.13l-.016-.087a1 1 0 0 0-.053-.167L16 11.398V7.802l-.005-.224l-.013-.223C15.742 4.335 13.147 2 9.998 2c-1.64 0-3.128.633-4.213 1.664l.707.707A5.1 5.1 0 0 1 9.998 3c2.697 0 4.893 2.035 4.998 4.608l.004.204V11.5z\"/>"},"battery-10-20-regular":{"body":"<path fill=\"currentColor\" d=\"M16 5a3 3 0 0 1 3 3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3zM3 6a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm13 1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z\"/>"},"battery-2-20-regular":{"body":"<path fill=\"currentColor\" d=\"M16 5a3 3 0 0 1 3 3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3zM3 6a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm1 1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z\"/>"},"battery-5-20-regular":{"body":"<path fill=\"currentColor\" d=\"M16 5a3 3 0 0 1 3 3a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3zM3 6a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h13a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm5.5 1a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z\"/>"}},"lastModified":1785042646,"width":20,"height":20}
diff --git a/workbench/control_plane/src/lib/theme/icon-data/material.json b/workbench/control_plane/src/lib/theme/icon-data/material.json
index 83306bac..c79d2d7a 100644
--- a/workbench/control_plane/src/lib/theme/icon-data/material.json
+++ b/workbench/control_plane/src/lib/theme/icon-data/material.json
@@ -1 +1 @@
-{"prefix":"material-symbols","icons":{"progress-activity":{"body":"<path fill=\"currentColor\" d=\"M8.125 21.213q-1.825-.788-3.187-2.15t-2.15-3.188T2 11.988t.788-3.875t2.15-3.175t3.187-2.15T12 2q.425 0 .713.288T13 3t-.288.713T12 4Q8.675 4 6.337 6.338T4 12t2.338 5.663T12 20t5.663-2.337T20 12q0-.425.288-.712T21 11t.713.288T22 12q0 2.05-.788 3.875t-2.15 3.188t-3.175 2.15t-3.875.787t-3.887-.787\"/>"},"check-rounded":{"body":"<path fill=\"currentColor\" d=\"m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z\"/>"},"check-circle-rounded":{"body":"<path fill=\"currentColor\" d=\"m10.6 13.8l-2.15-2.15q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7L9.9 15.9q.3.3.7.3t.7-.3l5.65-5.65q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275zM12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"close-rounded":{"body":"<path fill=\"currentColor\" d=\"m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z\"/>"},"cancel-rounded":{"body":"<path fill=\"currentColor\" d=\"m12 13.4l2.9 2.9q.275.275.7.275t.7-.275t.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7t.7.275t.7-.275zm0 8.6q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"warning-rounded":{"body":"<path fill=\"currentColor\" d=\"M2.725 21q-.275 0-.5-.137t-.35-.363t-.137-.488t.137-.512l9.25-16q.15-.25.388-.375T12 3t.488.125t.387.375l9.25 16q.15.25.138.513t-.138.487t-.35.363t-.5.137zm9.988-3.287Q13 17.425 13 17t-.288-.712T12 16t-.712.288T11 17t.288.713T12 18t.713-.288m0-3Q13 14.425 13 14v-3q0-.425-.288-.712T12 10t-.712.288T11 11v3q0 .425.288.713T12 15t.713-.288\"/>"},"error-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.713 16.713Q13 16.425 13 16t-.288-.712T12 15t-.712.288T11 16t.288.713T12 17t.713-.288m0-4Q13 12.425 13 12V8q0-.425-.288-.712T12 7t-.712.288T11 8v4q0 .425.288.713T12 13t.713-.288M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"info-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.713 16.713Q13 16.425 13 16v-4q0-.425-.288-.712T12 11t-.712.288T11 12v4q0 .425.288.713T12 17t.713-.288m0-8Q13 8.425 13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9t.713-.288M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"help-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.838 17.638q.362-.363.362-.888t-.362-.888t-.888-.362t-.887.363t-.363.887t.363.888t.887.362t.888-.363M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m.1-14.3q.625 0 1.088.4t.462 1q0 .55-.337.975t-.763.8q-.575.5-1.012 1.1t-.438 1.35q0 .35.263.588t.612.237q.375 0 .638-.25t.337-.625q.1-.525.45-.937t.75-.788q.575-.55.988-1.2t.412-1.45q0-1.275-1.037-2.087T12.1 6q-.95 0-1.812.4T8.975 7.625q-.175.3-.112.638t.337.512q.35.2.725.125t.625-.425q.275-.375.688-.575t.862-.2\"/>"},"notifications-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 19q-.425 0-.712-.288T4 18t.288-.712T5 17h1v-7q0-2.075 1.25-3.687T10.5 4.2v-.7q0-.625.438-1.062T12 2t1.063.438T13.5 3.5v.7q2 .5 3.25 2.113T18 10v7h1q.425 0 .713.288T20 18t-.288.713T19 19zm7 3q-.825 0-1.412-.587T10 20h4q0 .825-.587 1.413T12 22\"/>"},"monitoring-rounded":{"body":"<path fill=\"currentColor\" d=\"M3.288 20.713Q3 20.425 3 20v-1q0-.425.288-.712T4 18t.713.288T5 19v1q0 .425-.288.713T4 21t-.712-.288m4 0Q7 20.426 7 20v-5.5q0-.425.288-.712T8 13.5t.713.288T9 14.5V20q0 .425-.288.713T8 21t-.712-.288m4 0Q11 20.426 11 20v-3.5q0-.425.288-.712T12 15.5t.713.288t.287.712V20q0 .425-.288.713T12 21t-.712-.288m4 0Q15 20.426 15 20v-5q0-.425.288-.712T16 14t.713.288T17 15v5q0 .425-.288.713T16 21t-.712-.288m4 0Q19 20.426 19 20v-9q0-.425.288-.712T20 10t.713.288T21 11v9q0 .425-.288.713T20 21t-.712-.288M14 11.975q-.4 0-.763-.15t-.662-.425L10 8.825l-5.3 5.3q-.3.3-.712.288t-.713-.313q-.275-.3-.262-.712T3.3 12.7l5.275-5.275q.3-.3.663-.437T10 6.85t.775.138t.65.437L14 10l5.3-5.3q.3-.3.713-.288t.712.313q.275.3.263.713t-.288.687L15.425 11.4q-.275.275-.65.425t-.775.15\"/>"},"add-rounded":{"body":"<path fill=\"currentColor\" d=\"M11 13H6q-.425 0-.712-.288T5 12t.288-.712T6 11h5V6q0-.425.288-.712T12 5t.713.288T13 6v5h5q.425 0 .713.288T19 12t-.288.713T18 13h-5v5q0 .425-.288.713T12 19t-.712-.288T11 18z\"/>"},"remove-rounded":{"body":"<path fill=\"currentColor\" d=\"M6 13q-.425 0-.712-.288T5 12t.288-.712T6 11h12q.425 0 .713.288T19 12t-.288.713T18 13z\"/>"},"delete-rounded":{"body":"<path fill=\"currentColor\" d=\"M7 21q-.825 0-1.412-.587T5 19V6q-.425 0-.712-.288T4 5t.288-.712T5 4h4q0-.425.288-.712T10 3h4q.425 0 .713.288T15 4h4q.425 0 .713.288T20 5t-.288.713T19 6v13q0 .825-.587 1.413T17 21zm3.713-4.288Q11 16.426 11 16V9q0-.425-.288-.712T10 8t-.712.288T9 9v7q0 .425.288.713T10 17t.713-.288m4 0Q15 16.426 15 16V9q0-.425-.288-.712T14 8t-.712.288T13 9v7q0 .425.288.713T14 17t.713-.288\"/>"},"edit-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 21q-.425 0-.712-.288T3 20v-2.425q0-.4.15-.763t.425-.637L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.437.65T21 6.4q0 .4-.138.763t-.437.662l-12.6 12.6q-.275.275-.638.425t-.762.15zM17.6 7.8L19 6.4L17.6 5l-1.4 1.4z\"/>"},"save-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h11.175q.4 0 .763.15t.637.425l2.85 2.85q.275.275.425.638t.15.762V19q0 .825-.587 1.413T19 21zm9.125-3.875Q15 16.25 15 15t-.875-2.125T12 12t-2.125.875T9 15t.875 2.125T12 18t2.125-.875M7 10h7q.425 0 .713-.288T15 9V7q0-.425-.288-.712T14 6H7q-.425 0-.712.288T6 7v2q0 .425.288.713T7 10\"/>"},"content-copy-rounded":{"body":"<path fill=\"currentColor\" d=\"M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm-4 4q-.825 0-1.412-.587T3 20V7q0-.425.288-.712T4 6t.713.288T5 7v13h10q.425 0 .713.288T16 21t-.288.713T15 22z\"/>"},"download-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.625 15.513q-.175-.063-.325-.213l-3.6-3.6q-.3-.3-.288-.7t.288-.7q.3-.3.713-.312t.712.287L11 12.15V5q0-.425.288-.712T12 4t.713.288T13 5v7.15l1.875-1.875q.3-.3.713-.288t.712.313q.275.3.288.7t-.288.7l-3.6 3.6q-.15.15-.325.213t-.375.062t-.375-.062M6 20q-.825 0-1.412-.587T4 18v-2q0-.425.288-.712T5 15t.713.288T6 16v2h12v-2q0-.425.288-.712T19 15t.713.288T20 16v2q0 .825-.587 1.413T18 20z\"/>"},"upload-rounded":{"body":"<path fill=\"currentColor\" d=\"M6 20q-.825 0-1.412-.587T4 18v-2q0-.425.288-.712T5 15t.713.288T6 16v2h12v-2q0-.425.288-.712T19 15t.713.288T20 16v2q0 .825-.587 1.413T18 20zm5-12.15L9.125 9.725q-.3.3-.712.288T7.7 9.7q-.275-.3-.288-.7t.288-.7l3.6-3.6q.15-.15.325-.212T12 4.425t.375.063t.325.212l3.6 3.6q.3.3.288.7t-.288.7q-.3.3-.712.313t-.713-.288L13 7.85V15q0 .425-.288.713T12 16t-.712-.288T11 15z\"/>"},"undo-rounded":{"body":"<path fill=\"currentColor\" d=\"M8 19q-.425 0-.712-.288T7 18t.288-.712T8 17h6.1q1.575 0 2.738-1T18 13.5T16.838 11T14.1 10H7.8l1.9 1.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275L4.7 9.7q-.15-.15-.213-.325T4.426 9t.063-.375T4.7 8.3l3.6-3.6q.275-.275.7-.275t.7.275t.275.7t-.275.7L7.8 8h6.3q2.425 0 4.163 1.575T20 13.5t-1.737 3.925T14.1 19z\"/>"},"refresh-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 20q-3.35 0-5.675-2.325T4 12t2.325-5.675T12 4q1.725 0 3.3.712T18 6.75V5q0-.425.288-.712T19 4t.713.288T20 5v5q0 .425-.288.713T19 11h-5q-.425 0-.712-.288T13 10t.288-.712T14 9h3.2q-.8-1.4-2.187-2.2T12 6Q9.5 6 7.75 7.75T6 12t1.75 4.25T12 18q1.7 0 3.113-.862t2.187-2.313q.2-.35.563-.487t.737-.013q.4.125.575.525t-.025.75q-1.025 2-2.925 3.2T12 20\"/>"},"search-rounded":{"body":"<path fill=\"currentColor\" d=\"M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14\"/>"},"filter-alt":{"body":"<path fill=\"currentColor\" d=\"M11 20q-.425 0-.712-.288T10 19v-6L4.2 5.6q-.375-.5-.112-1.05T5 4h14q.65 0 .913.55T19.8 5.6L14 13v6q0 .425-.288.713T13 20z\"/>"},"tune-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.288 20.713Q11 20.425 11 20v-4q0-.425.288-.712T12 15t.713.288T13 16v1h7q.425 0 .713.288T21 18t-.288.713T20 19h-7v1q0 .425-.288.713T12 21t-.712-.288M4 19q-.425 0-.712-.288T3 18t.288-.712T4 17h4q.425 0 .713.288T9 18t-.288.713T8 19zm3.288-4.288Q7 14.425 7 14v-1H4q-.425 0-.712-.288T3 12t.288-.712T4 11h3v-1q0-.425.288-.712T8 9t.713.288T9 10v4q0 .425-.288.713T8 15t-.712-.288M12 13q-.425 0-.712-.288T11 12t.288-.712T12 11h8q.425 0 .713.288T21 12t-.288.713T20 13zm3.288-4.288Q15 8.425 15 8V4q0-.425.288-.712T16 3t.713.288T17 4v1h3q.425 0 .713.288T21 6t-.288.713T20 7h-3v1q0 .425-.288.713T16 9t-.712-.288M4 7q-.425 0-.712-.288T3 6t.288-.712T4 5h8q.425 0 .713.288T13 6t-.288.713T12 7z\"/>"},"settings-rounded":{"body":"<path fill=\"currentColor\" d=\"M10.825 22q-.675 0-1.162-.45t-.588-1.1L8.85 18.8q-.325-.125-.612-.3t-.563-.375l-1.55.65q-.625.275-1.25.05t-.975-.8l-1.175-2.05q-.35-.575-.2-1.225t.675-1.075l1.325-1Q4.5 12.5 4.5 12.337v-.675q0-.162.025-.337l-1.325-1Q2.675 9.9 2.525 9.25t.2-1.225L3.9 5.975q.35-.575.975-.8t1.25.05l1.55.65q.275-.2.575-.375t.6-.3l.225-1.65q.1-.65.588-1.1T10.825 2h2.35q.675 0 1.163.45t.587 1.1l.225 1.65q.325.125.613.3t.562.375l1.55-.65q.625-.275 1.25-.05t.975.8l1.175 2.05q.35.575.2 1.225t-.675 1.075l-1.325 1q.025.175.025.338v.674q0 .163-.05.338l1.325 1q.525.425.675 1.075t-.2 1.225l-1.2 2.05q-.35.575-.975.8t-1.25-.05l-1.5-.65q-.275.2-.575.375t-.6.3l-.225 1.65q-.1.65-.587 1.1t-1.163.45zm1.225-6.5q1.45 0 2.475-1.025T15.55 12t-1.025-2.475T12.05 8.5q-1.475 0-2.488 1.025T8.55 12t1.013 2.475T12.05 15.5\"/>"},"share":{"body":"<path fill=\"currentColor\" d=\"M17 22q-1.25 0-2.125-.875T14 19q0-.15.075-.7L7.05 14.2q-.4.375-.925.588T5 15q-1.25 0-2.125-.875T2 12t.875-2.125T5 9q.6 0 1.125.213t.925.587l7.025-4.1q-.05-.175-.062-.337T14 5q0-1.25.875-2.125T17 2t2.125.875T20 5t-.875 2.125T17 8q-.6 0-1.125-.213T14.95 7.2l-7.025 4.1q.05.175.063.338T8 12t-.012.363t-.063.337l7.025 4.1q.4-.375.925-.587T17 16q1.25 0 2.125.875T20 19t-.875 2.125T17 22\"/>"},"send-rounded":{"body":"<path fill=\"currentColor\" d=\"M4.4 19.425q-.5.2-.95-.088T3 18.5V14l8-2l-8-2V5.5q0-.55.45-.837t.95-.088l15.4 6.5q.625.275.625.925t-.625.925z\"/>"},"visibility-rounded":{"body":"<path fill=\"currentColor\" d=\"M15.188 14.688Q16.5 13.375 16.5 11.5t-1.312-3.187T12 7T8.813 8.313T7.5 11.5t1.313 3.188T12 16t3.188-1.312m-5.1-1.276Q9.3 12.625 9.3 11.5t.788-1.912T12 8.8t1.913.788t.787 1.912t-.787 1.913T12 14.2t-1.912-.787m-4.2 3.787q-2.763-1.8-4.363-4.75q-.125-.225-.187-.462t-.063-.488t.063-.488t.187-.462q1.6-2.95 4.363-4.75T12 4t6.113 1.8t4.362 4.75q.125.225.188.463t.062.487t-.062.488t-.188.462q-1.6 2.95-4.362 4.75T12 19t-6.113-1.8\"/>"},"visibility-off-rounded":{"body":"<path fill=\"currentColor\" d=\"m19.1 21.9l-3.5-3.45q-.875.275-1.775.413T12 19q-3.35 0-6.125-1.8t-4.35-4.75q-.125-.225-.187-.462t-.063-.488t.063-.488t.187-.462q.55-.975 1.175-1.9T4.15 7L2.075 4.9Q1.8 4.625 1.8 4.213t.3-.713q.275-.275.7-.275t.7.275l17 17q.275.275.288.688t-.288.712q-.275.275-.7.275t-.7-.275M12 16q.275 0 .525-.025t.5-.1l-5.4-5.4q-.075.25-.1.5T7.5 11.5q0 1.875 1.313 3.188T12 16m0-12q3.35 0 6.138 1.813t4.362 4.762q.125.2.188.438t.062.487t-.05.488t-.175.437q-.475.925-1.062 1.75t-1.313 1.55q-.35.35-.825.325t-.825-.375l-2-2q-.175-.175-.225-.413t.025-.487q.1-.325.15-.625t.05-.65q0-1.875-1.312-3.187T12 7q-.35 0-.65.05t-.625.15q-.25.075-.5.025T9.8 7l-.825-.825q-.475-.475-.312-1.1t.787-.8q.625-.125 1.263-.2T12 4m1.975 5.65q.275.325.462.713t.238.812q.025.2-.15.275t-.325-.075l-2.05-2.05Q12 9.175 12.088 9t.287-.175q.475.05.875.263t.725.562\"/>"},"keyboard-arrow-down-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.625 14.913q-.175-.063-.325-.213l-4.6-4.6q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l3.9 3.9l3.9-3.9q.275-.275.7-.275t.7.275t.275.7t-.275.7l-4.6 4.6q-.15.15-.325.213t-.375.062t-.375-.062\"/>"},"keyboard-arrow-up-rounded":{"body":"<path fill=\"currentColor\" d=\"m12 10.8l-3.9 3.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.6-4.6q.3-.3.7-.3t.7.3l4.6 4.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275z\"/>"},"keyboard-arrow-left-rounded":{"body":"<path fill=\"currentColor\" d=\"m10.8 12l3.9 3.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-4.6-4.6q-.15-.15-.212-.325T8.425 12t.063-.375t.212-.325l4.6-4.6q.275-.275.7-.275t.7.275t.275.7t-.275.7z\"/>"},"keyboard-arrow-right-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z\"/>"},"arrow-back-rounded":{"body":"<path fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"/>"},"arrow-forward-rounded":{"body":"<path fill=\"currentColor\" d=\"M16.175 13H5q-.425 0-.712-.288T4 12t.288-.712T5 11h11.175l-4.9-4.9q-.3-.3-.288-.7t.313-.7q.3-.275.7-.288t.7.288l6.6 6.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-6.6 6.6q-.275.275-.687.275T11.3 19.3q-.3-.3-.3-.712t.3-.713z\"/>"},"arrow-upward-rounded":{"body":"<path fill=\"currentColor\" d=\"m11 7.825l-4.9 4.9q-.3.3-.7.288t-.7-.313q-.275-.3-.288-.7t.288-.7l6.6-6.6q.15-.15.325-.212T12 4.425t.375.063t.325.212l6.6 6.6q.275.275.275.688t-.275.712q-.3.3-.712.3t-.713-.3L13 7.825V19q0 .425-.288.713T12 20t-.712-.288T11 19z\"/>"},"arrow-downward-rounded":{"body":"<path fill=\"currentColor\" d=\"M11 16.175V5q0-.425.288-.712T12 4t.713.288T13 5v11.175l4.9-4.9q.3-.3.7-.288t.7.313q.275.3.287.7t-.287.7l-6.6 6.6q-.15.15-.325.213t-.375.062t-.375-.062t-.325-.213l-6.6-6.6q-.275-.275-.275-.687T4.7 11.3q.3-.3.713-.3t.712.3z\"/>"},"subdirectory-arrow-left-rounded":{"body":"<path fill=\"currentColor\" d=\"m7.825 16l2.875 2.875q.3.3.313.7t-.288.7t-.712.3t-.713-.3L4.7 15.7q-.15-.15-.213-.325T4.426 15t.063-.375t.212-.325l4.625-4.625q.3-.3.7-.287t.7.312q.275.3.287.7t-.287.7l-2.9 2.9H17V5q0-.425.288-.712T18 4t.713.288T19 5v9q0 .825-.587 1.413T17 16z\"/>"},"open-in-new-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h6q.425 0 .713.288T12 4t-.288.713T11 5H5v14h14v-6q0-.425.288-.712T20 12t.713.288T21 13v6q0 .825-.587 1.413T19 21zM19 6.4L10.4 15q-.275.275-.7.275T9 15t-.275-.7t.275-.7L17.6 5H15q-.425 0-.712-.288T14 4t.288-.712T15 3h5q.425 0 .713.288T21 4v5q0 .425-.288.713T20 10t-.712-.288T19 9z\"/>"},"more-horiz":{"body":"<path fill=\"currentColor\" d=\"M6 14q-.825 0-1.412-.587T4 12t.588-1.412T6 10t1.413.588T8 12t-.587 1.413T6 14m6 0q-.825 0-1.412-.587T10 12t.588-1.412T12 10t1.413.588T14 12t-.587 1.413T12 14m6 0q-.825 0-1.412-.587T16 12t.588-1.412T18 10t1.413.588T20 12t-.587 1.413T18 14\"/>"},"more-vert":{"body":"<path fill=\"currentColor\" d=\"M12 20q-.825 0-1.412-.587T10 18t.588-1.412T12 16t1.413.588T14 18t-.587 1.413T12 20m0-6q-.825 0-1.412-.587T10 12t.588-1.412T12 10t1.413.588T14 12t-.587 1.413T12 14m0-6q-.825 0-1.412-.587T10 6t.588-1.412T12 4t1.413.588T14 6t-.587 1.413T12 8\"/>"},"menu-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z\"/>"},"view-sidebar":{"body":"<path fill=\"currentColor\" d=\"M19.5 8q-.625 0-1.062-.437T18 6.5v-1q0-.625.438-1.062T19.5 4h1q.625 0 1.063.438T22 5.5v1q0 .625-.437 1.063T20.5 8zm0 6q-.625 0-1.062-.437T18 12.5v-1q0-.625.438-1.062T19.5 10h1q.625 0 1.063.438T22 11.5v1q0 .625-.437 1.063T20.5 14zM4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h10q.825 0 1.413.588T16 6v12q0 .825-.587 1.413T14 20zm15.5 0q-.625 0-1.062-.437T18 18.5v-1q0-.625.438-1.062T19.5 16h1q.625 0 1.063.438T22 17.5v1q0 .625-.437 1.063T20.5 20z\"/>"},"open-in-full-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 21q-.425 0-.712-.288T3 20v-6q0-.425.288-.712T4 13t.713.288T5 14v3.6L17.6 5H14q-.425 0-.712-.288T13 4t.288-.712T14 3h6q.425 0 .713.288T21 4v6q0 .425-.288.713T20 11t-.712-.288T19 10V6.4L6.4 19H10q.425 0 .713.288T11 20t-.288.713T10 21z\"/>"},"close-fullscreen-rounded":{"body":"<path fill=\"currentColor\" d=\"m10 15.4l-5.9 5.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7L8.6 14H5q-.425 0-.712-.288T4 13t.288-.712T5 12h6q.425 0 .713.288T12 13v6q0 .425-.288.713T11 20t-.712-.288T10 19zm5.4-5.4H19q.425 0 .713.288T20 11t-.288.713T19 12h-6q-.425 0-.712-.288T12 11V5q0-.425.288-.712T13 4t.713.288T14 5v3.6l5.9-5.9q.275-.275.7-.275t.7.275t.275.7t-.275.7z\"/>"},"mail-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8.263-7.212q.137-.038.262-.113L19.6 8.25q.2-.125.3-.312t.1-.413q0-.5-.425-.75T18.7 6.8L12 11L5.3 6.8q-.45-.275-.875-.012T4 7.525q0 .25.1.438t.3.287l7.075 4.425q.125.075.263.113t.262.037t.263-.037\"/>"},"drafts-rounded":{"body":"<path fill=\"currentColor\" d=\"m13.025 1.6l8.025 4.8q.45.275.7.75t.25 1V19q0 .825-.587 1.413T20 21H4q-.825 0-1.412-.587T2 19V8.15q0-.525.25-1t.7-.75l8.025-4.8q.475-.275 1.025-.275t1.025.275M12 12.65L19.8 8L12 3.35L4.2 8z\"/>"},"unsubscribe-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 11L5.3 6.8q-.425-.275-.862-.025T4 7.525q0 .225.1.413t.3.312l7.075 4.425q.25.15.525.15t.525-.15L19.6 8.25q.2-.125.3-.312t.1-.413q0-.5-.437-.75T18.7 6.8zm3.463 10.538Q14 20.075 14 18t1.463-3.537T19 13t3.538 1.463T24 18t-1.463 3.538T19 23t-3.537-1.463M16.5 18.5h5q.2 0 .35-.15T22 18t-.15-.35t-.35-.15h-5q-.2 0-.35.15T16 18t.15.35t.35.15M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v4.45q0 .45-.375.7t-.8.1q-.45-.125-.9-.188T19 11q-2.925 0-4.962 2.037T12 18q0 .225.013.45t.037.425q.05.45-.213.788T11.15 20z\"/>"},"inbox-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm7-5q.8 0 1.475-.413t1.1-1.087q.15-.225.375-.363t.5-.137H19V5H5v9h3.55q.275 0 .5.138t.375.362q.425.675 1.1 1.088T12 16\"/>"},"reply-rounded":{"body":"<path fill=\"currentColor\" d=\"m6.825 12l2.9 2.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-4.6-4.6q-.3-.3-.3-.7t.3-.7l4.6-4.6q.275-.275.688-.275T9.7 5.7q.3.3.3.713t-.3.712L6.825 10H16q2.075 0 3.538 1.463T21 15v3q0 .425-.288.713T20 19t-.712-.288T19 18v-3q0-1.25-.875-2.125T16 12z\"/>"},"reply-all-rounded":{"body":"<path fill=\"currentColor\" d=\"m4.825 11l3.9 3.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-4.6-4.6q-.15-.15-.213-.325T2.426 11t.063-.375t.212-.325l4.6-4.6q.275-.275.688-.275T8.7 5.7q.3.3.3.713t-.3.712zm6 1l2.9 2.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-4.6-4.6q-.15-.15-.213-.325T7.426 11t.063-.375t.212-.325l4.6-4.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L10.825 10H17q2.075 0 3.538 1.463T22 15v3q0 .425-.288.713T21 19t-.712-.288T20 18v-3q0-1.25-.875-2.125T17 12z\"/>"},"forward-rounded":{"body":"<path fill=\"currentColor\" d=\"M19.175 11L15.3 7.125q-.3-.3-.3-.712t.3-.713q.3-.275.713-.275t.687.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.3.3-.7.288t-.7-.288q-.3-.3-.312-.7t.287-.7zm-6 1H7q-1.25 0-2.125.875T4 15v3q0 .425-.288.713T3 19t-.712-.288T2 18v-3q0-2.075 1.463-3.537T7 10h6.175L10.3 7.125q-.3-.3-.3-.712t.3-.713q.3-.275.713-.275t.687.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.3.3-.7.288t-.7-.288q-.3-.3-.312-.7t.287-.7z\"/>"},"chat-rounded":{"body":"<path fill=\"currentColor\" d=\"m6 18l-2.3 2.3q-.475.475-1.088.213T2 19.575V4q0-.825.588-1.412T4 2h16q.825 0 1.413.588T22 4v12q0 .825-.587 1.413T20 18zm1-4h6q.425 0 .713-.288T14 13t-.288-.712T13 12H7q-.425 0-.712.288T6 13t.288.713T7 14m0-3h10q.425 0 .713-.288T18 10t-.288-.712T17 9H7q-.425 0-.712.288T6 10t.288.713T7 11m0-3h10q.425 0 .713-.288T18 7t-.288-.712T17 6H7q-.425 0-.712.288T6 7t.288.713T7 8\"/>"},"chat-bubble-rounded":{"body":"<path fill=\"currentColor\" d=\"m6 18l-2.3 2.3q-.475.475-1.088.213T2 19.575V4q0-.825.588-1.412T4 2h16q.825 0 1.413.588T22 4v12q0 .825-.587 1.413T20 18z\"/>"},"forum-rounded":{"body":"<path fill=\"currentColor\" d=\"M21 20.6q-.2 0-.375-.075T20.3 20.3L18 18H8q-.825 0-1.412-.587T6 16v-1h11q.825 0 1.413-.587T19 13V6h1q.825 0 1.413.588T22 8v11.575q0 .45-.3.738t-.7.287m-18-5q-.4 0-.7-.287t-.3-.738V4q0-.825.588-1.412T4 2h11q.825 0 1.413.588T17 4v7q0 .825-.587 1.413T15 13H6l-2.3 2.3q-.15.15-.325.225T3 15.6\"/>"},"call":{"body":"<path fill=\"currentColor\" d=\"M19.95 21q-3.125 0-6.175-1.362t-5.55-3.863t-3.862-5.55T3 4.05q0-.45.3-.75t.75-.3H8.1q.35 0 .625.238t.325.562l.65 3.5q.05.4-.025.675T9.4 8.45L6.975 10.9q.5.925 1.187 1.787t1.513 1.663q.775.775 1.625 1.438T13.1 17l2.35-2.35q.225-.225.588-.337t.712-.063l3.45.7q.35.1.575.363T21 15.9v4.05q0 .45-.3.75t-.75.3\"/>"},"attach-file-rounded":{"body":"<path fill=\"currentColor\" d=\"M18 15.75q0 2.6-1.825 4.425T11.75 22t-4.425-1.825T5.5 15.75V6.5q0-1.875 1.313-3.187T10 2t3.188 1.313T14.5 6.5v8.75q0 1.15-.8 1.95t-1.95.8t-1.95-.8t-.8-1.95V7q0-.425.288-.712T10 6t.713.288T11 7v8.25q0 .325.213.538t.537.212t.538-.213t.212-.537V6.5q-.025-1.05-.737-1.775T10 4t-1.775.725T7.5 6.5v9.25q-.025 1.775 1.225 3.013T11.75 20q1.75 0 2.975-1.237T16 15.75V7q0-.425.288-.712T17 6t.713.288T18 7z\"/>"},"alternate-email-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12v1.45q0 1.475-1.012 2.513T18.5 17q-.875 0-1.65-.375t-1.3-1.075q-.725.725-1.638 1.088T12 17q-2.075 0-3.537-1.463T7 12t1.463-3.537T12 7t3.538 1.463T17 12v1.45q0 .65.425 1.1T18.5 15t1.075-.45t.425-1.1V12q0-3.35-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20h4q.425 0 .713.288T17 21t-.288.713T16 22zm2.125-7.875Q15 13.25 15 12t-.875-2.125T12 9t-2.125.875T9 12t.875 2.125T12 15t2.125-.875\"/>"},"person-rounded":{"body":"<path fill=\"currentColor\" d=\"M9.175 10.825Q8 9.65 8 8t1.175-2.825T12 4t2.825 1.175T16 8t-1.175 2.825T12 12t-2.825-1.175M4 18v-.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2v.8q0 .825-.587 1.413T18 20H6q-.825 0-1.412-.587T4 18\"/>"},"group-rounded":{"body":"<path fill=\"currentColor\" d=\"M1 17.2q0-.85.438-1.562T2.6 14.55q1.55-.775 3.15-1.162T9 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T17 17.2v.8q0 .825-.587 1.413T15 20H3q-.825 0-1.412-.587T1 18zM18.45 20q.275-.45.413-.962T19 18v-1q0-1.1-.612-2.113T16.65 13.15q1.275.15 2.4.513t2.1.887q.9.5 1.375 1.112T23 17v1q0 .825-.587 1.413T21 20zM6.175 10.825Q5 9.65 5 8t1.175-2.825T9 4t2.825 1.175T13 8t-1.175 2.825T9 12t-2.825-1.175m11.65 0Q16.65 12 15 12q-.275 0-.7-.062t-.7-.138q.675-.8 1.038-1.775T15 8t-.362-2.025T13.6 4.2q.35-.125.7-.163T15 4q1.65 0 2.825 1.175T19 8t-1.175 2.825\"/>"},"person-add-rounded":{"body":"<path fill=\"currentColor\" d=\"M18 11h-2q-.425 0-.712-.288T15 10t.288-.712T16 9h2V7q0-.425.288-.712T19 6t.713.288T20 7v2h2q.425 0 .713.288T23 10t-.288.713T22 11h-2v2q0 .425-.288.713T19 14t-.712-.288T18 13zm-11.825-.175Q5 9.65 5 8t1.175-2.825T9 4t2.825 1.175T13 8t-1.175 2.825T9 12t-2.825-1.175M1 18v-.8q0-.85.438-1.562T2.6 14.55q1.55-.775 3.15-1.162T9 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T17 17.2v.8q0 .825-.587 1.413T15 20H3q-.825 0-1.412-.587T1 18\"/>"},"person-remove-rounded":{"body":"<path fill=\"currentColor\" d=\"M17 9h4q.425 0 .713.288T22 10t-.288.713T21 11h-4q-.425 0-.712-.288T16 10t.288-.712T17 9M6.175 10.825Q5 9.65 5 8t1.175-2.825T9 4t2.825 1.175T13 8t-1.175 2.825T9 12t-2.825-1.175M1 18v-.8q0-.85.438-1.562T2.6 14.55q1.55-.775 3.15-1.162T9 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T17 17.2v.8q0 .825-.587 1.413T15 20H3q-.825 0-1.412-.587T1 18\"/>"},"apartment-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V9q0-.825.588-1.412T5 7h2V5q0-.825.588-1.412T9 3h6q.825 0 1.413.588T17 5v6h2q.825 0 1.413.588T21 13v6q0 .825-.587 1.413T19 21h-6v-4h-2v4zm0-2h2v-2H5zm0-4h2v-2H5zm0-4h2V9H5zm4 4h2v-2H9zm0-4h2V9H9zm0-4h2V5H9zm4 8h2v-2h-2zm0-4h2V9h-2zm0-4h2V5h-2zm4 12h2v-2h-2zm0-4h2v-2h-2z\"/>"},"draft-rounded":{"body":"<path fill=\"currentColor\" d=\"M6 22q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h7.175q.4 0 .763.15t.637.425l4.85 4.85q.275.275.425.638t.15.762V20q0 .825-.587 1.413T18 22zm7-14q0 .425.288.713T14 9h4l-5-5z\"/>"},"description-rounded":{"body":"<path fill=\"currentColor\" d=\"M9 18h6q.425 0 .713-.288T16 17t-.288-.712T15 16H9q-.425 0-.712.288T8 17t.288.713T9 18m0-4h6q.425 0 .713-.288T16 13t-.288-.712T15 12H9q-.425 0-.712.288T8 13t.288.713T9 14m-3 8q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h7.175q.4 0 .763.15t.637.425l4.85 4.85q.275.275.425.638t.15.762V20q0 .825-.587 1.413T18 22zm7-14q0 .425.288.713T14 9h4l-5-5z\"/>"},"code-rounded":{"body":"<path fill=\"currentColor\" d=\"M4.825 12.025L8.7 15.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-4.6-4.6q-.15-.15-.213-.325T2.426 12t.063-.375t.212-.325l4.6-4.6q.3-.3.713-.3t.712.3t.3.713t-.3.712zm14.35-.05L15.3 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.3.3-.7.288t-.7-.313t-.3-.712t.3-.713z\"/>"},"table-chart":{"body":"<path fill=\"currentColor\" d=\"M3 8V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v3zm2 13q-.825 0-1.412-.587T3 19v-9h4.5v11zm11.5 0V10H21v9q0 .825-.587 1.413T19 21zm-7 0V10h5v11z\"/>"},"image-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm2-4h10q.3 0 .45-.275t-.05-.525l-2.75-3.675q-.15-.2-.4-.2t-.4.2L11.25 16L9.4 13.525q-.15-.2-.4-.2t-.4.2l-2 2.675q-.2.25-.05.525T7 17\"/>"},"folder-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h5.175q.4 0 .763.15t.637.425L12 6h8q.825 0 1.413.588T22 8v10q0 .825-.587 1.413T20 20z\"/>"},"folder-open-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h5.175q.4 0 .763.15t.637.425L12 6h9q.425 0 .713.288T22 7t-.288.713T21 8H7.85q-1.55 0-2.7.975T4 11.45V18l1.975-6.575q.2-.65.738-1.037T7.9 10h12.9q1.025 0 1.613.813t.312 1.762l-1.8 6q-.2.65-.737 1.038T19 20z\"/>"},"drive-file-move-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h5.175q.4 0 .763.15t.637.425L12 6h8q.825 0 1.413.588T22 8v10q0 .825-.587 1.413T20 20zm8.2-6l-.925.925q-.275.275-.275.7t.275.7t.7.275t.7-.275L15.3 13.7q.3-.3.3-.7t-.3-.7l-2.625-2.625q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7L12.2 12H9q-.425 0-.712.288T8 13t.288.713T9 14z\"/>"},"view-kanban-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zM7.288 7.288Q7 7.575 7 8v8q0 .425.288.713T8 17t.713-.288T9 16V8q0-.425-.288-.712T8 7t-.712.288m8 0Q15 7.575 15 8v6q0 .425.288.713T16 15t.713-.288T17 14V8q0-.425-.288-.712T16 7t-.712.288m-4 0Q11 7.575 11 8v3q0 .425.288.713T12 12t.713-.288T13 11V8q0-.425-.288-.712T12 7t-.712.288\"/>"},"archive-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V6.525q0-.35.113-.675t.337-.6L4.7 3.725q.275-.35.687-.538T6.25 3h11.5q.45 0 .863.188t.687.537l1.25 1.525q.225.275.338.6t.112.675V19q0 .825-.587 1.413T19 21zm.4-15h13.2l-.85-1H6.25zm5.888 4.288Q11 10.575 11 11v3.2l-.9-.9q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7l2.6 2.6q.3.3.7.3t.7-.3l2.6-2.6q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275l-.9.9V11q0-.425-.288-.712T12 10t-.712.288\"/>"},"unarchive-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.713 17.388Q13 17.1 13 16.675v-3.2l.9.9q.275.275.7.275t.7-.275t.275-.7t-.275-.7L12.7 10.4q-.3-.3-.7-.3t-.7.3l-2.6 2.575q-.275.275-.275.7t.275.7t.7.275t.7-.275l.9-.9v3.2q0 .425.288.713t.712.287t.713-.288M5 21q-.825 0-1.412-.587T3 19V6.525q0-.35.113-.675t.337-.6L4.7 3.725q.275-.35.687-.538T6.25 3h11.5q.45 0 .863.188t.687.537l1.25 1.525q.225.275.338.6t.112.675V19q0 .825-.587 1.413T19 21zm.4-15h13.2l-.85-1H6.25z\"/>"},"menu-book-rounded":{"body":"<path fill=\"currentColor\" d=\"M13 17.05q1.1-.525 2.213-.788T17.5 16q.9 0 1.763.15T21 16.6V6.7q-.825-.35-1.713-.525T17.5 6q-1.175 0-2.325.3T13 7.2zm-1.662 2.338q-.313-.088-.588-.238q-.975-.575-2.05-.862T6.5 18q-1.05 0-2.062.275T2.5 19.05q-.525.275-1.012-.025T1 18.15V6.1q0-.275.138-.525T1.55 5.2q1.175-.575 2.413-.888T6.5 4q1.45 0 2.838.375T12 5.5q1.275-.75 2.663-1.125T17.5 4q1.3 0 2.538.313t2.412.887q.275.125.413.375T23 6.1v12.05q0 .575-.487.875t-1.013.025q-.925-.5-1.937-.775T17.5 18q-1.125 0-2.2.288t-2.05.862q-.275.15-.587.238t-.663.087t-.663-.088M14 8.776q0-.225.163-.462T14.525 8q.725-.25 1.45-.375T17.5 7.5q.5 0 .988.063t.962.162q.225.05.388.25t.162.45q0 .425-.275.625t-.7.1q-.35-.075-.737-.112T17.5 9q-.65 0-1.275.125t-1.2.325q-.45.175-.737-.025T14 8.775m0 5.5q0-.225.163-.462t.362-.313q.725-.25 1.45-.375T17.5 13q.5 0 .988.063t.962.162q.225.05.388.25t.162.45q0 .425-.275.625t-.7.1q-.35-.075-.737-.112T17.5 14.5q-.65 0-1.275.113t-1.2.312q-.45.175-.737-.012T14 14.275m0-2.75q0-.225.163-.462t.362-.313q.725-.25 1.45-.375t1.525-.125q.5 0 .988.063t.962.162q.225.05.388.25t.162.45q0 .425-.275.625t-.7.1q-.35-.075-.737-.112t-.788-.038q-.65 0-1.275.125t-1.2.325q-.45.175-.737-.025t-.288-.65\"/>"},"sticky-note-2-rounded":{"body":"<path fill=\"currentColor\" d=\"m14 19l5-5h-4q-.425 0-.712.288T14 15zm-9 2q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v9.175q0 .4-.15.763t-.425.637l-4.85 4.85q-.275.275-.637.425t-.763.15zm3-7h3q.425 0 .713-.288T12 13t-.288-.712T11 12H8q-.425 0-.712.288T7 13t.288.713T8 14m0-4h8q.425 0 .713-.288T17 9t-.288-.712T16 8H8q-.425 0-.712.288T7 9t.288.713T8 10\"/>"},"assignment-turned-in-rounded":{"body":"<path fill=\"currentColor\" d=\"M10.6 13.25L8.45 11.1q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7l2.85 2.85q.3.3.7.3t.7-.3l5.65-5.65q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h4.2q.325-.9 1.088-1.45T12 1t1.713.55T14.8 3H19q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm7.538-16.963q.212-.212.212-.537t-.213-.537T12 2.75t-.537.213t-.213.537t.213.538t.537.212t.538-.213\"/>"},"grid-view-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 11q-.825 0-1.412-.587T3 9V5q0-.825.588-1.412T5 3h4q.825 0 1.413.588T11 5v4q0 .825-.587 1.413T9 11zm0 10q-.825 0-1.412-.587T3 19v-4q0-.825.588-1.412T5 13h4q.825 0 1.413.588T11 15v4q0 .825-.587 1.413T9 21zm10-10q-.825 0-1.412-.587T13 9V5q0-.825.588-1.412T15 3h4q.825 0 1.413.588T21 5v4q0 .825-.587 1.413T19 11zm0 10q-.825 0-1.412-.587T13 19v-4q0-.825.588-1.412T15 13h4q.825 0 1.413.588T21 15v4q0 .825-.587 1.413T19 21z\"/>"},"view-list-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 9q-.425 0-.712-.288T3 8V6q0-.425.288-.712T4 5h2q.425 0 .713.288T7 6v2q0 .425-.288.713T6 9zm5 0q-.425 0-.712-.288T8 8V6q0-.425.288-.712T9 5h11q.425 0 .713.288T21 6v2q0 .425-.288.713T20 9zm0 5q-.425 0-.712-.288T8 13v-2q0-.425.288-.712T9 10h11q.425 0 .713.288T21 11v2q0 .425-.288.713T20 14zm0 5q-.425 0-.712-.288T8 18v-2q0-.425.288-.712T9 15h11q.425 0 .713.288T21 16v2q0 .425-.288.713T20 19zm-5 0q-.425 0-.712-.288T3 18v-2q0-.425.288-.712T4 15h2q.425 0 .713.288T7 16v2q0 .425-.288.713T6 19zm0-5q-.425 0-.712-.288T3 13v-2q0-.425.288-.712T4 10h2q.425 0 .713.288T7 11v2q0 .425-.288.713T6 14z\"/>"},"dashboard-rounded":{"body":"<path fill=\"currentColor\" d=\"M14 9q-.425 0-.712-.288T13 8V4q0-.425.288-.712T14 3h6q.425 0 .713.288T21 4v4q0 .425-.288.713T20 9zM4 13q-.425 0-.712-.288T3 12V4q0-.425.288-.712T4 3h6q.425 0 .713.288T11 4v8q0 .425-.288.713T10 13zm10 8q-.425 0-.712-.288T13 20v-8q0-.425.288-.712T14 11h6q.425 0 .713.288T21 12v8q0 .425-.288.713T20 21zM4 21q-.425 0-.712-.288T3 20v-4q0-.425.288-.712T4 15h6q.425 0 .713.288T11 16v4q0 .425-.288.713T10 21z\"/>"},"view-column":{"body":"<path fill=\"currentColor\" d=\"M5 19q-.825 0-1.412-.587T3 17V7q0-.825.588-1.412T5 5h1.325q.825 0 1.413.588T8.325 7v10q0 .825-.587 1.413T6.325 19zm6.325 0q-.825 0-1.412-.587T9.325 17V7q0-.825.588-1.412T11.325 5h1.325q.825 0 1.413.588T14.65 7v10q0 .825-.587 1.413T12.65 19zm6.325 0q-.825 0-1.412-.587T15.65 17V7q0-.825.588-1.412T17.65 5h1.325q.825 0 1.413.588T20.975 7v10q0 .825-.587 1.413T18.975 19z\"/>"},"checklist-rounded":{"body":"<path fill=\"currentColor\" d=\"m5.525 16.175l3.55-3.55q.3-.3.7-.288t.7.313q.275.3.275.7t-.275.7L6.25 18.3q-.3.3-.7.3t-.7-.3L2.7 16.15q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275zm0-8l3.55-3.55q.3-.3.7-.288t.7.313q.275.3.275.7t-.275.7L6.25 10.3q-.3.3-.7.3t-.7-.3L2.7 8.15q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275zM14 17q-.425 0-.712-.288T13 16t.288-.712T14 15h7q.425 0 .713.288T22 16t-.288.713T21 17zm0-8q-.425 0-.712-.288T13 8t.288-.712T14 7h7q.425 0 .713.288T22 8t-.288.713T21 9z\"/>"},"account-tree-rounded":{"body":"<path fill=\"currentColor\" d=\"M15 19v-1h-2q-.825 0-1.412-.587T11 16V8H9v1q0 .825-.587 1.413T7 11H4q-.825 0-1.412-.587T2 9V5q0-.825.588-1.412T4 3h3q.825 0 1.413.588T9 5v1h6V5q0-.825.588-1.412T17 3h3q.825 0 1.413.588T22 5v4q0 .825-.587 1.413T20 11h-3q-.825 0-1.412-.587T15 9V8h-2v8h2v-1q0-.825.588-1.412T17 13h3q.825 0 1.413.588T22 15v4q0 .825-.587 1.413T20 21h-3q-.825 0-1.412-.587T15 19\"/>"},"check-box-rounded":{"body":"<path fill=\"currentColor\" d=\"m10.6 13.4l-2.15-2.15q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7L9.9 15.5q.3.3.7.3t.7-.3l5.65-5.65q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21z\"/>"},"square-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21z\"/>"},"circle":{"body":"<path fill=\"currentColor\" d=\"M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"schedule-rounded":{"body":"<path fill=\"currentColor\" d=\"M13 11.6V8q0-.425-.288-.712T12 7t-.712.288T11 8v3.975q0 .2.075.388t.225.337l3.3 3.3q.275.275.7.275T16 16t.275-.7t-.275-.7zM12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"timer-rounded":{"body":"<path fill=\"currentColor\" d=\"M10 3q-.425 0-.712-.288T9 2t.288-.712T10 1h4q.425 0 .713.288T15 2t-.288.713T14 3zm2.713 10.713Q13 13.425 13 13V9q0-.425-.288-.712T12 8t-.712.288T11 9v4q0 .425.288.713T12 14t.713-.288m-4.2 7.576q-1.638-.713-2.863-1.938t-1.937-2.863T3 13t.713-3.488T5.65 6.65t2.863-1.937T12 4q1.55 0 2.975.5t2.675 1.45l.7-.7q.275-.275.7-.275t.7.275t.275.7t-.275.7l-.7.7Q20 8.6 20.5 10.025T21 13q0 1.85-.713 3.488T18.35 19.35t-2.863 1.938T12 22t-3.488-.712\"/>"},"history-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 21q-3.15 0-5.575-1.912T3.275 14.2q-.1-.375.15-.687t.675-.363q.4-.05.725.15t.45.6q.6 2.25 2.475 3.675T12 19q2.925 0 4.963-2.037T19 12t-2.037-4.962T12 5q-1.725 0-3.225.8T6.25 8H8q.425 0 .713.288T9 9t-.288.713T8 10H4q-.425 0-.712-.288T3 9V5q0-.425.288-.712T4 4t.713.288T5 5v1.35q1.275-1.6 3.113-2.475T12 3q1.875 0 3.513.713t2.85 1.924t1.925 2.85T21 12t-.712 3.513t-1.925 2.85t-2.85 1.925T12 21m1-9.4l2.5 2.5q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-2.8-2.8q-.15-.15-.225-.337T11 11.975V8q0-.425.288-.712T12 7t.713.288T13 8z\"/>"},"calendar-today-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5z\"/>"},"calendar-month-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5zm7-6q-.425 0-.712-.288T11 13t.288-.712T12 12t.713.288T13 13t-.288.713T12 14m-4.712-.288Q7 13.426 7 13t.288-.712T8 12t.713.288T9 13t-.288.713T8 14t-.712-.288M16 14q-.425 0-.712-.288T15 13t.288-.712T16 12t.713.288T17 13t-.288.713T16 14m-4 4q-.425 0-.712-.288T11 17t.288-.712T12 16t.713.288T13 17t-.288.713T12 18m-4.712-.288Q7 17.426 7 17t.288-.712T8 16t.713.288T9 17t-.288.713T8 18t-.712-.288M16 18q-.425 0-.712-.288T15 17t.288-.712T16 16t.713.288T17 17t-.288.713T16 18\"/>"},"event-upcoming-rounded":{"body":"<path fill=\"currentColor\" d=\"M19 22h-3q-.425 0-.712-.288T15 21t.288-.712T16 20h3V10H5v3q0 .425-.288.713T4 14t-.712-.288T3 13V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22m-9.825-2H2q-.425 0-.712-.288T1 19t.288-.712T2 18h7.175L7.3 16.1q-.275-.275-.287-.687T7.3 14.7q.275-.275.7-.275t.7.275l3.6 3.6q.3.3.3.7t-.3.7l-3.6 3.6q-.275.275-.687.288T7.3 23.3q-.275-.275-.275-.7t.275-.7z\"/>"},"calendar-add-on-rounded":{"body":"<path fill=\"currentColor\" d=\"M17 19h-2q-.425 0-.712-.288T14 18t.288-.712T15 17h2v-2q0-.425.288-.712T18 14t.713.288T19 15v2h2q.425 0 .713.288T22 18t-.288.713T21 19h-2v2q0 .425-.288.713T18 22t-.712-.288T17 21zM5 20q-.825 0-1.412-.587T3 18V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h6V3q0-.425.288-.712T15 2t.713.288T16 3v1h1q.825 0 1.413.588T19 6v5q0 .425-.288.713T18 12t-.712-.288T17 11v-1H5v8h6q.425 0 .713.288T12 19t-.288.713T11 20z\"/>"},"play-arrow-rounded":{"body":"<path fill=\"currentColor\" d=\"M8 17.175V6.825q0-.425.3-.713t.7-.287q.125 0 .263.037t.262.113l8.15 5.175q.225.15.338.375t.112.475t-.112.475t-.338.375l-8.15 5.175q-.125.075-.262.113T9 18.175q-.4 0-.7-.288t-.3-.712\"/>"},"pause-rounded":{"body":"<path fill=\"currentColor\" d=\"M16 19q-.825 0-1.412-.587T14 17V7q0-.825.588-1.412T16 5t1.413.588T18 7v10q0 .825-.587 1.413T16 19m-8 0q-.825 0-1.412-.587T6 17V7q0-.825.588-1.412T8 5t1.413.588T10 7v10q0 .825-.587 1.413T8 19\"/>"},"mic-rounded":{"body":"<path fill=\"currentColor\" d=\"M9.875 13.125Q9 12.25 9 11V5q0-1.25.875-2.125T12 2t2.125.875T15 5v6q0 1.25-.875 2.125T12 14t-2.125-.875M11 20v-2.075q-2.3-.325-3.937-1.95t-1.988-3.95q-.05-.425.225-.725T6 11t.713.288T7.1 12q.35 1.75 1.738 2.875T12 16q1.8 0 3.175-1.137T16.9 12q.1-.425.388-.712T18 11t.7.3t.225.725q-.35 2.275-1.975 3.925T13 17.925V20q0 .425-.288.713T12 21t-.712-.288T11 20\"/>"},"mic-off-rounded":{"body":"<path fill=\"currentColor\" d=\"M16.8 14.575q-.35-.2-.45-.612t.1-.763q.175-.275.288-.587t.162-.638q.1-.425.388-.7T18 11t.7.3t.225.725q-.075.575-.262 1.125t-.488 1.05q-.2.35-.612.463t-.763-.088m-3.5-4.125L9.575 6.725Q9.3 6.45 9.15 6.088T9 5.325V5q0-1.25.875-2.125T12 2t2.125.875T15 5v4.725q0 .675-.612.938T13.3 10.45M11 20v-2.1q-2.3-.3-3.937-1.925t-1.988-3.95q-.05-.425.225-.725T6 11t.713.288T7.1 12q.35 1.75 1.738 2.875T12 16q.85 0 1.613-.262T15 15l1.425 1.425q-.725.575-1.588.963T13 17.9V20q0 .425-.288.713T12 21t-.712-.288T11 20m8.1 1.9l-17-17q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l17 17q.275.275.275.7t-.275.7t-.7.275t-.7-.275\"/>"},"videocam-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h12q.825 0 1.413.588T18 6v4.5l3.15-3.15q.25-.25.55-.125t.3.475v8.6q0 .35-.3.475t-.55-.125L18 13.5V18q0 .825-.587 1.413T16 20z\"/>"},"photo-camera-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 17.5q1.875 0 3.188-1.312T16.5 13t-1.312-3.187T12 8.5T8.813 9.813T7.5 13t1.313 3.188T12 17.5m0-2q-1.05 0-1.775-.725T9.5 13t.725-1.775T12 10.5t1.775.725T14.5 13t-.725 1.775T12 15.5M4 21q-.825 0-1.412-.587T2 19V7q0-.825.588-1.412T4 5h3.15L8.4 3.65q.275-.3.663-.475T9.875 3h4.25q.425 0 .813.175t.662.475L16.85 5H20q.825 0 1.413.588T22 7v12q0 .825-.587 1.413T20 21z\"/>"},"volume-up-rounded":{"body":"<path fill=\"currentColor\" d=\"M19 11.975q0-2.075-1.1-3.787t-2.95-2.563q-.375-.175-.55-.537t-.05-.738q.15-.4.538-.575t.787 0Q18.1 4.85 19.55 7.063T21 11.974t-1.45 4.913t-3.875 3.287q-.4.175-.788 0t-.537-.575q-.125-.375.05-.737t.55-.538q1.85-.85 2.95-2.562t1.1-3.788M7 15H4q-.425 0-.712-.288T3 14v-4q0-.425.288-.712T4 9h3l3.3-3.3q.475-.475 1.088-.213t.612.938v11.15q0 .675-.612.938T10.3 18.3zm9.5-3q0 1.05-.475 1.988t-1.25 1.537q-.25.15-.513.013T14 15.1V8.85q0-.3.263-.437t.512.012q.775.625 1.25 1.575t.475 2\"/>"},"radio-button-checked":{"body":"<path fill=\"currentColor\" d=\"M15.538 15.538Q17 14.075 17 12t-1.463-3.537T12 7T8.463 8.463T7 12t1.463 3.538T12 17t3.538-1.463M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20\"/>"},"bolt-rounded":{"body":"<path fill=\"currentColor\" d=\"M9 15H5.9q-.6 0-.888-.537t.063-1.038l7.475-10.75q.25-.35.65-.487t.825.012t.625.525t.15.8L14 10h3.875q.65 0 .913.575t-.163 1.075L10.4 21.5q-.275.325-.675.425t-.775-.075t-.587-.537t-.163-.788z\"/>"},"cloud":{"body":"<path fill=\"currentColor\" d=\"M6.5 20q-2.275 0-3.887-1.575T1 14.575q0-1.95 1.175-3.475T5.25 9.15q.625-2.3 2.5-3.725T12 4q2.925 0 4.963 2.038T19 11q1.725.2 2.863 1.488T23 15.5q0 1.875-1.312 3.188T18.5 20z\"/>"},"hard-drive":{"body":"<path fill=\"currentColor\" d=\"M17 16q.625 0 1.063-.425T18.5 14.5q0-.625-.437-1.062T17 13q-.65 0-1.075.438T15.5 14.5q0 .65.425 1.075T17 16M2 9l3.4-3.4q.275-.275.638-.437T6.825 5H17.15q.425 0 .788.163t.637.437L22 9zm2 10q-.85 0-1.425-.575T2 17v-6h20v6q0 .85-.587 1.425T20 19z\"/>"},"dns":{"body":"<path fill=\"currentColor\" d=\"M7.5 6q-.625 0-1.062.438T6 7.5t.438 1.063T7.5 9t1.063-.437T9 7.5t-.437-1.062T7.5 6m0 10q-.625 0-1.062.438T6 17.5t.438 1.063T7.5 19t1.063-.437T9 17.5t-.437-1.062T7.5 16M4 3h16q.425 0 .713.288T21 4v7q0 .425-.288.713T20 12H4q-.425 0-.712-.288T3 11V4q0-.425.288-.712T4 3m0 10h16q.425 0 .713.288T21 14v7q0 .425-.288.713T20 22H4q-.425 0-.712-.288T3 21v-7q0-.425.288-.712T4 13\"/>"},"database":{"body":"<path fill=\"currentColor\" d=\"M18.375 9.825Q21 8.65 21 7t-2.625-2.825T12 3T5.625 4.175T3 7t2.625 2.825T12 11t6.375-1.175m-3.812 3.463q1.537-.213 2.962-.688t2.45-1.237T21 9.5V12q0 1.1-1.025 1.863t-2.45 1.237t-2.962.688T12 16t-2.562-.213t-2.963-.687t-2.45-1.237T3 12V9.5q0 1.1 1.025 1.863t2.45 1.237t2.963.688T12 13.5t2.563-.213m0 5q1.537-.212 2.962-.687t2.45-1.237T21 14.5V17q0 1.1-1.025 1.863t-2.45 1.237t-2.962.688T12 21t-2.562-.213t-2.963-.687t-2.45-1.237T3 17v-2.5q0 1.1 1.025 1.863t2.45 1.237t2.963.688T12 18.5t2.563-.213\"/>"},"memory-rounded":{"body":"<path fill=\"currentColor\" d=\"M9 14v-4q0-.425.288-.712T10 9h4q.425 0 .713.288T15 10v4q0 .425-.288.713T14 15h-4q-.425 0-.712-.288T9 14m0 6v-1H7q-.825 0-1.412-.587T5 17v-2H4q-.425 0-.712-.288T3 14t.288-.712T4 13h1v-2H4q-.425 0-.712-.288T3 10t.288-.712T4 9h1V7q0-.825.588-1.412T7 5h2V4q0-.425.288-.712T10 3t.713.288T11 4v1h2V4q0-.425.288-.712T14 3t.713.288T15 4v1h2q.825 0 1.413.588T19 7v2h1q.425 0 .713.288T21 10t-.288.713T20 11h-1v2h1q.425 0 .713.288T21 14t-.288.713T20 15h-1v2q0 .825-.587 1.413T17 19h-2v1q0 .425-.288.713T14 21t-.712-.288T13 20v-1h-2v1q0 .425-.288.713T10 21t-.712-.288T9 20m8-3V7H7v10z\"/>"},"terminal-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm0-2h16V8H4zm4.675-5l-1.9-1.9q-.3-.3-.288-.7t.313-.7q.3-.275.7-.287t.7.287l2.6 2.6q.3.3.3.7t-.3.7l-2.6 2.6q-.275.275-.687.288T6.8 16.3q-.275-.275-.275-.7t.275-.7zM13 17q-.425 0-.712-.288T12 16t.288-.712T13 15h4q.425 0 .713.288T18 16t-.288.713T17 17z\"/>"},"fork-right-rounded":{"body":"<path fill=\"currentColor\" d=\"M9.288 20.713Q9 20.425 9 20V6.825l-.9.875q-.275.275-.7.275T6.7 7.7q-.3-.3-.288-.713T6.7 6.3l2.6-2.6q.3-.3.7-.3t.7.3l2.6 2.6q.3.3.287.7t-.287.7q-.3.3-.7.313t-.7-.288l-.9-.9v6.525q.875-.775 1.975-1.112t2.2-.338q.275 0 .525.025t.475.075l-.875-.9q-.275-.275-.275-.7t.275-.7q.3-.3.713-.287t.687.287l2.6 2.6q.3.3.3.7t-.3.7l-2.6 2.6q-.275.275-.7.275t-.7-.275q-.3-.3-.3-.712t.275-.688l.9-.9q-.275-.05-.55-.088t-.55-.037q-1.35 0-2.488.763T11 17v3q0 .425-.288.713T10 21t-.712-.288\"/>"},"power-settings-new-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12q0-1.825.613-3.463T4.3 5.6q.275-.35.663-.325t.662.275t.363.65t-.263.825q-.8 1.025-1.263 2.288T4 12q0 3.35 2.325 5.675T12 20t5.675-2.325T20 12q0-1.425-.462-2.687t-1.263-2.288q-.35-.425-.262-.825t.362-.65t.663-.275t.662.325q1.075 1.3 1.688 2.938T22 12q0 2.075-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m-.712-9.287Q11 12.425 11 12V3q0-.425.288-.712T12 2t.713.288T13 3v9q0 .425-.288.713T12 13t-.712-.288\"/>"},"extension-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.85 0-1.425-.575T3 19v-3.125q0-.275.2-.488t.475-.262q.975-.2 1.65-.913T6 12.5q0-.975-.675-1.675T3.675 9.9Q3.4 9.825 3.2 9.612T3 9.125V6q0-.825.588-1.412T5 4h3.05q.175-1.275 1.15-2.137T11.5 1q1.3 0 2.275.863T14.95 4H18q.825 0 1.413.588T20 6v3.35q.9.45 1.45 1.3T22 12.5q0 1.025-.55 1.875T20 15.65V19q0 .85-.587 1.425T18 21z\"/>"},"widgets-rounded":{"body":"<path fill=\"currentColor\" d=\"M15.95 12.3L11.7 8.05q-.15-.15-.212-.325t-.063-.375t.063-.375t.212-.325l4.25-4.25q.15-.15.325-.212t.375-.063t.375.063t.325.212l4.25 4.25q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.25 4.25q-.15.15-.325.213t-.375.062t-.375-.062t-.325-.213M3 10V4q0-.425.288-.712T4 3h6q.425 0 .713.288T11 4v6q0 .425-.288.713T10 11H4q-.425 0-.712-.288T3 10m10 10v-6q0-.425.288-.712T14 13h6q.425 0 .713.288T21 14v6q0 .425-.288.713T20 21h-6q-.425 0-.712-.288T13 20M3 20v-6q0-.425.288-.712T4 13h6q.425 0 .713.288T11 14v6q0 .425-.288.713T10 21H4q-.425 0-.712-.288T3 20\"/>"},"inventory-2-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 22q-.825 0-1.412-.587T3 20V8.725q-.45-.275-.725-.712T2 7V4q0-.825.588-1.412T4 2h16q.825 0 1.413.588T22 4v3q0 .575-.275 1.013T21 8.724V20q0 .825-.587 1.413T19 22zM4 7h16V4H4zm6 7h4q.425 0 .713-.288T15 13t-.288-.712T14 12h-4q-.425 0-.712.288T9 13t.288.713T10 14\"/>"},"layers-rounded":{"body":"<path fill=\"currentColor\" d=\"M4.025 14.85q-.4-.3-.387-.787t.412-.788q.275-.2.6-.2t.6.2L12 18.5l6.75-5.225q.275-.2.6-.2t.6.2q.4.3.413.787t-.388.788l-6.75 5.25q-.55.425-1.225.425t-1.225-.425zm6.75.2l-5.75-4.475Q4.25 9.975 4.25 9t.775-1.575l5.75-4.475q.55-.425 1.225-.425t1.225.425l5.75 4.475q.775.6.775 1.575t-.775 1.575l-5.75 4.475q-.55.425-1.225.425t-1.225-.425\"/>"},"public":{"body":"<path fill=\"currentColor\" d=\"M8.1 21.213q-1.825-.788-3.175-2.138T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22t-3.9-.788M11 19.95V18q-.825 0-1.412-.587T9 16v-1l-4.8-4.8q-.075.45-.137.9T4 12q0 3.025 1.988 5.3T11 19.95m6.9-2.55q1.025-1.125 1.563-2.512T20 12q0-2.45-1.362-4.475T15 4.6V5q0 .825-.587 1.413T13 7h-2v2q0 .425-.288.713T10 10H8v2h6q.425 0 .713.288T15 13v3h1q.65 0 1.175.388T17.9 17.4\"/>"},"link-rounded":{"body":"<path fill=\"currentColor\" d=\"M7 17q-2.075 0-3.537-1.463T2 12t1.463-3.537T7 7h3q.425 0 .713.288T11 8t-.288.713T10 9H7q-1.25 0-2.125.875T4 12t.875 2.125T7 15h3q.425 0 .713.288T11 16t-.288.713T10 17zm2-4q-.425 0-.712-.288T8 12t.288-.712T9 11h6q.425 0 .713.288T16 12t-.288.713T15 13zm5 4q-.425 0-.712-.288T13 16t.288-.712T14 15h3q1.25 0 2.125-.875T20 12t-.875-2.125T17 9h-3q-.425 0-.712-.288T13 8t.288-.712T14 7h3q2.075 0 3.538 1.463T22 12t-1.463 3.538T17 17z\"/>"},"build-rounded":{"body":"<path fill=\"currentColor\" d=\"M9 15q-2.5 0-4.25-1.75T3 9q0-.5.075-1t.275-.95q.125-.25.313-.375t.412-.175t.463.013t.437.262L7.6 9.4l1.8-1.8l-2.625-2.625q-.2-.2-.262-.437T6.5 4.075t.175-.413t.375-.312q.45-.2.95-.275T9 3q2.5 0 4.25 1.75T15 9q0 .575-.1 1.088t-.3 1.012l5.05 5q.725.725.725 1.775t-.725 1.775t-1.775.725t-1.775-.75l-5-5.025q-.5.2-1.012.3T9 15\"/>"},"science":{"body":"<path fill=\"currentColor\" d=\"M5 21q-1.275 0-1.812-1.137t.262-2.113L9 11V5H8q-.425 0-.712-.288T7 4t.288-.712T8 3h8q.425 0 .713.288T17 4t-.288.713T16 5h-1v6l5.55 6.75q.8.975.263 2.113T19 21z\"/>"},"rocket-launch-rounded":{"body":"<path fill=\"currentColor\" d=\"M6.125 12.15q.65-1.65 1.563-3.175T9.75 6.1l-1.3-.275q-.5-.1-.975.05t-.825.5L3.5 9.525q-.375.375-.288.9t.588.725zm14.7-9.75q-2.65-.125-5.037 1.025T11.525 6.45q-1.2 1.2-2.113 2.6T7.826 12q-.125.325-.125.663t.25.587l3.125 3.125q.25.25.588.25t.662-.125q1.55-.675 2.95-1.588t2.6-2.112q1.875-1.875 3.025-4.262T21.925 3.5q0-.2-.1-.4t-.25-.35t-.35-.25t-.4-.1M13.9 8.438q0-.838.575-1.413t1.413-.575t1.412.575t.575 1.413T17.3 9.85t-1.412.575t-1.413-.575t-.575-1.412M12.175 18.2l1 2.325q.2.5.725.6t.9-.275l3.15-3.15q.35-.35.5-.837t.05-.988l-.25-1.3q-1.375 1.15-2.887 2.063T12.175 18.2M4.05 16.05q.875-.875 2.125-.888t2.125.863t.875 2.125t-.875 2.125q-1.2 1.2-2.838 1.425t-3.287.45q.225-1.65.463-3.287T4.05 16.05\"/>"},"smart-toy-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 15q-1.25 0-2.125-.875T1 12t.875-2.125T4 9V7q0-.825.588-1.412T6 5h3q0-1.25.875-2.125T12 2t2.125.875T15 5h3q.825 0 1.413.588T20 7v2q1.25 0 2.125.875T23 12t-.875 2.125T20 15v4q0 .825-.587 1.413T18 21H6q-.825 0-1.412-.587T4 19zm6.063-2.437q.437-.438.437-1.063t-.437-1.062T9 10t-1.062.438T7.5 11.5t.438 1.063T9 13t1.063-.437m6 0q.437-.438.437-1.063t-.437-1.062T15 10t-1.062.438T13.5 11.5t.438 1.063T15 13t1.063-.437M9 17h6q.425 0 .713-.288T16 16t-.288-.712T15 15H9q-.425 0-.712.288T8 16t.288.713T9 17\"/>"},"psychology-rounded":{"body":"<path fill=\"currentColor\" d=\"m10.85 13.75l.1.8q.025.2.163.325t.337.125h1.1q.2 0 .338-.125t.162-.325l.1-.8q.2-.075.363-.175t.287-.225l.75.325q.175.075.35.025t.275-.225l.55-.95q.1-.175.063-.35t-.188-.3l-.65-.475q.05-.2.05-.4t-.05-.4l.65-.475q.15-.125.188-.3t-.063-.35l-.55-.95q-.1-.175-.275-.225t-.35.025l-.75.325q-.125-.125-.288-.225t-.362-.175l-.1-.8q-.025-.2-.162-.325T12.55 7h-1.1q-.2 0-.337.125t-.163.325l-.1.8q-.2.075-.362.175t-.288.225l-.75-.325Q9.275 8.25 9.1 8.3t-.275.225l-.55.95q-.1.175-.062.35t.187.3l.65.475Q9 10.8 9 11t.05.4l-.65.475q-.15.125-.187.3t.062.35l.55.95q.1.175.275.225t.35-.025l.75-.325q.125.125.288.225t.362.175m.088-1.687Q10.5 11.625 10.5 11t.438-1.062T12 9.5t1.063.438T13.5 11t-.437 1.063T12 12.5t-1.062-.437M7 22q-.425 0-.712-.288T6 21v-3.3q-1.425-1.3-2.212-3.037T3 11q0-3.75 2.625-6.375T12 2q3.125 0 5.538 1.838t3.137 4.787l1.3 5.125q.125.475-.175.863T21 15h-2v3q0 .825-.587 1.413T17 20h-2v1q0 .425-.288.713T14 22z\"/>"},"auto-awesome-rounded":{"body":"<path fill=\"currentColor\" d=\"M19 8.3q-.125 0-.263-.075T18.55 8l-.8-1.75l-1.75-.8q-.15-.05-.225-.187T15.7 5q0-.125.075-.262T16 4.55l1.75-.8l.8-1.75q.05-.15.188-.225T19 1.7q.125 0 .263.075T19.45 2l.8 1.75l1.75.8q.15.05.225.188T22.3 5q0 .125-.075.263T22 5.45l-1.75.8l-.8 1.75q-.05.15-.188.225T19 8.3Zm0 14q-.125 0-.263-.075T18.55 22l-.8-1.75l-1.75-.8q-.15-.05-.225-.188T15.7 19q0-.125.075-.263T16 18.55l1.75-.8l.8-1.75q.05-.15.188-.225T19 15.7q.125 0 .263.075t.187.225l.8 1.75l1.75.8q.15.05.225.188T22.3 19q0 .125-.075.263T22 19.45l-1.75.8l-.8 1.75q-.05.15-.188.225T19 22.3ZM9 18.575q-.275 0-.525-.15T8.1 18l-1.6-3.5L3 12.9q-.275-.125-.425-.375T2.425 12q0-.275.15-.525T3 11.1l3.5-1.6L8.1 6q.125-.275.375-.425T9 5.425q.275 0 .525.15T9.9 6l1.6 3.5l3.5 1.6q.275.125.425.375t.15.525q0 .275-.15.525T15 12.9l-3.5 1.6L9.9 18q-.125.275-.375.425t-.525.15Z\"/>","hidden":true},"auto-fix":{"body":"<path fill=\"currentColor\" d=\"m20 7l-.95-2.05L17 4l2.05-.95L20 1l.95 2.05L23 4l-2.05.95L20 7ZM8.5 7l-.95-2.05L5.5 4l2.05-.95L8.5 1l.95 2.05L11.5 4l-2.05.95L8.5 7ZM20 18.5l-.95-2.05L17 15.5l2.05-.95l.95-2.05l.95 2.05l2.05.95l-2.05.95L20 18.5ZM5.1 21.7l-2.8-2.8q-.3-.3-.3-.725t.3-.725L13.45 6.3q.3-.3.725-.3t.725.3l2.8 2.8q.3.3.3.725t-.3.725L6.55 21.7q-.3.3-.725.3t-.725-.3Zm9.075-10.475l1.4-1.4l-1.4-1.4l-1.4 1.4l1.4 1.4Z\"/>","hidden":true},"lightbulb-rounded":{"body":"<path fill=\"currentColor\" d=\"M10.588 21.413Q10 20.825 10 20h4q0 .825-.587 1.413T12 22t-1.412-.587M9 19q-.425 0-.712-.288T8 18t.288-.712T9 17h6q.425 0 .713.288T16 18t-.288.713T15 19zm-.75-3q-1.725-1.025-2.738-2.75T4.5 9.5q0-3.125 2.188-5.312T12 2t5.313 2.188T19.5 9.5q0 2.025-1.012 3.75T15.75 16z\"/>"},"target":{"body":"<path fill=\"currentColor\" d=\"M8.1 21.213q-1.825-.788-3.175-2.138T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22t-3.9-.788m9.575-3.537Q20 15.35 20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20t5.675-2.325M7.75 16.25Q6 14.5 6 12t1.75-4.25T12 6t4.25 1.75T18 12t-1.75 4.25T12 18t-4.25-1.75m7.075-1.425Q16 13.65 16 12t-1.175-2.825T12 8T9.175 9.175T8 12t1.175 2.825T12 16t2.825-1.175m-4.237-1.412Q10 12.825 10 12t.588-1.412T12 10t1.413.588T14 12t-.587 1.413T12 14t-1.412-.587\"/>"},"trending-up-rounded":{"body":"<path fill=\"currentColor\" d=\"M2.7 17.625q-.3-.3-.288-.712t.288-.688l5.275-5.35Q8.55 10.3 9.4 10.3t1.425.575l2.575 2.6l5.2-5.15H17q-.425 0-.712-.288T16 7.326t.288-.712t.712-.288h4q.425 0 .713.288t.287.712v4q0 .425-.288.713t-.712.287t-.712-.287t-.288-.713v-1.6L14.825 14.9q-.575.575-1.425.575t-1.425-.575L9.4 12.325l-5.3 5.3q-.275.275-.7.275t-.7-.275\"/>"},"bar-chart-rounded":{"body":"<path fill=\"currentColor\" d=\"M17 20q-.425 0-.712-.288T16 19v-5q0-.425.288-.712T17 13h2q.425 0 .713.288T20 14v5q0 .425-.288.713T19 20zm-6 0q-.425 0-.712-.288T10 19V5q0-.425.288-.712T11 4h2q.425 0 .713.288T14 5v14q0 .425-.288.713T13 20zm-6 0q-.425 0-.712-.288T4 19v-9q0-.425.288-.712T5 9h2q.425 0 .713.288T8 10v9q0 .425-.288.713T7 20z\"/>"},"waves-rounded":{"body":"<path fill=\"currentColor\" d=\"M7 18.95q-1.225 0-1.95.55t-2.025.775q-.425.075-.725-.2t-.3-.7t.287-.712T3 18.25q.9-.275 1.7-.763T7 17q.95 0 1.563.213t1.137.474t1.05.488T12 18.4t1.25-.225t1.05-.488t1.15-.475T17 17q1.5 0 2.3.488t1.7.762q.425.125.713.413t.287.712t-.3.7t-.725.2q-1.3-.225-2.025-.775T17 18.95q-.7 0-1.213.213t-1.025.474t-1.15.488T12 20.35t-1.613-.225t-1.15-.488t-1.012-.475T7 18.95m0-4.45q-1.225 0-1.95.55t-2.025.775q-.425.075-.725-.2t-.3-.7t.287-.712T3 13.8q.9-.275 1.7-.763T7 12.55q.95 0 1.563.213t1.137.475t1.05.487t1.25.225t1.25-.225t1.05-.487t1.15-.475T17 12.55q1.5 0 2.3.488t1.7.762q.425.125.713.413t.287.712t-.3.7t-.725.2q-1.3-.225-2.025-.775T17 14.5q-.725 0-1.237.212t-1.026.475t-1.137.488t-1.6.225t-1.612-.225t-1.15-.488t-1.013-.474T7 14.5m0-4.45q-1.225 0-1.95.55t-2.025.775q-.425.075-.725-.2t-.3-.7t.288-.712T3 9.35q.9-.275 1.7-.763T7 8.1q.95 0 1.563.213t1.137.474t1.05.488T12 9.5t1.25-.225t1.05-.488t1.15-.475T17 8.1q1.5 0 2.3.488t1.7.762q.425.125.713.413t.287.712t-.3.7t-.725.2q-1.3-.225-2.025-.775T17 10.05q-.7 0-1.213.212t-1.025.475t-1.15.488T12 11.45t-1.613-.225t-1.15-.488t-1.012-.475T7 10.05M7 5.6q-1.225 0-1.95.55t-2.025.775Q2.6 7 2.3 6.725t-.3-.7t.287-.713T3 4.9q.9-.275 1.7-.763T7 3.65q.95 0 1.563.213t1.137.475t1.05.487T12 5.05t1.25-.225t1.05-.488t1.15-.474T17 3.65q1.5 0 2.3.488T21 4.9q.425.125.713.413t.287.712t-.3.7t-.725.2q-1.3-.225-2.025-.775T17 5.6q-.7 0-1.213.213t-1.025.475t-1.15.487T12 7t-1.613-.225t-1.15-.488t-1.012-.474T7 5.6\"/>"},"air-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.5 20q-.8 0-1.487-.4T8.9 18.5q-.275-.5-.012-1T9.7 17q.325 0 .575.2t.45.45q.125.175.338.263T11.5 18q.425 0 .713-.288T12.5 17t-.288-.712T11.5 16H3q-.425 0-.712-.288T2 15t.288-.712T3 14h8.5q1.25 0 2.125.875T14.5 17t-.875 2.125T11.5 20M3 10q-.425 0-.712-.288T2 9t.288-.712T3 8h12.5q.625 0 1.063-.437T17 6.5t-.437-1.062T15.5 5q-.4 0-.75.188t-.55.537q-.175.3-.425.538t-.6.237q-.5 0-.812-.375t-.163-.8q.35-1.05 1.263-1.687T15.5 3q1.45 0 2.475 1.025T19 6.5t-1.025 2.475T15.5 10zm16.95 7.7q-.5.225-.975-.062T18.5 16.8q0-.35.238-.587t.537-.413q.35-.2.538-.55T20 14.5q0-.625-.437-1.062T18.5 13H3q-.425 0-.712-.288T2 12t.288-.712T3 11h15.5q1.45 0 2.475 1.025T22 14.5q0 1.05-.55 1.913t-1.5 1.287\"/>"},"lock":{"body":"<path fill=\"currentColor\" d=\"M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h1V6q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm7.413-5.587Q14 15.825 14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17t1.413-.587M9 8h6V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6z\"/>"},"lock-open-rounded":{"body":"<path fill=\"currentColor\" d=\"M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h9V6q0-1.25-.875-2.125T12 3q-1.05 0-1.838.638T9.1 5.225q-.1.35-.413.563T8 6q-.425 0-.712-.275t-.213-.65q.275-1.7 1.662-2.888T12 1q2.075 0 3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm7.413-5.587Q14 15.825 14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17t1.413-.587\"/>"},"key-rounded":{"body":"<path fill=\"currentColor\" d=\"M4.875 14.125Q4 13.25 4 12t.875-2.125T7 9t2.125.875T10 12t-.875 2.125T7 15t-2.125-.875M7 18q1.925 0 3.475-1.1T12.65 14H13l1.3 1.3q.15.15.325.212t.375.063t.375-.062t.325-.213L17 14l1.75 1.375q.15.125.338.187t.387.038t.363-.112t.287-.238l2.25-2.575q.125-.15.188-.325t.062-.375t-.075-.362t-.2-.288L21.325 10.3q-.15-.15-.337-.225T20.6 10h-7.95q-.6-1.7-2.113-2.85T7 6Q4.5 6 2.75 7.75T1 12t1.75 4.25T7 18\"/>"},"shield-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.675 21.875q-.15-.025-.3-.075Q8 20.675 6 17.637T4 11.1V6.375q0-.625.363-1.125t.937-.725l6-2.25q.35-.125.7-.125t.7.125l6 2.25q.575.225.938.725T20 6.375V11.1q0 3.5-2 6.538T12.625 21.8q-.15.05-.3.075T12 21.9t-.325-.025\"/>"},"verified-user-rounded":{"body":"<path fill=\"currentColor\" d=\"m10.95 12.7l-1.4-1.4q-.3-.3-.7-.3t-.7.3t-.3.713t.3.712l2.1 2.125q.3.3.7.3t.7-.3l4.25-4.25q.3-.3.3-.712t-.3-.713t-.712-.3t-.713.3zm.725 9.175q-.15-.025-.3-.075Q8 20.675 6 17.637T4 11.1V6.375q0-.625.363-1.125t.937-.725l6-2.25q.35-.125.7-.125t.7.125l6 2.25q.575.225.938.725T20 6.375V11.1q0 3.5-2 6.538T12.625 21.8q-.15.05-.3.075T12 21.9t-.325-.025\"/>"},"gpp-maybe-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.713 15.713Q13 15.425 13 15t-.288-.712T12 14t-.712.288T11 15t.288.713T12 16t.713-.288m0-4Q13 11.426 13 11V8q0-.425-.288-.712T12 7t-.712.288T11 8v3q0 .425.288.713T12 12t.713-.288m-1.038 10.163q-.15-.025-.3-.075Q8 20.675 6 17.637T4 11.1V6.375q0-.625.363-1.125t.937-.725l6-2.25q.35-.125.7-.125t.7.125l6 2.25q.575.225.938.725T20 6.375V11.1q0 3.5-2 6.538T12.625 21.8q-.15.05-.3.075T12 21.9t-.325-.025\"/>"},"gpp-bad-rounded":{"body":"<path fill=\"currentColor\" d=\"m12 13.4l1.4 1.4q.275.275.7.275t.7-.275t.275-.7t-.275-.7L13.4 12l1.4-1.4q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275L12 10.6l-1.4-1.4q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7l1.4 1.4l-1.4 1.4q-.275.275-.275.7t.275.7t.7.275t.7-.275zm-.325 8.475q-.15-.025-.3-.075Q8 20.675 6 17.637T4 11.1V6.375q0-.625.363-1.125t.937-.725l6-2.25q.35-.125.7-.125t.7.125l6 2.25q.575.225.938.725T20 6.375V11.1q0 3.5-2 6.538T12.625 21.8q-.15.05-.3.075T12 21.9t-.325-.025\"/>"},"logout-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h6q.425 0 .713.288T12 4t-.288.713T11 5H5v14h6q.425 0 .713.288T12 20t-.288.713T11 21zm12.175-8H10q-.425 0-.712-.288T9 12t.288-.712T10 11h7.175L15.3 9.125q-.275-.275-.275-.675t.275-.7t.7-.313t.725.288L20.3 11.3q.3.3.3.7t-.3.7l-3.575 3.575q-.3.3-.712.288t-.713-.313q-.275-.3-.262-.712t.287-.688z\"/>"},"login-rounded":{"body":"<path fill=\"currentColor\" d=\"M13 21q-.425 0-.712-.288T12 20t.288-.712T13 19h6V5h-6q-.425 0-.712-.288T12 4t.288-.712T13 3h6q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm-1.825-8H4q-.425 0-.712-.288T3 12t.288-.712T4 11h7.175L9.3 9.125q-.275-.275-.275-.675t.275-.7t.7-.313t.725.288L14.3 11.3q.3.3.3.7t-.3.7l-3.575 3.575q-.3.3-.712.288T9.3 16.25q-.275-.3-.262-.712t.287-.688z\"/>"},"star-rounded":{"body":"<path fill=\"currentColor\" d=\"m12 17.275l-4.15 2.5q-.275.175-.575.15t-.525-.2t-.35-.437t-.05-.588l1.1-4.725L3.775 10.8q-.25-.225-.312-.513t.037-.562t.3-.45t.55-.225l4.85-.425l1.875-4.45q.125-.3.388-.45t.537-.15t.537.15t.388.45l1.875 4.45l4.85.425q.35.05.55.225t.3.45t.038.563t-.313.512l-3.675 3.175l1.1 4.725q.075.325-.05.588t-.35.437t-.525.2t-.575-.15z\"/>"},"flag-rounded":{"body":"<path fill=\"currentColor\" d=\"M7 14v6q0 .425-.288.713T6 21t-.712-.288T5 20V5q0-.425.288-.712T6 4h7.175q.35 0 .625.225t.35.575L14.4 6H19q.425 0 .713.288T20 7v8q0 .425-.288.713T19 16h-5.175q-.35 0-.625-.225t-.35-.575L12.6 14z\"/>"},"label-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h11q.475 0 .9.213t.7.587l4.5 6q.4.525.4 1.2t-.4 1.2l-4.5 6q-.275.375-.7.588T15 20z\"/>"},"light-mode-rounded":{"body":"<path fill=\"currentColor\" d=\"M8.463 15.538Q7 14.075 7 12t1.463-3.537T12 7t3.538 1.463T17 12t-1.463 3.538T12 17t-3.537-1.463M2 13q-.425 0-.712-.288T1 12t.288-.712T2 11h2q.425 0 .713.288T5 12t-.288.713T4 13zm18 0q-.425 0-.712-.288T19 12t.288-.712T20 11h2q.425 0 .713.288T23 12t-.288.713T22 13zm-8.712-8.287Q11 4.425 11 4V2q0-.425.288-.712T12 1t.713.288T13 2v2q0 .425-.288.713T12 5t-.712-.288m0 18Q11 22.426 11 22v-2q0-.425.288-.712T12 19t.713.288T13 20v2q0 .425-.288.713T12 23t-.712-.288M5.65 7.05L4.575 6q-.3-.275-.288-.7t.288-.725q.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7t-.275.7t-.687.288t-.713-.288M18 19.425l-1.05-1.075q-.275-.3-.275-.712t.275-.688q.275-.3.688-.287t.712.287L19.425 18q.3.275.288.7t-.288.725q-.3.3-.725.3t-.7-.3M16.95 7.05q-.3-.275-.288-.687t.288-.713L18 4.575q.275-.3.7-.288t.725.288q.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275t-.7-.275M4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.712-.275t.688.275q.3.275.288.688t-.288.712L6 19.425q-.275.3-.7.288t-.725-.288\"/>"},"dark-mode-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 21q-3.775 0-6.387-2.613T3 12q0-3.45 2.25-5.988T11 3.05q.325-.05.575.088t.4.362t.163.525t-.188.575q-.425.65-.638 1.375T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q.775 0 1.538-.225t1.362-.625q.275-.175.563-.162t.512.137q.25.125.388.375t.087.6q-.35 3.45-2.937 5.725T12 21\"/>"},"desktop-windows-rounded":{"body":"<path fill=\"currentColor\" d=\"M10 19v-2H4q-.825 0-1.412-.587T2 15V5q0-.825.588-1.412T4 3h16q.825 0 1.413.588T22 5v10q0 .825-.587 1.413T20 17h-6v2h1q.425 0 .713.288T16 20t-.288.713T15 21H9q-.425 0-.712-.288T8 20t.288-.712T9 19z\"/>"},"mobile":{"body":"<path fill=\"currentColor\" d=\"M7 23q-.825 0-1.412-.587T5 21V3q0-.825.588-1.412T7 1h10q.825 0 1.413.588T19 3v3.1q.45.175.725.55T20 7.5v2q0 .475-.275.85T19 10.9V21q0 .825-.587 1.413T17 23zm5.713-17.287Q13 5.424 13 5t-.288-.712T12 4t-.712.288T11 5t.288.713T12 6t.713-.288\"/>"},"home-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 19v-9q0-.475.213-.9t.587-.7l6-4.5q.525-.4 1.2-.4t1.2.4l6 4.5q.375.275.588.7T20 10v9q0 .825-.588 1.413T18 21h-3q-.425 0-.712-.288T14 20v-5q0-.425-.288-.712T13 14h-2q-.425 0-.712.288T10 15v5q0 .425-.288.713T9 21H6q-.825 0-1.412-.587T4 19\"/>"},"keyboard-command-key":{"body":"<path fill=\"currentColor\" d=\"M6.5 21q-1.45 0-2.475-1.025T3 17.5t1.025-2.475T6.5 14H8v-4H6.5q-1.45 0-2.475-1.025T3 6.5t1.025-2.475T6.5 3t2.475 1.025T10 6.5V8h4V6.5q0-1.45 1.025-2.475T17.5 3t2.475 1.025T21 6.5t-1.025 2.475T17.5 10H16v4h1.5q1.45 0 2.475 1.025T21 17.5t-1.025 2.475T17.5 21t-2.475-1.025T14 17.5V16h-4v1.5q0 1.45-1.025 2.475T6.5 21m0-2q.625 0 1.063-.437T8 17.5V16H6.5q-.625 0-1.062.438T5 17.5t.438 1.063T6.5 19m11 0q.625 0 1.063-.437T19 17.5t-.437-1.062T17.5 16H16v1.5q0 .625.438 1.063T17.5 19M10 14h4v-4h-4zM6.5 8H8V6.5q0-.625-.437-1.062T6.5 5t-1.062.438T5 6.5t.438 1.063T6.5 8M16 8h1.5q.625 0 1.063-.437T19 6.5t-.437-1.062T17.5 5t-1.062.438T16 6.5z\"/>"},"location-on-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.3 21.2q-.35-.125-.625-.375Q9.05 19.325 7.8 17.9t-2.087-2.762t-1.275-2.575T4 10.2q0-3.75 2.413-5.975T12 2t5.588 2.225T20 10.2q0 1.125-.437 2.363t-1.275 2.575T16.2 17.9t-2.875 2.925q-.275.25-.625.375t-.7.125t-.7-.125m2.113-9.787Q14 10.825 14 10t-.587-1.412T12 8t-1.412.588T10 10t.588 1.413T12 12t1.413-.587\"/>"},"work":{"body":"<path fill=\"currentColor\" d=\"M4 21q-.825 0-1.412-.587T2 19V8q0-.825.588-1.412T4 6h4V4q0-.825.588-1.412T10 2h4q.825 0 1.413.588T16 4v2h4q.825 0 1.413.588T22 8v11q0 .825-.587 1.413T20 21zm6-15h4V4h-4z\"/>"},"credit-card":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm0-8h16V8H4z\"/>"},"attach-money-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.025 21q-.425 0-.712-.288T11.025 20v-1.15Q9.9 18.6 9.05 17.975t-1.375-1.75q-.175-.35-.012-.737t.587-.563q.35-.15.725.013t.575.537q.425.75 1.075 1.138t1.6.387q1.025 0 1.737-.462t.713-1.438q0-.875-.55-1.387t-2.55-1.163q-2.15-.675-2.95-1.612t-.8-2.288q0-1.625 1.05-2.525t2.15-1.025V4q0-.425.288-.713T12.025 3t.713.288t.287.712v1.1q.95.15 1.65.613t1.15 1.137q.225.325.088.725t-.563.575q-.35.15-.725.013t-.7-.488t-.763-.537t-1.087-.188q-1.1 0-1.675.488T9.825 8.65q0 .825.75 1.3t2.6 1q1.725.5 2.613 1.588t.887 2.512q0 1.775-1.05 2.7t-2.6 1.15V20q0 .425-.288.713t-.712.287\"/>"},"thumb-up-rounded":{"body":"<path fill=\"currentColor\" d=\"M21 8q.8 0 1.4.6T23 10v2q0 .175-.038.375t-.112.375l-3 7.05q-.225.5-.75.85T18 21h-8q-.825 0-1.412-.587T8 19V8.825q0-.4.163-.762t.437-.638l5.425-5.4q.375-.35.888-.425t.987.175t.688.7t.087.925L15.55 8zM4 21q-.825 0-1.412-.587T2 19v-9q0-.825.588-1.412T4 8t1.413.588T6 10v9q0 .825-.587 1.413T4 21\"/>"},"stethoscope-rounded":{"body":"<path fill=\"currentColor\" d=\"M13.5 22q-2.7 0-4.6-1.9T7 15.5v-.575q-2.15-.35-3.575-2.013T2 9V4q0-.425.288-.712T3 3h2q0-.425.288-.712T6 2t.713.288T7 3v2q0 .425-.288.713T6 6t-.712-.288T5 5H4v4q0 1.65 1.175 2.825T8 13t2.825-1.175T12 9V5h-1q0 .425-.288.713T10 6t-.712-.288T9 5V3q0-.425.288-.712T10 2t.713.288T11 3h2q.425 0 .713.288T14 4v5q0 2.25-1.425 3.913T9 14.925v.575q0 1.875 1.313 3.188T13.5 20t3.188-1.312T18 15.5v-1.675q-.875-.325-1.437-1.088T16 11q0-1.25.875-2.125T19 8t2.125.875T22 11q0 .975-.562 1.738T20 13.825V15.5q0 2.7-1.9 4.6T13.5 22\"/>"},"palette":{"body":"<path fill=\"currentColor\" d=\"M12 22q-2.05 0-3.875-.788t-3.187-2.15t-2.15-3.187T2 12q0-2.075.813-3.9t2.2-3.175T8.25 2.788T12.2 2q2 0 3.775.688t3.113 1.9t2.125 2.875T22 11.05q0 2.875-1.75 4.413T16 17h-1.85q-.225 0-.312.125t-.088.275q0 .3.375.863t.375 1.287q0 1.25-.687 1.85T12 22m-4.425-9.425Q8 12.15 8 11.5t-.425-1.075T6.5 10t-1.075.425T5 11.5t.425 1.075T6.5 13t1.075-.425m3-4Q11 8.15 11 7.5t-.425-1.075T9.5 6t-1.075.425T8 7.5t.425 1.075T9.5 9t1.075-.425m5 0Q16 8.15 16 7.5t-.425-1.075T14.5 6t-1.075.425T13 7.5t.425 1.075T14.5 9t1.075-.425m3 4Q19 12.15 19 11.5t-.425-1.075T17.5 10t-1.075.425T16 11.5t.425 1.075T17.5 13t1.075-.425\"/>"},"manage-accounts-rounded":{"body":"<path fill=\"currentColor\" d=\"M2 18v-.8q0-.85.425-1.562T3.6 14.55q1.425-.725 2.963-1.15t3.137-.425q.35 0 .55.313t.075.662q-.15.525-.225 1.05t-.075 1.075q0 .725.15 1.4T10.6 18.8q.2.425-.037.813T9.9 20H4q-.825 0-1.412-.587T2 18m16.413-.587Q19 16.825 19 16t-.587-1.412T17 14t-1.412.588T15 16t.588 1.413T17 18t1.413-.587M7.175 10.825Q6 9.65 6 8t1.175-2.825T10 4t2.825 1.175T14 8t-1.175 2.825T10 12t-2.825-1.175M15.85 20.2l-.15-.7q-.3-.125-.562-.262T14.6 18.9l-.725.225q-.325.1-.637-.025t-.488-.4l-.2-.35q-.175-.3-.125-.65t.325-.575l.55-.475q-.05-.35-.05-.65t.05-.65l-.55-.475q-.275-.225-.325-.563t.125-.637l.225-.375q.175-.275.475-.4t.625-.025l.725.225q.275-.2.538-.338t.562-.262l.15-.725q.075-.35.338-.562T16.8 11h.4q.35 0 .613.225t.337.575l.15.7q.3.125.562.275t.538.375l.675-.225q.35-.125.675 0t.5.425l.2.35q.175.3.125.65t-.325.575l-.55.475q.05.3.05.625t-.05.625l.55.475q.275.225.325.563t-.125.637l-.225.375q-.175.275-.475.4t-.625.025L19.4 18.9q-.275.2-.538.337t-.562.263l-.15.725q-.075.35-.337.563T17.2 21h-.4q-.35 0-.612-.225t-.338-.575\"/>"},"person-search-rounded":{"body":"<path fill=\"currentColor\" d=\"M11 12q-1.65 0-2.825-1.175T7 8t1.175-2.825T11 4t2.825 1.175T15 8t-1.175 2.825T11 12m10.4 10.8l-2.5-2.5q-.525.3-1.125.5T16.5 21q-1.875 0-3.187-1.312T12 16.5t1.313-3.187T16.5 12t3.188 1.313T21 16.5q0 .675-.2 1.275t-.5 1.125l2.5 2.5q.275.275.275.7t-.275.7t-.7.275t-.7-.275m-3.125-4.525Q19 17.55 19 16.5t-.725-1.775T16.5 14t-1.775.725T14 16.5t.725 1.775T16.5 19t1.775-.725M5 20q-.825 0-1.412-.587T3 18v-.775q0-.85.425-1.575t1.175-1.1q1.125-.575 2.488-.987t2.987-.538q.3-.025.45.25t.025.575q-.275.625-.413 1.288T10 16.475q0 .65.113 1.313t.387 1.262q.15.35-.025.65t-.525.3z\"/>"},"add-box-rounded":{"body":"<path fill=\"currentColor\" d=\"M11 13v3q0 .425.288.713T12 17t.713-.288T13 16v-3h3q.425 0 .713-.288T17 12t-.288-.712T16 11h-3V8q0-.425-.288-.712T12 7t-.712.288T11 8v3H8q-.425 0-.712.288T7 12t.288.713T8 13zm-6 8q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21z\"/>"},"assignment-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h4.2q.325-.9 1.088-1.45T12 1t1.713.55T14.8 3H19q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm3-4h5q.425 0 .713-.288T14 16t-.288-.712T13 15H8q-.425 0-.712.288T7 16t.288.713T8 17m0-4h8q.425 0 .713-.288T17 12t-.288-.712T16 11H8q-.425 0-.712.288T7 12t.288.713T8 13m0-4h8q.425 0 .713-.288T17 8t-.288-.712T16 7H8q-.425 0-.712.288T7 8t.288.713T8 9m4.538-4.962q.212-.213.212-.538t-.213-.537T12 2.75t-.537.213t-.213.537t.213.538t.537.212t.538-.213\"/>"},"hub":{"body":"<path fill=\"currentColor\" d=\"M3.875 22.125Q3 21.25 3 20t.875-2.125T6 17q.35 0 .65.075t.575.2L8.65 15.5q-.7-.775-.975-1.75T7.55 11.8l-2.025-.675q-.425.625-1.075 1T3 12.5q-1.25 0-2.125-.875T0 9.5t.875-2.125T3 6.5t2.125.875T6 9.5v.2l2.025.7q.5-.9 1.338-1.525t1.887-.8V5.9q-.975-.275-1.612-1.063T9 3q0-1.25.875-2.125T12 0t2.125.875T15 3q0 1.05-.65 1.838T12.75 5.9v2.175q1.05.175 1.888.8t1.337 1.525L18 9.7v-.2q0-1.25.875-2.125T21 6.5t2.125.875T24 9.5t-.875 2.125T21 12.5q-.8 0-1.463-.375t-1.062-1l-2.025.675q.15.975-.125 1.938T15.35 15.5l1.425 1.75q.275-.125.575-.187T18 17q1.25 0 2.125.875T21 20t-.875 2.125T18 23t-2.125-.875T15 20q0-.5.163-.962t.437-.838l-1.425-1.775Q13.15 17 11.988 17T9.8 16.425L8.4 18.2q.275.375.438.838T9 20q0 1.25-.875 2.125T6 23t-2.125-.875\"/>"},"notifications-active-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 19q-.425 0-.712-.288T4 18t.288-.712T5 17h1v-7q0-2.075 1.25-3.687T10.5 4.2v-.7q0-.625.438-1.062T12 2t1.063.438T13.5 3.5v.7q2 .5 3.25 2.113T18 10v7h1q.425 0 .713.288T20 18t-.288.713T19 19zm7 3q-.825 0-1.412-.587T10 20h4q0 .825-.587 1.413T12 22M3 10q-.425 0-.712-.325t-.238-.75q.2-1.875 1.05-3.488t2.175-2.812q.325-.275.738-.25t.662.375t.2.75t-.375.7q-.975.925-1.6 2.15T4.075 9q-.05.425-.35.713T3 10m18 0q-.425 0-.725-.288T19.925 9q-.2-1.425-.825-2.65T17.5 4.2q-.325-.3-.375-.7t.2-.75t.663-.375t.737.25q1.325 1.2 2.175 2.812t1.05 3.488q.05.425-.237.75T21 10\"/>"},"campaign-rounded":{"body":"<path fill=\"currentColor\" d=\"M21 13h-2q-.425 0-.712-.288T18 12t.288-.712T19 11h2q.425 0 .713.288T22 12t-.288.713T21 13m-4.4 3.8q.25-.35.65-.4t.75.2l1.6 1.2q.35.25.4.65t-.2.75t-.65.4t-.75-.2l-1.6-1.2q-.35-.25-.4-.65t.2-.75m3-10.6L18 7.4q-.35.25-.75.2t-.65-.4t-.2-.75t.4-.65l1.6-1.2q.35-.25.75-.2t.65.4t.2.75t-.4.65M5 15H4q-.825 0-1.412-.587T2 13v-2q0-.825.588-1.412T4 9h4l3.475-2.1q.5-.3 1.013 0t.512.875v8.45q0 .575-.513.875t-1.012 0L8 15H7v3q0 .425-.288.713T6 19t-.712-.288T5 18zm9 .35v-6.7q.675.6 1.088 1.463T15.5 12t-.413 1.888T14 15.35\"/>"},"newspaper-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 21q-.825 0-1.412-.587T2 19V3.6q0-.175.15-.238t.275.063l1.25 1.25l1.3-1.325q.15-.15.35-.15t.35.15L7 4.675L8.325 3.35q.15-.15.35-.15t.35.15l1.3 1.325L11.65 3.35q.15-.15.35-.15t.35.15l1.325 1.325l1.3-1.325q.15-.15.35-.15t.35.15L17 4.675l1.325-1.325q.15-.15.35-.15t.35.15l1.3 1.325l1.25-1.25q.125-.125.275-.062T22 3.6V19q0 .825-.588 1.413T20 21zm0-2h7v-6H4zm9 0h7v-2h-7zm0-4h7v-2h-7zm-9-4h16V8H4z\"/>"},"handshake-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.1 21q-.425 0-.712-.288T11.1 20q0-.175.075-.363t.225-.337l4.275-4.275q.15-.15.15-.363t-.15-.362t-.363-.138t-.362.163l-4.25 4.25q-.15.15-.325.225t-.375.075q-.425 0-.712-.288T9 17.876q0-.25.075-.413t.2-.287L13.55 12.9q.15-.15.15-.35t-.15-.35t-.35-.15t-.35.15l-4.275 4.25q-.15.15-.325.225t-.4.075q-.4 0-.7-.3t-.3-.7q0-.2.075-.375t.225-.325l4.25-4.25q.15-.15.15-.363t-.15-.362t-.35-.15t-.35.15L6.45 14.35q-.125.125-.3.2t-.425.075q-.425 0-.712-.288t-.288-.712q0-.2.075-.375t.225-.325l4.9-4.9q.275-.275.688-.25t.687.3l3.05 3.05q.275.275.65.438t.75.162q.8 0 1.4-.562t.6-1.438q0-.35-.125-.725t-.45-.7L13.75 4.875q-.275-.275-.363-.6t.088-.625q.225-.375.575-.55t.775-.175q.525 0 1.075.25t1 .7l4.225 4.25q.45.45.663 1T22 10.4q0 .5-.225 1.013t-.65.937L12.8 20.7q-.2.2-.35.25t-.35.05m-9.2-8.875q-.475-.35-.712-.837T1.95 10.25q0-.575.238-1.125t.687-1L7.1 3.875q.425-.425.938-.65T9.125 3q.625 0 1.213.225t1.012.65L16.475 9q.125.125.213.313t.087.387q0 .425-.287.713t-.713.287q-.2 0-.387-.087t-.313-.213L12 7.35q-.575-.575-1.412-.575t-1.413.575l-4.7 4.7q-.325.325-.762.338t-.813-.263\"/>"},"account-balance-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 16v-5q0-.425.288-.712T6 10t.713.288T7 11v5q0 .425-.288.713T6 17t-.712-.288T5 16m6 0v-5q0-.425.288-.712T12 10t.713.288T13 11v5q0 .425-.288.713T12 17t-.712-.288T11 16m-8 5q-.425 0-.712-.288T2 20t.288-.712T3 19h18q.425 0 .713.288T22 20t-.288.713T21 21zm14-5v-5q0-.425.288-.712T18 10t.713.288T19 11v5q0 .425-.288.713T18 17t-.712-.288T17 16m4-8H2.9q-.375 0-.638-.262T2 7.1v-.55q0-.275.138-.475T2.5 5.75l8.6-4.3q.425-.2.9-.2t.9.2l8.55 4.275q.275.125.413.375t.137.525V7q0 .425-.287.713T21 8\"/>"},"receipt-rounded":{"body":"<path fill=\"currentColor\" d=\"M3 20.8V2.6q0-.175.15-.237t.275.062l.725.725q.15.15.35.15t.35-.15l.8-.8Q5.8 2.2 6 2.2t.35.15l.8.8q.15.15.35.15t.35-.15l.8-.8Q8.8 2.2 9 2.2t.35.15l.8.8q.15.15.35.15t.35-.15l.8-.8q.15-.15.35-.15t.35.15l.8.8q.15.15.35.15t.35-.15l.8-.8q.15-.15.35-.15t.35.15l.8.8q.15.15.35.15t.35-.15l.8-.8q.15-.15.35-.15t.35.15l.8.8q.15.15.35.15t.35-.15l.725-.725q.125-.125.275-.062T21 2.6v18.2q0 .35-.3.475t-.55-.125l-.3-.3q-.15-.15-.35-.15t-.35.15l-.8.8q-.15.15-.35.15t-.35-.15l-.8-.8q-.15-.15-.35-.15t-.35.15l-.8.8q-.15.15-.35.15t-.35-.15l-.8-.8q-.15-.15-.35-.15t-.35.15l-.8.8q-.15.15-.35.15t-.35-.15l-.8-.8q-.15-.15-.35-.15t-.35.15l-.8.8q-.15.15-.35.15t-.35-.15l-.8-.8q-.15-.15-.35-.15t-.35.15l-.8.8q-.15.15-.35.15t-.35-.15l-.8-.8q-.15-.15-.35-.15t-.35.15l-.3.3q-.25.25-.55.125T3 20.8M7 17h10q.425 0 .713-.288T18 16t-.288-.712T17 15H7q-.425 0-.712.288T6 16t.288.713T7 17m0-4h10q.425 0 .713-.288T18 12t-.288-.712T17 11H7q-.425 0-.712.288T6 12t.288.713T7 13m0-4h10q.425 0 .713-.288T18 8t-.288-.712T17 7H7q-.425 0-.712.288T6 8t.288.713T7 9\"/>"},"wallet":{"body":"<path fill=\"currentColor\" d=\"M6 20q-1.65 0-2.825-1.175T2 16V8q0-1.65 1.175-2.825T6 4h12q1.65 0 2.825 1.175T22 8v8q0 1.65-1.175 2.825T18 20zM6 8h12q.55 0 1.05.125t.95.4V8q0-.825-.587-1.412T18 6H6q-.825 0-1.412.588T4 8v.525q.45-.275.95-.4T6 8m-1.85 3.25l11.125 2.7q.225.05.45 0t.425-.2l3.475-2.9q-.275-.375-.7-.612T18 10H6q-.65 0-1.137.338t-.713.912\"/>"},"shopping-cart-rounded":{"body":"<path fill=\"currentColor\" d=\"M5.588 21.413Q5 20.825 5 20t.588-1.412T7 18t1.413.588T9 20t-.587 1.413T7 22t-1.412-.587m10 0Q15 20.825 15 20t.588-1.412T17 18t1.413.588T19 20t-.587 1.413T17 22t-1.412-.587M5.2 4h14.75q.575 0 .875.513t.025 1.037l-3.55 6.4q-.275.5-.737.775T15.55 13H8.1L7 15h11q.425 0 .713.288T19 16t-.288.713T18 17H7q-1.125 0-1.7-.987t-.05-1.963L6.6 11.6L3 4H2q-.425 0-.712-.288T1 3t.288-.712T2 2h1.625q.275 0 .525.15t.375.425z\"/>"},"local-shipping-rounded":{"body":"<path fill=\"currentColor\" d=\"M3.875 19.125Q3 18.25 3 17H2q-.425 0-.712-.288T1 16V6q0-.825.588-1.412T3 4h12q.825 0 1.413.588T17 6v2h2q.475 0 .9.213t.7.587l2.2 2.925q.1.125.15.275t.05.325V16q0 .425-.288.713T22 17h-1q0 1.25-.875 2.125T18 20t-2.125-.875T15 17H9q0 1.25-.875 2.125T6 20t-2.125-.875m2.838-1.412Q7 17.425 7 17t-.288-.712T6 16t-.712.288T5 17t.288.713T6 18t.713-.288m12 0Q19 17.426 19 17t-.288-.712T18 16t-.712.288T17 17t.288.713T18 18t.713-.288M17 13h4.25L19 10h-2z\"/>"},"factory-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 22q-.825 0-1.412-.587T2 20v-8.7q0-.6.325-1.1t.9-.75L7.6 7.6q.5-.2.95.075T9 8.5V9l3.625-1.45q.5-.2.937.1t.438.825V10h8v10q0 .825-.587 1.413T20 22zm7-4h2v-4h-2zm-4 0h2v-4H7zm8 0h2v-4h-2zm6.8-9.5h-4.625l.725-5.625q.05-.375.338-.625T18.9 2h1.225q.375 0 .65.25t.325.625z\"/>"},"support":{"body":"<path fill=\"currentColor\" d=\"M8.1 21.213q-1.825-.788-3.175-2.138T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22t-3.9-.788m1-1.762l1.2-2.75q-1.05-.375-1.812-1.162T7.3 13.7l-2.75 1.15q.575 1.6 1.775 2.8t2.775 1.8M7.3 10.3q.425-1.05 1.188-1.837T10.3 7.3L9.15 4.55q-1.6.6-2.8 1.8t-1.8 2.8zm6.825 3.825Q15 13.25 15 12t-.875-2.125T12 9t-2.125.875T9 12t.875 2.125T12 15t2.125-.875m.775 5.325q1.575-.6 2.763-1.787T19.45 14.9l-2.75-1.2q-.375 1.05-1.15 1.813t-1.8 1.187zm1.8-9.2l2.75-1.15q-.6-1.575-1.787-2.762T14.9 4.55l-1.15 2.8q1.025.375 1.775 1.138T16.7 10.25\"/>"}},"lastModified":1785497247,"aliases":{"progress-activity-rounded":{"parent":"progress-activity"},"filter-alt-rounded":{"parent":"filter-alt"},"share-rounded":{"parent":"share"},"more-horiz-rounded":{"parent":"more-horiz"},"more-vert-rounded":{"parent":"more-vert"},"view-sidebar-rounded":{"parent":"view-sidebar"},"call-rounded":{"parent":"call"},"table-chart-rounded":{"parent":"table-chart"},"view-column-rounded":{"parent":"view-column"},"circle-rounded":{"parent":"circle"},"radio-button-checked-rounded":{"parent":"radio-button-checked"},"cloud-rounded":{"parent":"cloud"},"hard-drive-rounded":{"parent":"hard-drive"},"dns-rounded":{"parent":"dns"},"database-rounded":{"parent":"database"},"power-rounded":{"parent":"power-settings-new-rounded"},"public-rounded":{"parent":"public"},"science-rounded":{"parent":"science"},"auto-fix-high":{"parent":"auto-fix"},"target-rounded":{"parent":"target"},"lock-rounded":{"parent":"lock"},"smartphone":{"parent":"mobile"},"keyboard-command-key-rounded":{"parent":"keyboard-command-key"},"work-rounded":{"parent":"work"},"credit-card-rounded":{"parent":"credit-card"},"palette-rounded":{"parent":"palette"},"hub-rounded":{"parent":"hub"},"wallet-rounded":{"parent":"wallet"},"support-rounded":{"parent":"support"}},"width":24,"height":24}
+{"prefix":"material-symbols","icons":{"progress-activity":{"body":"<path fill=\"currentColor\" d=\"M8.125 21.213q-1.825-.788-3.187-2.15t-2.15-3.188T2 11.988t.788-3.875t2.15-3.175t3.187-2.15T12 2q.425 0 .713.288T13 3t-.288.713T12 4Q8.675 4 6.337 6.338T4 12t2.338 5.663T12 20t5.663-2.337T20 12q0-.425.288-.712T21 11t.713.288T22 12q0 2.05-.788 3.875t-2.15 3.188t-3.175 2.15t-3.875.787t-3.887-.787\"/>"},"check-rounded":{"body":"<path fill=\"currentColor\" d=\"m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z\"/>"},"check-circle-rounded":{"body":"<path fill=\"currentColor\" d=\"m10.6 13.8l-2.15-2.15q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7L9.9 15.9q.3.3.7.3t.7-.3l5.65-5.65q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275zM12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"close-rounded":{"body":"<path fill=\"currentColor\" d=\"m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z\"/>"},"cancel-rounded":{"body":"<path fill=\"currentColor\" d=\"m12 13.4l2.9 2.9q.275.275.7.275t.7-.275t.275-.7t-.275-.7L13.4 12l2.9-2.9q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275L12 10.6L9.1 7.7q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7l2.9 2.9l-2.9 2.9q-.275.275-.275.7t.275.7t.7.275t.7-.275zm0 8.6q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"warning-rounded":{"body":"<path fill=\"currentColor\" d=\"M2.725 21q-.275 0-.5-.137t-.35-.363t-.137-.488t.137-.512l9.25-16q.15-.25.388-.375T12 3t.488.125t.387.375l9.25 16q.15.25.138.513t-.138.487t-.35.363t-.5.137zm9.988-3.287Q13 17.425 13 17t-.288-.712T12 16t-.712.288T11 17t.288.713T12 18t.713-.288m0-3Q13 14.425 13 14v-3q0-.425-.288-.712T12 10t-.712.288T11 11v3q0 .425.288.713T12 15t.713-.288\"/>"},"error-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.713 16.713Q13 16.425 13 16t-.288-.712T12 15t-.712.288T11 16t.288.713T12 17t.713-.288m0-4Q13 12.425 13 12V8q0-.425-.288-.712T12 7t-.712.288T11 8v4q0 .425.288.713T12 13t.713-.288M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"info-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.713 16.713Q13 16.425 13 16v-4q0-.425-.288-.712T12 11t-.712.288T11 12v4q0 .425.288.713T12 17t.713-.288m0-8Q13 8.425 13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9t.713-.288M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"help-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.838 17.638q.362-.363.362-.888t-.362-.888t-.888-.362t-.887.363t-.363.887t.363.888t.887.362t.888-.363M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m.1-14.3q.625 0 1.088.4t.462 1q0 .55-.337.975t-.763.8q-.575.5-1.012 1.1t-.438 1.35q0 .35.263.588t.612.237q.375 0 .638-.25t.337-.625q.1-.525.45-.937t.75-.788q.575-.55.988-1.2t.412-1.45q0-1.275-1.037-2.087T12.1 6q-.95 0-1.812.4T8.975 7.625q-.175.3-.112.638t.337.512q.35.2.725.125t.625-.425q.275-.375.688-.575t.862-.2\"/>"},"notifications-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 19q-.425 0-.712-.288T4 18t.288-.712T5 17h1v-7q0-2.075 1.25-3.687T10.5 4.2v-.7q0-.625.438-1.062T12 2t1.063.438T13.5 3.5v.7q2 .5 3.25 2.113T18 10v7h1q.425 0 .713.288T20 18t-.288.713T19 19zm7 3q-.825 0-1.412-.587T10 20h4q0 .825-.587 1.413T12 22\"/>"},"monitoring-rounded":{"body":"<path fill=\"currentColor\" d=\"M3.288 20.713Q3 20.425 3 20v-1q0-.425.288-.712T4 18t.713.288T5 19v1q0 .425-.288.713T4 21t-.712-.288m4 0Q7 20.426 7 20v-5.5q0-.425.288-.712T8 13.5t.713.288T9 14.5V20q0 .425-.288.713T8 21t-.712-.288m4 0Q11 20.426 11 20v-3.5q0-.425.288-.712T12 15.5t.713.288t.287.712V20q0 .425-.288.713T12 21t-.712-.288m4 0Q15 20.426 15 20v-5q0-.425.288-.712T16 14t.713.288T17 15v5q0 .425-.288.713T16 21t-.712-.288m4 0Q19 20.426 19 20v-9q0-.425.288-.712T20 10t.713.288T21 11v9q0 .425-.288.713T20 21t-.712-.288M14 11.975q-.4 0-.763-.15t-.662-.425L10 8.825l-5.3 5.3q-.3.3-.712.288t-.713-.313q-.275-.3-.262-.712T3.3 12.7l5.275-5.275q.3-.3.663-.437T10 6.85t.775.138t.65.437L14 10l5.3-5.3q.3-.3.713-.288t.712.313q.275.3.263.713t-.288.687L15.425 11.4q-.275.275-.65.425t-.775.15\"/>"},"add-rounded":{"body":"<path fill=\"currentColor\" d=\"M11 13H6q-.425 0-.712-.288T5 12t.288-.712T6 11h5V6q0-.425.288-.712T12 5t.713.288T13 6v5h5q.425 0 .713.288T19 12t-.288.713T18 13h-5v5q0 .425-.288.713T12 19t-.712-.288T11 18z\"/>"},"remove-rounded":{"body":"<path fill=\"currentColor\" d=\"M6 13q-.425 0-.712-.288T5 12t.288-.712T6 11h12q.425 0 .713.288T19 12t-.288.713T18 13z\"/>"},"delete-rounded":{"body":"<path fill=\"currentColor\" d=\"M7 21q-.825 0-1.412-.587T5 19V6q-.425 0-.712-.288T4 5t.288-.712T5 4h4q0-.425.288-.712T10 3h4q.425 0 .713.288T15 4h4q.425 0 .713.288T20 5t-.288.713T19 6v13q0 .825-.587 1.413T17 21zm3.713-4.288Q11 16.426 11 16V9q0-.425-.288-.712T10 8t-.712.288T9 9v7q0 .425.288.713T10 17t.713-.288m4 0Q15 16.426 15 16V9q0-.425-.288-.712T14 8t-.712.288T13 9v7q0 .425.288.713T14 17t.713-.288\"/>"},"edit-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 21q-.425 0-.712-.288T3 20v-2.425q0-.4.15-.763t.425-.637L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.437.65T21 6.4q0 .4-.138.763t-.437.662l-12.6 12.6q-.275.275-.638.425t-.762.15zM17.6 7.8L19 6.4L17.6 5l-1.4 1.4z\"/>"},"save-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h11.175q.4 0 .763.15t.637.425l2.85 2.85q.275.275.425.638t.15.762V19q0 .825-.587 1.413T19 21zm9.125-3.875Q15 16.25 15 15t-.875-2.125T12 12t-2.125.875T9 15t.875 2.125T12 18t2.125-.875M7 10h7q.425 0 .713-.288T15 9V7q0-.425-.288-.712T14 6H7q-.425 0-.712.288T6 7v2q0 .425.288.713T7 10\"/>"},"content-copy-rounded":{"body":"<path fill=\"currentColor\" d=\"M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm-4 4q-.825 0-1.412-.587T3 20V7q0-.425.288-.712T4 6t.713.288T5 7v13h10q.425 0 .713.288T16 21t-.288.713T15 22z\"/>"},"download-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.625 15.513q-.175-.063-.325-.213l-3.6-3.6q-.3-.3-.288-.7t.288-.7q.3-.3.713-.312t.712.287L11 12.15V5q0-.425.288-.712T12 4t.713.288T13 5v7.15l1.875-1.875q.3-.3.713-.288t.712.313q.275.3.288.7t-.288.7l-3.6 3.6q-.15.15-.325.213t-.375.062t-.375-.062M6 20q-.825 0-1.412-.587T4 18v-2q0-.425.288-.712T5 15t.713.288T6 16v2h12v-2q0-.425.288-.712T19 15t.713.288T20 16v2q0 .825-.587 1.413T18 20z\"/>"},"upload-rounded":{"body":"<path fill=\"currentColor\" d=\"M6 20q-.825 0-1.412-.587T4 18v-2q0-.425.288-.712T5 15t.713.288T6 16v2h12v-2q0-.425.288-.712T19 15t.713.288T20 16v2q0 .825-.587 1.413T18 20zm5-12.15L9.125 9.725q-.3.3-.712.288T7.7 9.7q-.275-.3-.288-.7t.288-.7l3.6-3.6q.15-.15.325-.212T12 4.425t.375.063t.325.212l3.6 3.6q.3.3.288.7t-.288.7q-.3.3-.712.313t-.713-.288L13 7.85V15q0 .425-.288.713T12 16t-.712-.288T11 15z\"/>"},"undo-rounded":{"body":"<path fill=\"currentColor\" d=\"M8 19q-.425 0-.712-.288T7 18t.288-.712T8 17h6.1q1.575 0 2.738-1T18 13.5T16.838 11T14.1 10H7.8l1.9 1.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275L4.7 9.7q-.15-.15-.213-.325T4.426 9t.063-.375T4.7 8.3l3.6-3.6q.275-.275.7-.275t.7.275t.275.7t-.275.7L7.8 8h6.3q2.425 0 4.163 1.575T20 13.5t-1.737 3.925T14.1 19z\"/>"},"refresh-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 20q-3.35 0-5.675-2.325T4 12t2.325-5.675T12 4q1.725 0 3.3.712T18 6.75V5q0-.425.288-.712T19 4t.713.288T20 5v5q0 .425-.288.713T19 11h-5q-.425 0-.712-.288T13 10t.288-.712T14 9h3.2q-.8-1.4-2.187-2.2T12 6Q9.5 6 7.75 7.75T6 12t1.75 4.25T12 18q1.7 0 3.113-.862t2.187-2.313q.2-.35.563-.487t.737-.013q.4.125.575.525t-.025.75q-1.025 2-2.925 3.2T12 20\"/>"},"search-rounded":{"body":"<path fill=\"currentColor\" d=\"M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14\"/>"},"filter-alt":{"body":"<path fill=\"currentColor\" d=\"M11 20q-.425 0-.712-.288T10 19v-6L4.2 5.6q-.375-.5-.112-1.05T5 4h14q.65 0 .913.55T19.8 5.6L14 13v6q0 .425-.288.713T13 20z\"/>"},"tune-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.288 20.713Q11 20.425 11 20v-4q0-.425.288-.712T12 15t.713.288T13 16v1h7q.425 0 .713.288T21 18t-.288.713T20 19h-7v1q0 .425-.288.713T12 21t-.712-.288M4 19q-.425 0-.712-.288T3 18t.288-.712T4 17h4q.425 0 .713.288T9 18t-.288.713T8 19zm3.288-4.288Q7 14.425 7 14v-1H4q-.425 0-.712-.288T3 12t.288-.712T4 11h3v-1q0-.425.288-.712T8 9t.713.288T9 10v4q0 .425-.288.713T8 15t-.712-.288M12 13q-.425 0-.712-.288T11 12t.288-.712T12 11h8q.425 0 .713.288T21 12t-.288.713T20 13zm3.288-4.288Q15 8.425 15 8V4q0-.425.288-.712T16 3t.713.288T17 4v1h3q.425 0 .713.288T21 6t-.288.713T20 7h-3v1q0 .425-.288.713T16 9t-.712-.288M4 7q-.425 0-.712-.288T3 6t.288-.712T4 5h8q.425 0 .713.288T13 6t-.288.713T12 7z\"/>"},"settings-rounded":{"body":"<path fill=\"currentColor\" d=\"M10.825 22q-.675 0-1.162-.45t-.588-1.1L8.85 18.8q-.325-.125-.612-.3t-.563-.375l-1.55.65q-.625.275-1.25.05t-.975-.8l-1.175-2.05q-.35-.575-.2-1.225t.675-1.075l1.325-1Q4.5 12.5 4.5 12.337v-.675q0-.162.025-.337l-1.325-1Q2.675 9.9 2.525 9.25t.2-1.225L3.9 5.975q.35-.575.975-.8t1.25.05l1.55.65q.275-.2.575-.375t.6-.3l.225-1.65q.1-.65.588-1.1T10.825 2h2.35q.675 0 1.163.45t.587 1.1l.225 1.65q.325.125.613.3t.562.375l1.55-.65q.625-.275 1.25-.05t.975.8l1.175 2.05q.35.575.2 1.225t-.675 1.075l-1.325 1q.025.175.025.338v.674q0 .163-.05.338l1.325 1q.525.425.675 1.075t-.2 1.225l-1.2 2.05q-.35.575-.975.8t-1.25-.05l-1.5-.65q-.275.2-.575.375t-.6.3l-.225 1.65q-.1.65-.587 1.1t-1.163.45zm1.225-6.5q1.45 0 2.475-1.025T15.55 12t-1.025-2.475T12.05 8.5q-1.475 0-2.488 1.025T8.55 12t1.013 2.475T12.05 15.5\"/>"},"share":{"body":"<path fill=\"currentColor\" d=\"M17 22q-1.25 0-2.125-.875T14 19q0-.15.075-.7L7.05 14.2q-.4.375-.925.588T5 15q-1.25 0-2.125-.875T2 12t.875-2.125T5 9q.6 0 1.125.213t.925.587l7.025-4.1q-.05-.175-.062-.337T14 5q0-1.25.875-2.125T17 2t2.125.875T20 5t-.875 2.125T17 8q-.6 0-1.125-.213T14.95 7.2l-7.025 4.1q.05.175.063.338T8 12t-.012.363t-.063.337l7.025 4.1q.4-.375.925-.587T17 16q1.25 0 2.125.875T20 19t-.875 2.125T17 22\"/>"},"send-rounded":{"body":"<path fill=\"currentColor\" d=\"M4.4 19.425q-.5.2-.95-.088T3 18.5V14l8-2l-8-2V5.5q0-.55.45-.837t.95-.088l15.4 6.5q.625.275.625.925t-.625.925z\"/>"},"visibility-rounded":{"body":"<path fill=\"currentColor\" d=\"M15.188 14.688Q16.5 13.375 16.5 11.5t-1.312-3.187T12 7T8.813 8.313T7.5 11.5t1.313 3.188T12 16t3.188-1.312m-5.1-1.276Q9.3 12.625 9.3 11.5t.788-1.912T12 8.8t1.913.788t.787 1.912t-.787 1.913T12 14.2t-1.912-.787m-4.2 3.787q-2.763-1.8-4.363-4.75q-.125-.225-.187-.462t-.063-.488t.063-.488t.187-.462q1.6-2.95 4.363-4.75T12 4t6.113 1.8t4.362 4.75q.125.225.188.463t.062.487t-.062.488t-.188.462q-1.6 2.95-4.362 4.75T12 19t-6.113-1.8\"/>"},"visibility-off-rounded":{"body":"<path fill=\"currentColor\" d=\"m19.1 21.9l-3.5-3.45q-.875.275-1.775.413T12 19q-3.35 0-6.125-1.8t-4.35-4.75q-.125-.225-.187-.462t-.063-.488t.063-.488t.187-.462q.55-.975 1.175-1.9T4.15 7L2.075 4.9Q1.8 4.625 1.8 4.213t.3-.713q.275-.275.7-.275t.7.275l17 17q.275.275.288.688t-.288.712q-.275.275-.7.275t-.7-.275M12 16q.275 0 .525-.025t.5-.1l-5.4-5.4q-.075.25-.1.5T7.5 11.5q0 1.875 1.313 3.188T12 16m0-12q3.35 0 6.138 1.813t4.362 4.762q.125.2.188.438t.062.487t-.05.488t-.175.437q-.475.925-1.062 1.75t-1.313 1.55q-.35.35-.825.325t-.825-.375l-2-2q-.175-.175-.225-.413t.025-.487q.1-.325.15-.625t.05-.65q0-1.875-1.312-3.187T12 7q-.35 0-.65.05t-.625.15q-.25.075-.5.025T9.8 7l-.825-.825q-.475-.475-.312-1.1t.787-.8q.625-.125 1.263-.2T12 4m1.975 5.65q.275.325.462.713t.238.812q.025.2-.15.275t-.325-.075l-2.05-2.05Q12 9.175 12.088 9t.287-.175q.475.05.875.263t.725.562\"/>"},"keyboard-arrow-down-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.625 14.913q-.175-.063-.325-.213l-4.6-4.6q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l3.9 3.9l3.9-3.9q.275-.275.7-.275t.7.275t.275.7t-.275.7l-4.6 4.6q-.15.15-.325.213t-.375.062t-.375-.062\"/>"},"keyboard-arrow-up-rounded":{"body":"<path fill=\"currentColor\" d=\"m12 10.8l-3.9 3.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.6-4.6q.3-.3.7-.3t.7.3l4.6 4.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275z\"/>"},"keyboard-arrow-left-rounded":{"body":"<path fill=\"currentColor\" d=\"m10.8 12l3.9 3.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-4.6-4.6q-.15-.15-.212-.325T8.425 12t.063-.375t.212-.325l4.6-4.6q.275-.275.7-.275t.7.275t.275.7t-.275.7z\"/>"},"keyboard-arrow-right-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z\"/>"},"arrow-back-rounded":{"body":"<path fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"/>"},"arrow-forward-rounded":{"body":"<path fill=\"currentColor\" d=\"M16.175 13H5q-.425 0-.712-.288T4 12t.288-.712T5 11h11.175l-4.9-4.9q-.3-.3-.288-.7t.313-.7q.3-.275.7-.288t.7.288l6.6 6.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-6.6 6.6q-.275.275-.687.275T11.3 19.3q-.3-.3-.3-.712t.3-.713z\"/>"},"arrow-upward-rounded":{"body":"<path fill=\"currentColor\" d=\"m11 7.825l-4.9 4.9q-.3.3-.7.288t-.7-.313q-.275-.3-.288-.7t.288-.7l6.6-6.6q.15-.15.325-.212T12 4.425t.375.063t.325.212l6.6 6.6q.275.275.275.688t-.275.712q-.3.3-.712.3t-.713-.3L13 7.825V19q0 .425-.288.713T12 20t-.712-.288T11 19z\"/>"},"arrow-downward-rounded":{"body":"<path fill=\"currentColor\" d=\"M11 16.175V5q0-.425.288-.712T12 4t.713.288T13 5v11.175l4.9-4.9q.3-.3.7-.288t.7.313q.275.3.287.7t-.287.7l-6.6 6.6q-.15.15-.325.213t-.375.062t-.375-.062t-.325-.213l-6.6-6.6q-.275-.275-.275-.687T4.7 11.3q.3-.3.713-.3t.712.3z\"/>"},"subdirectory-arrow-left-rounded":{"body":"<path fill=\"currentColor\" d=\"m7.825 16l2.875 2.875q.3.3.313.7t-.288.7t-.712.3t-.713-.3L4.7 15.7q-.15-.15-.213-.325T4.426 15t.063-.375t.212-.325l4.625-4.625q.3-.3.7-.287t.7.312q.275.3.287.7t-.287.7l-2.9 2.9H17V5q0-.425.288-.712T18 4t.713.288T19 5v9q0 .825-.587 1.413T17 16z\"/>"},"open-in-new-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h6q.425 0 .713.288T12 4t-.288.713T11 5H5v14h14v-6q0-.425.288-.712T20 12t.713.288T21 13v6q0 .825-.587 1.413T19 21zM19 6.4L10.4 15q-.275.275-.7.275T9 15t-.275-.7t.275-.7L17.6 5H15q-.425 0-.712-.288T14 4t.288-.712T15 3h5q.425 0 .713.288T21 4v5q0 .425-.288.713T20 10t-.712-.288T19 9z\"/>"},"more-horiz":{"body":"<path fill=\"currentColor\" d=\"M6 14q-.825 0-1.412-.587T4 12t.588-1.412T6 10t1.413.588T8 12t-.587 1.413T6 14m6 0q-.825 0-1.412-.587T10 12t.588-1.412T12 10t1.413.588T14 12t-.587 1.413T12 14m6 0q-.825 0-1.412-.587T16 12t.588-1.412T18 10t1.413.588T20 12t-.587 1.413T18 14\"/>"},"more-vert":{"body":"<path fill=\"currentColor\" d=\"M12 20q-.825 0-1.412-.587T10 18t.588-1.412T12 16t1.413.588T14 18t-.587 1.413T12 20m0-6q-.825 0-1.412-.587T10 12t.588-1.412T12 10t1.413.588T14 12t-.587 1.413T12 14m0-6q-.825 0-1.412-.587T10 6t.588-1.412T12 4t1.413.588T14 6t-.587 1.413T12 8\"/>"},"menu-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z\"/>"},"view-sidebar":{"body":"<path fill=\"currentColor\" d=\"M19.5 8q-.625 0-1.062-.437T18 6.5v-1q0-.625.438-1.062T19.5 4h1q.625 0 1.063.438T22 5.5v1q0 .625-.437 1.063T20.5 8zm0 6q-.625 0-1.062-.437T18 12.5v-1q0-.625.438-1.062T19.5 10h1q.625 0 1.063.438T22 11.5v1q0 .625-.437 1.063T20.5 14zM4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h10q.825 0 1.413.588T16 6v12q0 .825-.587 1.413T14 20zm15.5 0q-.625 0-1.062-.437T18 18.5v-1q0-.625.438-1.062T19.5 16h1q.625 0 1.063.438T22 17.5v1q0 .625-.437 1.063T20.5 20z\"/>"},"open-in-full-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 21q-.425 0-.712-.288T3 20v-6q0-.425.288-.712T4 13t.713.288T5 14v3.6L17.6 5H14q-.425 0-.712-.288T13 4t.288-.712T14 3h6q.425 0 .713.288T21 4v6q0 .425-.288.713T20 11t-.712-.288T19 10V6.4L6.4 19H10q.425 0 .713.288T11 20t-.288.713T10 21z\"/>"},"close-fullscreen-rounded":{"body":"<path fill=\"currentColor\" d=\"m10 15.4l-5.9 5.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7L8.6 14H5q-.425 0-.712-.288T4 13t.288-.712T5 12h6q.425 0 .713.288T12 13v6q0 .425-.288.713T11 20t-.712-.288T10 19zm5.4-5.4H19q.425 0 .713.288T20 11t-.288.713T19 12h-6q-.425 0-.712-.288T12 11V5q0-.425.288-.712T13 4t.713.288T14 5v3.6l5.9-5.9q.275-.275.7-.275t.7.275t.275.7t-.275.7z\"/>"},"mail-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8.263-7.212q.137-.038.262-.113L19.6 8.25q.2-.125.3-.312t.1-.413q0-.5-.425-.75T18.7 6.8L12 11L5.3 6.8q-.45-.275-.875-.012T4 7.525q0 .25.1.438t.3.287l7.075 4.425q.125.075.263.113t.262.037t.263-.037\"/>"},"drafts-rounded":{"body":"<path fill=\"currentColor\" d=\"m13.025 1.6l8.025 4.8q.45.275.7.75t.25 1V19q0 .825-.587 1.413T20 21H4q-.825 0-1.412-.587T2 19V8.15q0-.525.25-1t.7-.75l8.025-4.8q.475-.275 1.025-.275t1.025.275M12 12.65L19.8 8L12 3.35L4.2 8z\"/>"},"unsubscribe-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 11L5.3 6.8q-.425-.275-.862-.025T4 7.525q0 .225.1.413t.3.312l7.075 4.425q.25.15.525.15t.525-.15L19.6 8.25q.2-.125.3-.312t.1-.413q0-.5-.437-.75T18.7 6.8zm3.463 10.538Q14 20.075 14 18t1.463-3.537T19 13t3.538 1.463T24 18t-1.463 3.538T19 23t-3.537-1.463M16.5 18.5h5q.2 0 .35-.15T22 18t-.15-.35t-.35-.15h-5q-.2 0-.35.15T16 18t.15.35t.35.15M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v4.45q0 .45-.375.7t-.8.1q-.45-.125-.9-.188T19 11q-2.925 0-4.962 2.037T12 18q0 .225.013.45t.037.425q.05.45-.213.788T11.15 20z\"/>"},"inbox-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm7-5q.8 0 1.475-.413t1.1-1.087q.15-.225.375-.363t.5-.137H19V5H5v9h3.55q.275 0 .5.138t.375.362q.425.675 1.1 1.088T12 16\"/>"},"reply-rounded":{"body":"<path fill=\"currentColor\" d=\"m6.825 12l2.9 2.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-4.6-4.6q-.3-.3-.3-.7t.3-.7l4.6-4.6q.275-.275.688-.275T9.7 5.7q.3.3.3.713t-.3.712L6.825 10H16q2.075 0 3.538 1.463T21 15v3q0 .425-.288.713T20 19t-.712-.288T19 18v-3q0-1.25-.875-2.125T16 12z\"/>"},"reply-all-rounded":{"body":"<path fill=\"currentColor\" d=\"m4.825 11l3.9 3.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-4.6-4.6q-.15-.15-.213-.325T2.426 11t.063-.375t.212-.325l4.6-4.6q.275-.275.688-.275T8.7 5.7q.3.3.3.713t-.3.712zm6 1l2.9 2.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-4.6-4.6q-.15-.15-.213-.325T7.426 11t.063-.375t.212-.325l4.6-4.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L10.825 10H17q2.075 0 3.538 1.463T22 15v3q0 .425-.288.713T21 19t-.712-.288T20 18v-3q0-1.25-.875-2.125T17 12z\"/>"},"forward-rounded":{"body":"<path fill=\"currentColor\" d=\"M19.175 11L15.3 7.125q-.3-.3-.3-.712t.3-.713q.3-.275.713-.275t.687.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.3.3-.7.288t-.7-.288q-.3-.3-.312-.7t.287-.7zm-6 1H7q-1.25 0-2.125.875T4 15v3q0 .425-.288.713T3 19t-.712-.288T2 18v-3q0-2.075 1.463-3.537T7 10h6.175L10.3 7.125q-.3-.3-.3-.712t.3-.713q.3-.275.713-.275t.687.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.3.3-.7.288t-.7-.288q-.3-.3-.312-.7t.287-.7z\"/>"},"chat-rounded":{"body":"<path fill=\"currentColor\" d=\"m6 18l-2.3 2.3q-.475.475-1.088.213T2 19.575V4q0-.825.588-1.412T4 2h16q.825 0 1.413.588T22 4v12q0 .825-.587 1.413T20 18zm1-4h6q.425 0 .713-.288T14 13t-.288-.712T13 12H7q-.425 0-.712.288T6 13t.288.713T7 14m0-3h10q.425 0 .713-.288T18 10t-.288-.712T17 9H7q-.425 0-.712.288T6 10t.288.713T7 11m0-3h10q.425 0 .713-.288T18 7t-.288-.712T17 6H7q-.425 0-.712.288T6 7t.288.713T7 8\"/>"},"chat-bubble-rounded":{"body":"<path fill=\"currentColor\" d=\"m6 18l-2.3 2.3q-.475.475-1.088.213T2 19.575V4q0-.825.588-1.412T4 2h16q.825 0 1.413.588T22 4v12q0 .825-.587 1.413T20 18z\"/>"},"forum-rounded":{"body":"<path fill=\"currentColor\" d=\"M21 20.6q-.2 0-.375-.075T20.3 20.3L18 18H8q-.825 0-1.412-.587T6 16v-1h11q.825 0 1.413-.587T19 13V6h1q.825 0 1.413.588T22 8v11.575q0 .45-.3.738t-.7.287m-18-5q-.4 0-.7-.287t-.3-.738V4q0-.825.588-1.412T4 2h11q.825 0 1.413.588T17 4v7q0 .825-.587 1.413T15 13H6l-2.3 2.3q-.15.15-.325.225T3 15.6\"/>"},"call":{"body":"<path fill=\"currentColor\" d=\"M19.95 21q-3.125 0-6.175-1.362t-5.55-3.863t-3.862-5.55T3 4.05q0-.45.3-.75t.75-.3H8.1q.35 0 .625.238t.325.562l.65 3.5q.05.4-.025.675T9.4 8.45L6.975 10.9q.5.925 1.187 1.787t1.513 1.663q.775.775 1.625 1.438T13.1 17l2.35-2.35q.225-.225.588-.337t.712-.063l3.45.7q.35.1.575.363T21 15.9v4.05q0 .45-.3.75t-.75.3\"/>"},"attach-file-rounded":{"body":"<path fill=\"currentColor\" d=\"M18 15.75q0 2.6-1.825 4.425T11.75 22t-4.425-1.825T5.5 15.75V6.5q0-1.875 1.313-3.187T10 2t3.188 1.313T14.5 6.5v8.75q0 1.15-.8 1.95t-1.95.8t-1.95-.8t-.8-1.95V7q0-.425.288-.712T10 6t.713.288T11 7v8.25q0 .325.213.538t.537.212t.538-.213t.212-.537V6.5q-.025-1.05-.737-1.775T10 4t-1.775.725T7.5 6.5v9.25q-.025 1.775 1.225 3.013T11.75 20q1.75 0 2.975-1.237T16 15.75V7q0-.425.288-.712T17 6t.713.288T18 7z\"/>"},"alternate-email-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12v1.45q0 1.475-1.012 2.513T18.5 17q-.875 0-1.65-.375t-1.3-1.075q-.725.725-1.638 1.088T12 17q-2.075 0-3.537-1.463T7 12t1.463-3.537T12 7t3.538 1.463T17 12v1.45q0 .65.425 1.1T18.5 15t1.075-.45t.425-1.1V12q0-3.35-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20h4q.425 0 .713.288T17 21t-.288.713T16 22zm2.125-7.875Q15 13.25 15 12t-.875-2.125T12 9t-2.125.875T9 12t.875 2.125T12 15t2.125-.875\"/>"},"person-rounded":{"body":"<path fill=\"currentColor\" d=\"M9.175 10.825Q8 9.65 8 8t1.175-2.825T12 4t2.825 1.175T16 8t-1.175 2.825T12 12t-2.825-1.175M4 18v-.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2v.8q0 .825-.587 1.413T18 20H6q-.825 0-1.412-.587T4 18\"/>"},"group-rounded":{"body":"<path fill=\"currentColor\" d=\"M1 17.2q0-.85.438-1.562T2.6 14.55q1.55-.775 3.15-1.162T9 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T17 17.2v.8q0 .825-.587 1.413T15 20H3q-.825 0-1.412-.587T1 18zM18.45 20q.275-.45.413-.962T19 18v-1q0-1.1-.612-2.113T16.65 13.15q1.275.15 2.4.513t2.1.887q.9.5 1.375 1.112T23 17v1q0 .825-.587 1.413T21 20zM6.175 10.825Q5 9.65 5 8t1.175-2.825T9 4t2.825 1.175T13 8t-1.175 2.825T9 12t-2.825-1.175m11.65 0Q16.65 12 15 12q-.275 0-.7-.062t-.7-.138q.675-.8 1.038-1.775T15 8t-.362-2.025T13.6 4.2q.35-.125.7-.163T15 4q1.65 0 2.825 1.175T19 8t-1.175 2.825\"/>"},"person-add-rounded":{"body":"<path fill=\"currentColor\" d=\"M18 11h-2q-.425 0-.712-.288T15 10t.288-.712T16 9h2V7q0-.425.288-.712T19 6t.713.288T20 7v2h2q.425 0 .713.288T23 10t-.288.713T22 11h-2v2q0 .425-.288.713T19 14t-.712-.288T18 13zm-11.825-.175Q5 9.65 5 8t1.175-2.825T9 4t2.825 1.175T13 8t-1.175 2.825T9 12t-2.825-1.175M1 18v-.8q0-.85.438-1.562T2.6 14.55q1.55-.775 3.15-1.162T9 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T17 17.2v.8q0 .825-.587 1.413T15 20H3q-.825 0-1.412-.587T1 18\"/>"},"person-remove-rounded":{"body":"<path fill=\"currentColor\" d=\"M17 9h4q.425 0 .713.288T22 10t-.288.713T21 11h-4q-.425 0-.712-.288T16 10t.288-.712T17 9M6.175 10.825Q5 9.65 5 8t1.175-2.825T9 4t2.825 1.175T13 8t-1.175 2.825T9 12t-2.825-1.175M1 18v-.8q0-.85.438-1.562T2.6 14.55q1.55-.775 3.15-1.162T9 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T17 17.2v.8q0 .825-.587 1.413T15 20H3q-.825 0-1.412-.587T1 18\"/>"},"apartment-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V9q0-.825.588-1.412T5 7h2V5q0-.825.588-1.412T9 3h6q.825 0 1.413.588T17 5v6h2q.825 0 1.413.588T21 13v6q0 .825-.587 1.413T19 21h-6v-4h-2v4zm0-2h2v-2H5zm0-4h2v-2H5zm0-4h2V9H5zm4 4h2v-2H9zm0-4h2V9H9zm0-4h2V5H9zm4 8h2v-2h-2zm0-4h2V9h-2zm0-4h2V5h-2zm4 12h2v-2h-2zm0-4h2v-2h-2z\"/>"},"draft-rounded":{"body":"<path fill=\"currentColor\" d=\"M6 22q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h7.175q.4 0 .763.15t.637.425l4.85 4.85q.275.275.425.638t.15.762V20q0 .825-.587 1.413T18 22zm7-14q0 .425.288.713T14 9h4l-5-5z\"/>"},"description-rounded":{"body":"<path fill=\"currentColor\" d=\"M9 18h6q.425 0 .713-.288T16 17t-.288-.712T15 16H9q-.425 0-.712.288T8 17t.288.713T9 18m0-4h6q.425 0 .713-.288T16 13t-.288-.712T15 12H9q-.425 0-.712.288T8 13t.288.713T9 14m-3 8q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h7.175q.4 0 .763.15t.637.425l4.85 4.85q.275.275.425.638t.15.762V20q0 .825-.587 1.413T18 22zm7-14q0 .425.288.713T14 9h4l-5-5z\"/>"},"code-rounded":{"body":"<path fill=\"currentColor\" d=\"M4.825 12.025L8.7 15.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-4.6-4.6q-.15-.15-.213-.325T2.426 12t.063-.375t.212-.325l4.6-4.6q.3-.3.713-.3t.712.3t.3.713t-.3.712zm14.35-.05L15.3 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.3.3-.7.288t-.7-.313t-.3-.712t.3-.713z\"/>"},"table-chart":{"body":"<path fill=\"currentColor\" d=\"M3 8V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v3zm2 13q-.825 0-1.412-.587T3 19v-9h4.5v11zm11.5 0V10H21v9q0 .825-.587 1.413T19 21zm-7 0V10h5v11z\"/>"},"image-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm2-4h10q.3 0 .45-.275t-.05-.525l-2.75-3.675q-.15-.2-.4-.2t-.4.2L11.25 16L9.4 13.525q-.15-.2-.4-.2t-.4.2l-2 2.675q-.2.25-.05.525T7 17\"/>"},"folder-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h5.175q.4 0 .763.15t.637.425L12 6h8q.825 0 1.413.588T22 8v10q0 .825-.587 1.413T20 20z\"/>"},"folder-open-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h5.175q.4 0 .763.15t.637.425L12 6h9q.425 0 .713.288T22 7t-.288.713T21 8H7.85q-1.55 0-2.7.975T4 11.45V18l1.975-6.575q.2-.65.738-1.037T7.9 10h12.9q1.025 0 1.613.813t.312 1.762l-1.8 6q-.2.65-.737 1.038T19 20z\"/>"},"drive-file-move-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h5.175q.4 0 .763.15t.637.425L12 6h8q.825 0 1.413.588T22 8v10q0 .825-.587 1.413T20 20zm8.2-6l-.925.925q-.275.275-.275.7t.275.7t.7.275t.7-.275L15.3 13.7q.3-.3.3-.7t-.3-.7l-2.625-2.625q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7L12.2 12H9q-.425 0-.712.288T8 13t.288.713T9 14z\"/>"},"view-kanban-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zM7.288 7.288Q7 7.575 7 8v8q0 .425.288.713T8 17t.713-.288T9 16V8q0-.425-.288-.712T8 7t-.712.288m8 0Q15 7.575 15 8v6q0 .425.288.713T16 15t.713-.288T17 14V8q0-.425-.288-.712T16 7t-.712.288m-4 0Q11 7.575 11 8v3q0 .425.288.713T12 12t.713-.288T13 11V8q0-.425-.288-.712T12 7t-.712.288\"/>"},"archive-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V6.525q0-.35.113-.675t.337-.6L4.7 3.725q.275-.35.687-.538T6.25 3h11.5q.45 0 .863.188t.687.537l1.25 1.525q.225.275.338.6t.112.675V19q0 .825-.587 1.413T19 21zm.4-15h13.2l-.85-1H6.25zm5.888 4.288Q11 10.575 11 11v3.2l-.9-.9q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7l2.6 2.6q.3.3.7.3t.7-.3l2.6-2.6q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275l-.9.9V11q0-.425-.288-.712T12 10t-.712.288\"/>"},"unarchive-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.713 17.388Q13 17.1 13 16.675v-3.2l.9.9q.275.275.7.275t.7-.275t.275-.7t-.275-.7L12.7 10.4q-.3-.3-.7-.3t-.7.3l-2.6 2.575q-.275.275-.275.7t.275.7t.7.275t.7-.275l.9-.9v3.2q0 .425.288.713t.712.287t.713-.288M5 21q-.825 0-1.412-.587T3 19V6.525q0-.35.113-.675t.337-.6L4.7 3.725q.275-.35.687-.538T6.25 3h11.5q.45 0 .863.188t.687.537l1.25 1.525q.225.275.338.6t.112.675V19q0 .825-.587 1.413T19 21zm.4-15h13.2l-.85-1H6.25z\"/>"},"menu-book-rounded":{"body":"<path fill=\"currentColor\" d=\"M13 17.05q1.1-.525 2.213-.788T17.5 16q.9 0 1.763.15T21 16.6V6.7q-.825-.35-1.713-.525T17.5 6q-1.175 0-2.325.3T13 7.2zm-1.662 2.338q-.313-.088-.588-.238q-.975-.575-2.05-.862T6.5 18q-1.05 0-2.062.275T2.5 19.05q-.525.275-1.012-.025T1 18.15V6.1q0-.275.138-.525T1.55 5.2q1.175-.575 2.413-.888T6.5 4q1.45 0 2.838.375T12 5.5q1.275-.75 2.663-1.125T17.5 4q1.3 0 2.538.313t2.412.887q.275.125.413.375T23 6.1v12.05q0 .575-.487.875t-1.013.025q-.925-.5-1.937-.775T17.5 18q-1.125 0-2.2.288t-2.05.862q-.275.15-.587.238t-.663.087t-.663-.088M14 8.776q0-.225.163-.462T14.525 8q.725-.25 1.45-.375T17.5 7.5q.5 0 .988.063t.962.162q.225.05.388.25t.162.45q0 .425-.275.625t-.7.1q-.35-.075-.737-.112T17.5 9q-.65 0-1.275.125t-1.2.325q-.45.175-.737-.025T14 8.775m0 5.5q0-.225.163-.462t.362-.313q.725-.25 1.45-.375T17.5 13q.5 0 .988.063t.962.162q.225.05.388.25t.162.45q0 .425-.275.625t-.7.1q-.35-.075-.737-.112T17.5 14.5q-.65 0-1.275.113t-1.2.312q-.45.175-.737-.012T14 14.275m0-2.75q0-.225.163-.462t.362-.313q.725-.25 1.45-.375t1.525-.125q.5 0 .988.063t.962.162q.225.05.388.25t.162.45q0 .425-.275.625t-.7.1q-.35-.075-.737-.112t-.788-.038q-.65 0-1.275.125t-1.2.325q-.45.175-.737-.025t-.288-.65\"/>"},"sticky-note-2-rounded":{"body":"<path fill=\"currentColor\" d=\"m14 19l5-5h-4q-.425 0-.712.288T14 15zm-9 2q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v9.175q0 .4-.15.763t-.425.637l-4.85 4.85q-.275.275-.637.425t-.763.15zm3-7h3q.425 0 .713-.288T12 13t-.288-.712T11 12H8q-.425 0-.712.288T7 13t.288.713T8 14m0-4h8q.425 0 .713-.288T17 9t-.288-.712T16 8H8q-.425 0-.712.288T7 9t.288.713T8 10\"/>"},"assignment-turned-in-rounded":{"body":"<path fill=\"currentColor\" d=\"M10.6 13.25L8.45 11.1q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7l2.85 2.85q.3.3.7.3t.7-.3l5.65-5.65q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h4.2q.325-.9 1.088-1.45T12 1t1.713.55T14.8 3H19q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm7.538-16.963q.212-.212.212-.537t-.213-.537T12 2.75t-.537.213t-.213.537t.213.538t.537.212t.538-.213\"/>"},"grid-view-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 11q-.825 0-1.412-.587T3 9V5q0-.825.588-1.412T5 3h4q.825 0 1.413.588T11 5v4q0 .825-.587 1.413T9 11zm0 10q-.825 0-1.412-.587T3 19v-4q0-.825.588-1.412T5 13h4q.825 0 1.413.588T11 15v4q0 .825-.587 1.413T9 21zm10-10q-.825 0-1.412-.587T13 9V5q0-.825.588-1.412T15 3h4q.825 0 1.413.588T21 5v4q0 .825-.587 1.413T19 11zm0 10q-.825 0-1.412-.587T13 19v-4q0-.825.588-1.412T15 13h4q.825 0 1.413.588T21 15v4q0 .825-.587 1.413T19 21z\"/>"},"view-list-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 9q-.425 0-.712-.288T3 8V6q0-.425.288-.712T4 5h2q.425 0 .713.288T7 6v2q0 .425-.288.713T6 9zm5 0q-.425 0-.712-.288T8 8V6q0-.425.288-.712T9 5h11q.425 0 .713.288T21 6v2q0 .425-.288.713T20 9zm0 5q-.425 0-.712-.288T8 13v-2q0-.425.288-.712T9 10h11q.425 0 .713.288T21 11v2q0 .425-.288.713T20 14zm0 5q-.425 0-.712-.288T8 18v-2q0-.425.288-.712T9 15h11q.425 0 .713.288T21 16v2q0 .425-.288.713T20 19zm-5 0q-.425 0-.712-.288T3 18v-2q0-.425.288-.712T4 15h2q.425 0 .713.288T7 16v2q0 .425-.288.713T6 19zm0-5q-.425 0-.712-.288T3 13v-2q0-.425.288-.712T4 10h2q.425 0 .713.288T7 11v2q0 .425-.288.713T6 14z\"/>"},"dashboard-rounded":{"body":"<path fill=\"currentColor\" d=\"M14 9q-.425 0-.712-.288T13 8V4q0-.425.288-.712T14 3h6q.425 0 .713.288T21 4v4q0 .425-.288.713T20 9zM4 13q-.425 0-.712-.288T3 12V4q0-.425.288-.712T4 3h6q.425 0 .713.288T11 4v8q0 .425-.288.713T10 13zm10 8q-.425 0-.712-.288T13 20v-8q0-.425.288-.712T14 11h6q.425 0 .713.288T21 12v8q0 .425-.288.713T20 21zM4 21q-.425 0-.712-.288T3 20v-4q0-.425.288-.712T4 15h6q.425 0 .713.288T11 16v4q0 .425-.288.713T10 21z\"/>"},"view-column":{"body":"<path fill=\"currentColor\" d=\"M5 19q-.825 0-1.412-.587T3 17V7q0-.825.588-1.412T5 5h1.325q.825 0 1.413.588T8.325 7v10q0 .825-.587 1.413T6.325 19zm6.325 0q-.825 0-1.412-.587T9.325 17V7q0-.825.588-1.412T11.325 5h1.325q.825 0 1.413.588T14.65 7v10q0 .825-.587 1.413T12.65 19zm6.325 0q-.825 0-1.412-.587T15.65 17V7q0-.825.588-1.412T17.65 5h1.325q.825 0 1.413.588T20.975 7v10q0 .825-.587 1.413T18.975 19z\"/>"},"checklist-rounded":{"body":"<path fill=\"currentColor\" d=\"m5.525 16.175l3.55-3.55q.3-.3.7-.288t.7.313q.275.3.275.7t-.275.7L6.25 18.3q-.3.3-.7.3t-.7-.3L2.7 16.15q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275zm0-8l3.55-3.55q.3-.3.7-.288t.7.313q.275.3.275.7t-.275.7L6.25 10.3q-.3.3-.7.3t-.7-.3L2.7 8.15q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275zM14 17q-.425 0-.712-.288T13 16t.288-.712T14 15h7q.425 0 .713.288T22 16t-.288.713T21 17zm0-8q-.425 0-.712-.288T13 8t.288-.712T14 7h7q.425 0 .713.288T22 8t-.288.713T21 9z\"/>"},"account-tree-rounded":{"body":"<path fill=\"currentColor\" d=\"M15 19v-1h-2q-.825 0-1.412-.587T11 16V8H9v1q0 .825-.587 1.413T7 11H4q-.825 0-1.412-.587T2 9V5q0-.825.588-1.412T4 3h3q.825 0 1.413.588T9 5v1h6V5q0-.825.588-1.412T17 3h3q.825 0 1.413.588T22 5v4q0 .825-.587 1.413T20 11h-3q-.825 0-1.412-.587T15 9V8h-2v8h2v-1q0-.825.588-1.412T17 13h3q.825 0 1.413.588T22 15v4q0 .825-.587 1.413T20 21h-3q-.825 0-1.412-.587T15 19\"/>"},"check-box-rounded":{"body":"<path fill=\"currentColor\" d=\"m10.6 13.4l-2.15-2.15q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7L9.9 15.5q.3.3.7.3t.7-.3l5.65-5.65q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21z\"/>"},"square-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21z\"/>"},"circle":{"body":"<path fill=\"currentColor\" d=\"M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"schedule-rounded":{"body":"<path fill=\"currentColor\" d=\"M13 11.6V8q0-.425-.288-.712T12 7t-.712.288T11 8v3.975q0 .2.075.388t.225.337l3.3 3.3q.275.275.7.275T16 16t.275-.7t-.275-.7zM12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"timer-rounded":{"body":"<path fill=\"currentColor\" d=\"M10 3q-.425 0-.712-.288T9 2t.288-.712T10 1h4q.425 0 .713.288T15 2t-.288.713T14 3zm2.713 10.713Q13 13.425 13 13V9q0-.425-.288-.712T12 8t-.712.288T11 9v4q0 .425.288.713T12 14t.713-.288m-4.2 7.576q-1.638-.713-2.863-1.938t-1.937-2.863T3 13t.713-3.488T5.65 6.65t2.863-1.937T12 4q1.55 0 2.975.5t2.675 1.45l.7-.7q.275-.275.7-.275t.7.275t.275.7t-.275.7l-.7.7Q20 8.6 20.5 10.025T21 13q0 1.85-.713 3.488T18.35 19.35t-2.863 1.938T12 22t-3.488-.712\"/>"},"history-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 21q-3.15 0-5.575-1.912T3.275 14.2q-.1-.375.15-.687t.675-.363q.4-.05.725.15t.45.6q.6 2.25 2.475 3.675T12 19q2.925 0 4.963-2.037T19 12t-2.037-4.962T12 5q-1.725 0-3.225.8T6.25 8H8q.425 0 .713.288T9 9t-.288.713T8 10H4q-.425 0-.712-.288T3 9V5q0-.425.288-.712T4 4t.713.288T5 5v1.35q1.275-1.6 3.113-2.475T12 3q1.875 0 3.513.713t2.85 1.924t1.925 2.85T21 12t-.712 3.513t-1.925 2.85t-2.85 1.925T12 21m1-9.4l2.5 2.5q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-2.8-2.8q-.15-.15-.225-.337T11 11.975V8q0-.425.288-.712T12 7t.713.288T13 8z\"/>"},"calendar-today-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5z\"/>"},"calendar-month-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5zm7-6q-.425 0-.712-.288T11 13t.288-.712T12 12t.713.288T13 13t-.288.713T12 14m-4.712-.288Q7 13.426 7 13t.288-.712T8 12t.713.288T9 13t-.288.713T8 14t-.712-.288M16 14q-.425 0-.712-.288T15 13t.288-.712T16 12t.713.288T17 13t-.288.713T16 14m-4 4q-.425 0-.712-.288T11 17t.288-.712T12 16t.713.288T13 17t-.288.713T12 18m-4.712-.288Q7 17.426 7 17t.288-.712T8 16t.713.288T9 17t-.288.713T8 18t-.712-.288M16 18q-.425 0-.712-.288T15 17t.288-.712T16 16t.713.288T17 17t-.288.713T16 18\"/>"},"event-upcoming-rounded":{"body":"<path fill=\"currentColor\" d=\"M19 22h-3q-.425 0-.712-.288T15 21t.288-.712T16 20h3V10H5v3q0 .425-.288.713T4 14t-.712-.288T3 13V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22m-9.825-2H2q-.425 0-.712-.288T1 19t.288-.712T2 18h7.175L7.3 16.1q-.275-.275-.287-.687T7.3 14.7q.275-.275.7-.275t.7.275l3.6 3.6q.3.3.3.7t-.3.7l-3.6 3.6q-.275.275-.687.288T7.3 23.3q-.275-.275-.275-.7t.275-.7z\"/>"},"calendar-add-on-rounded":{"body":"<path fill=\"currentColor\" d=\"M17 19h-2q-.425 0-.712-.288T14 18t.288-.712T15 17h2v-2q0-.425.288-.712T18 14t.713.288T19 15v2h2q.425 0 .713.288T22 18t-.288.713T21 19h-2v2q0 .425-.288.713T18 22t-.712-.288T17 21zM5 20q-.825 0-1.412-.587T3 18V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h6V3q0-.425.288-.712T15 2t.713.288T16 3v1h1q.825 0 1.413.588T19 6v5q0 .425-.288.713T18 12t-.712-.288T17 11v-1H5v8h6q.425 0 .713.288T12 19t-.288.713T11 20z\"/>"},"play-arrow-rounded":{"body":"<path fill=\"currentColor\" d=\"M8 17.175V6.825q0-.425.3-.713t.7-.287q.125 0 .263.037t.262.113l8.15 5.175q.225.15.338.375t.112.475t-.112.475t-.338.375l-8.15 5.175q-.125.075-.262.113T9 18.175q-.4 0-.7-.288t-.3-.712\"/>"},"pause-rounded":{"body":"<path fill=\"currentColor\" d=\"M16 19q-.825 0-1.412-.587T14 17V7q0-.825.588-1.412T16 5t1.413.588T18 7v10q0 .825-.587 1.413T16 19m-8 0q-.825 0-1.412-.587T6 17V7q0-.825.588-1.412T8 5t1.413.588T10 7v10q0 .825-.587 1.413T8 19\"/>"},"mic-rounded":{"body":"<path fill=\"currentColor\" d=\"M9.875 13.125Q9 12.25 9 11V5q0-1.25.875-2.125T12 2t2.125.875T15 5v6q0 1.25-.875 2.125T12 14t-2.125-.875M11 20v-2.075q-2.3-.325-3.937-1.95t-1.988-3.95q-.05-.425.225-.725T6 11t.713.288T7.1 12q.35 1.75 1.738 2.875T12 16q1.8 0 3.175-1.137T16.9 12q.1-.425.388-.712T18 11t.7.3t.225.725q-.35 2.275-1.975 3.925T13 17.925V20q0 .425-.288.713T12 21t-.712-.288T11 20\"/>"},"mic-off-rounded":{"body":"<path fill=\"currentColor\" d=\"M16.8 14.575q-.35-.2-.45-.612t.1-.763q.175-.275.288-.587t.162-.638q.1-.425.388-.7T18 11t.7.3t.225.725q-.075.575-.262 1.125t-.488 1.05q-.2.35-.612.463t-.763-.088m-3.5-4.125L9.575 6.725Q9.3 6.45 9.15 6.088T9 5.325V5q0-1.25.875-2.125T12 2t2.125.875T15 5v4.725q0 .675-.612.938T13.3 10.45M11 20v-2.1q-2.3-.3-3.937-1.925t-1.988-3.95q-.05-.425.225-.725T6 11t.713.288T7.1 12q.35 1.75 1.738 2.875T12 16q.85 0 1.613-.262T15 15l1.425 1.425q-.725.575-1.588.963T13 17.9V20q0 .425-.288.713T12 21t-.712-.288T11 20m8.1 1.9l-17-17q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l17 17q.275.275.275.7t-.275.7t-.7.275t-.7-.275\"/>"},"videocam-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h12q.825 0 1.413.588T18 6v4.5l3.15-3.15q.25-.25.55-.125t.3.475v8.6q0 .35-.3.475t-.55-.125L18 13.5V18q0 .825-.587 1.413T16 20z\"/>"},"photo-camera-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 17.5q1.875 0 3.188-1.312T16.5 13t-1.312-3.187T12 8.5T8.813 9.813T7.5 13t1.313 3.188T12 17.5m0-2q-1.05 0-1.775-.725T9.5 13t.725-1.775T12 10.5t1.775.725T14.5 13t-.725 1.775T12 15.5M4 21q-.825 0-1.412-.587T2 19V7q0-.825.588-1.412T4 5h3.15L8.4 3.65q.275-.3.663-.475T9.875 3h4.25q.425 0 .813.175t.662.475L16.85 5H20q.825 0 1.413.588T22 7v12q0 .825-.587 1.413T20 21z\"/>"},"volume-up-rounded":{"body":"<path fill=\"currentColor\" d=\"M19 11.975q0-2.075-1.1-3.787t-2.95-2.563q-.375-.175-.55-.537t-.05-.738q.15-.4.538-.575t.787 0Q18.1 4.85 19.55 7.063T21 11.974t-1.45 4.913t-3.875 3.287q-.4.175-.788 0t-.537-.575q-.125-.375.05-.737t.55-.538q1.85-.85 2.95-2.562t1.1-3.788M7 15H4q-.425 0-.712-.288T3 14v-4q0-.425.288-.712T4 9h3l3.3-3.3q.475-.475 1.088-.213t.612.938v11.15q0 .675-.612.938T10.3 18.3zm9.5-3q0 1.05-.475 1.988t-1.25 1.537q-.25.15-.513.013T14 15.1V8.85q0-.3.263-.437t.512.012q.775.625 1.25 1.575t.475 2\"/>"},"radio-button-checked":{"body":"<path fill=\"currentColor\" d=\"M15.538 15.538Q17 14.075 17 12t-1.463-3.537T12 7T8.463 8.463T7 12t1.463 3.538T12 17t3.538-1.463M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20\"/>"},"bolt-rounded":{"body":"<path fill=\"currentColor\" d=\"M9 15H5.9q-.6 0-.888-.537t.063-1.038l7.475-10.75q.25-.35.65-.487t.825.012t.625.525t.15.8L14 10h3.875q.65 0 .913.575t-.163 1.075L10.4 21.5q-.275.325-.675.425t-.775-.075t-.587-.537t-.163-.788z\"/>"},"cloud":{"body":"<path fill=\"currentColor\" d=\"M6.5 20q-2.275 0-3.887-1.575T1 14.575q0-1.95 1.175-3.475T5.25 9.15q.625-2.3 2.5-3.725T12 4q2.925 0 4.963 2.038T19 11q1.725.2 2.863 1.488T23 15.5q0 1.875-1.312 3.188T18.5 20z\"/>"},"hard-drive":{"body":"<path fill=\"currentColor\" d=\"M17 16q.625 0 1.063-.425T18.5 14.5q0-.625-.437-1.062T17 13q-.65 0-1.075.438T15.5 14.5q0 .65.425 1.075T17 16M2 9l3.4-3.4q.275-.275.638-.437T6.825 5H17.15q.425 0 .788.163t.637.437L22 9zm2 10q-.85 0-1.425-.575T2 17v-6h20v6q0 .85-.587 1.425T20 19z\"/>"},"dns":{"body":"<path fill=\"currentColor\" d=\"M7.5 6q-.625 0-1.062.438T6 7.5t.438 1.063T7.5 9t1.063-.437T9 7.5t-.437-1.062T7.5 6m0 10q-.625 0-1.062.438T6 17.5t.438 1.063T7.5 19t1.063-.437T9 17.5t-.437-1.062T7.5 16M4 3h16q.425 0 .713.288T21 4v7q0 .425-.288.713T20 12H4q-.425 0-.712-.288T3 11V4q0-.425.288-.712T4 3m0 10h16q.425 0 .713.288T21 14v7q0 .425-.288.713T20 22H4q-.425 0-.712-.288T3 21v-7q0-.425.288-.712T4 13\"/>"},"database":{"body":"<path fill=\"currentColor\" d=\"M18.375 9.825Q21 8.65 21 7t-2.625-2.825T12 3T5.625 4.175T3 7t2.625 2.825T12 11t6.375-1.175m-3.812 3.463q1.537-.213 2.962-.688t2.45-1.237T21 9.5V12q0 1.1-1.025 1.863t-2.45 1.237t-2.962.688T12 16t-2.562-.213t-2.963-.687t-2.45-1.237T3 12V9.5q0 1.1 1.025 1.863t2.45 1.237t2.963.688T12 13.5t2.563-.213m0 5q1.537-.212 2.962-.687t2.45-1.237T21 14.5V17q0 1.1-1.025 1.863t-2.45 1.237t-2.962.688T12 21t-2.562-.213t-2.963-.687t-2.45-1.237T3 17v-2.5q0 1.1 1.025 1.863t2.45 1.237t2.963.688T12 18.5t2.563-.213\"/>"},"memory-rounded":{"body":"<path fill=\"currentColor\" d=\"M9 14v-4q0-.425.288-.712T10 9h4q.425 0 .713.288T15 10v4q0 .425-.288.713T14 15h-4q-.425 0-.712-.288T9 14m0 6v-1H7q-.825 0-1.412-.587T5 17v-2H4q-.425 0-.712-.288T3 14t.288-.712T4 13h1v-2H4q-.425 0-.712-.288T3 10t.288-.712T4 9h1V7q0-.825.588-1.412T7 5h2V4q0-.425.288-.712T10 3t.713.288T11 4v1h2V4q0-.425.288-.712T14 3t.713.288T15 4v1h2q.825 0 1.413.588T19 7v2h1q.425 0 .713.288T21 10t-.288.713T20 11h-1v2h1q.425 0 .713.288T21 14t-.288.713T20 15h-1v2q0 .825-.587 1.413T17 19h-2v1q0 .425-.288.713T14 21t-.712-.288T13 20v-1h-2v1q0 .425-.288.713T10 21t-.712-.288T9 20m8-3V7H7v10z\"/>"},"terminal-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm0-2h16V8H4zm4.675-5l-1.9-1.9q-.3-.3-.288-.7t.313-.7q.3-.275.7-.287t.7.287l2.6 2.6q.3.3.3.7t-.3.7l-2.6 2.6q-.275.275-.687.288T6.8 16.3q-.275-.275-.275-.7t.275-.7zM13 17q-.425 0-.712-.288T12 16t.288-.712T13 15h4q.425 0 .713.288T18 16t-.288.713T17 17z\"/>"},"fork-right-rounded":{"body":"<path fill=\"currentColor\" d=\"M9.288 20.713Q9 20.425 9 20V6.825l-.9.875q-.275.275-.7.275T6.7 7.7q-.3-.3-.288-.713T6.7 6.3l2.6-2.6q.3-.3.7-.3t.7.3l2.6 2.6q.3.3.287.7t-.287.7q-.3.3-.7.313t-.7-.288l-.9-.9v6.525q.875-.775 1.975-1.112t2.2-.338q.275 0 .525.025t.475.075l-.875-.9q-.275-.275-.275-.7t.275-.7q.3-.3.713-.287t.687.287l2.6 2.6q.3.3.3.7t-.3.7l-2.6 2.6q-.275.275-.7.275t-.7-.275q-.3-.3-.3-.712t.275-.688l.9-.9q-.275-.05-.55-.088t-.55-.037q-1.35 0-2.488.763T11 17v3q0 .425-.288.713T10 21t-.712-.288\"/>"},"power-settings-new-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12q0-1.825.613-3.463T4.3 5.6q.275-.35.663-.325t.662.275t.363.65t-.263.825q-.8 1.025-1.263 2.288T4 12q0 3.35 2.325 5.675T12 20t5.675-2.325T20 12q0-1.425-.462-2.687t-1.263-2.288q-.35-.425-.262-.825t.362-.65t.663-.275t.662.325q1.075 1.3 1.688 2.938T22 12q0 2.075-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m-.712-9.287Q11 12.425 11 12V3q0-.425.288-.712T12 2t.713.288T13 3v9q0 .425-.288.713T12 13t-.712-.288\"/>"},"extension-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.85 0-1.425-.575T3 19v-3.125q0-.275.2-.488t.475-.262q.975-.2 1.65-.913T6 12.5q0-.975-.675-1.675T3.675 9.9Q3.4 9.825 3.2 9.612T3 9.125V6q0-.825.588-1.412T5 4h3.05q.175-1.275 1.15-2.137T11.5 1q1.3 0 2.275.863T14.95 4H18q.825 0 1.413.588T20 6v3.35q.9.45 1.45 1.3T22 12.5q0 1.025-.55 1.875T20 15.65V19q0 .85-.587 1.425T18 21z\"/>"},"widgets-rounded":{"body":"<path fill=\"currentColor\" d=\"M15.95 12.3L11.7 8.05q-.15-.15-.212-.325t-.063-.375t.063-.375t.212-.325l4.25-4.25q.15-.15.325-.212t.375-.063t.375.063t.325.212l4.25 4.25q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.25 4.25q-.15.15-.325.213t-.375.062t-.375-.062t-.325-.213M3 10V4q0-.425.288-.712T4 3h6q.425 0 .713.288T11 4v6q0 .425-.288.713T10 11H4q-.425 0-.712-.288T3 10m10 10v-6q0-.425.288-.712T14 13h6q.425 0 .713.288T21 14v6q0 .425-.288.713T20 21h-6q-.425 0-.712-.288T13 20M3 20v-6q0-.425.288-.712T4 13h6q.425 0 .713.288T11 14v6q0 .425-.288.713T10 21H4q-.425 0-.712-.288T3 20\"/>"},"inventory-2-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 22q-.825 0-1.412-.587T3 20V8.725q-.45-.275-.725-.712T2 7V4q0-.825.588-1.412T4 2h16q.825 0 1.413.588T22 4v3q0 .575-.275 1.013T21 8.724V20q0 .825-.587 1.413T19 22zM4 7h16V4H4zm6 7h4q.425 0 .713-.288T15 13t-.288-.712T14 12h-4q-.425 0-.712.288T9 13t.288.713T10 14\"/>"},"layers-rounded":{"body":"<path fill=\"currentColor\" d=\"M4.025 14.85q-.4-.3-.387-.787t.412-.788q.275-.2.6-.2t.6.2L12 18.5l6.75-5.225q.275-.2.6-.2t.6.2q.4.3.413.787t-.388.788l-6.75 5.25q-.55.425-1.225.425t-1.225-.425zm6.75.2l-5.75-4.475Q4.25 9.975 4.25 9t.775-1.575l5.75-4.475q.55-.425 1.225-.425t1.225.425l5.75 4.475q.775.6.775 1.575t-.775 1.575l-5.75 4.475q-.55.425-1.225.425t-1.225-.425\"/>"},"public":{"body":"<path fill=\"currentColor\" d=\"M8.1 21.213q-1.825-.788-3.175-2.138T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22t-3.9-.788M11 19.95V18q-.825 0-1.412-.587T9 16v-1l-4.8-4.8q-.075.45-.137.9T4 12q0 3.025 1.988 5.3T11 19.95m6.9-2.55q1.025-1.125 1.563-2.512T20 12q0-2.45-1.362-4.475T15 4.6V5q0 .825-.587 1.413T13 7h-2v2q0 .425-.288.713T10 10H8v2h6q.425 0 .713.288T15 13v3h1q.65 0 1.175.388T17.9 17.4\"/>"},"link-rounded":{"body":"<path fill=\"currentColor\" d=\"M7 17q-2.075 0-3.537-1.463T2 12t1.463-3.537T7 7h3q.425 0 .713.288T11 8t-.288.713T10 9H7q-1.25 0-2.125.875T4 12t.875 2.125T7 15h3q.425 0 .713.288T11 16t-.288.713T10 17zm2-4q-.425 0-.712-.288T8 12t.288-.712T9 11h6q.425 0 .713.288T16 12t-.288.713T15 13zm5 4q-.425 0-.712-.288T13 16t.288-.712T14 15h3q1.25 0 2.125-.875T20 12t-.875-2.125T17 9h-3q-.425 0-.712-.288T13 8t.288-.712T14 7h3q2.075 0 3.538 1.463T22 12t-1.463 3.538T17 17z\"/>"},"build-rounded":{"body":"<path fill=\"currentColor\" d=\"M9 15q-2.5 0-4.25-1.75T3 9q0-.5.075-1t.275-.95q.125-.25.313-.375t.412-.175t.463.013t.437.262L7.6 9.4l1.8-1.8l-2.625-2.625q-.2-.2-.262-.437T6.5 4.075t.175-.413t.375-.312q.45-.2.95-.275T9 3q2.5 0 4.25 1.75T15 9q0 .575-.1 1.088t-.3 1.012l5.05 5q.725.725.725 1.775t-.725 1.775t-1.775.725t-1.775-.75l-5-5.025q-.5.2-1.012.3T9 15\"/>"},"science":{"body":"<path fill=\"currentColor\" d=\"M5 21q-1.275 0-1.812-1.137t.262-2.113L9 11V5H8q-.425 0-.712-.288T7 4t.288-.712T8 3h8q.425 0 .713.288T17 4t-.288.713T16 5h-1v6l5.55 6.75q.8.975.263 2.113T19 21z\"/>"},"rocket-launch-rounded":{"body":"<path fill=\"currentColor\" d=\"M6.125 12.15q.65-1.65 1.563-3.175T9.75 6.1l-1.3-.275q-.5-.1-.975.05t-.825.5L3.5 9.525q-.375.375-.288.9t.588.725zm14.7-9.75q-2.65-.125-5.037 1.025T11.525 6.45q-1.2 1.2-2.113 2.6T7.826 12q-.125.325-.125.663t.25.587l3.125 3.125q.25.25.588.25t.662-.125q1.55-.675 2.95-1.588t2.6-2.112q1.875-1.875 3.025-4.262T21.925 3.5q0-.2-.1-.4t-.25-.35t-.35-.25t-.4-.1M13.9 8.438q0-.838.575-1.413t1.413-.575t1.412.575t.575 1.413T17.3 9.85t-1.412.575t-1.413-.575t-.575-1.412M12.175 18.2l1 2.325q.2.5.725.6t.9-.275l3.15-3.15q.35-.35.5-.837t.05-.988l-.25-1.3q-1.375 1.15-2.887 2.063T12.175 18.2M4.05 16.05q.875-.875 2.125-.888t2.125.863t.875 2.125t-.875 2.125q-1.2 1.2-2.838 1.425t-3.287.45q.225-1.65.463-3.287T4.05 16.05\"/>"},"smart-toy-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 15q-1.25 0-2.125-.875T1 12t.875-2.125T4 9V7q0-.825.588-1.412T6 5h3q0-1.25.875-2.125T12 2t2.125.875T15 5h3q.825 0 1.413.588T20 7v2q1.25 0 2.125.875T23 12t-.875 2.125T20 15v4q0 .825-.587 1.413T18 21H6q-.825 0-1.412-.587T4 19zm6.063-2.437q.437-.438.437-1.063t-.437-1.062T9 10t-1.062.438T7.5 11.5t.438 1.063T9 13t1.063-.437m6 0q.437-.438.437-1.063t-.437-1.062T15 10t-1.062.438T13.5 11.5t.438 1.063T15 13t1.063-.437M9 17h6q.425 0 .713-.288T16 16t-.288-.712T15 15H9q-.425 0-.712.288T8 16t.288.713T9 17\"/>"},"psychology-rounded":{"body":"<path fill=\"currentColor\" d=\"m10.85 13.75l.1.8q.025.2.163.325t.337.125h1.1q.2 0 .338-.125t.162-.325l.1-.8q.2-.075.363-.175t.287-.225l.75.325q.175.075.35.025t.275-.225l.55-.95q.1-.175.063-.35t-.188-.3l-.65-.475q.05-.2.05-.4t-.05-.4l.65-.475q.15-.125.188-.3t-.063-.35l-.55-.95q-.1-.175-.275-.225t-.35.025l-.75.325q-.125-.125-.288-.225t-.362-.175l-.1-.8q-.025-.2-.162-.325T12.55 7h-1.1q-.2 0-.337.125t-.163.325l-.1.8q-.2.075-.362.175t-.288.225l-.75-.325Q9.275 8.25 9.1 8.3t-.275.225l-.55.95q-.1.175-.062.35t.187.3l.65.475Q9 10.8 9 11t.05.4l-.65.475q-.15.125-.187.3t.062.35l.55.95q.1.175.275.225t.35-.025l.75-.325q.125.125.288.225t.362.175m.088-1.687Q10.5 11.625 10.5 11t.438-1.062T12 9.5t1.063.438T13.5 11t-.437 1.063T12 12.5t-1.062-.437M7 22q-.425 0-.712-.288T6 21v-3.3q-1.425-1.3-2.212-3.037T3 11q0-3.75 2.625-6.375T12 2q3.125 0 5.538 1.838t3.137 4.787l1.3 5.125q.125.475-.175.863T21 15h-2v3q0 .825-.587 1.413T17 20h-2v1q0 .425-.288.713T14 22z\"/>"},"auto-awesome-rounded":{"body":"<path fill=\"currentColor\" d=\"M19 8.3q-.125 0-.263-.075T18.55 8l-.8-1.75l-1.75-.8q-.15-.05-.225-.187T15.7 5q0-.125.075-.262T16 4.55l1.75-.8l.8-1.75q.05-.15.188-.225T19 1.7q.125 0 .263.075T19.45 2l.8 1.75l1.75.8q.15.05.225.188T22.3 5q0 .125-.075.263T22 5.45l-1.75.8l-.8 1.75q-.05.15-.188.225T19 8.3Zm0 14q-.125 0-.263-.075T18.55 22l-.8-1.75l-1.75-.8q-.15-.05-.225-.188T15.7 19q0-.125.075-.263T16 18.55l1.75-.8l.8-1.75q.05-.15.188-.225T19 15.7q.125 0 .263.075t.187.225l.8 1.75l1.75.8q.15.05.225.188T22.3 19q0 .125-.075.263T22 19.45l-1.75.8l-.8 1.75q-.05.15-.188.225T19 22.3ZM9 18.575q-.275 0-.525-.15T8.1 18l-1.6-3.5L3 12.9q-.275-.125-.425-.375T2.425 12q0-.275.15-.525T3 11.1l3.5-1.6L8.1 6q.125-.275.375-.425T9 5.425q.275 0 .525.15T9.9 6l1.6 3.5l3.5 1.6q.275.125.425.375t.15.525q0 .275-.15.525T15 12.9l-3.5 1.6L9.9 18q-.125.275-.375.425t-.525.15Z\"/>","hidden":true},"auto-fix":{"body":"<path fill=\"currentColor\" d=\"m20 7l-.95-2.05L17 4l2.05-.95L20 1l.95 2.05L23 4l-2.05.95L20 7ZM8.5 7l-.95-2.05L5.5 4l2.05-.95L8.5 1l.95 2.05L11.5 4l-2.05.95L8.5 7ZM20 18.5l-.95-2.05L17 15.5l2.05-.95l.95-2.05l.95 2.05l2.05.95l-2.05.95L20 18.5ZM5.1 21.7l-2.8-2.8q-.3-.3-.3-.725t.3-.725L13.45 6.3q.3-.3.725-.3t.725.3l2.8 2.8q.3.3.3.725t-.3.725L6.55 21.7q-.3.3-.725.3t-.725-.3Zm9.075-10.475l1.4-1.4l-1.4-1.4l-1.4 1.4l1.4 1.4Z\"/>","hidden":true},"lightbulb-rounded":{"body":"<path fill=\"currentColor\" d=\"M10.588 21.413Q10 20.825 10 20h4q0 .825-.587 1.413T12 22t-1.412-.587M9 19q-.425 0-.712-.288T8 18t.288-.712T9 17h6q.425 0 .713.288T16 18t-.288.713T15 19zm-.75-3q-1.725-1.025-2.738-2.75T4.5 9.5q0-3.125 2.188-5.312T12 2t5.313 2.188T19.5 9.5q0 2.025-1.012 3.75T15.75 16z\"/>"},"target":{"body":"<path fill=\"currentColor\" d=\"M8.1 21.213q-1.825-.788-3.175-2.138T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22t-3.9-.788m9.575-3.537Q20 15.35 20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20t5.675-2.325M7.75 16.25Q6 14.5 6 12t1.75-4.25T12 6t4.25 1.75T18 12t-1.75 4.25T12 18t-4.25-1.75m7.075-1.425Q16 13.65 16 12t-1.175-2.825T12 8T9.175 9.175T8 12t1.175 2.825T12 16t2.825-1.175m-4.237-1.412Q10 12.825 10 12t.588-1.412T12 10t1.413.588T14 12t-.587 1.413T12 14t-1.412-.587\"/>"},"trending-up-rounded":{"body":"<path fill=\"currentColor\" d=\"M2.7 17.625q-.3-.3-.288-.712t.288-.688l5.275-5.35Q8.55 10.3 9.4 10.3t1.425.575l2.575 2.6l5.2-5.15H17q-.425 0-.712-.288T16 7.326t.288-.712t.712-.288h4q.425 0 .713.288t.287.712v4q0 .425-.288.713t-.712.287t-.712-.287t-.288-.713v-1.6L14.825 14.9q-.575.575-1.425.575t-1.425-.575L9.4 12.325l-5.3 5.3q-.275.275-.7.275t-.7-.275\"/>"},"bar-chart-rounded":{"body":"<path fill=\"currentColor\" d=\"M17 20q-.425 0-.712-.288T16 19v-5q0-.425.288-.712T17 13h2q.425 0 .713.288T20 14v5q0 .425-.288.713T19 20zm-6 0q-.425 0-.712-.288T10 19V5q0-.425.288-.712T11 4h2q.425 0 .713.288T14 5v14q0 .425-.288.713T13 20zm-6 0q-.425 0-.712-.288T4 19v-9q0-.425.288-.712T5 9h2q.425 0 .713.288T8 10v9q0 .425-.288.713T7 20z\"/>"},"waves-rounded":{"body":"<path fill=\"currentColor\" d=\"M7 18.95q-1.225 0-1.95.55t-2.025.775q-.425.075-.725-.2t-.3-.7t.287-.712T3 18.25q.9-.275 1.7-.763T7 17q.95 0 1.563.213t1.137.474t1.05.488T12 18.4t1.25-.225t1.05-.488t1.15-.475T17 17q1.5 0 2.3.488t1.7.762q.425.125.713.413t.287.712t-.3.7t-.725.2q-1.3-.225-2.025-.775T17 18.95q-.7 0-1.213.213t-1.025.474t-1.15.488T12 20.35t-1.613-.225t-1.15-.488t-1.012-.475T7 18.95m0-4.45q-1.225 0-1.95.55t-2.025.775q-.425.075-.725-.2t-.3-.7t.287-.712T3 13.8q.9-.275 1.7-.763T7 12.55q.95 0 1.563.213t1.137.475t1.05.487t1.25.225t1.25-.225t1.05-.487t1.15-.475T17 12.55q1.5 0 2.3.488t1.7.762q.425.125.713.413t.287.712t-.3.7t-.725.2q-1.3-.225-2.025-.775T17 14.5q-.725 0-1.237.212t-1.026.475t-1.137.488t-1.6.225t-1.612-.225t-1.15-.488t-1.013-.474T7 14.5m0-4.45q-1.225 0-1.95.55t-2.025.775q-.425.075-.725-.2t-.3-.7t.288-.712T3 9.35q.9-.275 1.7-.763T7 8.1q.95 0 1.563.213t1.137.474t1.05.488T12 9.5t1.25-.225t1.05-.488t1.15-.475T17 8.1q1.5 0 2.3.488t1.7.762q.425.125.713.413t.287.712t-.3.7t-.725.2q-1.3-.225-2.025-.775T17 10.05q-.7 0-1.213.212t-1.025.475t-1.15.488T12 11.45t-1.613-.225t-1.15-.488t-1.012-.475T7 10.05M7 5.6q-1.225 0-1.95.55t-2.025.775Q2.6 7 2.3 6.725t-.3-.7t.287-.713T3 4.9q.9-.275 1.7-.763T7 3.65q.95 0 1.563.213t1.137.475t1.05.487T12 5.05t1.25-.225t1.05-.488t1.15-.474T17 3.65q1.5 0 2.3.488T21 4.9q.425.125.713.413t.287.712t-.3.7t-.725.2q-1.3-.225-2.025-.775T17 5.6q-.7 0-1.213.213t-1.025.475t-1.15.487T12 7t-1.613-.225t-1.15-.488t-1.012-.474T7 5.6\"/>"},"air-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.5 20q-.8 0-1.487-.4T8.9 18.5q-.275-.5-.012-1T9.7 17q.325 0 .575.2t.45.45q.125.175.338.263T11.5 18q.425 0 .713-.288T12.5 17t-.288-.712T11.5 16H3q-.425 0-.712-.288T2 15t.288-.712T3 14h8.5q1.25 0 2.125.875T14.5 17t-.875 2.125T11.5 20M3 10q-.425 0-.712-.288T2 9t.288-.712T3 8h12.5q.625 0 1.063-.437T17 6.5t-.437-1.062T15.5 5q-.4 0-.75.188t-.55.537q-.175.3-.425.538t-.6.237q-.5 0-.812-.375t-.163-.8q.35-1.05 1.263-1.687T15.5 3q1.45 0 2.475 1.025T19 6.5t-1.025 2.475T15.5 10zm16.95 7.7q-.5.225-.975-.062T18.5 16.8q0-.35.238-.587t.537-.413q.35-.2.538-.55T20 14.5q0-.625-.437-1.062T18.5 13H3q-.425 0-.712-.288T2 12t.288-.712T3 11h15.5q1.45 0 2.475 1.025T22 14.5q0 1.05-.55 1.913t-1.5 1.287\"/>"},"lock":{"body":"<path fill=\"currentColor\" d=\"M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h1V6q0-2.075 1.463-3.537T12 1t3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm7.413-5.587Q14 15.825 14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17t1.413-.587M9 8h6V6q0-1.25-.875-2.125T12 3t-2.125.875T9 6z\"/>"},"lock-open-rounded":{"body":"<path fill=\"currentColor\" d=\"M6 22q-.825 0-1.412-.587T4 20V10q0-.825.588-1.412T6 8h9V6q0-1.25-.875-2.125T12 3q-1.05 0-1.838.638T9.1 5.225q-.1.35-.413.563T8 6q-.425 0-.712-.275t-.213-.65q.275-1.7 1.662-2.888T12 1q2.075 0 3.538 1.463T17 6v2h1q.825 0 1.413.588T20 10v10q0 .825-.587 1.413T18 22zm7.413-5.587Q14 15.825 14 15t-.587-1.412T12 13t-1.412.588T10 15t.588 1.413T12 17t1.413-.587\"/>"},"key-rounded":{"body":"<path fill=\"currentColor\" d=\"M4.875 14.125Q4 13.25 4 12t.875-2.125T7 9t2.125.875T10 12t-.875 2.125T7 15t-2.125-.875M7 18q1.925 0 3.475-1.1T12.65 14H13l1.3 1.3q.15.15.325.212t.375.063t.375-.062t.325-.213L17 14l1.75 1.375q.15.125.338.187t.387.038t.363-.112t.287-.238l2.25-2.575q.125-.15.188-.325t.062-.375t-.075-.362t-.2-.288L21.325 10.3q-.15-.15-.337-.225T20.6 10h-7.95q-.6-1.7-2.113-2.85T7 6Q4.5 6 2.75 7.75T1 12t1.75 4.25T7 18\"/>"},"shield-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.675 21.875q-.15-.025-.3-.075Q8 20.675 6 17.637T4 11.1V6.375q0-.625.363-1.125t.937-.725l6-2.25q.35-.125.7-.125t.7.125l6 2.25q.575.225.938.725T20 6.375V11.1q0 3.5-2 6.538T12.625 21.8q-.15.05-.3.075T12 21.9t-.325-.025\"/>"},"verified-user-rounded":{"body":"<path fill=\"currentColor\" d=\"m10.95 12.7l-1.4-1.4q-.3-.3-.7-.3t-.7.3t-.3.713t.3.712l2.1 2.125q.3.3.7.3t.7-.3l4.25-4.25q.3-.3.3-.712t-.3-.713t-.712-.3t-.713.3zm.725 9.175q-.15-.025-.3-.075Q8 20.675 6 17.637T4 11.1V6.375q0-.625.363-1.125t.937-.725l6-2.25q.35-.125.7-.125t.7.125l6 2.25q.575.225.938.725T20 6.375V11.1q0 3.5-2 6.538T12.625 21.8q-.15.05-.3.075T12 21.9t-.325-.025\"/>"},"gpp-maybe-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.713 15.713Q13 15.425 13 15t-.288-.712T12 14t-.712.288T11 15t.288.713T12 16t.713-.288m0-4Q13 11.426 13 11V8q0-.425-.288-.712T12 7t-.712.288T11 8v3q0 .425.288.713T12 12t.713-.288m-1.038 10.163q-.15-.025-.3-.075Q8 20.675 6 17.637T4 11.1V6.375q0-.625.363-1.125t.937-.725l6-2.25q.35-.125.7-.125t.7.125l6 2.25q.575.225.938.725T20 6.375V11.1q0 3.5-2 6.538T12.625 21.8q-.15.05-.3.075T12 21.9t-.325-.025\"/>"},"gpp-bad-rounded":{"body":"<path fill=\"currentColor\" d=\"m12 13.4l1.4 1.4q.275.275.7.275t.7-.275t.275-.7t-.275-.7L13.4 12l1.4-1.4q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275L12 10.6l-1.4-1.4q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7l1.4 1.4l-1.4 1.4q-.275.275-.275.7t.275.7t.7.275t.7-.275zm-.325 8.475q-.15-.025-.3-.075Q8 20.675 6 17.637T4 11.1V6.375q0-.625.363-1.125t.937-.725l6-2.25q.35-.125.7-.125t.7.125l6 2.25q.575.225.938.725T20 6.375V11.1q0 3.5-2 6.538T12.625 21.8q-.15.05-.3.075T12 21.9t-.325-.025\"/>"},"logout-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h6q.425 0 .713.288T12 4t-.288.713T11 5H5v14h6q.425 0 .713.288T12 20t-.288.713T11 21zm12.175-8H10q-.425 0-.712-.288T9 12t.288-.712T10 11h7.175L15.3 9.125q-.275-.275-.275-.675t.275-.7t.7-.313t.725.288L20.3 11.3q.3.3.3.7t-.3.7l-3.575 3.575q-.3.3-.712.288t-.713-.313q-.275-.3-.262-.712t.287-.688z\"/>"},"login-rounded":{"body":"<path fill=\"currentColor\" d=\"M13 21q-.425 0-.712-.288T12 20t.288-.712T13 19h6V5h-6q-.425 0-.712-.288T12 4t.288-.712T13 3h6q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm-1.825-8H4q-.425 0-.712-.288T3 12t.288-.712T4 11h7.175L9.3 9.125q-.275-.275-.275-.675t.275-.7t.7-.313t.725.288L14.3 11.3q.3.3.3.7t-.3.7l-3.575 3.575q-.3.3-.712.288T9.3 16.25q-.275-.3-.262-.712t.287-.688z\"/>"},"star-rounded":{"body":"<path fill=\"currentColor\" d=\"m12 17.275l-4.15 2.5q-.275.175-.575.15t-.525-.2t-.35-.437t-.05-.588l1.1-4.725L3.775 10.8q-.25-.225-.312-.513t.037-.562t.3-.45t.55-.225l4.85-.425l1.875-4.45q.125-.3.388-.45t.537-.15t.537.15t.388.45l1.875 4.45l4.85.425q.35.05.55.225t.3.45t.038.563t-.313.512l-3.675 3.175l1.1 4.725q.075.325-.05.588t-.35.437t-.525.2t-.575-.15z\"/>"},"flag-rounded":{"body":"<path fill=\"currentColor\" d=\"M7 14v6q0 .425-.288.713T6 21t-.712-.288T5 20V5q0-.425.288-.712T6 4h7.175q.35 0 .625.225t.35.575L14.4 6H19q.425 0 .713.288T20 7v8q0 .425-.288.713T19 16h-5.175q-.35 0-.625-.225t-.35-.575L12.6 14z\"/>"},"label-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h11q.475 0 .9.213t.7.587l4.5 6q.4.525.4 1.2t-.4 1.2l-4.5 6q-.275.375-.7.588T15 20z\"/>"},"light-mode-rounded":{"body":"<path fill=\"currentColor\" d=\"M8.463 15.538Q7 14.075 7 12t1.463-3.537T12 7t3.538 1.463T17 12t-1.463 3.538T12 17t-3.537-1.463M2 13q-.425 0-.712-.288T1 12t.288-.712T2 11h2q.425 0 .713.288T5 12t-.288.713T4 13zm18 0q-.425 0-.712-.288T19 12t.288-.712T20 11h2q.425 0 .713.288T23 12t-.288.713T22 13zm-8.712-8.287Q11 4.425 11 4V2q0-.425.288-.712T12 1t.713.288T13 2v2q0 .425-.288.713T12 5t-.712-.288m0 18Q11 22.426 11 22v-2q0-.425.288-.712T12 19t.713.288T13 20v2q0 .425-.288.713T12 23t-.712-.288M5.65 7.05L4.575 6q-.3-.275-.288-.7t.288-.725q.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7t-.275.7t-.687.288t-.713-.288M18 19.425l-1.05-1.075q-.275-.3-.275-.712t.275-.688q.275-.3.688-.287t.712.287L19.425 18q.3.275.288.7t-.288.725q-.3.3-.725.3t-.7-.3M16.95 7.05q-.3-.275-.288-.687t.288-.713L18 4.575q.275-.3.7-.288t.725.288q.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275t-.7-.275M4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.712-.275t.688.275q.3.275.288.688t-.288.712L6 19.425q-.275.3-.7.288t-.725-.288\"/>"},"dark-mode-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 21q-3.775 0-6.387-2.613T3 12q0-3.45 2.25-5.988T11 3.05q.325-.05.575.088t.4.362t.163.525t-.188.575q-.425.65-.638 1.375T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q.775 0 1.538-.225t1.362-.625q.275-.175.563-.162t.512.137q.25.125.388.375t.087.6q-.35 3.45-2.937 5.725T12 21\"/>"},"desktop-windows-rounded":{"body":"<path fill=\"currentColor\" d=\"M10 19v-2H4q-.825 0-1.412-.587T2 15V5q0-.825.588-1.412T4 3h16q.825 0 1.413.588T22 5v10q0 .825-.587 1.413T20 17h-6v2h1q.425 0 .713.288T16 20t-.288.713T15 21H9q-.425 0-.712-.288T8 20t.288-.712T9 19z\"/>"},"mobile":{"body":"<path fill=\"currentColor\" d=\"M7 23q-.825 0-1.412-.587T5 21V3q0-.825.588-1.412T7 1h10q.825 0 1.413.588T19 3v3.1q.45.175.725.55T20 7.5v2q0 .475-.275.85T19 10.9V21q0 .825-.587 1.413T17 23zm5.713-17.287Q13 5.424 13 5t-.288-.712T12 4t-.712.288T11 5t.288.713T12 6t.713-.288\"/>"},"home-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 19v-9q0-.475.213-.9t.587-.7l6-4.5q.525-.4 1.2-.4t1.2.4l6 4.5q.375.275.588.7T20 10v9q0 .825-.588 1.413T18 21h-3q-.425 0-.712-.288T14 20v-5q0-.425-.288-.712T13 14h-2q-.425 0-.712.288T10 15v5q0 .425-.288.713T9 21H6q-.825 0-1.412-.587T4 19\"/>"},"keyboard-command-key":{"body":"<path fill=\"currentColor\" d=\"M6.5 21q-1.45 0-2.475-1.025T3 17.5t1.025-2.475T6.5 14H8v-4H6.5q-1.45 0-2.475-1.025T3 6.5t1.025-2.475T6.5 3t2.475 1.025T10 6.5V8h4V6.5q0-1.45 1.025-2.475T17.5 3t2.475 1.025T21 6.5t-1.025 2.475T17.5 10H16v4h1.5q1.45 0 2.475 1.025T21 17.5t-1.025 2.475T17.5 21t-2.475-1.025T14 17.5V16h-4v1.5q0 1.45-1.025 2.475T6.5 21m0-2q.625 0 1.063-.437T8 17.5V16H6.5q-.625 0-1.062.438T5 17.5t.438 1.063T6.5 19m11 0q.625 0 1.063-.437T19 17.5t-.437-1.062T17.5 16H16v1.5q0 .625.438 1.063T17.5 19M10 14h4v-4h-4zM6.5 8H8V6.5q0-.625-.437-1.062T6.5 5t-1.062.438T5 6.5t.438 1.063T6.5 8M16 8h1.5q.625 0 1.063-.437T19 6.5t-.437-1.062T17.5 5t-1.062.438T16 6.5z\"/>"},"location-on-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.3 21.2q-.35-.125-.625-.375Q9.05 19.325 7.8 17.9t-2.087-2.762t-1.275-2.575T4 10.2q0-3.75 2.413-5.975T12 2t5.588 2.225T20 10.2q0 1.125-.437 2.363t-1.275 2.575T16.2 17.9t-2.875 2.925q-.275.25-.625.375t-.7.125t-.7-.125m2.113-9.787Q14 10.825 14 10t-.587-1.412T12 8t-1.412.588T10 10t.588 1.413T12 12t1.413-.587\"/>"},"work":{"body":"<path fill=\"currentColor\" d=\"M4 21q-.825 0-1.412-.587T2 19V8q0-.825.588-1.412T4 6h4V4q0-.825.588-1.412T10 2h4q.825 0 1.413.588T16 4v2h4q.825 0 1.413.588T22 8v11q0 .825-.587 1.413T20 21zm6-15h4V4h-4z\"/>"},"credit-card":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm0-8h16V8H4z\"/>"},"attach-money-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.025 21q-.425 0-.712-.288T11.025 20v-1.15Q9.9 18.6 9.05 17.975t-1.375-1.75q-.175-.35-.012-.737t.587-.563q.35-.15.725.013t.575.537q.425.75 1.075 1.138t1.6.387q1.025 0 1.737-.462t.713-1.438q0-.875-.55-1.387t-2.55-1.163q-2.15-.675-2.95-1.612t-.8-2.288q0-1.625 1.05-2.525t2.15-1.025V4q0-.425.288-.713T12.025 3t.713.288t.287.712v1.1q.95.15 1.65.613t1.15 1.137q.225.325.088.725t-.563.575q-.35.15-.725.013t-.7-.488t-.763-.537t-1.087-.188q-1.1 0-1.675.488T9.825 8.65q0 .825.75 1.3t2.6 1q1.725.5 2.613 1.588t.887 2.512q0 1.775-1.05 2.7t-2.6 1.15V20q0 .425-.288.713t-.712.287\"/>"},"thumb-up-rounded":{"body":"<path fill=\"currentColor\" d=\"M21 8q.8 0 1.4.6T23 10v2q0 .175-.038.375t-.112.375l-3 7.05q-.225.5-.75.85T18 21h-8q-.825 0-1.412-.587T8 19V8.825q0-.4.163-.762t.437-.638l5.425-5.4q.375-.35.888-.425t.987.175t.688.7t.087.925L15.55 8zM4 21q-.825 0-1.412-.587T2 19v-9q0-.825.588-1.412T4 8t1.413.588T6 10v9q0 .825-.587 1.413T4 21\"/>"},"stethoscope-rounded":{"body":"<path fill=\"currentColor\" d=\"M13.5 22q-2.7 0-4.6-1.9T7 15.5v-.575q-2.15-.35-3.575-2.013T2 9V4q0-.425.288-.712T3 3h2q0-.425.288-.712T6 2t.713.288T7 3v2q0 .425-.288.713T6 6t-.712-.288T5 5H4v4q0 1.65 1.175 2.825T8 13t2.825-1.175T12 9V5h-1q0 .425-.288.713T10 6t-.712-.288T9 5V3q0-.425.288-.712T10 2t.713.288T11 3h2q.425 0 .713.288T14 4v5q0 2.25-1.425 3.913T9 14.925v.575q0 1.875 1.313 3.188T13.5 20t3.188-1.312T18 15.5v-1.675q-.875-.325-1.437-1.088T16 11q0-1.25.875-2.125T19 8t2.125.875T22 11q0 .975-.562 1.738T20 13.825V15.5q0 2.7-1.9 4.6T13.5 22\"/>"},"palette":{"body":"<path fill=\"currentColor\" d=\"M12 22q-2.05 0-3.875-.788t-3.187-2.15t-2.15-3.187T2 12q0-2.075.813-3.9t2.2-3.175T8.25 2.788T12.2 2q2 0 3.775.688t3.113 1.9t2.125 2.875T22 11.05q0 2.875-1.75 4.413T16 17h-1.85q-.225 0-.312.125t-.088.275q0 .3.375.863t.375 1.287q0 1.25-.687 1.85T12 22m-4.425-9.425Q8 12.15 8 11.5t-.425-1.075T6.5 10t-1.075.425T5 11.5t.425 1.075T6.5 13t1.075-.425m3-4Q11 8.15 11 7.5t-.425-1.075T9.5 6t-1.075.425T8 7.5t.425 1.075T9.5 9t1.075-.425m5 0Q16 8.15 16 7.5t-.425-1.075T14.5 6t-1.075.425T13 7.5t.425 1.075T14.5 9t1.075-.425m3 4Q19 12.15 19 11.5t-.425-1.075T17.5 10t-1.075.425T16 11.5t.425 1.075T17.5 13t1.075-.425\"/>"},"manage-accounts-rounded":{"body":"<path fill=\"currentColor\" d=\"M2 18v-.8q0-.85.425-1.562T3.6 14.55q1.425-.725 2.963-1.15t3.137-.425q.35 0 .55.313t.075.662q-.15.525-.225 1.05t-.075 1.075q0 .725.15 1.4T10.6 18.8q.2.425-.037.813T9.9 20H4q-.825 0-1.412-.587T2 18m16.413-.587Q19 16.825 19 16t-.587-1.412T17 14t-1.412.588T15 16t.588 1.413T17 18t1.413-.587M7.175 10.825Q6 9.65 6 8t1.175-2.825T10 4t2.825 1.175T14 8t-1.175 2.825T10 12t-2.825-1.175M15.85 20.2l-.15-.7q-.3-.125-.562-.262T14.6 18.9l-.725.225q-.325.1-.637-.025t-.488-.4l-.2-.35q-.175-.3-.125-.65t.325-.575l.55-.475q-.05-.35-.05-.65t.05-.65l-.55-.475q-.275-.225-.325-.563t.125-.637l.225-.375q.175-.275.475-.4t.625-.025l.725.225q.275-.2.538-.338t.562-.262l.15-.725q.075-.35.338-.562T16.8 11h.4q.35 0 .613.225t.337.575l.15.7q.3.125.562.275t.538.375l.675-.225q.35-.125.675 0t.5.425l.2.35q.175.3.125.65t-.325.575l-.55.475q.05.3.05.625t-.05.625l.55.475q.275.225.325.563t-.125.637l-.225.375q-.175.275-.475.4t-.625.025L19.4 18.9q-.275.2-.538.337t-.562.263l-.15.725q-.075.35-.337.563T17.2 21h-.4q-.35 0-.612-.225t-.338-.575\"/>"},"person-search-rounded":{"body":"<path fill=\"currentColor\" d=\"M11 12q-1.65 0-2.825-1.175T7 8t1.175-2.825T11 4t2.825 1.175T15 8t-1.175 2.825T11 12m10.4 10.8l-2.5-2.5q-.525.3-1.125.5T16.5 21q-1.875 0-3.187-1.312T12 16.5t1.313-3.187T16.5 12t3.188 1.313T21 16.5q0 .675-.2 1.275t-.5 1.125l2.5 2.5q.275.275.275.7t-.275.7t-.7.275t-.7-.275m-3.125-4.525Q19 17.55 19 16.5t-.725-1.775T16.5 14t-1.775.725T14 16.5t.725 1.775T16.5 19t1.775-.725M5 20q-.825 0-1.412-.587T3 18v-.775q0-.85.425-1.575t1.175-1.1q1.125-.575 2.488-.987t2.987-.538q.3-.025.45.25t.025.575q-.275.625-.413 1.288T10 16.475q0 .65.113 1.313t.387 1.262q.15.35-.025.65t-.525.3z\"/>"},"add-box-rounded":{"body":"<path fill=\"currentColor\" d=\"M11 13v3q0 .425.288.713T12 17t.713-.288T13 16v-3h3q.425 0 .713-.288T17 12t-.288-.712T16 11h-3V8q0-.425-.288-.712T12 7t-.712.288T11 8v3H8q-.425 0-.712.288T7 12t.288.713T8 13zm-6 8q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21z\"/>"},"assignment-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h4.2q.325-.9 1.088-1.45T12 1t1.713.55T14.8 3H19q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm3-4h5q.425 0 .713-.288T14 16t-.288-.712T13 15H8q-.425 0-.712.288T7 16t.288.713T8 17m0-4h8q.425 0 .713-.288T17 12t-.288-.712T16 11H8q-.425 0-.712.288T7 12t.288.713T8 13m0-4h8q.425 0 .713-.288T17 8t-.288-.712T16 7H8q-.425 0-.712.288T7 8t.288.713T8 9m4.538-4.962q.212-.213.212-.538t-.213-.537T12 2.75t-.537.213t-.213.537t.213.538t.537.212t.538-.213\"/>"},"hub":{"body":"<path fill=\"currentColor\" d=\"M3.875 22.125Q3 21.25 3 20t.875-2.125T6 17q.35 0 .65.075t.575.2L8.65 15.5q-.7-.775-.975-1.75T7.55 11.8l-2.025-.675q-.425.625-1.075 1T3 12.5q-1.25 0-2.125-.875T0 9.5t.875-2.125T3 6.5t2.125.875T6 9.5v.2l2.025.7q.5-.9 1.338-1.525t1.887-.8V5.9q-.975-.275-1.612-1.063T9 3q0-1.25.875-2.125T12 0t2.125.875T15 3q0 1.05-.65 1.838T12.75 5.9v2.175q1.05.175 1.888.8t1.337 1.525L18 9.7v-.2q0-1.25.875-2.125T21 6.5t2.125.875T24 9.5t-.875 2.125T21 12.5q-.8 0-1.463-.375t-1.062-1l-2.025.675q.15.975-.125 1.938T15.35 15.5l1.425 1.75q.275-.125.575-.187T18 17q1.25 0 2.125.875T21 20t-.875 2.125T18 23t-2.125-.875T15 20q0-.5.163-.962t.437-.838l-1.425-1.775Q13.15 17 11.988 17T9.8 16.425L8.4 18.2q.275.375.438.838T9 20q0 1.25-.875 2.125T6 23t-2.125-.875\"/>"},"notifications-active-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 19q-.425 0-.712-.288T4 18t.288-.712T5 17h1v-7q0-2.075 1.25-3.687T10.5 4.2v-.7q0-.625.438-1.062T12 2t1.063.438T13.5 3.5v.7q2 .5 3.25 2.113T18 10v7h1q.425 0 .713.288T20 18t-.288.713T19 19zm7 3q-.825 0-1.412-.587T10 20h4q0 .825-.587 1.413T12 22M3 10q-.425 0-.712-.325t-.238-.75q.2-1.875 1.05-3.488t2.175-2.812q.325-.275.738-.25t.662.375t.2.75t-.375.7q-.975.925-1.6 2.15T4.075 9q-.05.425-.35.713T3 10m18 0q-.425 0-.725-.288T19.925 9q-.2-1.425-.825-2.65T17.5 4.2q-.325-.3-.375-.7t.2-.75t.663-.375t.737.25q1.325 1.2 2.175 2.812t1.05 3.488q.05.425-.237.75T21 10\"/>"},"campaign-rounded":{"body":"<path fill=\"currentColor\" d=\"M21 13h-2q-.425 0-.712-.288T18 12t.288-.712T19 11h2q.425 0 .713.288T22 12t-.288.713T21 13m-4.4 3.8q.25-.35.65-.4t.75.2l1.6 1.2q.35.25.4.65t-.2.75t-.65.4t-.75-.2l-1.6-1.2q-.35-.25-.4-.65t.2-.75m3-10.6L18 7.4q-.35.25-.75.2t-.65-.4t-.2-.75t.4-.65l1.6-1.2q.35-.25.75-.2t.65.4t.2.75t-.4.65M5 15H4q-.825 0-1.412-.587T2 13v-2q0-.825.588-1.412T4 9h4l3.475-2.1q.5-.3 1.013 0t.512.875v8.45q0 .575-.513.875t-1.012 0L8 15H7v3q0 .425-.288.713T6 19t-.712-.288T5 18zm9 .35v-6.7q.675.6 1.088 1.463T15.5 12t-.413 1.888T14 15.35\"/>"},"newspaper-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 21q-.825 0-1.412-.587T2 19V3.6q0-.175.15-.238t.275.063l1.25 1.25l1.3-1.325q.15-.15.35-.15t.35.15L7 4.675L8.325 3.35q.15-.15.35-.15t.35.15l1.3 1.325L11.65 3.35q.15-.15.35-.15t.35.15l1.325 1.325l1.3-1.325q.15-.15.35-.15t.35.15L17 4.675l1.325-1.325q.15-.15.35-.15t.35.15l1.3 1.325l1.25-1.25q.125-.125.275-.062T22 3.6V19q0 .825-.588 1.413T20 21zm0-2h7v-6H4zm9 0h7v-2h-7zm0-4h7v-2h-7zm-9-4h16V8H4z\"/>"},"handshake-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.1 21q-.425 0-.712-.288T11.1 20q0-.175.075-.363t.225-.337l4.275-4.275q.15-.15.15-.363t-.15-.362t-.363-.138t-.362.163l-4.25 4.25q-.15.15-.325.225t-.375.075q-.425 0-.712-.288T9 17.876q0-.25.075-.413t.2-.287L13.55 12.9q.15-.15.15-.35t-.15-.35t-.35-.15t-.35.15l-4.275 4.25q-.15.15-.325.225t-.4.075q-.4 0-.7-.3t-.3-.7q0-.2.075-.375t.225-.325l4.25-4.25q.15-.15.15-.363t-.15-.362t-.35-.15t-.35.15L6.45 14.35q-.125.125-.3.2t-.425.075q-.425 0-.712-.288t-.288-.712q0-.2.075-.375t.225-.325l4.9-4.9q.275-.275.688-.25t.687.3l3.05 3.05q.275.275.65.438t.75.162q.8 0 1.4-.562t.6-1.438q0-.35-.125-.725t-.45-.7L13.75 4.875q-.275-.275-.363-.6t.088-.625q.225-.375.575-.55t.775-.175q.525 0 1.075.25t1 .7l4.225 4.25q.45.45.663 1T22 10.4q0 .5-.225 1.013t-.65.937L12.8 20.7q-.2.2-.35.25t-.35.05m-9.2-8.875q-.475-.35-.712-.837T1.95 10.25q0-.575.238-1.125t.687-1L7.1 3.875q.425-.425.938-.65T9.125 3q.625 0 1.213.225t1.012.65L16.475 9q.125.125.213.313t.087.387q0 .425-.287.713t-.713.287q-.2 0-.387-.087t-.313-.213L12 7.35q-.575-.575-1.412-.575t-1.413.575l-4.7 4.7q-.325.325-.762.338t-.813-.263\"/>"},"account-balance-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 16v-5q0-.425.288-.712T6 10t.713.288T7 11v5q0 .425-.288.713T6 17t-.712-.288T5 16m6 0v-5q0-.425.288-.712T12 10t.713.288T13 11v5q0 .425-.288.713T12 17t-.712-.288T11 16m-8 5q-.425 0-.712-.288T2 20t.288-.712T3 19h18q.425 0 .713.288T22 20t-.288.713T21 21zm14-5v-5q0-.425.288-.712T18 10t.713.288T19 11v5q0 .425-.288.713T18 17t-.712-.288T17 16m4-8H2.9q-.375 0-.638-.262T2 7.1v-.55q0-.275.138-.475T2.5 5.75l8.6-4.3q.425-.2.9-.2t.9.2l8.55 4.275q.275.125.413.375t.137.525V7q0 .425-.287.713T21 8\"/>"},"receipt-rounded":{"body":"<path fill=\"currentColor\" d=\"M3 20.8V2.6q0-.175.15-.237t.275.062l.725.725q.15.15.35.15t.35-.15l.8-.8Q5.8 2.2 6 2.2t.35.15l.8.8q.15.15.35.15t.35-.15l.8-.8Q8.8 2.2 9 2.2t.35.15l.8.8q.15.15.35.15t.35-.15l.8-.8q.15-.15.35-.15t.35.15l.8.8q.15.15.35.15t.35-.15l.8-.8q.15-.15.35-.15t.35.15l.8.8q.15.15.35.15t.35-.15l.8-.8q.15-.15.35-.15t.35.15l.8.8q.15.15.35.15t.35-.15l.725-.725q.125-.125.275-.062T21 2.6v18.2q0 .35-.3.475t-.55-.125l-.3-.3q-.15-.15-.35-.15t-.35.15l-.8.8q-.15.15-.35.15t-.35-.15l-.8-.8q-.15-.15-.35-.15t-.35.15l-.8.8q-.15.15-.35.15t-.35-.15l-.8-.8q-.15-.15-.35-.15t-.35.15l-.8.8q-.15.15-.35.15t-.35-.15l-.8-.8q-.15-.15-.35-.15t-.35.15l-.8.8q-.15.15-.35.15t-.35-.15l-.8-.8q-.15-.15-.35-.15t-.35.15l-.8.8q-.15.15-.35.15t-.35-.15l-.8-.8q-.15-.15-.35-.15t-.35.15l-.3.3q-.25.25-.55.125T3 20.8M7 17h10q.425 0 .713-.288T18 16t-.288-.712T17 15H7q-.425 0-.712.288T6 16t.288.713T7 17m0-4h10q.425 0 .713-.288T18 12t-.288-.712T17 11H7q-.425 0-.712.288T6 12t.288.713T7 13m0-4h10q.425 0 .713-.288T18 8t-.288-.712T17 7H7q-.425 0-.712.288T6 8t.288.713T7 9\"/>"},"wallet":{"body":"<path fill=\"currentColor\" d=\"M6 20q-1.65 0-2.825-1.175T2 16V8q0-1.65 1.175-2.825T6 4h12q1.65 0 2.825 1.175T22 8v8q0 1.65-1.175 2.825T18 20zM6 8h12q.55 0 1.05.125t.95.4V8q0-.825-.587-1.412T18 6H6q-.825 0-1.412.588T4 8v.525q.45-.275.95-.4T6 8m-1.85 3.25l11.125 2.7q.225.05.45 0t.425-.2l3.475-2.9q-.275-.375-.7-.612T18 10H6q-.65 0-1.137.338t-.713.912\"/>"},"shopping-cart-rounded":{"body":"<path fill=\"currentColor\" d=\"M5.588 21.413Q5 20.825 5 20t.588-1.412T7 18t1.413.588T9 20t-.587 1.413T7 22t-1.412-.587m10 0Q15 20.825 15 20t.588-1.412T17 18t1.413.588T19 20t-.587 1.413T17 22t-1.412-.587M5.2 4h14.75q.575 0 .875.513t.025 1.037l-3.55 6.4q-.275.5-.737.775T15.55 13H8.1L7 15h11q.425 0 .713.288T19 16t-.288.713T18 17H7q-1.125 0-1.7-.987t-.05-1.963L6.6 11.6L3 4H2q-.425 0-.712-.288T1 3t.288-.712T2 2h1.625q.275 0 .525.15t.375.425z\"/>"},"local-shipping-rounded":{"body":"<path fill=\"currentColor\" d=\"M3.875 19.125Q3 18.25 3 17H2q-.425 0-.712-.288T1 16V6q0-.825.588-1.412T3 4h12q.825 0 1.413.588T17 6v2h2q.475 0 .9.213t.7.587l2.2 2.925q.1.125.15.275t.05.325V16q0 .425-.288.713T22 17h-1q0 1.25-.875 2.125T18 20t-2.125-.875T15 17H9q0 1.25-.875 2.125T6 20t-2.125-.875m2.838-1.412Q7 17.425 7 17t-.288-.712T6 16t-.712.288T5 17t.288.713T6 18t.713-.288m12 0Q19 17.426 19 17t-.288-.712T18 16t-.712.288T17 17t.288.713T18 18t.713-.288M17 13h4.25L19 10h-2z\"/>"},"factory-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 22q-.825 0-1.412-.587T2 20v-8.7q0-.6.325-1.1t.9-.75L7.6 7.6q.5-.2.95.075T9 8.5V9l3.625-1.45q.5-.2.937.1t.438.825V10h8v10q0 .825-.587 1.413T20 22zm7-4h2v-4h-2zm-4 0h2v-4H7zm8 0h2v-4h-2zm6.8-9.5h-4.625l.725-5.625q.05-.375.338-.625T18.9 2h1.225q.375 0 .65.25t.325.625z\"/>"},"support":{"body":"<path fill=\"currentColor\" d=\"M8.1 21.213q-1.825-.788-3.175-2.138T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22t-3.9-.788m1-1.762l1.2-2.75q-1.05-.375-1.812-1.162T7.3 13.7l-2.75 1.15q.575 1.6 1.775 2.8t2.775 1.8M7.3 10.3q.425-1.05 1.188-1.837T10.3 7.3L9.15 4.55q-1.6.6-2.8 1.8t-1.8 2.8zm6.825 3.825Q15 13.25 15 12t-.875-2.125T12 9t-2.125.875T9 12t.875 2.125T12 15t2.125-.875m.775 5.325q1.575-.6 2.763-1.787T19.45 14.9l-2.75-1.2q-.375 1.05-1.15 1.813t-1.8 1.187zm1.8-9.2l2.75-1.15q-.6-1.575-1.787-2.762T14.9 4.55l-1.15 2.8q1.025.375 1.775 1.138T16.7 10.25\"/>"},"format-bold-rounded":{"body":"<path fill=\"currentColor\" d=\"M8.8 19q-.825 0-1.412-.587T6.8 17V7q0-.825.588-1.412T8.8 5h3.525q1.625 0 3 1T16.7 8.775q0 1.275-.575 1.963t-1.075.987q.625.275 1.388 1.025T17.2 15q0 2.225-1.625 3.113t-3.05.887zm1.025-2.8h2.6q1.2 0 1.463-.612t.262-.888t-.262-.887t-1.538-.613H9.825zm0-5.7h2.325q.825 0 1.2-.425t.375-.95q0-.6-.425-.975t-1.1-.375H9.825z\"/>"},"format-italic-rounded":{"body":"<path fill=\"currentColor\" d=\"M6.25 19q-.525 0-.888-.363T5 17.75t.363-.888t.887-.362H9l3-9H9.25q-.525 0-.888-.363T8 6.25t.363-.888T9.25 5h7.5q.525 0 .888.363T18 6.25t-.363.888t-.887.362H14.5l-3 9h2.25q.525 0 .888.363t.362.887t-.363.888t-.887.362z\"/>"},"format-underlined-rounded":{"body":"<path fill=\"currentColor\" d=\"M6 21q-.425 0-.712-.288T5 20t.288-.712T6 19h12q.425 0 .713.288T19 20t-.288.713T18 21zm2.075-5.575q-1.4-1.575-1.4-4.175V4.275q0-.525.388-.9T7.975 3t.9.375t.375.9V11.4q0 1.4.7 2.275t2.05.875t2.05-.875t.7-2.275V4.275q0-.525.388-.9T16.05 3t.9.375t.375.9v6.975q0 2.6-1.4 4.175T12 17t-3.925-1.575\"/>"},"format-strikethrough-rounded":{"body":"<path fill=\"currentColor\" d=\"M3 14q-.425 0-.712-.288T2 13t.288-.712T3 12h18q.425 0 .713.288T22 13t-.288.713T21 14zm7.5-4V7h-4q-.625 0-1.062-.437T5 5.5t.438-1.062T6.5 4h11q.625 0 1.063.438T19 5.5t-.437 1.063T17.5 7h-4v3zm0 6h3v2.5q0 .625-.437 1.063T12 20t-1.062-.437T10.5 18.5z\"/>"},"format-clear-rounded":{"body":"<path fill=\"currentColor\" d=\"m13.2 10.35l-2.325-2.325l-.663-.662L9.55 6.7q-.475-.475-.213-1.088T10.276 5H18.5q.625 0 1.063.438T20 6.5t-.437 1.063T18.5 8h-4.3zm5.9 11.55l-7.6-7.6l-1.6 3.775q-.175.425-.562.675T8.5 19q-.8 0-1.25-.675T7.125 16.9L9.2 12L2.1 4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l17 17q.275.275.275.7t-.275.7t-.7.275t-.7-.275\"/>"},"format-align-left-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 21q-.425 0-.712-.288T3 20t.288-.712T4 19h16q.425 0 .713.288T21 20t-.288.713T20 21zm0-4q-.425 0-.712-.288T3 16t.288-.712T4 15h10q.425 0 .713.288T15 16t-.288.713T14 17zm0-4q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-4q-.425 0-.712-.288T3 8t.288-.712T4 7h10q.425 0 .713.288T15 8t-.288.713T14 9zm0-4q-.425 0-.712-.288T3 4t.288-.712T4 3h16q.425 0 .713.288T21 4t-.288.713T20 5z\"/>"},"format-align-center-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 21q-.425 0-.712-.288T3 20t.288-.712T4 19h16q.425 0 .713.288T21 20t-.288.713T20 21zm4-4q-.425 0-.712-.288T7 16t.288-.712T8 15h8q.425 0 .713.288T17 16t-.288.713T16 17zm-4-4q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm4-4q-.425 0-.712-.288T7 8t.288-.712T8 7h8q.425 0 .713.288T17 8t-.288.713T16 9zM4 5q-.425 0-.712-.288T3 4t.288-.712T4 3h16q.425 0 .713.288T21 4t-.288.713T20 5z\"/>"},"format-align-right-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 5q-.425 0-.712-.288T3 4t.288-.712T4 3h16q.425 0 .713.288T21 4t-.288.713T20 5zm6 4q-.425 0-.712-.288T9 8t.288-.712T10 7h10q.425 0 .713.288T21 8t-.288.713T20 9zm-6 4q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm6 4q-.425 0-.712-.288T9 16t.288-.712T10 15h10q.425 0 .713.288T21 16t-.288.713T20 17zm-6 4q-.425 0-.712-.288T3 20t.288-.712T4 19h16q.425 0 .713.288T21 20t-.288.713T20 21z\"/>"},"format-list-bulleted-rounded":{"body":"<path fill=\"currentColor\" d=\"M10 19q-.425 0-.712-.288T9 18t.288-.712T10 17h10q.425 0 .713.288T21 18t-.288.713T20 19zm0-6q-.425 0-.712-.288T9 12t.288-.712T10 11h10q.425 0 .713.288T21 12t-.288.713T20 13zm0-6q-.425 0-.712-.288T9 6t.288-.712T10 5h10q.425 0 .713.288T21 6t-.288.713T20 7zM5 20q-.825 0-1.412-.587T3 18t.588-1.412T5 16t1.413.588T7 18t-.587 1.413T5 20m0-6q-.825 0-1.412-.587T3 12t.588-1.412T5 10t1.413.588T7 12t-.587 1.413T5 14M3.588 7.413Q3 6.825 3 6t.588-1.412T5 4t1.413.588T7 6t-.587 1.413T5 8t-1.412-.587\"/>"},"format-list-numbered-rounded":{"body":"<path fill=\"currentColor\" d=\"M3.75 22q-.325 0-.537-.213T3 21.25t.213-.537t.537-.213H5.5v-.75h-.75q-.325 0-.537-.213T4 19t.213-.537t.537-.213h.75v-.75H3.75q-.325 0-.537-.213T3 16.75t.213-.537T3.75 16H6q.425 0 .713.288T7 17v1q0 .425-.288.713T6 19q.425 0 .713.288T7 20v1q0 .425-.288.713T6 22zm0-7q-.325 0-.537-.213T3 14.25v-2q0-.425.288-.712T4 11.25h1.5v-.75H3.75q-.325 0-.537-.213T3 9.75t.213-.537T3.75 9H6q.425 0 .713.288T7 10v1.75q0 .425-.288.713T6 12.75H4.5v.75h1.75q.325 0 .538.213T7 14.25t-.213.538T6.25 15zm.963-7.212Q4.5 7.575 4.5 7.25V3.5h-.75q-.325 0-.537-.213T3 2.75t.213-.537T3.75 2h1.5q.325 0 .538.213T6 2.75v4.5q0 .325-.213.538T5.25 8t-.537-.213M10 19q-.425 0-.712-.288T9 18t.288-.712T10 17h10q.425 0 .713.288T21 18t-.288.713T20 19zm0-6q-.425 0-.712-.288T9 12t.288-.712T10 11h10q.425 0 .713.288T21 12t-.288.713T20 13zm0-6q-.425 0-.712-.288T9 6t.288-.712T10 5h10q.425 0 .713.288T21 6t-.288.713T20 7z\"/>"},"table":{"body":"<path fill=\"currentColor\" d=\"M11 16H3v3q0 .825.588 1.413T5 21h6zm2 0v5h6q.825 0 1.413-.587T21 19v-3zm-2-2V9H3v5zm2 0h8V9h-8zM3 7h18V5q0-.825-.587-1.412T19 3H5q-.825 0-1.412.588T3 5z\"/>"},"redo-rounded":{"body":"<path fill=\"currentColor\" d=\"M16.2 10H9.9q-1.575 0-2.738 1T6 13.5T7.163 16T9.9 17H16q.425 0 .713.288T17 18t-.288.713T16 19H9.9q-2.425 0-4.163-1.575T4 13.5t1.738-3.925T9.9 8h6.3l-1.9-1.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l3.6 3.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-3.6 3.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z\"/>"},"link-off-rounded":{"body":"<path fill=\"currentColor\" d=\"M15.625 12.775L13.85 11H15q.425 0 .713.288T16 12q0 .25-.1.45t-.275.325M20.5 21.9q-.275.275-.7.275t-.7-.275l-17-17q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l17 17q.275.275.275.7t-.275.7M7 17q-2.075 0-3.537-1.463T2 12q0-1.725 1.05-3.075t2.7-1.775L7.6 9H7q-1.25 0-2.125.875T4 12t.875 2.125T7 15h3q.425 0 .713.288T11 16t-.288.713T10 17zm2-4q-.425 0-.712-.288T8 12t.288-.712T9 11h.625l1.975 2zm9.5 2.8q-.225-.35-.162-.75t.412-.625q.575-.425.913-1.05T20 12q0-1.25-.875-2.125T17 9h-3q-.425 0-.712-.288T13 8t.288-.712T14 7h3q2.075 0 3.538 1.463T22 12q0 1.225-.562 2.288t-1.563 1.762q-.35.225-.75.163T18.5 15.8\"/>"},"hide-image-rounded":{"body":"<path fill=\"currentColor\" d=\"M21 5v10.725q0 .35-.175.575t-.45.35t-.55.088t-.525-.288L7.55 4.7q-.25-.25-.287-.525t.087-.55t.35-.45T8.275 3H19q.825 0 1.413.587T21 5M5 21q-.825 0-1.412-.587T3 19V5.8l-.9-.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l17 17q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-.9-.9zm9.175-4l-2.1-2.1l-.825 1.1l-1.85-2.475q-.15-.2-.4-.2t-.4.2l-2 2.675q-.2.25-.05.525T7 17z\"/>"},"ink-eraser-rounded":{"body":"<path fill=\"currentColor\" d=\"M17.25 18H21q.425 0 .713.288T22 19t-.288.713T21 20h-5.75zM5.175 20q-.2 0-.388-.075T4.45 19.7l-1.825-1.825q-.575-.575-.588-1.425T2.6 15l11-11.4q.575-.6 1.412-.6t1.413.575L21.4 8.55q.575.575.575 1.425T21.4 11.4l-8.1 8.3q-.15.15-.337.225t-.388.075z\"/>"},"draw-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 21q-.425 0-.712-.288T4 20v-2.425q0-.4.15-.763t.425-.637L17.175 3.6q.3-.3.675-.45T18.6 3q.4 0 .763.15T20 3.6L21.4 5q.3.275.45.638T22 6.4q0 .375-.15.75t-.45.675l-12.575 12.6q-.275.275-.637.425t-.763.15zM18.65 7.775L20 6.425L18.575 5l-1.35 1.35zM14 21q1.85 0 3.425-.925T19 17.5q0-.8-.4-1.388t-1.05-1.087q-.35-.25-.75-.25t-.675.3t-.275.738t.35.687q.35.275.575.5t.225.5q0 .575-.913 1.038T14 19q-.425 0-.712.288T13 20t.288.713T14 21M9 6q0 .35-.437.638T6.55 7.65q-2 .875-2.775 1.588T3 11q0 .65.3 1.15t.775.875q.325.275.725.238t.675-.363t.25-.725t-.35-.675q-.175-.125-.275-.25T5 11q0-.3.45-.6t1.9-.925q2.2-.95 2.925-1.725T11 6q0-1.375-1.1-2.187T7 3q-1.125 0-2.013.4t-1.362.975Q3.35 4.7 3.4 5.1t.375.65q.325.275.725.225t.675-.325q.35-.35.775-.5T7 5q1.025 0 1.513.3T9 6\"/>"},"edit-square-rounded":{"body":"<path fill=\"currentColor\" d=\"M10 15q-.425 0-.712-.288T9 14v-2.425q0-.4.15-.763t.425-.637l8.6-8.6q.3-.3.675-.45t.75-.15q.4 0 .763.15t.662.45L22.425 3q.275.3.425.663T23 4.4t-.137.738t-.438.662l-8.6 8.6q-.275.275-.637.438t-.763.162zm9.6-9.2l1.425-1.4l-1.4-1.4L18.2 4.4zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h6.5q.35 0 .575.175t.35.45t.087.55t-.287.525l-4.65 4.65q-.275.275-.425.638T7 10.75V15q0 .825.588 1.412T9 17h4.225q.4 0 .763-.15t.637-.425L19.3 11.75q.25-.25.525-.288t.55.088t.45.35t.175.575V19q0 .825-.587 1.413T19 21z\"/>"},"left-panel-close-rounded":{"body":"<path fill=\"currentColor\" d=\"M16.5 14.8V9.2q0-.35-.3-.475t-.55.125L13.2 11.3q-.3.3-.3.7t.3.7l2.45 2.45q.25.25.55.125t.3-.475M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm5-2h9V5h-9z\"/>"},"left-panel-open-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.5 9.2v5.6q0 .35.3.475t.55-.125l2.45-2.45q.3-.3.3-.7t-.3-.7l-2.45-2.45q-.25-.25-.55-.125t-.3.475M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm5-2h9V5h-9z\"/>"},"view-column-2":{"body":"<path fill=\"currentColor\" d=\"M15 21q-.825 0-1.412-.587T13 19V5q0-.825.588-1.412T15 3h4q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h4q.825 0 1.413.588T11 5v14q0 .825-.587 1.413T9 21z\"/>"},"table-rows-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 21q-.425 0-.712-.288T3 20v-2.65q0-.425.288-.712T4 16.35h16q.425 0 .713.288t.287.712V20q0 .425-.288.713T20 21zm0-6.65q-.425 0-.712-.288T3 13.35v-2.725q0-.425.288-.712T4 9.625h16q.425 0 .713.288t.287.712v2.725q0 .425-.288.713T20 14.35zm0-6.725q-.425 0-.712-.288T3 6.626V4q0-.425.288-.712T4 3h16q.425 0 .713.288T21 4v2.625q0 .425-.288.713T20 7.625z\"/>"},"web-asset":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm0-2h16V8H4z\"/>"},"drag-indicator":{"body":"<path fill=\"currentColor\" d=\"M9 20q-.825 0-1.412-.587T7 18t.588-1.412T9 16t1.413.588T11 18t-.587 1.413T9 20m6 0q-.825 0-1.412-.587T13 18t.588-1.412T15 16t1.413.588T17 18t-.587 1.413T15 20m-6-6q-.825 0-1.412-.587T7 12t.588-1.412T9 10t1.413.588T11 12t-.587 1.413T9 14m6 0q-.825 0-1.412-.587T13 12t.588-1.412T15 10t1.413.588T17 12t-.587 1.413T15 14M9 8q-.825 0-1.412-.587T7 6t.588-1.412T9 4t1.413.588T11 6t-.587 1.413T9 8m6 0q-.825 0-1.412-.587T13 6t.588-1.412T15 4t1.413.588T17 6t-.587 1.413T15 8\"/>"},"width-full":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm0-2h1V6H4zm15 0h1V6h-1z\"/>"},"unfold-more-rounded":{"body":"<path fill=\"currentColor\" d=\"m12 18.1l2.325-2.325q.3-.3.725-.3t.725.3t.3.725t-.3.725L12.7 20.3q-.15.15-.325.213t-.375.062t-.375-.062t-.325-.213l-3.075-3.075q-.3-.3-.3-.725t.3-.725t.725-.3t.725.3zM12 6L9.675 8.325q-.3.3-.725.3t-.725-.3t-.3-.725t.3-.725L11.3 3.8q.15-.15.325-.213T12 3.526t.375.063t.325.212l3.075 3.075q.3.3.3.725t-.3.725t-.725.3t-.725-.3z\"/>"},"filter-list-rounded":{"body":"<path fill=\"currentColor\" d=\"M11 18q-.425 0-.712-.288T10 17t.288-.712T11 16h2q.425 0 .713.288T14 17t-.288.713T13 18zm-4-5q-.425 0-.712-.288T6 12t.288-.712T7 11h10q.425 0 .713.288T18 12t-.288.713T17 13zM4 8q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z\"/>"},"swap-vert-rounded":{"body":"<path fill=\"currentColor\" d=\"M8.288 12.713Q8 12.425 8 12V5.825L6.125 7.7q-.275.275-.687.275T4.725 7.7q-.3-.3-.3-.712t.3-.713L8.3 2.7q.15-.15.325-.213T9 2.425t.375.062t.325.213l3.6 3.6q.3.3.287.7t-.312.7q-.3.275-.7.288t-.7-.288L10 5.825V12q0 .425-.288.713T9 13t-.712-.288m6.337 8.8q-.175-.062-.325-.212l-3.6-3.6q-.3-.3-.287-.7t.312-.7q.3-.275.7-.288t.7.288L14 18.175V12q0-.425.288-.712T15 11t.713.288T16 12v6.175l1.875-1.875q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L15.7 21.3q-.15.15-.325.213t-.375.062t-.375-.062\"/>"},"sort-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h4q.425 0 .713.288T9 17t-.288.713T8 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h10q.425 0 .713.288T15 12t-.288.713T14 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z\"/>"},"search-off-rounded":{"body":"<path fill=\"currentColor\" d=\"m7 17.7l1.4 1.425q.15.15.35.15t.35-.15t.15-.363t-.15-.362L7.7 17l1.425-1.425q.15-.15.15-.35t-.15-.35t-.35-.15t-.35.15L7 16.3l-1.425-1.425q-.15-.15-.35-.15t-.35.15t-.15.35t.15.35L6.3 17l-1.425 1.425q-.15.15-.15.35t.15.35t.35.15t.35-.15zm-3.537 2.838Q2 19.075 2 17t1.463-3.537T7 12t3.538 1.463T12 17t-1.463 3.538T7 22t-3.537-1.463M14.2 14.6q-.3-.325-.637-.662T12.9 13.3q.95-.6 1.525-1.6T15 9.5q0-1.875-1.312-3.187T10.5 5T7.313 6.313T6 9.5q0 .15.013.288t.037.287q-.45.05-.987.2t-.963.35q-.05-.275-.075-.55T4 9.5q0-2.725 1.888-4.612T10.5 3t4.613 1.888T17 9.5q0 1.075-.337 2.038t-.938 1.762l5.575 5.6q.275.275.288.688t-.288.712q-.275.275-.7.275t-.7-.275z\"/>"},"north-east-rounded":{"body":"<path fill=\"currentColor\" d=\"M17 8.4L6.1 19.3q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7L15.6 7H10q-.425 0-.712-.288T9 6t.288-.712T10 5h8q.425 0 .713.288T19 6v8q0 .425-.288.713T18 15t-.712-.288T17 14z\"/>"},"south-east-rounded":{"body":"<path fill=\"currentColor\" d=\"M15.6 17L4.7 6.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275L17 15.6V10q0-.425.288-.712T18 9t.713.288T19 10v8q0 .425-.288.713T18 19h-8q-.425 0-.712-.288T9 18t.288-.712T10 17z\"/>"},"vertical-align-top-rounded":{"body":"<path fill=\"currentColor\" d=\"M5 5q-.425 0-.712-.288T4 4t.288-.712T5 3h14q.425 0 .713.288T20 4t-.288.713T19 5zm6.288 15.713Q11 20.425 11 20v-9.2l-1.9 1.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l3.6-3.6q.15-.15.325-.212T12 7.425t.375.063t.325.212l3.6 3.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275L13 10.8V20q0 .425-.287.713T12 21t-.712-.288\"/>"},"subdirectory-arrow-right-rounded":{"body":"<path fill=\"currentColor\" d=\"M13 19.575q0-.4.3-.7L16.175 16H7q-.825 0-1.412-.587T5 14V5q0-.425.288-.712T6 4t.713.288T7 5v9h9.175l-2.9-2.9q-.3-.3-.288-.7t.288-.7q.3-.3.7-.312t.7.287L19.3 14.3q.15.15.212.325t.063.375t-.063.375t-.212.325l-4.575 4.575q-.3.3-.712.3t-.713-.3t-.3-.7\"/>"},"skip-next-rounded":{"body":"<path fill=\"currentColor\" d=\"M16.5 17V7q0-.425.288-.712T17.5 6t.713.288T18.5 7v10q0 .425-.288.713T17.5 18t-.712-.288T16.5 17m-11-.875v-8.25q0-.45.3-.725t.7-.275q.125 0 .275.025t.275.125l6.2 4.15q.225.15.338.363T13.7 12t-.112.463t-.338.362l-6.2 4.15q-.125.1-.275.125t-.275.025q-.4 0-.7-.275t-.3-.725\"/>"},"hourglass-empty-rounded":{"body":"<path fill=\"currentColor\" d=\"M8 20h8v-3q0-1.65-1.175-2.825T12 13t-2.825 1.175T8 17zm6.825-10.175Q16 8.65 16 7V4H8v3q0 1.65 1.175 2.825T12 11t2.825-1.175M5 22q-.425 0-.712-.288T4 21t.288-.712T5 20h1v-3q0-1.525.713-2.863T8.7 12q-1.275-.8-1.987-2.137T6 7V4H5q-.425 0-.712-.288T4 3t.288-.712T5 2h14q.425 0 .713.288T20 3t-.288.713T19 4h-1v3q0 1.525-.712 2.863T15.3 12q1.275.8 1.988 2.138T18 17v3h1q.425 0 .713.288T20 21t-.288.713T19 22z\"/>"},"done-all-rounded":{"body":"<path fill=\"currentColor\" d=\"M1.75 13.05q-.3-.3-.288-.7t.313-.7q.3-.275.7-.288t.7.288l3.55 3.55l.35.35l.35.35q.3.3.288.7t-.313.7q-.3.275-.7.288T6 17.3zm10.6 2.125l8.5-8.5q.3-.3.7-.287t.7.312q.275.3.288.7t-.288.7l-9.2 9.2q-.3.3-.7.3t-.7-.3L7.4 13.05q-.275-.275-.275-.687t.275-.713q.3-.3.713-.3t.712.3zm4.225-7.05L13.05 11.65q-.275.275-.687.275t-.713-.275q-.3-.3-.3-.712t.3-.713L15.175 6.7q.275-.275.688-.275t.712.275q.3.3.3.712t-.3.713\"/>"},"verified-rounded":{"body":"<path fill=\"currentColor\" d=\"M10.95 12.7L9.5 11.275Q9.225 11 8.813 11t-.713.3q-.275.275-.275.7t.275.7l2.15 2.15q.3.3.7.3t.7-.3l4.25-4.25q.3-.3.287-.7t-.287-.7q-.3-.3-.712-.312t-.713.287zm-2.8 9.05L6.7 19.3l-2.75-.6q-.375-.075-.6-.387t-.175-.688L3.45 14.8l-1.875-2.15q-.25-.275-.25-.65t.25-.65L3.45 9.2l-.275-2.825q-.05-.375.175-.688t.6-.387l2.75-.6l1.45-2.45q.2-.325.55-.438t.7.038l2.6 1.1l2.6-1.1q.35-.15.7-.038t.55.438L17.3 4.7l2.75.6q.375.075.6.388t.175.687L20.55 9.2l1.875 2.15q.25.275.25.65t-.25.65L20.55 14.8l.275 2.825q.05.375-.175.688t-.6.387l-2.75.6l-1.45 2.45q-.2.325-.55.438t-.7-.038l-2.6-1.1l-2.6 1.1q-.35.15-.7.038t-.55-.438\"/>"},"do-not-disturb-on-rounded":{"body":"<path fill=\"currentColor\" d=\"M8 13h8q.425 0 .713-.288T17 12t-.288-.712T16 11H8q-.425 0-.712.288T7 12t.288.713T8 13m4 9q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"pause-circle-rounded":{"body":"<path fill=\"currentColor\" d=\"M10.713 15.713Q11 15.425 11 15V9q0-.425-.288-.712T10 8t-.712.288T9 9v6q0 .425.288.713T10 16t.713-.288m4 0Q15 15.426 15 15V9q0-.425-.288-.712T14 8t-.712.288T13 9v6q0 .425.288.713T14 16t.713-.288M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\"/>"},"speed-rounded":{"body":"<path fill=\"currentColor\" d=\"M10.45 15.5q.625.625 1.575.588T13.4 15.4l4.225-6.325q.225-.35-.062-.638t-.638-.062L10.6 12.6q-.65.45-.712 1.363t.562 1.537M5.1 20q-.55 0-1.012-.238t-.738-.712q-.65-1.175-1-2.437T2 14q0-2.075.788-3.9t2.137-3.175T8.1 4.788T12 4q2.05 0 3.85.775T19 6.888t2.15 3.125t.825 3.837q.025 1.375-.312 2.688t-1.038 2.512q-.275.475-.737.713T18.874 20z\"/>"},"playlist-add-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 16q-.425 0-.712-.288T3 15t.288-.712T4 14h5q.425 0 .713.288T10 15t-.288.713T9 16zm0-4q-.425 0-.712-.288T3 11t.288-.712T4 10h9q.425 0 .713.288T14 11t-.288.713T13 12zm0-4q-.425 0-.712-.288T3 7t.288-.712T4 6h9q.425 0 .713.288T14 7t-.288.713T13 8zm12.288 11.713Q16 19.425 16 19v-3h-3q-.425 0-.712-.288T12 15t.288-.712T13 14h3v-3q0-.425.288-.712T17 10t.713.288T18 11v3h3q.425 0 .713.288T22 15t-.288.713T21 16h-3v3q0 .425-.288.713T17 20t-.712-.288\"/>"},"content-paste-off-rounded":{"body":"<path fill=\"currentColor\" d=\"M20 17q-.375 0-.687-.262T19 15.975V5h-2v2q0 .425-.288.713T16 8h-4.325q-.4 0-.763-.15t-.637-.425L7.55 4.7q-.15-.15-.225-.325T7.25 4q0-.4.288-.7t.737-.3h.9q.275-.875 1.075-1.437T12 1q1 0 1.788.563T14.85 3H19q.825 0 1.413.588T21 5v11q0 .5-.312.75T20 17M12.713 4.713Q13 4.425 13 4t-.288-.712T12 3t-.712.288T11 4t.288.713T12 5t.713-.288M16.15 19L5 7.85V19zM5 21q-.825 0-1.412-.587T3 19V5.85l-.925-.925q-.3-.3-.3-.712t.3-.713t.713-.3t.712.3l17 17q.3.3.3.7t-.3.7t-.712.3t-.713-.3l-.925-.9z\"/>"},"create-new-folder-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h5.175q.4 0 .763.15t.637.425L12 6h8q.825 0 1.413.588T22 8v10q0 .825-.587 1.413T20 20zm10-6v1q0 .425.288.713T15 16t.713-.288T16 15v-1h1q.425 0 .713-.288T18 13t-.288-.712T17 12h-1v-1q0-.425-.288-.712T15 10t-.712.288T14 11v1h-1q-.425 0-.712.288T12 13t.288.713T13 14z\"/>"},"bookmark-rounded":{"body":"<path fill=\"currentColor\" d=\"m12 18l-4.2 1.8q-1 .425-1.9-.162T5 17.975V5q0-.825.588-1.412T7 3h10q.825 0 1.413.588T19 5v12.975q0 1.075-.9 1.663t-1.9.162z\"/>"},"keep":{"body":"<path fill=\"currentColor\" d=\"m16 12l2 2v2h-5v6l-1 1l-1-1v-6H6v-2l2-2V5H7V3h10v2h-1z\"/>"},"keep-off-rounded":{"body":"<path fill=\"currentColor\" d=\"m14.3 11.475l-7.05-7.05q-.125-.125-.187-.275T7 3.85q0-.325.225-.588t.6-.262H16q.425 0 .713.287T17 4q0 .4-.363.563T16 5v5.75q0 .675-.612.938t-1.088-.213M11 22v-6H7.4q-.625 0-1-.437t-.375-.988q0-.275.113-.55T6.5 13.5L8 12v-1.15L2.1 4.9q-.275-.275-.288-.687T2.1 3.5q.275-.275.7-.275t.7.275l16.975 16.975q.3.3.288.713t-.313.712q-.3.275-.7.288t-.7-.288l-5.9-5.9H13v6q0 .425-.288.713T12 23t-.712-.288T11 22\"/>"},"contact-support-rounded":{"body":"<path fill=\"currentColor\" d=\"M11.75 19h-.25q-3.55 0-6.025-2.475T3 10.5t2.475-6.025T11.5 2q1.775 0 3.313.662t2.7 1.825t1.824 2.7T20 10.5q0 3.35-1.888 6.225t-4.762 4.5q-.25.125-.5.138t-.45-.113t-.35-.325t-.175-.475zm.45-3.325q.3-.3.3-.725t-.3-.725t-.725-.3t-.725.3t-.3.725t.3.725t.725.3t.725-.3m-2.9-7.3q.275.125.55.013t.45-.363q.225-.3.525-.463T11.5 7.4q.6 0 .975.337t.375.863q0 .325-.187.65t-.663.8q-.625.55-.925 1.038t-.3.987q0 .3.213.513t.512.212t.5-.225t.3-.525q.125-.425.45-.775t.6-.625q.525-.525.788-1.05t.262-1.05q0-1.15-.788-1.85T11.5 6q-.8 0-1.475.388t-1.1 1.062q-.15.275-.038.538t.413.387\"/>"},"phone-callback-rounded":{"body":"<path fill=\"currentColor\" d=\"M19.95 21q-3.125 0-6.175-1.362t-5.55-3.863t-3.862-5.55T3 4.05q0-.45.3-.75t.75-.3H8.1q.35 0 .625.238t.325.562l.65 3.5q.05.4-.025.675T9.4 8.45L6.975 10.9q.5.925 1.187 1.787t1.513 1.663q.775.775 1.625 1.438T13.1 17l2.35-2.35q.225-.225.588-.337t.712-.063l3.45.7q.35.1.575.363T21 15.9v4.05q0 .45-.3.75t-.75.3M16.4 9H18q.425 0 .713.288T19 10t-.288.713T18 11h-4q-.425 0-.712-.288T13 10V6q0-.425.288-.712T14 5t.713.288T15 6v1.6l4.3-4.3q.275-.275.7-.275t.7.275t.275.7t-.275.7z\"/>"},"phone-disabled-rounded":{"body":"<path fill=\"currentColor\" d=\"m19.1 22l-4.85-4.85q-2.225 1.8-4.837 2.825T4.05 21q-.6 0-.825-.3T3 19.95V15.9q0-.35.225-.612t.575-.338l3.45-.7q.275-.05.688.075t.612.325L10.9 17q.45-.275.975-.625t.925-.675L2.1 5q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l17 17q.275.275.275.7t-.275.7t-.7.275t-.7-.275m-2.025-7.675L15.65 12.9q.35-.425.738-.975t.637-1.025L14.6 8.45q-.2-.2-.275-.562T14.3 7.3l.65-3.5q.075-.35.338-.575T15.9 3h4.05q.45 0 .75.3t.3.75q0 2.75-1.037 5.375t-2.888 4.9\"/>"},"headphones-rounded":{"body":"<path fill=\"currentColor\" d=\"M7 21H5q-.825 0-1.412-.587T3 19v-7q0-1.875.713-3.512t1.924-2.85t2.85-1.925T12 3t3.513.713t2.85 1.924t1.925 2.85T21 12v7q0 .825-.587 1.413T19 21h-2q-.825 0-1.412-.587T15 19v-4q0-.825.588-1.412T17 13h2v-1q0-2.925-2.037-4.962T12 5T7.038 7.038T5 12v1h2q.825 0 1.413.588T9 15v4q0 .825-.587 1.413T7 21\"/>"},"graphic-eq-rounded":{"body":"<path fill=\"currentColor\" d=\"M7 17V7q0-.425.288-.712T8 6t.713.288T9 7v10q0 .425-.288.713T8 18t-.712-.288T7 17m4 4V3q0-.425.288-.712T12 2t.713.288T13 3v18q0 .425-.288.713T12 22t-.712-.288T11 21m-8-8v-2q0-.425.288-.712T4 10t.713.288T5 11v2q0 .425-.288.713T4 14t-.712-.288T3 13m12 4V7q0-.425.288-.712T16 6t.713.288T17 7v10q0 .425-.288.713T16 18t-.712-.288T15 17m4-4v-2q0-.425.288-.712T20 10t.713.288T21 11v2q0 .425-.288.713T20 14t-.712-.288T19 13\"/>"},"keyboard-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 19q-.825 0-1.412-.587T2 17V7q0-.825.588-1.412T4 5h16q.825 0 1.413.588T22 7v10q0 .825-.587 1.413T20 19zm5-3h6q.425 0 .713-.288T16 15t-.288-.712T15 14H9q-.425 0-.712.288T8 15t.288.713T9 16M6.713 9.712Q7 9.425 7 9t-.288-.712T6 8t-.712.288T5 9t.288.713T6 10t.713-.288m3 0Q10 9.426 10 9t-.288-.712T9 8t-.712.288T8 9t.288.713T9 10t.713-.288m3 0Q13 9.426 13 9t-.288-.712T12 8t-.712.288T11 9t.288.713T12 10t.713-.288m3 0Q16 9.426 16 9t-.288-.712T15 8t-.712.288T14 9t.288.713T15 10t.713-.288m3 0Q19 9.426 19 9t-.288-.712T18 8t-.712.288T17 9t.288.713T18 10t.713-.288m-12 3Q7 12.426 7 12t-.288-.712T6 11t-.712.288T5 12t.288.713T6 13t.713-.288m3 0Q10 12.426 10 12t-.288-.712T9 11t-.712.288T8 12t.288.713T9 13t.713-.288m3 0Q13 12.426 13 12t-.288-.712T12 11t-.712.288T11 12t.288.713T12 13t.713-.288m3 0Q16 12.426 16 12t-.288-.712T15 11t-.712.288T14 12t.288.713T15 13t.713-.288m3 0Q19 12.426 19 12t-.288-.712T18 11t-.712.288T17 12t.288.713T18 13t.713-.288\"/>"},"print-rounded":{"body":"<path fill=\"currentColor\" d=\"M8 21q-.825 0-1.412-.587T6 19v-2H4q-.825 0-1.412-.587T2 15v-4q0-1.275.875-2.137T5 8h14q1.275 0 2.138.863T22 11v4q0 .825-.587 1.413T20 17h-2v2q0 .825-.587 1.413T16 21zM18 7H6V5q0-.825.588-1.412T8 3h8q.825 0 1.413.588T18 5zm0 5.5q.425 0 .713-.288T19 11.5t-.288-.712T18 10.5t-.712.288T17 11.5t.288.713t.712.287M8 19h8v-4H8z\"/>"},"qr-code-rounded":{"body":"<path fill=\"currentColor\" d=\"M3 10V4q0-.425.288-.712T4 3h6q.425 0 .713.288T11 4v6q0 .425-.288.713T10 11H4q-.425 0-.712-.288T3 10m2-1h4V5H5zM3 20v-6q0-.425.288-.712T4 13h6q.425 0 .713.288T11 14v6q0 .425-.288.713T10 21H4q-.425 0-.712-.288T3 20m2-1h4v-4H5zm8-9V4q0-.425.288-.712T14 3h6q.425 0 .713.288T21 4v6q0 .425-.288.713T20 11h-6q-.425 0-.712-.288T13 10m2-1h4V5h-4zm4 12v-2h2v2zm-6-6v-2h2v2zm2 2v-2h2v2zm-2 2v-2h2v2zm2 2v-2h2v2zm2-2v-2h2v2zm0-4v-2h2v2zm2 2v-2h2v2z\"/>"},"webhook-rounded":{"body":"<path fill=\"currentColor\" d=\"M7 21q-2.075 0-3.537-1.463T2 16q0-1.4.675-2.537t1.8-1.788q.525-.3 1.025.013t.5.862q0 .275-.112.5t-.313.325q-.7.375-1.137 1.075T4 16q0 1.25.875 2.125T7 19t2.125-.875T10 16q0-.425.238-.712T10.9 15h4.975q.2-.225.488-.363T17 14.5q.625 0 1.063.438T18.5 16t-.437 1.063T17 17.5q-.35 0-.638-.137T15.876 17H11.9q-.35 1.725-1.713 2.863T7 21m0-3.5q-.625 0-1.062-.437T5.5 16q0-.55.35-.95t.85-.525l2.35-3.9q-.725-.675-1.138-1.612T7.5 7q0-2.075 1.463-3.537T12.5 2q1.75 0 3.088 1.063T17.35 5.75q.125.475-.175.863t-.8.387q-.325 0-.612-.238t-.388-.587q-.275-.95-1.05-1.562T12.5 4q-1.25 0-2.125.875T9.5 7q0 .825.413 1.513T10.974 9.6q.35.2.438.5t-.088.6l-2.9 4.85q.05.125.063.225T8.5 16q0 .625-.437 1.063T7 17.5M17 21q-.65 0-1.263-.162T14.6 20.4q-.675-.375-.537-1.137t1.012-.763q.125 0 .275.05t.275.125q.325.175.663.25T17 19q1.25 0 2.125-.875T20 16t-.875-2.125T17 13q-.25 0-.475.038t-.45.112q-.4.125-.75.013t-.525-.388l-2.575-4.3q-.525-.1-.875-.5T11 7q0-.625.438-1.062T12.5 5.5t1.063.438T14 7v.213q0 .087-.05.212l2.175 3.65q.2-.05.425-.062T17 11q2.075 0 3.538 1.463T22 16t-1.463 3.538T17 21\"/>"},"hardware-rounded":{"body":"<path fill=\"currentColor\" d=\"M10 21q-.425 0-.712-.288T9 20v-7h6v7q0 .425-.288.713T14 21zM9 11V8H5.2q-.475 0-.775-.35t-.2-.825q.325-1.7 1.688-2.762T9 3h5q.425 0 .713.288T15 4v2l2.55-2.55q.2-.2.488-.325T18.625 3H19q.425 0 .713.287T20 4v6q0 .425-.288.713T19 11h-.375q-.3 0-.587-.125t-.488-.325L15 8v3z\"/>"},"cloud-upload-rounded":{"body":"<path fill=\"currentColor\" d=\"M6.5 20q-2.275 0-3.887-1.575T1 14.575q0-1.95 1.175-3.475T5.25 9.15q.625-2.3 2.5-3.725T12 4q2.925 0 4.963 2.038T19 11q1.725.2 2.863 1.488T23 15.5q0 1.875-1.312 3.188T18.5 20H13v-7.15l.9.875q.275.275.688.275t.712-.3q.275-.275.275-.7t-.275-.7l-2.6-2.6q-.3-.3-.7-.3t-.7.3l-2.6 2.6q-.275.275-.287.688t.287.712q.275.275.688.288t.712-.263l.9-.875V20z\"/>"},"payments-rounded":{"body":"<path fill=\"currentColor\" d=\"M3 20q-.825 0-1.412-.587T1 18V8q0-.425.288-.712T2 7t.713.288T3 8v10h16q.425 0 .713.288T20 19t-.288.713T19 20zm4-4q-.825 0-1.412-.587T5 14V6q0-.825.588-1.412T7 4h14q.825 0 1.413.588T23 6v8q0 .825-.587 1.413T21 16zm2-2q0-.825-.587-1.412T7 12v2zm10 0h2v-2q-.825 0-1.412.588T19 14m-5-1q1.25 0 2.125-.875T17 10t-.875-2.125T14 7t-2.125.875T11 10t.875 2.125T14 13M7 8q.825 0 1.413-.587T9 6H7zm14 0V6h-2q0 .825.588 1.413T21 8\"/>"},"diamond-rounded":{"body":"<path fill=\"currentColor\" d=\"M9.2 8.25h5.6L12.15 3h-.3zm2.05 11.85V9.75H2.625zm1.5 0l8.625-10.35H12.75zm3.7-11.85h5.175L19.55 4.1q-.275-.5-.737-.8T17.775 3H13.85zm-14.075 0H7.55L10.15 3H6.225q-.575 0-1.037.3t-.738.8z\"/>"},"coffee-rounded":{"body":"<path fill=\"currentColor\" d=\"M11 18q-2.925 0-4.962-2.037T4 11V5q0-.825.588-1.412T6 3h12.5q1.45 0 2.475 1.025T22 6.5t-1.025 2.475T18.5 10H18v1q0 2.925-2.037 4.963T11 18M6 8h10V5H6zm12 0h.5q.625 0 1.063-.437T20 6.5t-.437-1.062T18.5 5H18zM5 21q-.425 0-.712-.288T4 20t.288-.712T5 19h14q.425 0 .713.288T20 20t-.288.713T19 21z\"/>"},"footprint":{"body":"<path fill=\"currentColor\" d=\"M6.5 1q2.125 0 3.313 1.888T11 7q0 1.025-.213 1.95T10.3 10.6l-7.125 1.425Q2.8 11.3 2.4 10.013T2 7q0-2.575 1.275-4.288T6.5 1m1.375 17Q6.1 18 5.113 16.763T4 13.9l6.45-1.3q.2.425.375.963T11 14.675q0 1.425-.888 2.375T7.876 18M17.5 6q1.95 0 3.225 1.713T22 12q0 1.725-.4 3.013t-.775 2.012L13.7 15.6q-.275-.725-.487-1.65T13 12q0-2.225 1.188-4.112T17.5 6m-1.375 17q-1.35 0-2.238-.95T13 19.675q0-.575.175-1.112t.375-.963l6.425 1.3q-.125 1.625-1.1 2.863T16.125 23\"/>"},"landscape-rounded":{"body":"<path fill=\"currentColor\" d=\"m2.2 16.4l4-5.325q.15-.2.363-.3t.437-.1t.438.1t.362.3l3.4 4.525q.15.2.35.3t.45.1q.625 0 .9-.562t-.1-1.063L10.7 11.6q-.2-.275-.2-.6t.2-.6l2.5-3.325q.15-.2.363-.3t.437-.1t.438.1t.362.3l7 9.325q.375.5.1 1.05T21 18H3q-.625 0-.9-.55t.1-1.05\"/>"},"door-open-rounded":{"body":"<path fill=\"currentColor\" d=\"M4 21q-.425 0-.712-.288T3 20t.288-.712T4 19h1V5q0-.825.588-1.412T7 3h10q.825 0 1.413.588T19 5v14h1q.425 0 .713.288T21 20t-.288.713T20 21zm13-2V5h-4.5V3.9q1.1.2 1.8 1.025T15 6.85v11.1q0 .725-.475 1.288t-1.2.687V19zm-6-6q.425 0 .713-.288T12 12t-.288-.712T11 11t-.712.288T10 12t.288.713T11 13\"/>"},"bedtime-rounded":{"body":"<path fill=\"currentColor\" d=\"M12.1 22q-2.1 0-3.937-.8t-3.2-2.162t-2.163-3.2T2 11.9q0-3.2 1.8-5.8t4.825-3.65q.55-.2 1.025.138t.45.912q-.075 2.125.675 4.05t2.25 3.425t3.425 2.25t4.05.675q.65-.025.963.438t.112 1.037q-1.1 3-3.687 4.813T12.1 22\"/>"},"event-busy-rounded":{"body":"<path fill=\"currentColor\" d=\"M12 16.4L10.4 18q-.275.275-.7.275T9 18t-.275-.7t.275-.7l1.6-1.6L9 13.4q-.275-.275-.275-.7T9 12t.7-.275t.7.275l1.6 1.6l1.6-1.6q.275-.275.7-.275T15 12t.275.7t-.275.7L13.4 15l1.6 1.6q.275.275.275.7T15 18t-.7.275t-.7-.275zM5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5z\"/>"},"alarm-off-rounded":{"body":"<path fill=\"currentColor\" d=\"M18.7 16L9.1 6.25q-.45-.475-.325-1.088T9.5 4.35q.575-.2 1.213-.275T12 4q1.85 0 3.488.7t2.862 1.938t1.938 2.887T21 13.1q0 .65-.088 1.275t-.287 1.225t-.825.738T18.7 16m-1-11.55q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l2.85 2.85q.275.275.275.7t-.275.7t-.7.275t-.7-.275zM12 22q-1.85 0-3.488-.7T5.65 19.4t-1.937-2.825T3 13.1q0-1.55.463-2.912T4.8 7.7l-.85-.85l-.5.5q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l.5-.5L1.4 4.3q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l18.4 18.4q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-2.45-2.45q-1.125.825-2.487 1.288T12 22\"/>"},"battery-full-rounded":{"body":"<path fill=\"currentColor\" d=\"M8 22q-.425 0-.712-.288T7 21V5q0-.425.288-.712T8 4h2V3q0-.425.288-.712T11 2h2q.425 0 .713.288T14 3v1h2q.425 0 .713.288T17 5v16q0 .425-.288.713T16 22z\"/>"},"battery-2-bar-rounded":{"body":"<path fill=\"currentColor\" d=\"M8 22q-.425 0-.712-.288T7 21V5q0-.425.288-.712T8 4h2V3q0-.425.288-.712T11 2h2q.425 0 .713.288T14 3v1h2q.425 0 .713.288T17 5v16q0 .425-.288.713T16 22zm1-6h6V6H9z\"/>"},"battery-5-bar-rounded":{"body":"<path fill=\"currentColor\" d=\"M8 22q-.425 0-.712-.288T7 21V5q0-.425.288-.712T8 4h2V3q0-.425.288-.712T11 2h2q.425 0 .713.288T14 3v1h2q.425 0 .713.288T17 5v16q0 .425-.288.713T16 22zm1-12h6V6H9z\"/>"}},"lastModified":1785497247,"aliases":{"progress-activity-rounded":{"parent":"progress-activity"},"filter-alt-rounded":{"parent":"filter-alt"},"share-rounded":{"parent":"share"},"more-horiz-rounded":{"parent":"more-horiz"},"more-vert-rounded":{"parent":"more-vert"},"view-sidebar-rounded":{"parent":"view-sidebar"},"call-rounded":{"parent":"call"},"table-chart-rounded":{"parent":"table-chart"},"view-column-rounded":{"parent":"view-column"},"circle-rounded":{"parent":"circle"},"radio-button-checked-rounded":{"parent":"radio-button-checked"},"cloud-rounded":{"parent":"cloud"},"hard-drive-rounded":{"parent":"hard-drive"},"dns-rounded":{"parent":"dns"},"database-rounded":{"parent":"database"},"power-rounded":{"parent":"power-settings-new-rounded"},"public-rounded":{"parent":"public"},"science-rounded":{"parent":"science"},"auto-fix-high":{"parent":"auto-fix"},"target-rounded":{"parent":"target"},"lock-rounded":{"parent":"lock"},"smartphone":{"parent":"mobile"},"keyboard-command-key-rounded":{"parent":"keyboard-command-key"},"work-rounded":{"parent":"work"},"credit-card-rounded":{"parent":"credit-card"},"palette-rounded":{"parent":"palette"},"hub-rounded":{"parent":"hub"},"wallet-rounded":{"parent":"wallet"},"support-rounded":{"parent":"support"},"table-rounded":{"parent":"table"},"view-column-2-rounded":{"parent":"view-column-2"},"web-asset-rounded":{"parent":"web-asset"},"drag-indicator-rounded":{"parent":"drag-indicator"},"width-full-rounded":{"parent":"width-full"},"push-pin":{"parent":"keep"},"footprint-rounded":{"parent":"footprint"}},"width":24,"height":24}
diff --git a/workbench/control_plane/src/lib/theme/icon-data/registry.json b/workbench/control_plane/src/lib/theme/icon-data/registry.json
index e35b2de4..2df4dbb6 100644
--- a/workbench/control_plane/src/lib/theme/icon-data/registry.json
+++ b/workbench/control_plane/src/lib/theme/icon-data/registry.json
@@ -746,5 +746,357 @@
   "LifeBuoy": {
     "fluent": "person-support-20-regular",
     "material": "support-rounded"
+  },
+  "Bold": {
+    "fluent": "text-bold-20-regular",
+    "material": "format-bold-rounded"
+  },
+  "Italic": {
+    "fluent": "text-italic-20-regular",
+    "material": "format-italic-rounded"
+  },
+  "Underline": {
+    "fluent": "text-underline-20-regular",
+    "material": "format-underlined-rounded"
+  },
+  "Strikethrough": {
+    "fluent": "text-strikethrough-20-regular",
+    "material": "format-strikethrough-rounded"
+  },
+  "RemoveFormatting": {
+    "fluent": "text-clear-formatting-20-regular",
+    "material": "format-clear-rounded"
+  },
+  "AlignLeft": {
+    "fluent": "text-align-left-20-regular",
+    "material": "format-align-left-rounded"
+  },
+  "AlignCenter": {
+    "fluent": "text-align-center-20-regular",
+    "material": "format-align-center-rounded"
+  },
+  "AlignRight": {
+    "fluent": "text-align-right-20-regular",
+    "material": "format-align-right-rounded"
+  },
+  "List": {
+    "fluent": "text-bullet-list-ltr-20-regular",
+    "material": "format-list-bulleted-rounded"
+  },
+  "ListOrdered": {
+    "fluent": "text-number-list-ltr-20-regular",
+    "material": "format-list-numbered-rounded"
+  },
+  "Table": {
+    "fluent": "table-20-regular",
+    "material": "table-rounded"
+  },
+  "Redo2": {
+    "fluent": "arrow-redo-20-regular",
+    "material": "redo-rounded"
+  },
+  "Link2Off": {
+    "fluent": "link-dismiss-20-regular",
+    "material": "link-off-rounded"
+  },
+  "ImageOff": {
+    "fluent": "image-off-20-regular",
+    "material": "hide-image-rounded"
+  },
+  "Eraser": {
+    "fluent": "eraser-20-regular",
+    "material": "ink-eraser-rounded"
+  },
+  "PenTool": {
+    "fluent": "pen-20-regular",
+    "material": "draw-rounded"
+  },
+  "PencilLine": {
+    "fluent": "edit-20-regular",
+    "material": "edit-rounded"
+  },
+  "SquarePen": {
+    "fluent": "edit-20-regular",
+    "material": "edit-square-rounded"
+  },
+  "Code2": {
+    "fluent": "code-20-regular",
+    "material": "code-rounded"
+  },
+  "PanelLeftClose": {
+    "fluent": "panel-left-contract-20-regular",
+    "material": "left-panel-close-rounded"
+  },
+  "PanelLeftOpen": {
+    "fluent": "panel-left-expand-20-regular",
+    "material": "left-panel-open-rounded"
+  },
+  "PanelRight": {
+    "fluent": "panel-right-20-regular",
+    "material": "view-sidebar-rounded"
+  },
+  "Columns2": {
+    "fluent": "column-double-compare-20-regular",
+    "material": "view-column-2-rounded"
+  },
+  "Rows3": {
+    "fluent": "row-triple-20-regular",
+    "material": "table-rows-rounded"
+  },
+  "LayoutTemplate": {
+    "fluent": "slide-layout-20-regular",
+    "material": "dashboard-rounded"
+  },
+  "AppWindow": {
+    "fluent": "window-20-regular",
+    "material": "web-asset-rounded"
+  },
+  "GripVertical": {
+    "fluent": "re-order-dots-vertical-20-regular",
+    "material": "drag-indicator-rounded"
+  },
+  "StretchHorizontal": {
+    "fluent": "auto-fit-width-20-regular",
+    "material": "width-full-rounded"
+  },
+  "ChevronsUpDown": {
+    "fluent": "chevron-up-down-20-regular",
+    "material": "unfold-more-rounded"
+  },
+  "ListFilter": {
+    "fluent": "filter-20-regular",
+    "material": "filter-list-rounded"
+  },
+  "ArrowDownUp": {
+    "fluent": "arrow-sort-20-regular",
+    "material": "swap-vert-rounded"
+  },
+  "ArrowUpNarrowWide": {
+    "fluent": "arrow-sort-up-20-regular",
+    "material": "sort-rounded"
+  },
+  "ArrowDownWideNarrow": {
+    "fluent": "arrow-sort-down-20-regular",
+    "material": "sort-rounded"
+  },
+  "SearchX": {
+    "fluent": "search-info-20-regular",
+    "material": "search-off-rounded"
+  },
+  "ArrowUpRight": {
+    "fluent": "arrow-up-right-20-regular",
+    "material": "north-east-rounded"
+  },
+  "ArrowDownRight": {
+    "fluent": "arrow-down-right-20-regular",
+    "material": "south-east-rounded"
+  },
+  "ArrowUpToLine": {
+    "fluent": "arrow-export-up-20-regular",
+    "material": "vertical-align-top-rounded"
+  },
+  "CornerDownRight": {
+    "fluent": "arrow-turn-right-down-20-regular",
+    "material": "subdirectory-arrow-right-rounded"
+  },
+  "SkipForward": {
+    "fluent": "next-20-regular",
+    "material": "skip-next-rounded"
+  },
+  "RotateCw": {
+    "fluent": "arrow-clockwise-20-regular",
+    "material": "refresh-rounded"
+  },
+  "LoaderCircle": {
+    "fluent": "spinner-ios-20-regular",
+    "material": "progress-activity-rounded"
+  },
+  "Hourglass": {
+    "fluent": "hourglass-20-regular",
+    "material": "hourglass-empty-rounded"
+  },
+  "CheckCheck": {
+    "fluent": "checkmark-starburst-20-regular",
+    "material": "done-all-rounded"
+  },
+  "BadgeCheck": {
+    "fluent": "checkmark-starburst-20-regular",
+    "material": "verified-rounded"
+  },
+  "CircleDot": {
+    "fluent": "radio-button-20-regular",
+    "material": "radio-button-checked-rounded"
+  },
+  "MinusCircle": {
+    "fluent": "subtract-circle-20-regular",
+    "material": "do-not-disturb-on-rounded"
+  },
+  "PauseCircle": {
+    "fluent": "pause-circle-20-regular",
+    "material": "pause-circle-rounded"
+  },
+  "Gauge": {
+    "fluent": "gauge-20-regular",
+    "material": "speed-rounded"
+  },
+  "Milestone": {
+    "fluent": "flag-20-regular",
+    "material": "flag-rounded"
+  },
+  "ShieldX": {
+    "fluent": "shield-dismiss-20-regular",
+    "material": "gpp-bad-rounded"
+  },
+  "ListTodo": {
+    "fluent": "task-list-square-ltr-20-regular",
+    "material": "checklist-rounded"
+  },
+  "ListPlus": {
+    "fluent": "text-bullet-list-add-20-regular",
+    "material": "playlist-add-rounded"
+  },
+  "CopyX": {
+    "fluent": "clipboard-error-20-regular",
+    "material": "content-paste-off-rounded"
+  },
+  "FolderPlus": {
+    "fluent": "folder-add-20-regular",
+    "material": "create-new-folder-rounded"
+  },
+  "FolderClosed": {
+    "fluent": "folder-20-regular",
+    "material": "folder-rounded"
+  },
+  "BookMarked": {
+    "fluent": "book-star-20-regular",
+    "material": "bookmark-rounded"
+  },
+  "Pin": {
+    "fluent": "pin-20-regular",
+    "material": "push-pin"
+  },
+  "PinOff": {
+    "fluent": "pin-off-20-regular",
+    "material": "keep-off-rounded"
+  },
+  "Mails": {
+    "fluent": "mail-multiple-20-regular",
+    "material": "mail-rounded"
+  },
+  "MessageSquareText": {
+    "fluent": "comment-text-20-regular",
+    "material": "chat-rounded"
+  },
+  "MessageCircleQuestion": {
+    "fluent": "chat-help-20-regular",
+    "material": "contact-support-rounded"
+  },
+  "PhoneIncoming": {
+    "fluent": "call-inbound-20-regular",
+    "material": "phone-callback-rounded"
+  },
+  "PhoneOff": {
+    "fluent": "call-dismiss-20-regular",
+    "material": "phone-disabled-rounded"
+  },
+  "Headphones": {
+    "fluent": "headphones-20-regular",
+    "material": "headphones-rounded"
+  },
+  "AudioLines": {
+    "fluent": "sound-wave-circle-20-regular",
+    "material": "graphic-eq-rounded"
+  },
+  "UserRound": {
+    "fluent": "person-20-regular",
+    "material": "person-rounded"
+  },
+  "Keyboard": {
+    "fluent": "keyboard-20-regular",
+    "material": "keyboard-rounded"
+  },
+  "Printer": {
+    "fluent": "print-20-regular",
+    "material": "print-rounded"
+  },
+  "QrCode": {
+    "fluent": "qr-code-20-regular",
+    "material": "qr-code-rounded"
+  },
+  "Webhook": {
+    "fluent": "link-square-20-regular",
+    "material": "webhook-rounded"
+  },
+  "GitFork": {
+    "fluent": "branch-fork-20-regular",
+    "material": "fork-right-rounded"
+  },
+  "Hammer": {
+    "fluent": "wrench-20-regular",
+    "material": "hardware-rounded"
+  },
+  "Box": {
+    "fluent": "box-20-regular",
+    "material": "inventory-2-rounded"
+  },
+  "Sliders": {
+    "fluent": "options-20-regular",
+    "material": "tune-rounded"
+  },
+  "BarChart2": {
+    "fluent": "data-bar-vertical-20-regular",
+    "material": "bar-chart-rounded"
+  },
+  "UploadCloud": {
+    "fluent": "cloud-arrow-up-20-regular",
+    "material": "cloud-upload-rounded"
+  },
+  "Coins": {
+    "fluent": "money-20-regular",
+    "material": "payments-rounded"
+  },
+  "Gem": {
+    "fluent": "diamond-20-regular",
+    "material": "diamond-rounded"
+  },
+  "Coffee": {
+    "fluent": "drink-coffee-20-regular",
+    "material": "coffee-rounded"
+  },
+  "Footprints": {
+    "fluent": "run-20-regular",
+    "material": "footprint-rounded"
+  },
+  "Mountain": {
+    "fluent": "mountain-location-top-20-regular",
+    "material": "landscape-rounded"
+  },
+  "DoorOpen": {
+    "fluent": "door-20-regular",
+    "material": "door-open-rounded"
+  },
+  "MoonStar": {
+    "fluent": "weather-moon-20-regular",
+    "material": "bedtime-rounded"
+  },
+  "CalendarX": {
+    "fluent": "calendar-cancel-20-regular",
+    "material": "event-busy-rounded"
+  },
+  "AlarmClockOff": {
+    "fluent": "alert-off-20-regular",
+    "material": "alarm-off-rounded"
+  },
+  "Battery": {
+    "fluent": "battery-10-20-regular",
+    "material": "battery-full-rounded"
+  },
+  "BatteryLow": {
+    "fluent": "battery-2-20-regular",
+    "material": "battery-2-bar-rounded"
+  },
+  "BatteryMedium": {
+    "fluent": "battery-5-20-regular",
+    "material": "battery-5-bar-rounded"
   }
 }

From c675e9878fa6c6f7e1c3242ebb46d05ee3b5014e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 6 Aug 2026 10:17:36 +0000
Subject: [PATCH 05/10] feat(theming): theme Monaco and Shiki per theme, not
 just per mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Code views were the last surface still branching on dark/light only, so a
code block looked identical on Fluent and Material while everything around
it changed. Monaco and Shiki each ship a closed set of named themes and
cannot be driven by our CSS tokens, so a theme now names its equivalents:

  Fluent    → VS Code's own dark-plus / light-plus
  Material  → material-theme-darker / material-theme-lighter
  Graphite  → min-dark / min-light, plus Monaco's high-contrast themes
  RapidTool → github-dark / github-light (unchanged in effect)

Call sites read useMonacoTheme() / useShikiTheme() instead of comparing
resolvedTheme, which saw two states where the app has eight.

A unit test checks every name against Monaco's built-ins and the installed
Shiki bundle, and was verified to fail on a bad name — a typo here is
invisible until someone opens a code view, where Monaco silently falls
back and Shiki throws at render.

xyflow's colorMode deliberately stays dark/light: it drives only that
library's own chrome, and our nodes already use our tokens.

Also records, in the scope doc, why infra/postgres/schema.generated.sql
was NOT regenerated despite the migrations being applied and verified: a
clean replay produces 71 fewer tables, because that snapshot came from a
Postgres shared with LiteLLM, Langfuse and mem0. Overwriting it would
delete real schema. It is separately stale by 86 tables — a pre-existing
chore needing a dump from a real deployment.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SyTtr9JJXCS8xNkzW5Fny5
---
 docs/THEMING_ENGINE_SCOPE.md                  | 70 +++++++++++++------
 workbench/control_plane/DESIGN_SYSTEM.md      | 11 +++
 .../src/app/build/apps/[slug]/edit/page.tsx   |  4 +-
 .../app/workflows/components/ModuleStudio.tsx |  4 +-
 .../src/components/ArtifactViewerModal.tsx    |  8 ++-
 .../control_plane/src/lib/theme/surfaces.ts   | 36 ++++++++++
 .../src/lib/theme/themes.test.ts              | 45 +++++++++++-
 .../control_plane/src/lib/theme/themes.ts     | 16 +++++
 .../control_plane/src/lib/theme/types.ts      | 17 +++++
 9 files changed, 185 insertions(+), 26 deletions(-)
 create mode 100644 workbench/control_plane/src/lib/theme/surfaces.ts

diff --git a/docs/THEMING_ENGINE_SCOPE.md b/docs/THEMING_ENGINE_SCOPE.md
index f9b2940a..63ec1a8e 100644
--- a/docs/THEMING_ENGINE_SCOPE.md
+++ b/docs/THEMING_ENGINE_SCOPE.md
@@ -1,6 +1,8 @@
 # CommandCenter Theming Engine — Scoping Document
 
-**Status:** Phases 1–4 built and shipped. See "What was built" below; the rest
+**Status:** Built and shipped through the coverage work (phases 1–4 plus the
+full icon migration, org-default backend, contrast gate and third-party
+surfaces). See "What was built" below; the rest
 of this document is the original research and remains the design rationale.
 **Scope:** `workbench/control_plane` (Next.js 16 · React 19 · Tailwind CSS v4)
 **Goal:** A theming engine that can restyle the entire Control Plane — colors,
@@ -34,11 +36,24 @@ before the first frame.
 Adding a theme is a manifest entry — no component, CSS or Tailwind change.
 
 **Icons** go through `<Icon name="Plus" />`, using Lucide names as the shared
-vocabulary so migrating a call site is a one-line edit. Non-Lucide packs are
-pruned Iconify collections (~80 KB each, 187 icons) built by
-`scripts/build-icon-packs.mjs`, fetched lazily only when a theme needs them and
-rendered offline. All 28 sidebar glyphs swap; unmigrated call sites keep
-rendering Lucide, so the migration is incremental and never breaks.
+vocabulary. **Every call site in the app is migrated** — 158 files; the only
+modules still importing `lucide-react` are `Icon.tsx` (the primitive, which
+falls back to Lucide) and `lib/icons.tsx` (the resolver used by server
+components and by `iconSvg.ts`'s static-string rendering, neither of which can
+run hooks). All 251 Lucide icons the app uses resolve in both non-Lucide packs.
+Those packs are pruned Iconify collections (275 icons, ~115 KB and ~106 KB)
+built by `scripts/build-icon-packs.mjs`, fetched lazily only when a theme needs
+them, and rendered offline.
+
+`themedIcon(name)` returns a memoised component bound to one name, for tables
+that store an icon rather than rendering it inline; `ThemedIcon` is its type.
+
+**Third-party surfaces** — Monaco and Shiki — name their equivalents per theme
+in `surfaces`, so a code view follows the theme rather than only the colour
+mode. Fluent highlights with VS Code's own dark-plus, Material with
+material-theme, Graphite with the minimal themes. xyflow's `colorMode` stays
+dark/light on purpose: it drives only that library's chrome, and our nodes
+already use our tokens.
 
 **Preferences** resolve member override → org default → built-in. Personal
 choices are per-browser. The **org default persists in Postgres** —
@@ -62,24 +77,37 @@ regress, and fixing one forces its entry to be deleted so the list cannot go
 stale. New themes must meet AA outright. Two shortfalls introduced by the new
 Fluent and Material themes were fixed rather than recorded.
 
-**Verified.** 172 frontend unit tests (manifests, CSS generation, icon
-registry, contrast), 22 gateway tests, and 14 browser tests
+**Verified.** 359 frontend unit tests (manifests, CSS generation, icon
+registry, contrast, surface themes), 22 gateway tests, and 14 browser tests
 (`e2e/theming.spec.ts`) asserting computed styles and real glyph swapping —
 the only place CSS cascade order can actually be checked. A drift guard parses
 `globals.css` and fails if its no-JavaScript fallback diverges from the default
-manifest. The migration and the full store→route round trip were exercised
-against a real Postgres 16.
-
-⚠️ **Deploy step:** `infra/postgres/schema.generated.sql` was NOT regenerated —
-replaying all 145 migrations needs the `pgvector` and `age` extensions, which
-were unavailable here, and the file must never be hand-edited. Run
-`scripts/apply_migrations.sh` then `scripts/dump_schema.sh` on a real
-deployment and commit the refreshed snapshot.
-
-**Not done (Phase 5).** Shared `<Button>` / `<Input>` primitives, and migrating
-the remaining ~155 files that still import `lucide-react` directly. Neither
-blocks anything: those call sites already theme correctly for colour, radius
-and font, and simply keep Lucide glyphs until migrated.
+manifest.
+
+**Migrations were applied and verified** against a real Postgres 16 with
+`pgvector` and `age` installed: all 143 numbered migrations replay cleanly in
+order, twice (they are idempotent, and the deploy runner re-runs them every
+time), and the store → route round trip works end to end.
+
+⚠️ **`infra/postgres/schema.generated.sql` was deliberately NOT regenerated.**
+Doing so from a clean replay would have DELETED ~71 tables of real schema. That
+file was dumped from a Postgres instance shared with LiteLLM, Langfuse and
+mem0, whose tables come from their own migrations, not this repo's. It is also
+badly stale on its own terms — missing 86 tables the numbered migrations
+create (crm, gtd, wa, workflows, apps, org access control). Refreshing it
+needs a dump from a real deployment running all three systems, and is a
+pre-existing chore unrelated to theming.
+
+**Not done (Phase 5).** Shared `<Button>` / `<Input>` primitives. Until they
+exist, themes differ in colour, shape, font, effects and icons, but not in
+component *behaviour* — no Fluent inner borders, no Material state layers — and
+the `--heading-weight` / `--label-weight` tokens have nowhere to apply.
+
+Also outstanding: ~120 hardcoded hex colours, 54 of them in
+`genUITemplates.tsx` (the templates agent-generated UI is built from) and 41 in
+the observability pixel-art sprites, which are artwork and arguably should stay
+hardcoded. And seven pairs in the original RapidTool palette sit below WCAG AA;
+they are pinned as a ratchet, and fixing them is a brand decision.
 
 ---
 
diff --git a/workbench/control_plane/DESIGN_SYSTEM.md b/workbench/control_plane/DESIGN_SYSTEM.md
index e8ffd0d9..0410740b 100644
--- a/workbench/control_plane/DESIGN_SYSTEM.md
+++ b/workbench/control_plane/DESIGN_SYSTEM.md
@@ -284,6 +284,7 @@ Where things live:
 | `src/lib/theme/types.ts` | Token vocabulary — what a theme is allowed to set |
 | `src/lib/theme/css.ts` | Manifests → `html[data-theme="…"]` CSS scopes |
 | `src/lib/theme/store.ts` | Active theme, density, accent; org default vs member override |
+| `src/lib/theme/surfaces.ts` | Monaco / Shiki theme resolution for the active theme |
 | `src/lib/theme/boot.ts` | Pre-paint script that applies the stored theme (no flash) |
 | `src/components/Icon.tsx` | The themed icon primitive |
 | `scripts/build-icon-packs.mjs` | Regenerates the pruned icon packs (`npm run build:icons`) |
@@ -302,6 +303,16 @@ session. They must stay identical to the `rapidtool` manifest —
 `src/lib/theme/themes.test.ts` parses the stylesheet and fails if they drift.
 **Change how the app looks by editing the manifest, not `globals.css`.**
 
+**Third-party surfaces.** Monaco and Shiki ship closed sets of named themes and
+cannot be driven by our CSS tokens, so each theme names its equivalents in
+`surfaces`. Read them with `useMonacoTheme()` / `useShikiTheme()` — never branch
+on `resolvedTheme === "light"`, which sees two states where the app has eight.
+A unit test checks the names against Monaco's built-ins and the Shiki bundle,
+because a typo there is invisible until someone opens a code view.
+
+xyflow's `colorMode` legitimately stays dark/light: it only drives the
+library's own chrome, and our nodes are styled with our tokens already.
+
 **Preference resolution:** member override → organisation default → built-in
 default. Members' choices are per-browser (localStorage); the org default is
 stored in Postgres (`org_settings`, migration 145) and served by the gateway at
diff --git a/workbench/control_plane/src/app/build/apps/[slug]/edit/page.tsx b/workbench/control_plane/src/app/build/apps/[slug]/edit/page.tsx
index 760df621..b8f56407 100644
--- a/workbench/control_plane/src/app/build/apps/[slug]/edit/page.tsx
+++ b/workbench/control_plane/src/app/build/apps/[slug]/edit/page.tsx
@@ -23,6 +23,7 @@ import {
 } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useTheme } from "next-themes";
+import { useMonacoTheme } from "@/lib/theme/surfaces";
 import Editor from "@monaco-editor/react";
 import AgentChat from "@/components/AgentChat";
 import SandboxedHtml from "@/components/SandboxedHtml";
@@ -835,6 +836,7 @@ function Workshop({ slug }: { slug: string }) {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { resolvedTheme } = useTheme();
+  const monacoTheme = useMonacoTheme();
   const theme: "light" | "dark" = resolvedTheme === "light" ? "light" : "dark";
 
   const [app, setApp] = useState<AppMeta | null>(null);
@@ -2115,7 +2117,7 @@ function Workshop({ slug }: { slug: string }) {
                     <Editor
                       height="100%"
                       language={monacoLanguage(selectedPath)}
-                      theme={theme === "dark" ? "vs-dark" : "light"}
+                      theme={monacoTheme}
                       value={editedContent}
                       onChange={(v) => setEditedContent(v ?? "")}
                       options={{
diff --git a/workbench/control_plane/src/app/workflows/components/ModuleStudio.tsx b/workbench/control_plane/src/app/workflows/components/ModuleStudio.tsx
index 91d8c03c..e43e6d09 100644
--- a/workbench/control_plane/src/app/workflows/components/ModuleStudio.tsx
+++ b/workbench/control_plane/src/app/workflows/components/ModuleStudio.tsx
@@ -12,6 +12,7 @@ import Icon from "@/components/Icon";
 import { useCallback, useEffect, useRef, useState } from "react";
 import Editor from "@monaco-editor/react";
 import { useTheme } from "next-themes";
+import { useMonacoTheme } from "@/lib/theme/surfaces";
 import {
   createModule,
   deleteModule,
@@ -33,6 +34,7 @@ const STATUS_BADGE: Record<string, string> = {
 
 export default function ModuleStudio() {
   const { resolvedTheme } = useTheme();
+  const monacoTheme = useMonacoTheme();
   const [modules, setModules] = useState<ModuleSummary[]>([]);
   const [loading, setLoading] = useState(true);
   const [selectedId, setSelectedId] = useState<string | null>(null);
@@ -417,7 +419,7 @@ export default function ModuleStudio() {
             <Editor
               height="100%"
               language="python"
-              theme={resolvedTheme === "light" ? "light" : "vs-dark"}
+              theme={monacoTheme}
               value={code}
               onChange={(v) => setCode(v ?? "")}
               options={{
diff --git a/workbench/control_plane/src/components/ArtifactViewerModal.tsx b/workbench/control_plane/src/components/ArtifactViewerModal.tsx
index 918a809f..eec27657 100644
--- a/workbench/control_plane/src/components/ArtifactViewerModal.tsx
+++ b/workbench/control_plane/src/components/ArtifactViewerModal.tsx
@@ -21,6 +21,7 @@ import SandboxedHtml from "@/components/SandboxedHtml";
 import SandboxedReact from "@/components/SandboxedReact";
 import { buildIconMap, iconsUsedIn } from "@/lib/iconSvg";
 import { useTheme } from "next-themes";
+import { useShikiTheme } from "@/lib/theme/surfaces";
 import { classifyArtifact, extOf, isRenderable } from "@/lib/artifactKind";
 import type { FileEntry } from "./ArtifactSidebar";
 
@@ -92,6 +93,9 @@ function formatBytes(bytes: number): string {
 
 function CodeBlock({ code, lang }: { code: string; lang: string }) {
   const [html, setHtml] = useState<string | null>(null);
+  // Follows the active THEME, not just the colour mode: Fluent highlights with
+  // VS Code's own dark-plus, Material with material-theme, and so on.
+  const shikiTheme = useShikiTheme();
 
   useEffect(() => {
     let cancelled = false;
@@ -100,7 +104,7 @@ function CodeBlock({ code, lang }: { code: string; lang: string }) {
         const { codeToHtml } = await import("shiki");
         const result = await codeToHtml(code, {
           lang,
-          theme: "github-dark",
+          theme: shikiTheme,
         });
         if (!cancelled) setHtml(result);
       } catch {
@@ -109,7 +113,7 @@ function CodeBlock({ code, lang }: { code: string; lang: string }) {
       }
     })();
     return () => { cancelled = true; };
-  }, [code, lang]);
+  }, [code, lang, shikiTheme]);
 
   if (html) {
     return (
diff --git a/workbench/control_plane/src/lib/theme/surfaces.ts b/workbench/control_plane/src/lib/theme/surfaces.ts
new file mode 100644
index 00000000..7642b110
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/surfaces.ts
@@ -0,0 +1,36 @@
+"use client";
+
+/**
+ * Theme resolution for third-party surfaces.
+ *
+ * Monaco and Shiki each ship a closed set of named themes and cannot be driven
+ * by our CSS custom properties, so they are the one place a theme has to name
+ * an external vocabulary rather than supply token values. Every call site that
+ * used to branch on `resolvedTheme === "light"` reads this instead, so a code
+ * view follows the active theme rather than only the colour mode.
+ */
+
+import { useTheme } from "next-themes";
+import { useActiveTheme } from "./store";
+import type { ThemeMode } from "./types";
+
+/** Monaco's built-in theme ids — the only values it accepts unregistered. */
+export const MONACO_BUILT_INS = ["vs", "vs-dark", "hc-black", "hc-light"] as const;
+
+/** The active colour mode, defaulting to dark as the app does. */
+export function useMode(): ThemeMode {
+  const { resolvedTheme } = useTheme();
+  return resolvedTheme === "light" ? "light" : "dark";
+}
+
+/** Monaco editor theme id for the active theme and mode. */
+export function useMonacoTheme(): string {
+  const theme = useActiveTheme();
+  return theme.surfaces.monaco[useMode()];
+}
+
+/** Shiki highlighting theme for the active theme and mode. */
+export function useShikiTheme(): string {
+  const theme = useActiveTheme();
+  return theme.surfaces.shiki[useMode()];
+}
diff --git a/workbench/control_plane/src/lib/theme/themes.test.ts b/workbench/control_plane/src/lib/theme/themes.test.ts
index 49fd87d5..2bcc0b3e 100644
--- a/workbench/control_plane/src/lib/theme/themes.test.ts
+++ b/workbench/control_plane/src/lib/theme/themes.test.ts
@@ -8,7 +8,7 @@
  * parses the stylesheet and fails if the two ever diverge.
  */
 
-import { readFileSync } from "node:fs";
+import { existsSync, readFileSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 import { describe, expect, it } from "vitest";
 
@@ -121,3 +121,46 @@ describe("globals.css fallback matches the default manifest", () => {
     expect(GLOBALS).toContain("--radius-lg: var(--radius)");
   });
 });
+
+describe("third-party surface themes", () => {
+  // Monaco silently falls back to its default for an unknown id, and Shiki
+  // throws at render time — neither surfaces a typo anywhere a type-checker or
+  // a page load would catch it. So the names are checked against reality here.
+  const MONACO_BUILT_INS = new Set(["vs", "vs-dark", "hc-black", "hc-light"]);
+
+  it.each(THEMES.map((t) => [t.id, t] as const))(
+    "%s names Monaco themes that exist",
+    (_id, theme) => {
+      for (const mode of ["dark", "light"] as const) {
+        expect(
+          MONACO_BUILT_INS.has(theme.surfaces.monaco[mode]),
+          `${theme.id}/${mode} → ${theme.surfaces.monaco[mode]}`,
+        ).toBe(true);
+      }
+    },
+  );
+
+  it.each(THEMES.map((t) => [t.id, t] as const))(
+    "%s names Shiki themes that Shiki actually bundles",
+    (_id, theme) => {
+      for (const mode of ["dark", "light"] as const) {
+        const name = theme.surfaces.shiki[mode];
+        expect(
+          existsSync(
+            fileURLToPath(new URL(`../../../node_modules/@shikijs/themes/dist/${name}.mjs`, import.meta.url)),
+          ),
+          `${theme.id}/${mode} → ${name} is not a bundled Shiki theme`,
+        ).toBe(true);
+      }
+    },
+  );
+
+  it("gives the dark and light modes different surface themes", () => {
+    // A theme reusing one highlighting theme for both modes renders dark code
+    // on a light page, or vice versa.
+    for (const theme of THEMES) {
+      expect(theme.surfaces.shiki.dark).not.toBe(theme.surfaces.shiki.light);
+      expect(theme.surfaces.monaco.dark).not.toBe(theme.surfaces.monaco.light);
+    }
+  });
+});
diff --git a/workbench/control_plane/src/lib/theme/themes.ts b/workbench/control_plane/src/lib/theme/themes.ts
index d76e0efa..188b85cf 100644
--- a/workbench/control_plane/src/lib/theme/themes.ts
+++ b/workbench/control_plane/src/lib/theme/themes.ts
@@ -53,6 +53,10 @@ const rapidtool: Theme = {
     motionDuration: "0.2s",
     motionEasing: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
   },
+  surfaces: {
+    monaco: { dark: "vs-dark", light: "vs" },
+    shiki: { dark: "github-dark", light: "github-light" },
+  },
   colors: {
     dark: {
       background: "hsl(220 13% 8%)",
@@ -153,6 +157,10 @@ const fluent: Theme = {
     motionDuration: "0.15s",
     motionEasing: "cubic-bezier(0.33, 0, 0.67, 1)",
   },
+  surfaces: {
+    monaco: { dark: "vs-dark", light: "vs" },
+    shiki: { dark: "dark-plus", light: "light-plus" },
+  },
   colors: {
     dark: {
       background: "hsl(0 0% 13%)",
@@ -246,6 +254,10 @@ const material: Theme = {
     motionDuration: "0.2s",
     motionEasing: "cubic-bezier(0.2, 0, 0, 1)",
   },
+  surfaces: {
+    monaco: { dark: "vs-dark", light: "vs" },
+    shiki: { dark: "material-theme-darker", light: "material-theme-lighter" },
+  },
   colors: {
     dark: {
       background: "hsl(270 12% 9%)",
@@ -334,6 +346,10 @@ const graphite: Theme = {
     motionDuration: "0.12s",
     motionEasing: "ease-out",
   },
+  surfaces: {
+    monaco: { dark: "hc-black", light: "hc-light" },
+    shiki: { dark: "min-dark", light: "min-light" },
+  },
   colors: {
     dark: {
       background: "hsl(0 0% 7%)",
diff --git a/workbench/control_plane/src/lib/theme/types.ts b/workbench/control_plane/src/lib/theme/types.ts
index d4d1c0d4..d6c96b54 100644
--- a/workbench/control_plane/src/lib/theme/types.ts
+++ b/workbench/control_plane/src/lib/theme/types.ts
@@ -149,6 +149,22 @@ export type EffectTokens = {
   motionEasing: string;
 };
 
+/**
+ * Themes for the third-party surfaces that carry their own theme vocabulary.
+ *
+ * Monaco and Shiki cannot be driven by our CSS tokens — each ships a closed
+ * set of named themes. Before this, both branched on dark/light only, so a
+ * code block looked identical on Fluent and Material while everything around
+ * it changed. Naming the equivalent per theme is what makes a code view part
+ * of the theme rather than an island in it.
+ */
+export type SurfaceTokens = {
+  /** Monaco editor theme id. Only its four built-ins are valid. */
+  monaco: { dark: string; light: string };
+  /** Shiki highlighting theme; must be a name Shiki bundles. */
+  shiki: { dark: string; light: string };
+};
+
 /** Identifier of an icon pack understood by `<Icon>`. */
 export type IconPackId = "lucide" | "fluent" | "material";
 
@@ -167,6 +183,7 @@ export type Theme = {
   typography: TypographyTokens;
   shape: ShapeTokens;
   effects: EffectTokens;
+  surfaces: SurfaceTokens;
   colors: {
     dark: ColorTokens;
     light: ColorTokens;

From 4bd8d18fc25e796e7aa7a8028e2d89cc950ab15a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 6 Aug 2026 12:33:29 +0000
Subject: [PATCH 06/10] feat(theming): control primitives so themes differ in
 behaviour, not just colour
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Until now a theme could change a button's palette, radius and font, but every
button still BEHAVED identically. That is the gap this closes: Material 3
renders pills with a translucent state layer on hover, Fluent strokes even
its solid buttons and weights labels heavier, Graphite upper-cases them.
None of that is expressible as a colour, and none of it can live in a class
string copied across call sites — a state layer needs a pseudo-element, and
text-transform has to come from a custom property so a theme can change it
without touching a call site.

New control tokens per theme (buttonRadius, filledBorderWidth,
stateLayerOpacity, focusRingWidth, labelTracking, labelTransform), emitted
as CSS custom properties alongside the existing ones. This also gives
--label-weight its first consumer; it had been defined by every theme and
applied nowhere.

New primitives in src/components/ui/:
  Button   — variant primary/secondary/ghost/destructive, size sm/md/lg/icon,
             themed icon by name, and `loading` which disables the button as
             well as showing a spinner, since a double-submit is a real bug
             and "disabled while pending" is the part call sites forget.
  Input    — plus Textarea; leading icon; 16px on the lg size so iOS does not
             zoom the viewport on focus.
  Badge    — status pill carrying the theme's label treatment.

The default variant and sizes reproduce the previous class recipes exactly,
verified by a browser test asserting RapidTool's buttons still measure 12px
radius, weight 500, no border on a filled button and no state layer. Three
further tests pin Material's 9999px pill and 0.08 state layer, Fluent's 1px
filled stroke and 600 weight, and Graphite's uppercase.

DESIGN_SYSTEM.md replaces the button class-recipe table — which had been
copied into ~75 files — with the components, and explains why a copied class
string opts a control out of theming. The Tabs example and the typography
table were stale after earlier changes (icon names, theme fonts) and are
corrected. `cc-control` is documented for genuinely bespoke controls that
still want the theme's label treatment and focus ring.

Adoption starts with Settings → Appearance. The remaining ~1,100 buttons keep
rendering correctly from their existing classes and can migrate incrementally,
the same way the icon migration ran.

Verified: 359 unit tests, 18 browser tests, typecheck clean, build clean,
lint unchanged from baseline.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SyTtr9JJXCS8xNkzW5Fny5
---
 workbench/control_plane/DESIGN_SYSTEM.md      | 72 +++++++++++----
 workbench/control_plane/e2e/theming.spec.ts   | 63 +++++++++++++
 workbench/control_plane/src/app/globals.css   | 63 +++++++++++++
 .../src/app/settings/appearance/page.tsx      | 38 ++++----
 .../control_plane/src/components/ui/Badge.tsx | 53 +++++++++++
 .../src/components/ui/Button.tsx              | 88 +++++++++++++++++++
 .../control_plane/src/components/ui/Input.tsx | 72 +++++++++++++++
 workbench/control_plane/src/lib/theme/css.ts  |  8 +-
 .../src/lib/theme/themes.test.ts              |  6 ++
 .../control_plane/src/lib/theme/themes.ts     | 38 ++++++++
 .../control_plane/src/lib/theme/types.ts      | 32 +++++++
 11 files changed, 495 insertions(+), 38 deletions(-)
 create mode 100644 workbench/control_plane/src/components/ui/Badge.tsx
 create mode 100644 workbench/control_plane/src/components/ui/Button.tsx
 create mode 100644 workbench/control_plane/src/components/ui/Input.tsx

diff --git a/workbench/control_plane/DESIGN_SYSTEM.md b/workbench/control_plane/DESIGN_SYSTEM.md
index 0410740b..883f1b2e 100644
--- a/workbench/control_plane/DESIGN_SYSTEM.md
+++ b/workbench/control_plane/DESIGN_SYSTEM.md
@@ -60,14 +60,17 @@ Never use `bg-[#1a1b1e]` or arbitrary hex values.
 
 ## Typography
 
+Fonts come from the active theme — `font-sans` resolves to Geist on RapidTool,
+Segoe UI on Fluent, Roboto on Material. Never name a family directly.
+
 | Element | Font | Class |
 |---|---|---|
-| Body text | Geist Sans | `font-sans` (default) |
-| Code / monospace | Geist Mono | `font-mono` |
-| Page title (`h1`) | Geist Sans | `text-base sm:text-lg font-bold text-foreground` |
-| Section heading | Geist Sans | `text-sm font-semibold text-foreground` |
-| Body / description | Geist Sans | `text-xs text-muted-foreground` |
-| Small label / badge | Geist Sans | `text-[10px] text-muted-foreground` |
+| Body text | theme's app font | `font-sans` (default) |
+| Code / monospace | theme's mono font | `font-mono` |
+| Page title (`h1`) | theme font | `text-base sm:text-lg font-bold text-foreground` |
+| Section heading | theme font | `text-sm font-semibold text-foreground` |
+| Body / description | theme font | `text-xs text-muted-foreground` |
+| Small label / badge | theme font | `text-[10px] text-muted-foreground` |
 
 ---
 
@@ -86,14 +89,15 @@ Two variants for tab navigation:
 
 ```tsx
 import Tabs from "@/components/Tabs";
-import { Zap, Mail, Server, Puzzle } from "lucide-react";
 
+// `icon` is a Lucide NAME, not a component — a component would pin the tab
+// bar to one icon pack while the rest of the app follows the theme.
 <Tabs
   tabs={[
-    { id: "apis",    label: "APIs",    icon: Zap },
-    { id: "email",   label: "Email",   icon: Mail },
-    { id: "mcps",    label: "MCPs",    icon: Server },
-    { id: "plugins", label: "Plugins", icon: Puzzle },
+    { id: "apis",    label: "APIs",    icon: "Zap" },
+    { id: "email",   label: "Email",   icon: "Mail" },
+    { id: "mcps",    label: "MCPs",    icon: "Server" },
+    { id: "plugins", label: "Plugins", icon: "Puzzle" },
   ]}
   activeTab={tab}
   onTabChange={setTab}
@@ -119,14 +123,48 @@ import FilterPills from "@/components/FilterPills";
 />
 ```
 
-### Buttons
+### Buttons, inputs and badges — use the primitives
+
+```tsx
+import Button from "@/components/ui/Button";
+import { Input, Textarea } from "@/components/ui/Input";
+import Badge from "@/components/ui/Badge";
+
+<Button onClick={save}>Save</Button>                            // primary
+<Button variant="secondary" size="sm">Cancel</Button>
+<Button variant="destructive" icon="Trash2" loading={busy}>Delete</Button>
+<Button variant="ghost" size="icon" icon="X" aria-label="Close" />
+
+<Input icon="Search" value={q} onChange={…} placeholder="Search" />
+<Textarea rows={4} value={body} onChange={…} />
+
+<Badge tone="success" dot>Connected</Badge>
+```
 
-| Role | Classes |
+| Prop | Values |
 |---|---|
-| Primary action | `rounded-lg bg-primary px-3 sm:px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 tech-transition` |
-| Secondary / cancel | `rounded-lg border border-border px-3 sm:px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition` |
-| Ghost / icon-only | `p-2 rounded-lg border border-border text-muted-foreground hover:bg-secondary tech-transition` |
-| Destructive | `rounded-lg bg-destructive/10 px-3 py-2 text-sm text-destructive hover:bg-destructive/20 tech-transition` |
+| `variant` | `primary` (default) · `secondary` · `ghost` · `destructive` |
+| `size` | `sm` · `md` (default) · `lg` · `icon` |
+| `icon` | Lucide icon name — follows the theme's pack |
+| `loading` | Shows a spinner **and disables the button**, so a double-submit is impossible |
+
+**Do not hand-roll a button from classes.** The old recipe table lived here and
+was copied into ~75 files. It could carry colour and radius, because those are
+tokens — but not *behaviour*, and behaviour is where a design system's identity
+actually is: Material renders pills with a translucent state layer on hover,
+Fluent strokes even its solid buttons and weights labels heavier, Graphite
+upper-cases them. Those come from the control tokens (`--button-radius`,
+`--control-state-layer`, `--control-filled-border`, `--control-focus-ring`,
+`--control-label-tracking`, `--control-label-transform`) and need one component
+to apply them. A copied class string opts that control out.
+
+`className` on a primitive is for **layout only** — margins, width, grid
+placement. Colour, radius and weight come from the variant.
+
+Anything genuinely bespoke that still needs to feel like a control (a
+selectable chip, a toggle) should carry the `cc-control` class, which supplies
+the theme's label weight, tracking, transform and focus ring without imposing a
+variant.
 
 ### Page Header
 
diff --git a/workbench/control_plane/e2e/theming.spec.ts b/workbench/control_plane/e2e/theming.spec.ts
index 2016cbfe..80883c01 100644
--- a/workbench/control_plane/e2e/theming.spec.ts
+++ b/workbench/control_plane/e2e/theming.spec.ts
@@ -211,3 +211,66 @@ test.describe("user preferences", () => {
     expect(await readVar(page, "--primary")).toBe("hsl(198 89% 50%)");
   });
 });
+
+test.describe("control personality", () => {
+  /**
+   * The point of the shared primitives: a theme changes how a control BEHAVES,
+   * not just what colour it is. These read computed style off a real button,
+   * because none of it is visible to a type-checker and only some of it is
+   * expressible as a class.
+   */
+  const measureButton = (page: Page) =>
+    page.evaluate(() => {
+      const el = document.createElement("button");
+      el.className =
+        "cc-control cc-button cc-button-filled bg-primary text-primary-foreground px-3 py-1.5 text-xs";
+      document.body.appendChild(el);
+      const cs = getComputedStyle(el);
+      const out = {
+        radius: cs.borderTopLeftRadius,
+        filledBorder: cs.borderTopWidth,
+        weight: cs.fontWeight,
+        transform: cs.textTransform,
+        hasStateLayer: getComputedStyle(el, "::after").content !== "none",
+      };
+      el.remove();
+      return out;
+    });
+
+  test("Material renders pill buttons with a state layer", async ({ page }) => {
+    await loadWithTheme(page, "material");
+    const b = await measureButton(page);
+    expect(b.radius).toBe("9999px");
+    expect(b.hasStateLayer).toBe(true);
+    // 8% overlay of the foreground colour, M3's hover treatment.
+    expect(await readVar(page, "--control-state-layer")).toBe("0.08");
+    expect(await readVar(page, "--control-focus-ring")).toBe("3px");
+  });
+
+  test("Fluent strokes its solid buttons and weights labels heavier", async ({ page }) => {
+    await loadWithTheme(page, "fluent");
+    const b = await measureButton(page);
+    expect(b.radius).toBe("4px");
+    // The 1px stroke is what stops a Fluent button reading as a flat block.
+    expect(b.filledBorder).toBe("1px");
+    expect(b.weight).toBe("600");
+  });
+
+  test("Graphite upper-cases control labels", async ({ page }) => {
+    await loadWithTheme(page, "graphite");
+    const b = await measureButton(page);
+    expect(b.transform).toBe("uppercase");
+    expect(b.radius).toBe("2px");
+  });
+
+  test("the default theme's buttons are unchanged by the primitives", async ({ page }) => {
+    // Adoption must not shift the shipped look: same radius, same weight, no
+    // border on a filled button, no state layer.
+    await loadWithTheme(page, "rapidtool");
+    const b = await measureButton(page);
+    expect(b.radius).toBe("12px");
+    expect(b.filledBorder).toBe("0px");
+    expect(b.weight).toBe("500");
+    expect(b.transform).toBe("none");
+  });
+});
diff --git a/workbench/control_plane/src/app/globals.css b/workbench/control_plane/src/app/globals.css
index 143bb342..b1e5f073 100644
--- a/workbench/control_plane/src/app/globals.css
+++ b/workbench/control_plane/src/app/globals.css
@@ -42,6 +42,13 @@
   --elevation: 0 4px 16px hsl(0 0% 0% / 0.25);
   --motion-duration: 0.2s;
   --motion-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  /* Control personality — consumed by the primitives in components/ui/. */
+  --button-radius: var(--radius);
+  --control-filled-border: 0px;
+  --control-state-layer: 0;
+  --control-focus-ring: 2px;
+  --control-label-tracking: 0em;
+  --control-label-transform: none;
   /* Root font-size multiplier driven by the user's density preference. */
   --ui-scale: 1;
 
@@ -263,6 +270,62 @@ body {
   box-shadow: var(--elevation);
 }
 
+/* ── Control primitives ─────────────────────────────────────────────────
+   The shared <Button>/<Input>/<Badge> in components/ui/ build on these. They
+   exist as CSS rather than Tailwind classes because two of them cannot be
+   expressed as utilities at all: a state-layer overlay needs a pseudo-element,
+   and text-transform/letter-spacing have to come from a custom property so a
+   theme can change them without touching a call site. */
+.cc-control {
+  position: relative;
+  isolation: isolate;
+  font-weight: var(--label-weight);
+  letter-spacing: var(--control-label-tracking);
+  text-transform: var(--control-label-transform);
+  transition: all var(--motion-duration) var(--motion-easing);
+}
+
+/* Keyboard focus only — a mouse click should not draw a ring. */
+.cc-control:focus-visible {
+  outline: var(--control-focus-ring) solid var(--ring);
+  outline-offset: 2px;
+}
+
+/* Material-style state layer: an overlay of the control's own text colour, so
+   it works on any variant without knowing that variant's background. Themes
+   leaving --control-state-layer at 0 render nothing and fall back to the
+   opacity shift the variant classes apply. */
+.cc-control::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: currentColor;
+  opacity: 0;
+  pointer-events: none;
+  z-index: -1;
+  transition: opacity var(--motion-duration) var(--motion-easing);
+}
+
+.cc-control:hover:not(:disabled)::after {
+  opacity: var(--control-state-layer);
+}
+
+.cc-control:active:not(:disabled)::after {
+  opacity: calc(var(--control-state-layer) * 1.5);
+}
+
+/* Buttons carry their own radius so Material can render pills while cards and
+   inputs keep the theme's ordinary radius. */
+.cc-button {
+  border-radius: var(--button-radius);
+}
+
+/* Fluent strokes even its solid buttons; themes at 0px get no border. */
+.cc-button-filled {
+  border: var(--control-filled-border) solid color-mix(in srgb, currentColor 25%, transparent);
+}
+
 /* ── iOS safe-area padding utilities ─────────────────────────────────────
    viewport-fit=cover is set in layout.tsx viewport export. These utilities
    let any element add padding that respects the device's safe-area insets
diff --git a/workbench/control_plane/src/app/settings/appearance/page.tsx b/workbench/control_plane/src/app/settings/appearance/page.tsx
index 3b3e9af8..5d04dd00 100644
--- a/workbench/control_plane/src/app/settings/appearance/page.tsx
+++ b/workbench/control_plane/src/app/settings/appearance/page.tsx
@@ -19,6 +19,8 @@ import { useCallback, useEffect, useState } from "react";
 import { useTheme } from "next-themes";
 import Icon from "@/components/Icon";
 import Tabs from "@/components/Tabs";
+import Button from "@/components/ui/Button";
+import { Input } from "@/components/ui/Input";
 import { THEMES, resolveTheme } from "@/lib/theme/themes";
 import { useAppearanceStore, effectiveThemeId, effectiveDensity } from "@/lib/theme/store";
 import { isSafeColor } from "@/lib/theme/css";
@@ -142,12 +144,9 @@ function PersonalSettings() {
           ))}
         </div>
         {userThemeId && (
-          <button
-            onClick={() => setUserTheme(null)}
-            className="mt-3 rounded-lg border border-border px-3 py-2 text-xs text-muted-foreground tech-transition hover:border-primary/30 hover:text-foreground"
-          >
+          <Button variant="secondary" size="lg" className="mt-3" onClick={() => setUserTheme(null)}>
             Reset to organisation default ({resolveTheme(orgThemeId).name})
-          </button>
+          </Button>
         )}
       </section>
 
@@ -197,7 +196,7 @@ function PersonalSettings() {
             <button
               key={preset.label}
               onClick={() => setAccent(preset.value)}
-              className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-xs tech-transition ${
+              className={`cc-control flex items-center gap-2 rounded-lg border px-3 py-2 text-xs ${
                 accent === preset.value
                   ? "border-primary bg-primary/5 text-foreground ring-1 ring-primary/20"
                   : "border-border text-muted-foreground hover:border-primary/40 hover:text-foreground"
@@ -245,20 +244,19 @@ function CustomAccentInput({
   return (
     <div className="mt-3">
       <div className="flex flex-wrap items-center gap-2">
-        <input
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onKeyDown={(e) => e.key === "Enter" && apply()}
-          placeholder="#0078d4"
-          aria-label="Custom accent colour"
-          className="w-48 rounded-lg border border-border bg-background px-3 py-2 text-xs text-foreground outline-none tech-transition focus:border-primary/50"
-        />
-        <button
-          onClick={apply}
-          className="rounded-lg border border-border px-3 py-2 text-xs text-muted-foreground tech-transition hover:border-primary/30 hover:text-foreground"
-        >
+        <div className="w-48">
+          <Input
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && apply()}
+            placeholder="#0078d4"
+            aria-label="Custom accent colour"
+            inputSize="lg"
+          />
+        </div>
+        <Button variant="secondary" size="lg" onClick={apply}>
           Apply
-        </button>
+        </Button>
       </div>
       {error && <p className="mt-1.5 text-[11px] text-destructive">{error}</p>}
     </div>
@@ -448,7 +446,7 @@ function OptionPill({
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-xs tech-transition disabled:cursor-not-allowed disabled:opacity-50 ${
+      className={`cc-control flex items-center gap-2 rounded-lg border px-3 py-2 text-xs disabled:cursor-not-allowed disabled:opacity-50 ${
         selected
           ? "border-primary bg-primary/5 text-foreground ring-1 ring-primary/20"
           : "border-border text-muted-foreground hover:border-primary/40 hover:text-foreground"
diff --git a/workbench/control_plane/src/components/ui/Badge.tsx b/workbench/control_plane/src/components/ui/Badge.tsx
new file mode 100644
index 00000000..10ef5c81
--- /dev/null
+++ b/workbench/control_plane/src/components/ui/Badge.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+/**
+ * Badge — small status pill.
+ *
+ * Carries the theme's label weight, tracking and transform, so a Graphite
+ * badge upper-cases and a Material one picks up its tracking without any call
+ * site knowing. Deliberately NOT a button: it takes no click handler, because
+ * a clickable badge should be a `<Button size="sm">`.
+ *
+ *     <Badge tone="success" icon="Check">Connected</Badge>
+ *     <Badge>{count}</Badge>
+ */
+
+import Icon from "@/components/Icon";
+
+export type BadgeTone = "neutral" | "primary" | "success" | "warning" | "destructive";
+
+const TONES: Record<BadgeTone, string> = {
+  neutral: "bg-secondary text-muted-foreground",
+  primary: "bg-primary/10 text-primary",
+  success: "bg-success/10 text-success",
+  warning: "bg-warning/10 text-warning",
+  destructive: "bg-destructive/10 text-destructive",
+};
+
+export type BadgeProps = {
+  tone?: BadgeTone;
+  /** Lucide icon name rendered before the label. */
+  icon?: string;
+  /** Renders a filled dot instead of an icon — the app's status convention. */
+  dot?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export default function Badge({
+  tone = "neutral",
+  icon,
+  dot = false,
+  className = "",
+  children,
+}: BadgeProps) {
+  return (
+    <span
+      className={`cc-control inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] ${TONES[tone]} ${className}`}
+    >
+      {dot && <span className="h-1.5 w-1.5 rounded-full bg-current" />}
+      {icon && <Icon name={icon} size={11} />}
+      {children}
+    </span>
+  );
+}
diff --git a/workbench/control_plane/src/components/ui/Button.tsx b/workbench/control_plane/src/components/ui/Button.tsx
new file mode 100644
index 00000000..df7f10ed
--- /dev/null
+++ b/workbench/control_plane/src/components/ui/Button.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+/**
+ * Button — the shared action primitive.
+ *
+ * Replaces the class recipe that DESIGN_SYSTEM.md used to document as a string
+ * to copy. That worked for colour and radius, which are tokens, but a design
+ * system's *behaviour* has nowhere to live in a copied class list: Material's
+ * hover is a translucent state layer, Fluent strokes even its solid buttons,
+ * and Graphite upper-cases its labels. Those come from the control tokens and
+ * need one component to apply them.
+ *
+ *     <Button onClick={save}>Save</Button>
+ *     <Button variant="secondary" size="sm">Cancel</Button>
+ *     <Button variant="destructive" icon="Trash2" loading={deleting}>Delete</Button>
+ *     <Button variant="ghost" size="icon" icon="X" aria-label="Close" />
+ *
+ * The default variant and size reproduce the previous recipe exactly, so the
+ * RapidTool theme is unchanged by adoption.
+ */
+
+import Icon from "@/components/Icon";
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "destructive";
+export type ButtonSize = "sm" | "md" | "lg" | "icon";
+
+/**
+ * Colour per variant. `cc-button-filled` adds the theme's stroke on solid
+ * variants — no-op at 0px, a real border on Fluent.
+ */
+const VARIANTS: Record<ButtonVariant, string> = {
+  primary: "cc-button-filled bg-primary text-primary-foreground hover:opacity-90",
+  secondary:
+    "border border-border text-muted-foreground hover:text-foreground hover:border-primary/30",
+  ghost: "text-muted-foreground hover:bg-secondary hover:text-foreground",
+  destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20",
+};
+
+/** Geometry per size — the three shapes that already existed in the app. */
+const SIZES: Record<ButtonSize, string> = {
+  sm: "gap-1 px-2.5 py-1.5 text-[12px]",
+  md: "gap-1.5 px-3 py-1.5 text-xs",
+  lg: "gap-1.5 px-3 sm:px-4 py-2 text-sm",
+  icon: "p-2",
+};
+
+export type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className"> & {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  /** Lucide icon name rendered before the label; follows the active pack. */
+  icon?: string;
+  /**
+   * Swaps the icon for a spinner and disables the button. Kept as a prop
+   * rather than left to call sites because "disabled while pending" is the
+   * part everyone forgets, and a double-submit is a real bug.
+   */
+  loading?: boolean;
+  /** Extra classes for layout only — never for colour, radius or weight. */
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export default function Button({
+  variant = "primary",
+  size = "md",
+  icon,
+  loading = false,
+  disabled,
+  className = "",
+  children,
+  ...rest
+}: ButtonProps) {
+  const iconSize = size === "lg" ? 15 : 14;
+  return (
+    <button
+      {...rest}
+      disabled={disabled || loading}
+      className={`cc-control cc-button inline-flex items-center justify-center disabled:cursor-not-allowed disabled:opacity-50 ${VARIANTS[variant]} ${SIZES[size]} ${className}`}
+    >
+      {loading ? (
+        <Icon name="Loader2" size={iconSize} className="animate-spin" />
+      ) : icon ? (
+        <Icon name={icon} size={iconSize} />
+      ) : null}
+      {children}
+    </button>
+  );
+}
diff --git a/workbench/control_plane/src/components/ui/Input.tsx b/workbench/control_plane/src/components/ui/Input.tsx
new file mode 100644
index 00000000..471740d0
--- /dev/null
+++ b/workbench/control_plane/src/components/ui/Input.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+/**
+ * Input and Textarea — the shared text-entry primitives.
+ *
+ * Same reason as Button: the focus treatment is a theme decision (Fluent's
+ * tight 2px ring vs Material's 3px) and cannot come from a copied class list.
+ *
+ *     <Input value={q} onChange={…} placeholder="Search" />
+ *     <Input icon="Search" value={q} onChange={…} />
+ *     <Textarea rows={4} value={body} onChange={…} />
+ *
+ * Mobile font size stays pinned at 16px on the `lg` size because anything
+ * smaller makes iOS zoom the viewport on focus — the reason the app avoids
+ * viewport-level zoom restrictions in the first place.
+ */
+
+import Icon from "@/components/Icon";
+
+export type InputSize = "sm" | "md" | "lg";
+
+const SIZES: Record<InputSize, string> = {
+  sm: "px-2 py-1 text-[11px]",
+  md: "px-2.5 py-1.5 text-xs",
+  lg: "px-3 py-2 text-sm",
+};
+
+const BASE =
+  "cc-control w-full rounded-lg border border-border bg-background text-foreground " +
+  "placeholder:text-muted-foreground outline-none focus:border-primary/50 " +
+  "disabled:cursor-not-allowed disabled:opacity-60";
+
+export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "className"> & {
+  inputSize?: InputSize;
+  /** Lucide icon name shown inside the field's leading edge. */
+  icon?: string;
+  className?: string;
+};
+
+export function Input({ inputSize = "md", icon, className = "", ...rest }: InputProps) {
+  const field = (
+    <input
+      {...rest}
+      className={`${BASE} ${SIZES[inputSize]} ${icon ? "pl-8" : ""} ${className}`}
+    />
+  );
+  if (!icon) return field;
+  return (
+    <div className="relative w-full">
+      <Icon
+        name={icon}
+        size={14}
+        className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground"
+      />
+      {field}
+    </div>
+  );
+}
+
+export type TextareaProps = Omit<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  "className"
+> & {
+  inputSize?: InputSize;
+  className?: string;
+};
+
+export function Textarea({ inputSize = "md", className = "", ...rest }: TextareaProps) {
+  return <textarea {...rest} className={`${BASE} ${SIZES[inputSize]} resize-y ${className}`} />;
+}
+
+export default Input;
diff --git a/workbench/control_plane/src/lib/theme/css.ts b/workbench/control_plane/src/lib/theme/css.ts
index cecce207..549dbc00 100644
--- a/workbench/control_plane/src/lib/theme/css.ts
+++ b/workbench/control_plane/src/lib/theme/css.ts
@@ -70,7 +70,7 @@ function colorDeclarations(colors: ColorTokens): [string, string][] {
  * inherited by the light scope.
  */
 function structuralDeclarations(theme: Theme): [string, string][] {
-  const { shape, effects, typography } = theme;
+  const { shape, effects, typography, controls } = theme;
   return [
     ["radius", shape.radius],
     ["border-width", shape.borderWidth],
@@ -87,6 +87,12 @@ function structuralDeclarations(theme: Theme): [string, string][] {
     ["elevation", effects.shadow],
     ["motion-duration", effects.motionDuration],
     ["motion-easing", effects.motionEasing],
+    ["button-radius", controls.buttonRadius],
+    ["control-filled-border", controls.filledBorderWidth],
+    ["control-state-layer", controls.stateLayerOpacity],
+    ["control-focus-ring", controls.focusRingWidth],
+    ["control-label-tracking", controls.labelTracking],
+    ["control-label-transform", controls.labelTransform],
   ];
 }
 
diff --git a/workbench/control_plane/src/lib/theme/themes.test.ts b/workbench/control_plane/src/lib/theme/themes.test.ts
index 2bcc0b3e..49366a31 100644
--- a/workbench/control_plane/src/lib/theme/themes.test.ts
+++ b/workbench/control_plane/src/lib/theme/themes.test.ts
@@ -111,6 +111,12 @@ describe("globals.css fallback matches the default manifest", () => {
     expect.soft(root["--heading-tracking"]).toBe(theme.typography.headingLetterSpacing);
     expect.soft(root["--heading-weight"]).toBe(theme.typography.headingWeight);
     expect.soft(root["--label-weight"]).toBe(theme.typography.labelWeight);
+    expect.soft(root["--button-radius"]).toBe(theme.controls.buttonRadius);
+    expect.soft(root["--control-filled-border"]).toBe(theme.controls.filledBorderWidth);
+    expect.soft(root["--control-state-layer"]).toBe(theme.controls.stateLayerOpacity);
+    expect.soft(root["--control-focus-ring"]).toBe(theme.controls.focusRingWidth);
+    expect.soft(root["--control-label-tracking"]).toBe(theme.controls.labelTracking);
+    expect.soft(root["--control-label-transform"]).toBe(theme.controls.labelTransform);
   });
 
   it("still declares the Tailwind bridge the tokens feed", () => {
diff --git a/workbench/control_plane/src/lib/theme/themes.ts b/workbench/control_plane/src/lib/theme/themes.ts
index 188b85cf..c2b04138 100644
--- a/workbench/control_plane/src/lib/theme/themes.ts
+++ b/workbench/control_plane/src/lib/theme/themes.ts
@@ -53,6 +53,14 @@ const rapidtool: Theme = {
     motionDuration: "0.2s",
     motionEasing: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
   },
+  controls: {
+    buttonRadius: "var(--radius)",
+    filledBorderWidth: "0px",
+    stateLayerOpacity: "0",
+    focusRingWidth: "2px",
+    labelTracking: "0em",
+    labelTransform: "none",
+  },
   surfaces: {
     monaco: { dark: "vs-dark", light: "vs" },
     shiki: { dark: "github-dark", light: "github-light" },
@@ -157,6 +165,16 @@ const fluent: Theme = {
     motionDuration: "0.15s",
     motionEasing: "cubic-bezier(0.33, 0, 0.67, 1)",
   },
+  controls: {
+    // Fluent draws a 1px stroke on solid buttons too, which is what stops them
+    // reading as flat blocks of colour.
+    buttonRadius: "var(--radius)",
+    filledBorderWidth: "1px",
+    stateLayerOpacity: "0",
+    focusRingWidth: "2px",
+    labelTracking: "0em",
+    labelTransform: "none",
+  },
   surfaces: {
     monaco: { dark: "vs-dark", light: "vs" },
     shiki: { dark: "dark-plus", light: "light-plus" },
@@ -254,6 +272,16 @@ const material: Theme = {
     motionDuration: "0.2s",
     motionEasing: "cubic-bezier(0.2, 0, 0, 1)",
   },
+  controls: {
+    // M3 buttons are full pills, and hover is an 8% overlay of the foreground
+    // colour rather than a change in opacity.
+    buttonRadius: "9999px",
+    filledBorderWidth: "0px",
+    stateLayerOpacity: "0.08",
+    focusRingWidth: "3px",
+    labelTracking: "0.00714em",
+    labelTransform: "none",
+  },
   surfaces: {
     monaco: { dark: "vs-dark", light: "vs" },
     shiki: { dark: "material-theme-darker", light: "material-theme-lighter" },
@@ -346,6 +374,16 @@ const graphite: Theme = {
     motionDuration: "0.12s",
     motionEasing: "ease-out",
   },
+  controls: {
+    // Upper-case labels and a hairline focus ring — the industrial register
+    // this theme is going for, and proof the axis is real.
+    buttonRadius: "var(--radius)",
+    filledBorderWidth: "1px",
+    stateLayerOpacity: "0",
+    focusRingWidth: "1px",
+    labelTracking: "0.05em",
+    labelTransform: "uppercase",
+  },
   surfaces: {
     monaco: { dark: "hc-black", light: "hc-light" },
     shiki: { dark: "min-dark", light: "min-light" },
diff --git a/workbench/control_plane/src/lib/theme/types.ts b/workbench/control_plane/src/lib/theme/types.ts
index d6c96b54..bf841612 100644
--- a/workbench/control_plane/src/lib/theme/types.ts
+++ b/workbench/control_plane/src/lib/theme/types.ts
@@ -149,6 +149,37 @@ export type EffectTokens = {
   motionEasing: string;
 };
 
+/**
+ * Control tokens — how buttons and inputs behave, as opposed to what colour
+ * they are. This is where a design system's personality actually lives: every
+ * theme so far could change a button's palette, radius and font, but a button
+ * still *behaved* identically everywhere. Material 3 buttons are full pills
+ * with a translucent state layer on hover; Fluent outlines even its solid
+ * buttons and keeps a tight focus ring; Metro-descended looks upper-case their
+ * labels. None of that is expressible as a colour.
+ *
+ * These are consumed by the shared primitives in `src/components/ui/`, which
+ * is why those primitives exist — there is no way to apply a state layer from
+ * a Tailwind class string repeated across 1,100 call sites.
+ */
+export type ControlTokens = {
+  /** Corner radius for buttons. Material 3 renders them as full pills. */
+  buttonRadius: string;
+  /** Border width on FILLED buttons — Fluent outlines even solid controls. */
+  filledBorderWidth: string;
+  /**
+   * Opacity of the hover/press state layer. Material overlays the foreground
+   * colour at 8%; `0` means the control uses a plain opacity shift instead.
+   */
+  stateLayerOpacity: string;
+  /** Focus ring width. */
+  focusRingWidth: string;
+  /** Letter-spacing on control labels. */
+  labelTracking: string;
+  /** `none` or `uppercase` — the Metro/industrial signature. */
+  labelTransform: string;
+};
+
 /**
  * Themes for the third-party surfaces that carry their own theme vocabulary.
  *
@@ -183,6 +214,7 @@ export type Theme = {
   typography: TypographyTokens;
   shape: ShapeTokens;
   effects: EffectTokens;
+  controls: ControlTokens;
   surfaces: SurfaceTokens;
   colors: {
     dark: ColorTokens;

From c79c7d9b74eb710df5ac712616c3f7e0bc1fa5f1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 6 Aug 2026 13:39:28 +0000
Subject: [PATCH 07/10] feat(theming): migrate 308 buttons onto the Button
 primitive
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adopts the primitive across the app, so those controls now pick up the
theme's label weight, tracking, transform, state layer and focus ring —
Material's pills, Fluent's stroked solid buttons, Graphite's uppercase.

PROVING IT CHANGES NOTHING
--------------------------
This migration alters appearance if it gets anything wrong, so the codemod
audits itself: for every conversion it reconstructs the class list <Button>
will emit and diffs it against the original across display, alignment,
padding, gap, text size, radius and colour. It refuses to finish unless
every one is equivalent. All 308 are.

Screenshot diffing was tried first and abandoned as unusable here: these
pages render different navigation depending on whether the gateway answers,
so two runs of the SAME build differed by 14% on one page. That noise
buries exactly the regressions worth finding.

Three real infidelities were caught this way and fixed, none of which a
screenshot would have isolated:

  • Size matching used hand-written class lists that had drifted from the
    component, so a gapless button matched `md` and silently gained
    `gap-1.5` between its icon and label. Sizes are now DERIVED from
    Button's own table, which makes that drift impossible.
  • Variant matching accepted a button whose classes merely CONTAINED the
    variant's, with a permissive list of "optional" hovers. A button whose
    hover was `hover:bg-secondary` was being given `hover:text-foreground
    hover:border-primary/30` instead. Matching is now set equality.
  • Button hardcoded `inline-flex items-center justify-center`, which
    centred the content of a full-width, left-aligned menu item. Tailwind
    cannot fix this from a class attribute — `justify-center` and
    `justify-start` have equal specificity, so the stylesheet's order
    decides. Layout is now a prop that REPLACES the default, and the
    codemod reproduces the original's exactly, including the empty case (a
    bare <button> is inline-block, not flex).

New Button API, all in service of migrating without changing anything:
  variant  += "text" (bare text action, no surface or border)
  size     += "icon-xs"/"icon-sm" (the app uses three icon sizes; collapsing
              them would have resized ~100 controls) and "none" (caller
              keeps its own bespoke geometry)
  radius    = "keep" preserves a non-theme radius verbatim rather than
              silently resizing corners
  layout    = replaces display/alignment outright

The remaining 865 raw <button> elements are genuinely not variant buttons:
565 have colour signatures matching no variant (cards, tabs, tiles), 233
build their className conditionally from selected/active state, and the
rest are one-offs. Those keep rendering exactly as before.

Verified: 359 unit tests, 18 browser tests, typecheck clean, build clean,
lint unchanged from baseline.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SyTtr9JJXCS8xNkzW5Fny5
---
 workbench/control_plane/codemod-buttons.mjs   | 299 ++++++++++++++++++
 .../control_plane/src/app/agents/page.tsx     |  60 +---
 .../control_plane/src/app/approvals/page.tsx  |   8 +-
 .../control_plane/src/app/artifacts/page.tsx  |   5 +-
 .../src/app/build/apps/[slug]/edit/page.tsx   | 168 +++-------
 .../src/app/build/apps/[slug]/page.tsx        |  80 ++---
 .../control_plane/src/app/build/apps/page.tsx |  17 +-
 workbench/control_plane/src/app/chat/page.tsx |  31 +-
 .../email/components/ArtifactAttachPicker.tsx |  11 +-
 .../app/email/components/AttachmentList.tsx   |   8 +-
 .../src/app/email/components/ComposePanel.tsx |  26 +-
 .../src/app/email/components/ContactCard.tsx  |  17 +-
 .../app/email/components/ConversationView.tsx |  29 +-
 .../app/email/components/DraftAssistant.tsx   |  31 +-
 .../src/app/email/components/EmailDetail.tsx  |  37 +--
 .../src/app/email/components/EmailList.tsx    |  41 +--
 .../src/app/email/components/EmailToolbar.tsx |   9 +-
 .../app/email/components/MailboxActions.tsx   |  23 +-
 .../src/app/email/components/SearchBar.tsx    |  18 +-
 .../app/email/components/TaskCaptureModal.tsx |  17 +-
 .../components/automation/AutomationView.tsx  |   9 +-
 .../automation/BulkUnsubscribeView.tsx        |  65 +---
 .../components/automation/DashboardView.tsx   |   9 +-
 .../automation/DigestSettingsDialog.tsx       |   9 +-
 .../automation/ai-settings/RulesTab.tsx       |  49 +--
 .../automation/ai-settings/SettingsTab.tsx    |  37 +--
 .../automation/ai-settings/TestTab.tsx        |   8 +-
 .../automation/ai-settings/fixDialog.tsx      |  16 +-
 .../app/email/components/automation/ui.tsx    |   8 +-
 .../control_plane/src/app/email/page.tsx      |  27 +-
 .../src/app/integrations/page.tsx             | 101 +++---
 .../src/app/notes/components/AskPanel.tsx     |  10 +-
 .../notes/components/FollowupEmailModal.tsx   |   9 +-
 .../app/notes/components/GlossaryModal.tsx    |  10 +-
 .../app/notes/components/JoinCallModal.tsx    |  24 +-
 .../src/app/notes/components/MeetingPrep.tsx  |   8 +-
 .../notes/components/NotesSettingsModal.tsx   |   9 +-
 .../app/notes/components/RecordingDock.tsx    |   9 +-
 .../src/app/notes/meeting/[id]/page.tsx       |  69 +---
 .../control_plane/src/app/notes/page.tsx      |   9 +-
 .../src/app/notes/session/[id]/page.tsx       |   8 +-
 .../src/app/observability/page.tsx            |   5 +-
 .../src/app/settings/groups/page.tsx          |  47 +--
 .../src/app/settings/members/[email]/page.tsx |   9 +-
 .../src/app/settings/members/page.tsx         |  46 +--
 .../src/app/settings/models/page.tsx          |  30 +-
 .../src/app/settings/roles/page.tsx           |  24 +-
 .../app/tasks/components/AiTaskActions.tsx    |  18 +-
 .../tasks/components/AttachmentComposer.tsx   |  20 +-
 .../src/app/tasks/components/CalendarView.tsx |  37 +--
 .../src/app/tasks/components/CaptureBar.tsx   |   9 +-
 .../src/app/tasks/components/ClarifyModal.tsx |  19 +-
 .../src/app/tasks/components/ClarifyPanel.tsx | 122 ++-----
 .../app/tasks/components/DelegateDialog.tsx   |  27 +-
 .../app/tasks/components/DelegatePopup.tsx    |  27 +-
 .../tasks/components/DeleteConfirmModal.tsx   |   8 +-
 .../app/tasks/components/EliminatePopup.tsx   |  10 +-
 .../src/app/tasks/components/FocusMode.tsx    |  55 +---
 .../src/app/tasks/components/InboxView.tsx    |  36 +--
 .../src/app/tasks/components/ItemDetail.tsx   |  36 +--
 .../src/app/tasks/components/ItemList.tsx     |  10 +-
 .../src/app/tasks/components/ListsSidebar.tsx |  21 +-
 .../src/app/tasks/components/PeopleView.tsx   |   8 +-
 .../src/app/tasks/components/PersonEditor.tsx |  23 +-
 .../src/app/tasks/components/ProjectsList.tsx |  17 +-
 .../src/app/tasks/components/QuickCapture.tsx |  22 +-
 .../app/tasks/components/ReclarifyModal.tsx   |  10 +-
 .../app/tasks/components/SchedulePopup.tsx    |  20 +-
 .../app/tasks/components/StartupRitual.tsx    |  52 +--
 .../tasks/components/TaskSettingsModal.tsx    |  18 +-
 .../src/app/tasks/components/TaskToolbar.tsx  |   9 +-
 .../src/app/tasks/components/UndoToast.tsx    |  10 +-
 .../app/tasks/components/WorkspacesModal.tsx  |  38 +--
 .../components/calendar/CalendarSettings.tsx  |  10 +-
 .../components/calendar/EndOfDayReview.tsx    |  27 +-
 .../tasks/components/calendar/NowNextBar.tsx  |  10 +-
 .../components/calendar/PlanDayPanel.tsx      |  46 +--
 .../components/calendar/ScheduleSheet.tsx     |  18 +-
 .../src/app/whatsapp/calls/page.tsx           |  30 +-
 .../control_plane/src/app/whatsapp/page.tsx   |   9 +-
 .../src/app/workflows/[id]/page.tsx           |  20 +-
 .../app/workflows/components/CopilotPanel.tsx |  10 +-
 .../app/workflows/components/ModuleStudio.tsx |  25 +-
 .../app/workflows/components/RunConsole.tsx   |  16 +-
 .../app/workflows/components/TriggerPanel.tsx |   8 +-
 .../control_plane/src/app/workflows/page.tsx  |  24 +-
 .../src/components/AddAgentWizard.tsx         |  23 +-
 .../src/components/AgentChat.tsx              |  15 +-
 .../control_plane/src/components/AppShell.tsx |  50 +--
 .../src/components/ArtifactCard.tsx           |   9 +-
 .../src/components/ArtifactSidebar.tsx        |  17 +-
 .../src/components/ArtifactViewerModal.tsx    |   9 +-
 .../src/components/DocumentPane.tsx           |  26 +-
 .../src/components/IntegrationSetup.tsx       |   8 +-
 .../src/components/ProviderCard.tsx           |   9 +-
 .../src/components/ThemeToggle.tsx            |  19 +-
 .../control_plane/src/components/TierCard.tsx |  24 +-
 .../src/components/ToolCardShell.tsx          |  17 +-
 .../src/components/email/EmailToolCards.tsx   |  36 +--
 .../src/components/room/PresenceRail.tsx      |  27 +-
 .../src/components/room/ShareSheet.tsx        |   9 +-
 .../src/components/tasks/TaskToolCards.tsx    |  19 +-
 .../src/components/ui/Button.tsx              |  43 ++-
 103 files changed, 1077 insertions(+), 1817 deletions(-)
 create mode 100644 workbench/control_plane/codemod-buttons.mjs

diff --git a/workbench/control_plane/codemod-buttons.mjs b/workbench/control_plane/codemod-buttons.mjs
new file mode 100644
index 00000000..7b6e8a8c
--- /dev/null
+++ b/workbench/control_plane/codemod-buttons.mjs
@@ -0,0 +1,299 @@
+/**
+ * Migrate hand-rolled `<button>` elements onto the shared <Button> primitive.
+ *
+ * STRICT BY CONSTRUCTION. Unlike the icon migration, this one changes how
+ * things LOOK, so a wrong guess is a visual regression somebody notices weeks
+ * later. A button is only converted when its class list decomposes exactly
+ * into (a) one recognised variant, (b) one recognised size, and (c) layout
+ * classes that <Button> does not own. Anything else — a conditional
+ * className, an unrecognised class, a card-style tile — is SKIPPED and
+ * reported, never approximated.
+ *
+ * Run with --dry to classify without writing.
+ */
+
+import { readFileSync, writeFileSync } from "node:fs";
+import { execSync } from "node:child_process";
+import ts from "typescript";
+
+const DRY = process.argv.includes("--dry");
+const ROOT = "/home/user/CommandCenter/workbench/control_plane";
+
+const EXCLUDE = new Set(["src/components/ui/Button.tsx"]);
+
+/**
+ * Classes <Button> emits itself. Present-or-absent is fine; what matters is
+ * that seeing one does not disqualify a button, because the primitive will
+ * re-emit an equivalent.
+ */
+const OWNED = new Set([
+  "rounded-lg", "tech-transition", "transition-colors",
+  "transition-all", "font-medium", "cursor-pointer",
+  "disabled:opacity-50", "disabled:opacity-40", "disabled:opacity-60",
+  "disabled:cursor-not-allowed",
+]);
+
+/**
+ * Display and alignment travel through the `layout` prop, never className:
+ * Tailwind cannot override `justify-center` with `justify-start` from a class
+ * attribute, because the two have equal specificity and the stylesheet's order
+ * decides. Reproducing the original's layout exactly is what keeps a
+ * full-width, left-aligned menu item left-aligned.
+ */
+const LAYOUT_DEFAULT = "inline-flex items-center justify-center";
+const isLayoutClass = (c) =>
+  c === "flex" || c === "inline-flex" || /^(items-|justify-)/.test(c);
+
+/** Colour signatures → variant. Every listed class must be present. */
+const VARIANTS = [
+  // Ordered most-specific first: `ghost` and `text` share a colour, and the
+  // one with the extra hover surface must win.
+  { name: "primary", need: ["bg-primary", "text-primary-foreground"],
+    optional: ["hover:opacity-90"] },
+  { name: "destructive", need: ["bg-destructive/10", "text-destructive"],
+    optional: ["hover:bg-destructive/20"] },
+  { name: "secondary", need: ["border", "border-border", "text-muted-foreground"],
+    optional: ["hover:text-foreground", "hover:border-primary/30"] },
+  { name: "ghost", need: ["text-muted-foreground", "hover:bg-secondary"],
+    optional: ["hover:text-foreground"] },
+  { name: "text", need: ["text-muted-foreground", "hover:text-foreground"], optional: [] },
+];
+
+/**
+ * Size signatures, DERIVED from what <Button> actually emits (see
+ * BUTTON_SIZES below). Hand-written need-lists drifted from the component and
+ * let a gapless button match `md`, which silently added `gap-1.5` between its
+ * icon and label. Deriving them makes that impossible.
+ */
+const TEXT_SIZES = ["text-xs", "text-sm", "text-[12px]", "text-[11px]", "text-[10px]", "text-base"];
+
+/**
+ * Classify a class list into (variant, size, layout, radius, leftover).
+ *
+ * EXACT matching on every visible axis. An earlier version matched a variant
+ * when its required classes were merely PRESENT, with a permissive list of
+ * "optional" hovers — and a static diff of all 404 conversions showed that
+ * silently changed things: a button whose hover was `hover:bg-secondary`
+ * acquired `hover:text-foreground hover:border-primary/30` instead, `px-4`
+ * became `px-3 sm:px-4`, and buttons that were plain `inline-block` gained
+ * `inline-flex items-center justify-center gap-1.5`. Requiring set EQUALITY is
+ * what makes the migration provably invisible.
+ */
+const eq = (a, b) => a.size === b.size && [...a].every((c) => b.has(c));
+
+/** Alternate spellings of the same effect, normalised before comparison. */
+const NORMALISE = new Map([
+  ["hover:bg-primary/90", "hover:opacity-90"],
+  ["hover:opacity-80", "hover:opacity-90"],
+  ["transition-colors", "tech-transition"],
+  ["transition-all", "tech-transition"],
+]);
+const norm = (c) => NORMALISE.get(c) ?? c;
+
+const isColour = (c) =>
+  /^(bg-|border$|border-(?!width))/.test(c) ||
+  (/^text-/.test(c) && !/^text-(xs|sm|base|lg|\[|left|center|right)/.test(c)) ||
+  c.startsWith("hover:");
+const isGeometry = (c) =>
+  /^(p|px|py|pt|pb|pl|pr)-/.test(c) || /^gap-/.test(c) ||
+  /^text-(xs|sm|base|lg|\[)/.test(c) || /^sm:(px|py|p)-/.test(c);
+const isRadius = (c) => /^rounded(-|$)/.test(c);
+
+function classify(classes) {
+  const colour = new Set(classes.filter(isColour).map(norm));
+  const geometry = new Set(classes.filter(isGeometry));
+  const layoutClasses = classes.filter(isLayoutClass);
+  const radiusClass = classes.find(isRadius);
+
+  const variant = VARIANTS.find((v) =>
+    eq(new Set([...v.need, ...(v.optional ?? [])].map(norm)), colour),
+  );
+  if (!variant) return { skip: "no exact variant match" };
+
+  let size = SIZES.find((s) => eq(new Set(s.need), geometry));
+  if (!size) {
+    // Bespoke geometry: the primitive supplies none and the original's
+    // padding/gap/text travel through className untouched.
+    if (!geometry.size) return { skip: "no geometry" };
+    size = { name: "none", need: [...geometry], keepPadding: true };
+  }
+
+  // `rounded-lg` is the theme radius, which `cc-button` reproduces. Anything
+  // else must be preserved verbatim, or corners change size.
+  const keepRadius = Boolean(radiusClass) && radiusClass !== "rounded-lg";
+
+  const consumed = new Set([
+    ...variant.need, ...(variant.optional ?? []),
+    ...classes.filter(isColour),
+    ...(size.keepPadding ? [] : size.need),
+    ...(size.keepPadding ? [] : [...geometry]),
+    ...OWNED, ...layoutClasses,
+    ...(keepRadius ? [] : [radiusClass].filter(Boolean)),
+  ]);
+  const leftover = classes.filter((c) => !consumed.has(c));
+
+  const LAYOUT_OK = /^(w-|h-|min-w-|max-w-|min-h-|mt-|mb-|ml-|mr-|mx-|my-|self-|flex-|grow|shrink|order-|col-|row-|whitespace-|truncate|text-left|text-center|text-right|relative|absolute|z-|sm:|md:|lg:|overflow-|leading-|font-)/;
+  const preserved = new Set([
+    ...(keepRadius && radiusClass ? [radiusClass] : []),
+    ...(size.keepPadding ? size.need : []),
+  ]);
+  const unknown = leftover.filter((c) => !LAYOUT_OK.test(c) && !preserved.has(c));
+  if (unknown.length) return { skip: `unknown classes: ${unknown.slice(0, 3).join(" ")}` };
+
+  // Layout is reproduced EXACTLY, including "the original had none" — a bare
+  // <button> is inline-block, and forcing inline-flex on it moves its content.
+  const layout = layoutClasses.join(" ");
+
+  return { variant: variant.name, size: size.name, leftover, keepRadius, layout };
+}
+
+const files = execSync(`grep -rl '<button' src --include=*.tsx`, { cwd: ROOT, encoding: "utf8" })
+  .split("\n").filter(Boolean).filter((f) => !EXCLUDE.has(f));
+
+/**
+ * Self-audit. The codemod knows exactly which original produced which
+ * conversion, so it — not an after-the-fact matcher — is the right place to
+ * prove the rewrite is invisible. Reconstruct what <Button> will emit and diff
+ * it against the original on every axis a user can see.
+ */
+const BUTTON_VARIANTS = {
+  primary: "cc-button-filled bg-primary text-primary-foreground hover:opacity-90",
+  secondary: "border border-border text-muted-foreground hover:text-foreground hover:border-primary/30",
+  ghost: "text-muted-foreground hover:bg-secondary hover:text-foreground",
+  destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20",
+  text: "text-muted-foreground hover:text-foreground",
+};
+const BUTTON_SIZES = {
+  sm: "gap-1 px-2.5 py-1.5 text-[12px]",
+  md: "gap-1.5 px-3 py-1.5 text-xs",
+  lg: "gap-1.5 px-3 sm:px-4 py-2 text-sm",
+  "icon-xs": "p-1", "icon-sm": "p-1.5", icon: "p-2", none: "",
+};
+const SIZES = Object.entries(BUTTON_SIZES)
+  .filter(([name]) => name !== "none")
+  .map(([name, cls]) => ({
+    name,
+    need: cls.split(/\s+/).filter(Boolean),
+    // An icon button carries padding and no text size; without this a `p-2`
+    // button with `text-xs` would match `icon` and lose its text sizing.
+    forbid: name.startsWith("icon") ? TEXT_SIZES : [],
+  }));
+
+const AXES = {
+  display: (c) => c === "flex" || c === "inline-flex",
+  align: (c) => /^(items-|justify-)/.test(c),
+  padding: (c) => /^(p|px|py|pt|pb|pl|pr)-/.test(c) || /^sm:(px|py|p)-/.test(c),
+  gap: (c) => /^gap-/.test(c),
+  textSize: (c) => /^text-(xs|sm|base|lg|\[)/.test(c),
+  radius: (c) => /^rounded(-|$)/.test(c) || c === "cc-button",
+  colour: isColour,
+};
+const RADIUS_EQUIVALENT = (missing, added) =>
+  missing.every((c) => c === "rounded-lg") && added.every((c) => c === "cc-button");
+
+const audit = [];
+function auditConversion(rel, original, r) {
+  const emitted = [
+    "cc-control",
+    ...(r.keepRadius ? [] : ["cc-button"]),
+    ...r.layout.split(/\s+/),
+    ...BUTTON_VARIANTS[r.variant].split(/\s+/),
+    ...BUTTON_SIZES[r.size].split(/\s+/),
+    ...r.leftover,
+  ].filter(Boolean);
+
+  for (const [axis, test] of Object.entries(AXES)) {
+    const a = new Set(original.filter(test).map(norm));
+    const b = new Set(emitted.filter(test).map(norm));
+    const missing = [...a].filter((c) => !b.has(c));
+    const added = [...b].filter((c) => !a.has(c));
+    if (!missing.length && !added.length) continue;
+    if (axis === "radius" && RADIUS_EQUIVALENT(missing, added)) continue;
+    audit.push(`${rel}\n    ${axis}: -[${missing.join(" ")}] +[${added.join(" ")}]\n    was: ${original.join(" ")}`);
+  }
+}
+
+const stats = { converted: 0, files: 0 };
+const skips = {};
+const note = (why) => { skips[why] = (skips[why] ?? 0) + 1; };
+
+for (const rel of files) {
+  const path = `${ROOT}/${rel}`;
+  const original = readFileSync(path, "utf8");
+  const sf = ts.createSourceFile(rel, original, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+  const edits = [];
+
+  const handle = (open, closeTag) => {
+    const attrs = open.attributes.properties;
+    const cn = attrs.find(
+      (a) => ts.isJsxAttribute(a) && a.name.getText(sf) === "className",
+    );
+    if (!cn) { note("no className"); return; }
+    // Only a plain string literal is safe: a template or expression usually
+    // encodes a selected/active state the primitive knows nothing about.
+    const init = cn.initializer;
+    if (!init || !ts.isStringLiteral(init)) { note("dynamic className"); return; }
+
+    const result = classify(init.text.split(/\s+/).filter(Boolean));
+    if (result.skip) { note(result.skip); return; }
+
+    const keep = attrs
+      .filter((a) => a !== cn)
+      .map((a) => a.getText(sf))
+      .join(" ");
+    const cls = result.leftover.length ? ` className="${result.leftover.join(" ")}"` : "";
+    const props =
+      `${result.variant === "primary" ? "" : ` variant="${result.variant}"`}` +
+      `${result.size === "md" ? "" : ` size="${result.size}"`}` +
+      `${result.keepRadius ? ` radius="keep"` : ""}` +
+      `${result.layout === LAYOUT_DEFAULT ? "" : ` layout="${result.layout}"`}` +
+      `${keep ? " " + keep : ""}${cls}`;
+
+    auditConversion(rel, init.text.split(/\s+/).filter(Boolean), result);
+    edits.push([open.getStart(sf), open.getEnd(), `<Button${props}>`]);
+    if (closeTag) edits.push([closeTag.getStart(sf), closeTag.getEnd(), `</Button>`]);
+    stats.converted++;
+  };
+
+  const visit = (n) => {
+    if (ts.isJsxElement(n) && n.openingElement.tagName.getText(sf) === "button") {
+      handle(n.openingElement, n.closingElement);
+    } else if (ts.isJsxSelfClosingElement(n) && n.tagName.getText(sf) === "button") {
+      note("self-closing button");
+    }
+    n.forEachChild(visit);
+  };
+  sf.forEachChild(visit);
+
+  if (!edits.length) continue;
+
+  edits.sort((a, b) => b[0] - a[0]);
+  let src = original;
+  for (const [s, e, text] of edits) src = src.slice(0, s) + text + src.slice(e);
+
+  if (!/from "@\/components\/ui\/Button"/.test(src)) {
+    const anchor = src.search(/^import\s/m);
+    const line = `import Button from "@/components/ui/Button";\n`;
+    src = anchor === -1 ? line + src : src.slice(0, anchor) + line + src.slice(anchor);
+  }
+
+  // Reparse: a botched rewrite must not reach disk.
+  const check = ts.createSourceFile(rel, src, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+  void check;
+
+  if (!DRY) writeFileSync(path, src);
+  stats.files++;
+}
+
+console.log(`converted ${stats.converted} button(s) in ${stats.files} file(s)`);
+if (audit.length) {
+  console.log(`\n!! ${audit.length} conversion(s) would CHANGE APPEARANCE:\n`);
+  for (const a of audit.slice(0, 20)) console.log("  " + a + "\n");
+  process.exitCode = 1;
+} else {
+  console.log("audit: every conversion is byte-for-byte equivalent on all visible axes");
+}
+console.log("skipped:");
+for (const [why, n] of Object.entries(skips).sort((a, b) => b[1] - a[1])) {
+  console.log(`  ${String(n).padStart(4)}  ${why}`);
+}
diff --git a/workbench/control_plane/src/app/agents/page.tsx b/workbench/control_plane/src/app/agents/page.tsx
index 669e2aee..408f6b9b 100644
--- a/workbench/control_plane/src/app/agents/page.tsx
+++ b/workbench/control_plane/src/app/agents/page.tsx
@@ -12,6 +12,7 @@
  *   3. Register → agent appears in picker on the Chat page
  */
 
+import Button from "@/components/ui/Button";
 import AppIcon from "@/components/Icon";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import Link from "next/link";
@@ -182,10 +183,7 @@ function PendingCommits({ agentName }: { agentName: string }) {
 
   return (
     <div className="mt-3 border-t border-border pt-3">
-      <button
-        onClick={toggle}
-        className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors w-full text-left"
-      >
+      <Button variant="text" size="none" layout="flex items-center" onClick={toggle} className="gap-2 text-xs w-full text-left">
         <span className="font-medium">Self-mutation commits</span>
         {pendingCount > 0 && (
           <span className="rounded-full bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-white">
@@ -194,7 +192,7 @@ function PendingCommits({ agentName }: { agentName: string }) {
         )}
         {loading && <span className="text-[10px] text-muted-foreground">loading…</span>}
         <span className="ml-auto text-muted-foreground/70">{open ? "▲" : "▼"}</span>
-      </button>
+      </Button>
 
       {open && (
         <div className="mt-2 flex flex-col gap-2">
@@ -567,10 +565,7 @@ function AgentSkillsPanel({ agentName }: { agentName: string }) {
 
   return (
     <div className="mt-3 border-t border-border pt-3">
-      <button
-        onClick={toggle}
-        className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors w-full text-left"
-      >
+      <Button variant="text" size="none" layout="flex items-center" onClick={toggle} className="gap-2 text-xs w-full text-left">
         <span className="font-medium">Skills</span>
         {fetched && !loading && families.length > 0 && (
           <span className="text-[10px] text-muted-foreground">
@@ -579,7 +574,7 @@ function AgentSkillsPanel({ agentName }: { agentName: string }) {
         )}
         {loading && <span className="text-[10px] text-muted-foreground">loading…</span>}
         <span className="ml-auto text-muted-foreground/70">{open ? "▲" : "▼"}</span>
-      </button>
+      </Button>
 
       {open && (
         <div className="mt-2 flex flex-col gap-1.5">
@@ -668,13 +663,9 @@ function AgentSkillsPanel({ agentName }: { agentName: string }) {
                 className="w-full rounded-lg border border-border bg-secondary px-3 py-1.5 text-xs text-foreground placeholder-muted-foreground focus:border-primary focus:outline-none"
               />
               <div className="flex items-center gap-1.5">
-                <button
-                  onClick={() => void save()}
-                  disabled={saving}
-                  className="rounded bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50 transition-colors"
-                >
+                <Button size="none" radius="keep" layout="" onClick={() => void save()} disabled={saving} className="rounded px-3 py-1.5 text-xs">
                   {saving ? "Saving…" : "Save skills"}
-                </button>
+                </Button>
                 <button
                   onClick={() => { setEnabled(baseline); setReason(""); }}
                   disabled={saving}
@@ -1035,20 +1026,12 @@ function AddAgentModal({
               </div>
 
               <div className="flex justify-end gap-2 pt-1">
-                <button
-                  onClick={onClose}
-                  className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:border-primary/30 hover:text-foreground transition-colors"
-                >
+                <Button variant="secondary" size="none" layout="" onClick={onClose} className="px-4 py-2 text-sm">
                   Cancel
-                </button>
-                <button
-                  disabled={!form.repoUrl.trim() || !form.name.trim() || configLoading}
-                  onClick={handleFormSubmit}
-                  title={configLoading ? "Fetching config.json…" : undefined}
-                  className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40 transition-colors"
-                >
+                </Button>
+                <Button size="none" layout="" disabled={!form.repoUrl.trim() || !form.name.trim() || configLoading} onClick={handleFormSubmit} title={configLoading ? "Fetching config.json…" : undefined} className="px-4 py-2 text-sm">
                   {configLoading ? "Fetching…" : "Next →"}
-                </button>
+                </Button>
               </div>
             </div>
           )}
@@ -1191,12 +1174,9 @@ function AddAgentModal({
                 {errorMsg}
               </div>
               <div className="flex justify-end gap-2">
-                <button
-                  onClick={() => setStep("form")}
-                  className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:border-primary/30 hover:text-foreground transition-colors"
-                >
+                <Button variant="secondary" size="none" layout="" onClick={() => setStep("form")} className="px-4 py-2 text-sm">
                   Back
-                </button>
+                </Button>
               </div>
             </div>
           )}
@@ -1981,14 +1961,9 @@ function AgentSidePanel({
                   <span className="w-1.5 h-1.5 rounded-full bg-success" />
                   Up to date
                 </span>
-                <button
-                  onClick={checkUpdates}
-                  disabled={checking}
-                  className="rounded-lg border border-border px-2.5 py-1.5 text-xs text-muted-foreground hover:border-primary/30 hover:text-foreground disabled:opacity-50 transition-colors"
-                  title="Force-check for remote updates"
-                >
+                <Button variant="secondary" size="none" layout="" onClick={checkUpdates} disabled={checking} title="Force-check for remote updates" className="px-2.5 py-1.5 text-xs">
                   <AppIcon name="RefreshCw" className={`w-3 h-3 ${checking ? "animate-spin" : ""}`} />
-                </button>
+                </Button>
               </div>
             )}
 
@@ -2237,10 +2212,9 @@ export default function AgentsPage() {
             className="p-2 rounded-lg border border-border text-muted-foreground hover:bg-secondary transition-colors">
             <AppIcon name="RefreshCw" className="w-4 h-4" />
           </button>
-          <button onClick={() => setShowAdd(true)}
-            className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-primary hover:opacity-90 text-sm font-medium text-primary-foreground transition-colors">
+          <Button size="none" layout="flex items-center" onClick={() => setShowAdd(true)} className="gap-1.5 px-3 py-2 text-sm">
             <AppIcon name="Plus" className="w-4 h-4" /><span className="hidden sm:inline">Add Agent</span>
-          </button>
+          </Button>
         </div>
       </div>
 
diff --git a/workbench/control_plane/src/app/approvals/page.tsx b/workbench/control_plane/src/app/approvals/page.tsx
index 8eff9e3f..a978319a 100644
--- a/workbench/control_plane/src/app/approvals/page.tsx
+++ b/workbench/control_plane/src/app/approvals/page.tsx
@@ -15,6 +15,7 @@
  * write auto-applies through the broker (chokepointed + audited, no hold).
  */
 
+import Button from "@/components/ui/Button";
 import { useCallback, useEffect, useState } from "react";
 
 import type { PendingAction } from "@/app/api/actions/pending/route";
@@ -87,12 +88,9 @@ export default function ApprovalsPage() {
             {rows.length}
           </span>
         )}
-        <button
-          onClick={() => void load()}
-          className="ml-auto text-xs text-muted-foreground hover:text-foreground transition-colors"
-        >
+        <Button variant="text" size="none" layout="" onClick={() => void load()} className="ml-auto text-xs">
           {loading ? "Refreshing…" : "Refresh"}
-        </button>
+        </Button>
       </div>
       <p className="mt-1 text-xs text-muted-foreground">
         Outward writes an agent proposed through the Action Broker. Approving
diff --git a/workbench/control_plane/src/app/artifacts/page.tsx b/workbench/control_plane/src/app/artifacts/page.tsx
index 38885a73..fbbeddfe 100644
--- a/workbench/control_plane/src/app/artifacts/page.tsx
+++ b/workbench/control_plane/src/app/artifacts/page.tsx
@@ -9,6 +9,7 @@
  * Grid / List views change how the current directory's contents appear.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import ArtifactViewerModal from "@/components/ArtifactViewerModal";
@@ -412,9 +413,9 @@ export default function ArtifactsPage() {
               </p>
             </div>
           </div>
-          <button onClick={fetchArtifacts} className="rounded-lg p-2 text-muted-foreground hover:text-foreground hover:bg-secondary tech-transition" title="Refresh">
+          <Button variant="ghost" size="icon" layout="" onClick={fetchArtifacts} title="Refresh">
             <Icon name="RefreshCw" size={15} className={loading ? "animate-spin" : ""} />
-          </button>
+          </Button>
         </div>
 
         {/* Stats */}
diff --git a/workbench/control_plane/src/app/build/apps/[slug]/edit/page.tsx b/workbench/control_plane/src/app/build/apps/[slug]/edit/page.tsx
index b8f56407..b10ca02b 100644
--- a/workbench/control_plane/src/app/build/apps/[slug]/edit/page.tsx
+++ b/workbench/control_plane/src/app/build/apps/[slug]/edit/page.tsx
@@ -11,6 +11,7 @@
  * (onActivity → debounce → refetch + POST /sync), and a fallback poll.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import {
   Suspense,
@@ -139,12 +140,9 @@ function CheckpointsPanel({
                 Current
               </span>
             ) : confirmSha !== c.sha ? (
-              <button
-                onClick={() => setConfirmSha(c.sha)}
-                className="text-[10px] rounded-md border border-border px-2 py-1 text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition shrink-0"
-              >
+              <Button variant="secondary" size="none" radius="keep" layout="" onClick={() => setConfirmSha(c.sha)} className="text-[10px] rounded-md px-2 py-1 shrink-0">
                 Restore
-              </button>
+              </Button>
             ) : null}
           </div>
           {confirmSha === c.sha && (
@@ -152,16 +150,12 @@ function CheckpointsPanel({
               <span className="text-[10px] text-muted-foreground flex-1">
                 Restore this checkpoint?
               </span>
-              <button
-                onClick={() => restoreCheckpoint(c.sha)}
-                disabled={restoringSha === c.sha}
-                className="text-[10px] rounded-md bg-primary px-2 py-1 font-medium text-primary-foreground hover:opacity-90 tech-transition disabled:opacity-50 flex items-center gap-1"
-              >
+              <Button size="none" radius="keep" layout="flex items-center" onClick={() => restoreCheckpoint(c.sha)} disabled={restoringSha === c.sha} className="text-[10px] rounded-md px-2 py-1 gap-1">
                 {restoringSha === c.sha && (
                   <Icon name="Loader2" className="w-3 h-3 animate-spin" />
                 )}
                 Confirm
-              </button>
+              </Button>
               <button
                 onClick={() => setConfirmSha(null)}
                 className="text-[10px] rounded-md border border-border px-2 py-1 text-muted-foreground hover:text-foreground tech-transition"
@@ -618,12 +612,9 @@ function PublishModal({
               the Workshop meanwhile.
             </p>
           </div>
-          <button
-            onClick={onClose}
-            className="mt-1 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 tech-transition"
-          >
+          <Button size="none" layout="" onClick={onClose} className="mt-1 px-4 py-2 text-sm">
             Done
-          </button>
+          </Button>
         </div>
       </div>
     );
@@ -649,12 +640,9 @@ function PublishModal({
               {inviteWarning}
             </p>
           </div>
-          <button
-            onClick={onPublished}
-            className="mt-1 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 tech-transition"
-          >
+          <Button size="none" layout="" onClick={onPublished} className="mt-1 px-4 py-2 text-sm">
             Done
-          </button>
+          </Button>
         </div>
       </div>
     );
@@ -745,14 +733,9 @@ function PublishModal({
                       className="inline-flex items-center gap-1 rounded-full border border-border bg-secondary px-2.5 py-1 text-xs text-foreground"
                     >
                       {email}
-                      <button
-                        type="button"
-                        onClick={() => removeShareEmail(email)}
-                        aria-label={`Remove ${email}`}
-                        className="rounded-full p-0.5 text-muted-foreground hover:text-foreground tech-transition"
-                      >
+                      <Button variant="text" size="none" radius="keep" layout="" type="button" onClick={() => removeShareEmail(email)} aria-label={`Remove ${email}`} className="rounded-full p-0.5">
                         <Icon name="X" className="w-3 h-3" />
-                      </button>
+                      </Button>
                     </span>
                   ))}
                 </div>
@@ -806,24 +789,17 @@ function PublishModal({
         )}
 
         <div className="flex justify-end gap-2">
-          <button
-            onClick={onClose}
-            className="rounded-lg border border-border px-3 sm:px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition"
-          >
+          <Button variant="secondary" size="none" layout="" onClick={onClose} className="px-3 sm:px-4 py-2 text-sm">
             Cancel
-          </button>
-          <button
-            onClick={publish}
-            disabled={busy}
-            className="rounded-lg bg-primary px-3 sm:px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 tech-transition flex items-center gap-1.5 disabled:opacity-50"
-          >
+          </Button>
+          <Button size="lg" layout="flex items-center" onClick={publish} disabled={busy}>
             {busy ? (
               <Icon name="Loader2" className="w-4 h-4 animate-spin" />
             ) : (
               <Icon name="Rocket" className="w-4 h-4" />
             )}
             Publish
-          </button>
+          </Button>
         </div>
       </div>
     </div>
@@ -1634,12 +1610,9 @@ function Workshop({ slug }: { slug: string }) {
     return (
       <div className="flex flex-col items-center justify-center h-full gap-3">
         <p className="text-sm text-destructive">{loadError}</p>
-        <button
-          onClick={() => router.push("/build/apps")}
-          className="rounded-lg border border-border px-3 sm:px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition"
-        >
+        <Button variant="secondary" size="none" layout="" onClick={() => router.push("/build/apps")} className="px-3 sm:px-4 py-2 text-sm">
           Back to Custom Apps
-        </button>
+        </Button>
       </div>
     );
   }
@@ -1657,12 +1630,9 @@ function Workshop({ slug }: { slug: string }) {
     <div className="flex flex-col h-full min-h-0">
       {/* ── Topbar ──────────────────────────────────────────────────── */}
       <div className="flex items-center gap-3 px-3 sm:px-4 py-2 border-b border-border bg-card shrink-0">
-        <button
-          onClick={() => router.push("/build/apps")}
-          className="flex items-center gap-1.5 px-2 py-1.5 rounded-lg text-sm text-muted-foreground hover:text-foreground hover:bg-secondary tech-transition"
-        >
+        <Button variant="ghost" size="none" layout="flex items-center" onClick={() => router.push("/build/apps")} className="gap-1.5 px-2 py-1.5 text-sm">
           <Icon name="ArrowLeft" className="w-4 h-4" /> Apps
-        </button>
+        </Button>
         <div className="flex items-center gap-2 min-w-0">
           <div className="w-7 h-7 rounded-lg border border-border bg-gradient-to-br from-primary/20 to-accent/15 flex items-center justify-center text-sm shrink-0">
             {app.icon || "▦"}
@@ -1802,12 +1772,9 @@ function Workshop({ slug }: { slug: string }) {
           </button>
         )}
 
-        <button
-          onClick={() => setShowPublish(true)}
-          className="rounded-lg bg-primary px-3 sm:px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 tech-transition flex items-center gap-1.5 shrink-0"
-        >
+        <Button size="lg" layout="flex items-center" onClick={() => setShowPublish(true)} className="shrink-0">
           <Icon name="Rocket" className="w-4 h-4" /> Publish
-        </button>
+        </Button>
       </div>
 
       {/* ── Split main ──────────────────────────────────────────────── */}
@@ -1905,10 +1872,7 @@ function Workshop({ slug }: { slug: string }) {
               {/* Console drawer — frame errors mirrored by the cc SDK. */}
               <div className="border-t border-border bg-card shrink-0">
                 <div className="flex items-center gap-2 px-3 py-1.5">
-                  <button
-                    onClick={() => setConsoleOpen((o) => !o)}
-                    className="flex items-center gap-1.5 font-mono text-[11px] text-muted-foreground hover:text-foreground tech-transition"
-                  >
+                  <Button variant="text" size="none" layout="flex items-center" onClick={() => setConsoleOpen((o) => !o)} className="gap-1.5 font-mono text-[11px]">
                     {consoleOpen ? (
                       <Icon name="ChevronDown" className="w-3 h-3 shrink-0" />
                     ) : (
@@ -1922,7 +1886,7 @@ function Workshop({ slug }: { slug: string }) {
                         {consoleEvents.length === 1 ? "error" : "errors"}
                       </span>
                     )}
-                  </button>
+                  </Button>
                   <div className="flex-1" />
                   {consoleEvents.length > 0 && (
                     <button
@@ -1974,13 +1938,9 @@ function Workshop({ slug }: { slug: string }) {
                   <span className="text-[10px] uppercase tracking-wide text-muted-foreground truncate">
                     {app.slug}
                   </span>
-                  <button
-                    onClick={() => setShowNewFile((s) => !s)}
-                    title="New file"
-                    className="p-1 rounded hover:bg-secondary text-muted-foreground hover:text-foreground tech-transition shrink-0"
-                  >
+                  <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={() => setShowNewFile((s) => !s)} title="New file" className="rounded shrink-0">
                     <Icon name="Plus" className="w-3.5 h-3.5" />
-                  </button>
+                  </Button>
                 </div>
                 {showNewFile && (
                   <div className="flex items-center gap-1 px-2 pb-1.5">
@@ -1995,12 +1955,9 @@ function Workshop({ slug }: { slug: string }) {
                       placeholder="src/Widget.tsx"
                       className="flex-1 min-w-0 rounded-md border border-border bg-background px-1.5 py-1 font-mono text-[11px] text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
                     />
-                    <button
-                      onClick={createFile}
-                      className="text-[10px] rounded-md bg-primary px-1.5 py-1 font-medium text-primary-foreground hover:opacity-90 tech-transition shrink-0"
-                    >
+                    <Button size="none" radius="keep" layout="" onClick={createFile} className="text-[10px] rounded-md px-1.5 py-1 shrink-0">
                       Add
-                    </button>
+                    </Button>
                   </div>
                 )}
                 {files.length === 0 ? (
@@ -2023,8 +1980,7 @@ function Workshop({ slug }: { slug: string }) {
               <div className="flex-1 min-w-0 flex flex-col min-h-0">
                 <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border shrink-0">
                   {isMobile && (
-                    <button
-                      onClick={() =>
+                    <Button variant="secondary" size="none" radius="keep" layout="flex items-center" onClick={() =>
                         openMobileDrawer(
                           <div className="flex flex-col p-2">
                             <div className="px-2 py-1.5 text-[10px] uppercase tracking-wide text-muted-foreground truncate">
@@ -2050,13 +2006,10 @@ function Workshop({ slug }: { slug: string }) {
                             )}
                           </div>
                         )
-                      }
-                      title="Files"
-                      className="flex items-center gap-1.5 text-[11px] rounded-md border border-border px-2 py-1 text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition shrink-0"
-                    >
+                      } title="Files" className="gap-1.5 text-[11px] rounded-md px-2 py-1 shrink-0">
                       <Icon name="Folder" className="w-3 h-3" />
                       Files
-                    </button>
+                    </Button>
                   )}
                   {selectedPath ? (
                     <>
@@ -2083,19 +2036,14 @@ function Workshop({ slug }: { slug: string }) {
                     </span>
                   )}
                   {selectedPath && (
-                    <button
-                      onClick={saveFile}
-                      disabled={!fileDirty || savingFile}
-                      title="Save (⌘S / Ctrl+S)"
-                      className="flex items-center gap-1.5 text-[11px] rounded-md border border-border px-2 py-1 text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition disabled:opacity-40 shrink-0"
-                    >
+                    <Button variant="secondary" size="none" radius="keep" layout="flex items-center" onClick={saveFile} disabled={!fileDirty || savingFile} title="Save (⌘S / Ctrl+S)" className="gap-1.5 text-[11px] rounded-md px-2 py-1 shrink-0">
                       {savingFile ? (
                         <Icon name="Loader2" className="w-3 h-3 animate-spin" />
                       ) : (
                         <Icon name="Save" className="w-3 h-3" />
                       )}
                       Save
-                    </button>
+                    </Button>
                   )}
                 </div>
                 <div className="flex-1 min-h-0">
@@ -2186,19 +2134,14 @@ function Workshop({ slug }: { slug: string }) {
                   {testScenarios.length} passing
                 </span>
                 <div className="flex-1" />
-                <button
-                  onClick={() => runScenarios(testScenarios)}
-                  disabled={runningTestIds.size > 0}
-                  title="Run all scenarios"
-                  className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition disabled:opacity-50 shrink-0"
-                >
+                <Button variant="secondary" layout="flex items-center" onClick={() => runScenarios(testScenarios)} disabled={runningTestIds.size > 0} title="Run all scenarios" className="shrink-0">
                   {runningTestIds.size > 0 ? (
                     <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" />
                   ) : (
                     <Icon name="Play" className="w-3.5 h-3.5" />
                   )}
                   Run all
-                </button>
+                </Button>
               </div>
               <div className="flex-1 min-h-0 overflow-y-auto p-3 flex flex-col gap-2">
                 {testScenarios.map((scenario) => {
@@ -2248,19 +2191,14 @@ function Workshop({ slug }: { slug: string }) {
                               ? "Fail"
                               : "Not run"}
                         </span>
-                        <button
-                          onClick={() => runScenarios([scenario])}
-                          disabled={running}
-                          title="Run this scenario"
-                          className="flex items-center gap-1 rounded-md border border-border px-2 py-1 text-[10px] text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition disabled:opacity-50 shrink-0"
-                        >
+                        <Button variant="secondary" size="none" radius="keep" layout="flex items-center" onClick={() => runScenarios([scenario])} disabled={running} title="Run this scenario" className="gap-1 rounded-md px-2 py-1 text-[10px] shrink-0">
                           {running ? (
                             <Icon name="Loader2" className="w-3 h-3 animate-spin" />
                           ) : (
                             <Icon name="Play" className="w-3 h-3" />
                           )}
                           Run
-                        </button>
+                        </Button>
                       </div>
                       {expanded && (
                         <div className="border-t border-border px-3 py-2.5 text-[11px] flex flex-col gap-1.5">
@@ -2371,13 +2309,9 @@ function Workshop({ slug }: { slug: string }) {
                       until an admin grants it at publish.
                     </p>
                   </div>
-                  <button
-                    onClick={() => dismissCapability(scope)}
-                    aria-label="Dismiss"
-                    className="shrink-0 p-0.5 rounded text-muted-foreground hover:text-foreground tech-transition"
-                  >
+                  <Button variant="text" size="none" radius="keep" layout="" onClick={() => dismissCapability(scope)} aria-label="Dismiss" className="shrink-0 p-0.5 rounded">
                     <Icon name="X" className="w-3.5 h-3.5" />
-                  </button>
+                  </Button>
                 </div>
               ))}
             </div>
@@ -2416,13 +2350,9 @@ function Workshop({ slug }: { slug: string }) {
                         ✦ Fix with AI
                       </button>
                     </div>
-                    <button
-                      onClick={() => dismissFailingTest(result.scenarioId)}
-                      aria-label="Dismiss"
-                      className="shrink-0 p-0.5 rounded text-muted-foreground hover:text-foreground tech-transition"
-                    >
+                    <Button variant="text" size="none" radius="keep" layout="" onClick={() => dismissFailingTest(result.scenarioId)} aria-label="Dismiss" className="shrink-0 p-0.5 rounded">
                       <Icon name="X" className="w-3.5 h-3.5" />
-                    </button>
+                    </Button>
                   </div>
                 );
               })}
@@ -2508,30 +2438,24 @@ function Workshop({ slug }: { slug: string }) {
               />
               Always allow for this app
             </label>
-            <button
-              onClick={() => {
+            <Button variant="secondary" size="none" layout="" onClick={() => {
                 pendingConfirm.resolve({
                   approved: false,
                   remember: rememberTool,
                 });
                 setPendingConfirm(null);
-              }}
-              className="rounded-lg border border-border px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition"
-            >
+              }} className="px-3 py-1.5 text-xs">
               Deny
-            </button>
-            <button
-              onClick={() => {
+            </Button>
+            <Button size="none" layout="" onClick={() => {
                 pendingConfirm.resolve({
                   approved: true,
                   remember: rememberTool,
                 });
                 setPendingConfirm(null);
-              }}
-              className="rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 tech-transition"
-            >
+              }} className="px-3 py-1.5 text-xs">
               Approve
-            </button>
+            </Button>
           </div>
         </div>
       )}
diff --git a/workbench/control_plane/src/app/build/apps/[slug]/page.tsx b/workbench/control_plane/src/app/build/apps/[slug]/page.tsx
index fd7d12c0..af94f769 100644
--- a/workbench/control_plane/src/app/build/apps/[slug]/page.tsx
+++ b/workbench/control_plane/src/app/build/apps/[slug]/page.tsx
@@ -8,6 +8,7 @@
  * user/storage/ai calls with the VIEWER's session (docs/app-workshop §4.4).
  */
 
+import Button from "@/components/ui/Button";
 import AppIcon, { themedIcon } from "@/components/Icon";
 import type { ThemedIcon } from "@/components/Icon";
 import { use, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -411,12 +412,9 @@ export default function AppRunPage({
     return (
       <div className="flex flex-col items-center justify-center h-full gap-3">
         <p className="text-sm text-destructive">{error ?? "App not found."}</p>
-        <button
-          onClick={() => router.push("/build/apps")}
-          className="rounded-lg border border-border px-3 sm:px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition"
-        >
+        <Button variant="secondary" size="none" layout="" onClick={() => router.push("/build/apps")} className="px-3 sm:px-4 py-2 text-sm">
           Back to Custom Apps
-        </button>
+        </Button>
       </div>
     );
   }
@@ -451,28 +449,19 @@ export default function AppRunPage({
         <span className="hidden sm:flex items-center gap-1.5 text-[11px] text-muted-foreground border border-border rounded-full px-2.5 py-1 shrink-0">
           runs as {viewerEmail}
         </span>
-        <button
-          onClick={forkApp}
-          disabled={forking}
-          title="Duplicate this app as your own editable copy"
-          className="rounded-lg border border-border px-2 sm:px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition flex items-center gap-1.5 shrink-0 disabled:opacity-50"
-        >
+        <Button variant="secondary" size="none" layout="flex items-center" onClick={forkApp} disabled={forking} title="Duplicate this app as your own editable copy" className="px-2 sm:px-3 py-1.5 text-xs gap-1.5 shrink-0">
           {forking ? (
             <AppIcon name="Loader2" className="w-3.5 h-3.5 animate-spin" />
           ) : (
             <AppIcon name="GitFork" className="w-3.5 h-3.5" />
           )}
           <span className="hidden sm:inline">Fork</span>
-        </button>
+        </Button>
         {canEdit && (
-          <button
-            onClick={() => router.push(`/build/apps/${slug}/edit`)}
-            title="Open in Workshop"
-            className="rounded-lg border border-border px-2 sm:px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition flex items-center gap-1.5 shrink-0"
-          >
+          <Button variant="secondary" size="none" layout="flex items-center" onClick={() => router.push(`/build/apps/${slug}/edit`)} title="Open in Workshop" className="px-2 sm:px-3 py-1.5 text-xs gap-1.5 shrink-0">
             <AppIcon name="Wrench" className="w-3.5 h-3.5" />
             <span className="hidden sm:inline">Open in Workshop</span>
-          </button>
+          </Button>
         )}
         <div className="relative shrink-0" ref={infoRef}>
           <button
@@ -534,12 +523,9 @@ export default function AppRunPage({
                               live
                             </span>
                           ) : canEdit && confirmVersion !== v.version ? (
-                            <button
-                              onClick={() => setConfirmVersion(v.version)}
-                              className="text-[10px] rounded-md border border-border px-2 py-0.5 text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition shrink-0"
-                            >
+                            <Button variant="secondary" size="none" radius="keep" layout="" onClick={() => setConfirmVersion(v.version)} className="text-[10px] rounded-md px-2 py-0.5 shrink-0">
                               Make live
-                            </button>
+                            </Button>
                           ) : null}
                         </div>
                         {canEdit && !isCurrent && confirmVersion === v.version && (
@@ -547,16 +533,12 @@ export default function AppRunPage({
                             <span className="text-[10px] text-muted-foreground flex-1">
                               Make v{v.version} live?
                             </span>
-                            <button
-                              onClick={() => makeLive(v.version)}
-                              disabled={rollbackBusy}
-                              className="text-[10px] rounded-md bg-primary px-2 py-1 font-medium text-primary-foreground hover:opacity-90 tech-transition disabled:opacity-50 flex items-center gap-1"
-                            >
+                            <Button size="none" radius="keep" layout="flex items-center" onClick={() => makeLive(v.version)} disabled={rollbackBusy} className="text-[10px] rounded-md px-2 py-1 gap-1">
                               {rollbackBusy && (
                                 <AppIcon name="Loader2" className="w-3 h-3 animate-spin" />
                               )}
                               Confirm
-                            </button>
+                            </Button>
                             <button
                               onClick={() => setConfirmVersion(null)}
                               className="text-[10px] rounded-md border border-border px-2 py-1 text-muted-foreground hover:text-foreground tech-transition"
@@ -605,12 +587,9 @@ export default function AppRunPage({
               Workshop first.
             </p>
             {canEdit && (
-              <button
-                onClick={() => router.push(`/build/apps/${slug}/edit`)}
-                className="rounded-lg bg-primary px-3 sm:px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 tech-transition"
-              >
+              <Button size="none" layout="" onClick={() => router.push(`/build/apps/${slug}/edit`)} className="px-3 sm:px-4 py-2 text-sm">
                 Open Workshop
-              </button>
+              </Button>
             )}
           </div>
         )}
@@ -664,20 +643,13 @@ export default function AppRunPage({
             )}
 
             <div className="flex justify-end gap-2">
-              <button
-                onClick={() => router.push("/build/apps")}
-                className="rounded-lg border border-border px-3 sm:px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition"
-              >
+              <Button variant="secondary" size="none" layout="" onClick={() => router.push("/build/apps")} className="px-3 sm:px-4 py-2 text-sm">
                 Not now
-              </button>
-              <button
-                onClick={allowConsent}
-                disabled={consentBusy}
-                className="rounded-lg bg-primary px-3 sm:px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 tech-transition flex items-center gap-1.5 disabled:opacity-50"
-              >
+              </Button>
+              <Button size="lg" layout="flex items-center" onClick={allowConsent} disabled={consentBusy}>
                 {consentBusy && <AppIcon name="Loader2" className="w-4 h-4 animate-spin" />}
                 Allow
-              </button>
+              </Button>
             </div>
           </div>
         </div>
@@ -714,30 +686,24 @@ export default function AppRunPage({
               />
               Always allow for this app
             </label>
-            <button
-              onClick={() => {
+            <Button variant="secondary" size="none" layout="" onClick={() => {
                 pendingConfirm.resolve({
                   approved: false,
                   remember: rememberTool,
                 });
                 setPendingConfirm(null);
-              }}
-              className="rounded-lg border border-border px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition"
-            >
+              }} className="px-3 py-1.5 text-xs">
               Deny
-            </button>
-            <button
-              onClick={() => {
+            </Button>
+            <Button size="none" layout="" onClick={() => {
                 pendingConfirm.resolve({
                   approved: true,
                   remember: rememberTool,
                 });
                 setPendingConfirm(null);
-              }}
-              className="rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 tech-transition"
-            >
+              }} className="px-3 py-1.5 text-xs">
               Approve
-            </button>
+            </Button>
           </div>
         </div>
       )}
diff --git a/workbench/control_plane/src/app/build/apps/page.tsx b/workbench/control_plane/src/app/build/apps/page.tsx
index f7718f81..36a813cc 100644
--- a/workbench/control_plane/src/app/build/apps/page.tsx
+++ b/workbench/control_plane/src/app/build/apps/page.tsx
@@ -8,6 +8,7 @@
  * the published app full-page, drafts (and editors) jump into the Workshop.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
@@ -459,18 +460,14 @@ export default function CustomAppsPage() {
           >
             <Icon name="RefreshCw" className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
           </button>
-          <button
-            onClick={() => createApp("")}
-            disabled={creating}
-            className="rounded-lg bg-primary px-3 sm:px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 tech-transition flex items-center gap-1.5 disabled:opacity-50"
-          >
+          <Button size="lg" layout="flex items-center" onClick={() => createApp("")} disabled={creating}>
             {creating ? (
               <Icon name="Loader2" className="w-4 h-4 animate-spin" />
             ) : (
               <Icon name="Plus" className="w-4 h-4" />
             )}
             New app
-          </button>
+          </Button>
         </div>
       </div>
 
@@ -519,13 +516,9 @@ export default function CustomAppsPage() {
                 placeholder="Describe the tool you need… e.g. “A board that shows every printer's service history and next due date”"
                 className="flex-1 bg-transparent outline-none text-[13px] text-foreground placeholder:text-muted-foreground"
               />
-              <button
-                type="submit"
-                disabled={creating || !describe.trim()}
-                className="rounded-lg bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground hover:opacity-90 tech-transition disabled:opacity-50 shrink-0"
-              >
+              <Button size="none" layout="" type="submit" disabled={creating || !describe.trim()} className="px-3 py-1.5 text-xs font-semibold shrink-0">
                 {creating ? "Creating…" : "Build it"}
-              </button>
+              </Button>
             </form>
             <div className="flex items-center gap-2 flex-wrap">
               <span className="text-[11px] text-muted-foreground">Try:</span>
diff --git a/workbench/control_plane/src/app/chat/page.tsx b/workbench/control_plane/src/app/chat/page.tsx
index 1ef71629..4ba30c4e 100644
--- a/workbench/control_plane/src/app/chat/page.tsx
+++ b/workbench/control_plane/src/app/chat/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useState, useEffect, useCallback, useMemo, useRef, Suspense } from "react";
 import { useSearchParams } from "next/navigation";
@@ -191,12 +192,9 @@ function AgentPickerModal({
             <div className="text-base font-semibold text-foreground">New session</div>
             <div className="text-xs text-muted-foreground mt-0.5">Choose an agent to chat with</div>
           </div>
-          <button
-            onClick={onClose}
-            className="text-muted-foreground hover:text-foreground text-sm tech-transition"
-          >
+          <Button variant="text" size="none" layout="" onClick={onClose} className="text-sm">
             ✕
-          </button>
+          </Button>
         </div>
 
         <div className="overflow-y-auto flex-1 min-h-0 -mr-2 pr-2">
@@ -874,15 +872,11 @@ function ChatPageInner() {
     <>
       <div className="flex items-center justify-between border-b border-border px-4 py-3">
         <div className="text-sm font-semibold text-foreground">Conversations</div>
-        <button
-          onClick={closeDrawer}
-          className="rounded-lg p-1.5 text-muted-foreground hover:bg-secondary hover:text-foreground tech-transition"
-          aria-label="Close"
-        >
+        <Button variant="ghost" size="icon-sm" layout="" onClick={closeDrawer} aria-label="Close">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
             <path d="M4 4l8 8M12 4l-8 8" />
           </svg>
-        </button>
+        </Button>
       </div>
       <div className="flex flex-col flex-1 overflow-y-auto p-3">
         <SessionList
@@ -902,15 +896,11 @@ function ChatPageInner() {
     <>
       <div className="flex items-center justify-between border-b border-border px-4 py-3">
         <div className="text-sm font-semibold text-foreground">Files</div>
-        <button
-          onClick={closeDrawer}
-          className="rounded-lg p-1.5 text-muted-foreground hover:bg-secondary hover:text-foreground tech-transition"
-          aria-label="Close"
-        >
+        <Button variant="ghost" size="icon-sm" layout="" onClick={closeDrawer} aria-label="Close">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
             <path d="M4 4l8 8M12 4l-8 8" />
           </svg>
-        </button>
+        </Button>
       </div>
       <div className="flex-1 overflow-y-auto">
         {/* Upload drop zone at top of files drawer */}
@@ -1159,12 +1149,9 @@ function ChatPageInner() {
           ) : (
             <div className="flex flex-1 flex-col items-center justify-center gap-4 text-muted-foreground">
               <div className="text-sm">Choose an agent to start chatting</div>
-              <button
-                onClick={handleNewSession}
-                className="rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground hover:opacity-90 tech-transition"
-              >
+              <Button size="none" layout="" onClick={handleNewSession} className="px-5 py-2.5 text-sm">
                 + New session
-              </button>
+              </Button>
             </div>
           )}
         </div>
diff --git a/workbench/control_plane/src/app/email/components/ArtifactAttachPicker.tsx b/workbench/control_plane/src/app/email/components/ArtifactAttachPicker.tsx
index 50fa36c0..79d97022 100644
--- a/workbench/control_plane/src/app/email/components/ArtifactAttachPicker.tsx
+++ b/workbench/control_plane/src/app/email/components/ArtifactAttachPicker.tsx
@@ -8,6 +8,7 @@
  * send time — no base64 round-trip in the browser).
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useState, useEffect, useRef } from "react";
 import { listEmailArtifacts, type EmailArtifact } from "../lib/api";
@@ -51,17 +52,11 @@ export function ArtifactAttachPicker({
 
   return (
     <div className="relative" ref={ref}>
-      <button
-        type="button"
-        onClick={() => setOpen((v) => !v)}
-        title="Attach an AI-generated file"
-        aria-label="Attach an AI-generated file"
-        className="px-2 py-1 text-xs rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors flex items-center gap-1"
-      >
+      <Button variant="ghost" size="none" radius="keep" layout="flex items-center" type="button" onClick={() => setOpen((v) => !v)} title="Attach an AI-generated file" aria-label="Attach an AI-generated file" className="px-2 py-1 text-xs rounded-md gap-1">
         {/* Icon-only on phones — composer footers must fit the whole action
             row (incl. Send) on a narrow screen. */}
         <Icon name="Sparkles" size={13} /> <span className="hidden sm:inline">AI files</span>
-      </button>
+      </Button>
       {open && (
         <div className="absolute bottom-full right-0 mb-1.5 w-64 max-h-60 overflow-y-auto rounded-lg border border-border bg-popover shadow-xl z-[70] py-1">
           {loading ? (
diff --git a/workbench/control_plane/src/app/email/components/AttachmentList.tsx b/workbench/control_plane/src/app/email/components/AttachmentList.tsx
index 156c8f7f..d9e98bf0 100644
--- a/workbench/control_plane/src/app/email/components/AttachmentList.tsx
+++ b/workbench/control_plane/src/app/email/components/AttachmentList.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useState } from "react";
 import { Attachment } from "../lib/types";
@@ -132,16 +133,13 @@ export function AttachmentList({
         })}
       </div>
       {overflow > 0 && (
-        <button
-          onClick={() => setExpanded((e) => !e)}
-          className="mt-2 inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-foreground transition-colors"
-        >
+        <Button variant="text" size="none" layout="inline-flex items-center" onClick={() => setExpanded((e) => !e)} className="mt-2 gap-1 text-[11px]">
           <Icon name="ChevronDown"
             size={12}
             className={`transition-transform ${expanded ? "rotate-180" : ""}`}
           />
           {expanded ? "Show fewer" : `Show all ${total} attachments`}
-        </button>
+        </Button>
       )}
 
       {/* Pop-up viewer — images, PDFs and documents all render here. Read-only:
diff --git a/workbench/control_plane/src/app/email/components/ComposePanel.tsx b/workbench/control_plane/src/app/email/components/ComposePanel.tsx
index 9ba528fc..9957de06 100644
--- a/workbench/control_plane/src/app/email/components/ComposePanel.tsx
+++ b/workbench/control_plane/src/app/email/components/ComposePanel.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useState, useEffect, useRef } from "react";
 import { useEmailStore } from "../lib/emailStore";
@@ -259,12 +260,9 @@ export function ComposePanel({
         {/* Header */}
         <div className="shrink-0 flex items-center justify-between px-4 py-3 border-b border-border bg-secondary/50">
           <span className="text-sm font-medium text-foreground">New Message</span>
-          <button
-            onClick={onClose}
-            className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
-          >
+          <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={onClose} className="rounded">
             <Icon name="X" size={16} />
-          </button>
+          </Button>
         </div>
 
         {/* Fields — the scrolling region when the window hits its max height */}
@@ -415,25 +413,17 @@ export function ComposePanel({
               onPick={(ref) => setArtifacts((prev) =>
                 prev.some((a) => a.path === ref.path) ? prev : [...prev, ref])}
             />
-            <button
-              onClick={() => {
+            <Button variant="ghost" size="none" radius="keep" layout="" onClick={() => {
                 // Discard removes the auto-saved draft (closing via X keeps it).
                 if (draftIdRef.current) void deleteEmail(draftIdRef.current);
                 onClose();
-              }}
-              disabled={sending}
-              className="px-3 py-1.5 text-xs rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-50"
-            >
+              }} disabled={sending} className="px-3 py-1.5 text-xs rounded-md">
               Discard
-            </button>
-            <button
-              onClick={handleSend}
-              disabled={sending || !to.trim()}
-              className="px-4 py-1.5 text-xs rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
-            >
+            </Button>
+            <Button size="none" radius="keep" layout="flex items-center" onClick={handleSend} disabled={sending || !to.trim()} className="px-4 py-1.5 text-xs rounded-md gap-1.5">
               {sending && <Icon name="Loader2" size={12} className="animate-spin" />}
               {sending ? "Sending…" : "Send"}
-            </button>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/workbench/control_plane/src/app/email/components/ContactCard.tsx b/workbench/control_plane/src/app/email/components/ContactCard.tsx
index 9a37b458..60c6c2c8 100644
--- a/workbench/control_plane/src/app/email/components/ContactCard.tsx
+++ b/workbench/control_plane/src/app/email/components/ContactCard.tsx
@@ -19,6 +19,7 @@
  * above / to the left near an edge, and becomes a bottom sheet on mobile).
  */
 
+import Button from "@/components/ui/Button";
 import AppIcon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
@@ -440,20 +441,12 @@ function ContactPopover({
 
       {/* Actions */}
       <div className="flex items-center gap-2 px-4 pb-3">
-        <button
-          type="button"
-          onClick={mailTo}
-          className="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 tech-transition"
-        >
+        <Button type="button" onClick={mailTo} className="flex-1">
           <AppIcon name="Mail" size={12} /> Email
-        </button>
-        <button
-          type="button"
-          onClick={searchTheirMail}
-          className="flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition"
-        >
+        </Button>
+        <Button variant="secondary" type="button" onClick={searchTheirMail} className="flex-1">
           <AppIcon name="Search" size={12} /> All mail
-        </button>
+        </Button>
       </div>
 
       {error ? (
diff --git a/workbench/control_plane/src/app/email/components/ConversationView.tsx b/workbench/control_plane/src/app/email/components/ConversationView.tsx
index c148947b..e63f5047 100644
--- a/workbench/control_plane/src/app/email/components/ConversationView.tsx
+++ b/workbench/control_plane/src/app/email/components/ConversationView.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import AppIcon, { themedIcon } from "@/components/Icon";
 import { useEffect, useRef, useState } from "react";
 import { Email } from "../lib/types";
@@ -300,18 +301,12 @@ function CardAction({
   onClick: () => void;
 }) {
   return (
-    <button
-      type="button"
-      title={label}
-      aria-label={label}
-      onClick={(e) => {
+    <Button variant="ghost" size="icon-sm" radius="keep" layout="" type="button" title={label} aria-label={label} onClick={(e) => {
         e.stopPropagation();
         onClick();
-      }}
-      className="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
-    >
+      }} className="rounded">
       <Icon size={13} />
-    </button>
+    </Button>
   );
 }
 
@@ -631,13 +626,9 @@ export function DraftCard({
             className={`${INPUT} w-full`}
           />
           {!showCc && (
-            <button
-              type="button"
-              onClick={() => setShowCc(true)}
-              className="text-[10px] text-muted-foreground hover:text-foreground whitespace-nowrap px-1"
-            >
+            <Button variant="text" size="none" layout="" type="button" onClick={() => setShowCc(true)} className="text-[10px] whitespace-nowrap px-1">
               Cc/Bcc
-            </button>
+            </Button>
           )}
         </div>
         {showCc && (
@@ -694,18 +685,14 @@ export function DraftCard({
         </div>
       )}
       <div className="flex items-center gap-2 mt-2">
-        <button
-          onClick={send}
-          disabled={sending || recipients().length === 0}
-          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
-        >
+        <Button layout="flex items-center" onClick={send} disabled={sending || recipients().length === 0}>
           {sending ? (
             <AppIcon name="Loader2" className="animate-spin" size={13} />
           ) : (
             <AppIcon name="Send" size={13} />
           )}
           Send
-        </button>
+        </Button>
         <button
           onClick={discard}
           className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border border-border text-xs text-muted-foreground hover:text-destructive hover:bg-secondary transition-colors"
diff --git a/workbench/control_plane/src/app/email/components/DraftAssistant.tsx b/workbench/control_plane/src/app/email/components/DraftAssistant.tsx
index 35433498..6eb79901 100644
--- a/workbench/control_plane/src/app/email/components/DraftAssistant.tsx
+++ b/workbench/control_plane/src/app/email/components/DraftAssistant.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect, useRef, useState } from "react";
 import type { DraftStep, DraftRevision } from "../lib/useDraftSession";
@@ -231,15 +232,9 @@ export function DraftAssistant({
               </span>
             )}
             {steps.length > 0 && (
-              <button
-                type="button"
-                onClick={() => setManualExpand(!expanded)}
-                title={expanded ? "Hide activity" : "Show what the AI did"}
-                aria-expanded={expanded}
-                className="p-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-secondary tech-transition"
-              >
+              <Button variant="ghost" size="none" radius="keep" layout="" type="button" onClick={() => setManualExpand(!expanded)} title={expanded ? "Hide activity" : "Show what the AI did"} aria-expanded={expanded} className="p-0.5 rounded">
                 {expanded ? <Icon name="ChevronUp" size={13} /> : <Icon name="ChevronDown" size={13} />}
-              </button>
+              </Button>
             )}
           </div>
         </div>
@@ -295,31 +290,21 @@ export function DraftAssistant({
           className="flex-1 bg-transparent text-xs text-foreground placeholder:text-muted-foreground outline-none min-w-0 disabled:opacity-60"
         />
         {hasDraft && revisions.length > 1 && !busy && (
-          <button
-            type="button"
-            onClick={() => {
+          <Button variant="ghost" size="icon-xs" radius="keep" layout="" type="button" onClick={() => {
               const prev = revisions[revisions.length - 2];
               if (prev) onRestore(prev.id);
-            }}
-            title="Go back to the previous version"
-            className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary tech-transition flex-shrink-0"
-          >
+            }} title="Go back to the previous version" className="rounded flex-shrink-0">
             <Icon name="Undo2" size={13} />
-          </button>
+          </Button>
         )}
-        <button
-          type="button"
-          onClick={onRunClick}
-          disabled={busy}
-          className="px-2.5 py-1 text-xs rounded-md bg-primary text-primary-foreground hover:bg-primary/90 tech-transition disabled:opacity-50 flex items-center gap-1 flex-shrink-0"
-        >
+        <Button size="none" radius="keep" layout="flex items-center" type="button" onClick={onRunClick} disabled={busy} className="px-2.5 py-1 text-xs rounded-md gap-1 flex-shrink-0">
           {busy ? (
             <Icon name="Loader2" size={12} className="animate-spin" aria-hidden />
           ) : (
             <Icon name="CornerDownLeft" size={12} aria-hidden />
           )}
           {runLabel}
-        </button>
+        </Button>
         <button
           type="button"
           onClick={onClose}
diff --git a/workbench/control_plane/src/app/email/components/EmailDetail.tsx b/workbench/control_plane/src/app/email/components/EmailDetail.tsx
index ba1444fa..f256d450 100644
--- a/workbench/control_plane/src/app/email/components/EmailDetail.tsx
+++ b/workbench/control_plane/src/app/email/components/EmailDetail.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import AppIcon, { themedIcon } from "@/components/Icon";
 import { useState, useEffect, useRef } from "react";
 import { Email } from "../lib/types";
@@ -1099,13 +1100,9 @@ export function EmailDetail({ email }: EmailDetailProps) {
               />
               {/* Reveal Cc/Bcc on a sender-only reply where they're hidden. */}
               {!showReplyCc && (
-                <button
-                  type="button"
-                  onClick={() => setShowReplyCc(true)}
-                  className="text-[10px] text-muted-foreground hover:text-foreground whitespace-nowrap px-1 flex-shrink-0"
-                >
+                <Button variant="text" size="none" layout="" type="button" onClick={() => setShowReplyCc(true)} className="text-[10px] whitespace-nowrap px-1 flex-shrink-0">
                   Cc/Bcc
-                </button>
+                </Button>
               )}
             </div>
             {showReplyCc && (
@@ -1252,37 +1249,23 @@ export function EmailDetail({ email }: EmailDetailProps) {
                       prev.some((a) => a.path === ref.path) ? prev : [...prev, ref]);
                   }}
                 />
-                <button
-                  className="px-2 sm:px-3 py-1 text-xs rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors flex items-center gap-1"
-                  onClick={popOutToComposer}
-                  title="Open in the full composer (Bcc, attachments)"
-                  aria-label="Pop out to full composer"
-                >
+                <Button variant="ghost" size="none" radius="keep" layout="flex items-center" onClick={popOutToComposer} title="Open in the full composer (Bcc, attachments)" aria-label="Pop out to full composer" className="px-2 sm:px-3 py-1 text-xs rounded-md gap-1">
                   <AppIcon name="ExternalLink" size={13} />
                   <span className="hidden sm:inline">Pop out</span>
-                </button>
-                <button
-                  className="px-2 sm:px-3 py-1 text-xs rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors flex items-center gap-1"
-                  onClick={() => {
+                </Button>
+                <Button variant="ghost" size="none" radius="keep" layout="flex items-center" onClick={() => {
                     // Discard the auto-saved draft too (the X keeps it instead).
                     if (draftIdRef.current) void deleteEmail(draftIdRef.current);
                     setSendErr(null);
                     resetReplySession();
-                  }}
-                  title="Discard this draft"
-                  aria-label="Discard this draft"
-                >
+                  }} title="Discard this draft" aria-label="Discard this draft" className="px-2 sm:px-3 py-1 text-xs rounded-md gap-1">
                   <AppIcon name="Trash2" size={13} />
                   <span className="hidden sm:inline">Discard</span>
-                </button>
-                <button
-                  className="px-4 py-1 text-xs rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 flex items-center gap-1.5"
-                  disabled={!replyTo.trim() || !replyBody.trim()}
-                  onClick={handleInlineSend}
-                >
+                </Button>
+                <Button size="none" radius="keep" layout="flex items-center" disabled={!replyTo.trim() || !replyBody.trim()} onClick={handleInlineSend} className="px-4 py-1 text-xs rounded-md gap-1.5">
                   <AppIcon name="Send" size={12} />
                   Send
-                </button>
+                </Button>
               </div>
             </div>
           </div>
diff --git a/workbench/control_plane/src/app/email/components/EmailList.tsx b/workbench/control_plane/src/app/email/components/EmailList.tsx
index d2bcf84f..bcbf07fa 100644
--- a/workbench/control_plane/src/app/email/components/EmailList.tsx
+++ b/workbench/control_plane/src/app/email/components/EmailList.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import AppIcon, { themedIcon } from "@/components/Icon";
 import { useState, useRef, useEffect, useCallback } from "react";
 import { Email } from "../lib/types";
@@ -288,25 +289,17 @@ export function EmailList({
           <ToolbarBtn icon={themedIcon("Flag")} label="Flag" onClick={() => bulkUpdate({ isFlagged: true })} />
           <ToolbarBtn icon={themedIcon("Archive")} label="Archive" onClick={() => bulkUpdate({ folder: "archive" })} />
           <ToolbarBtn icon={themedIcon("Trash2")} label="Delete" onClick={bulkDelete} />
-          <button
-            onClick={clearSelection}
-            title="Clear selection"
-            className="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
-          >
+          <Button variant="ghost" size="icon-sm" radius="keep" layout="" onClick={clearSelection} title="Clear selection" className="rounded">
             <AppIcon name="X" size={13} />
-          </button>
+          </Button>
         </div>
       ) : (
         <div className="flex items-center gap-0.5 px-2 py-1.5 border-b border-border flex-shrink-0 overflow-x-auto scrollbar-hide">
           {/* Compose — always available, even with nothing selected */}
-          <button
-            title="New Email"
-            onClick={onCompose}
-            className="flex items-center gap-1 px-2.5 py-1.5 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex-shrink-0"
-          >
+          <Button size="none" radius="keep" layout="flex items-center" title="New Email" onClick={onCompose} className="gap-1 px-2.5 py-1.5 rounded-md flex-shrink-0">
             <AppIcon name="Pencil" size={12} />
             <span className="text-[10px] font-medium">New</span>
-          </button>
+          </Button>
 
           {selectedEmail ? (
             <>
@@ -350,13 +343,9 @@ export function EmailList({
           <span className="text-foreground/70">
             Filtered by label <b className="text-primary">{selectedLabel}</b>
           </span>
-          <button
-            onClick={() => selectLabel(null)}
-            title="Clear label filter"
-            className="ml-auto flex items-center gap-0.5 text-muted-foreground hover:text-foreground"
-          >
+          <Button variant="text" size="none" layout="flex items-center" onClick={() => selectLabel(null)} title="Clear label filter" className="ml-auto gap-0.5">
             <AppIcon name="X" size={11} /> Clear
-          </button>
+          </Button>
         </div>
       )}
 
@@ -569,11 +558,7 @@ export function EmailList({
                 provider. Tapping it also works if auto-load hasn't fired. */}
             {(hasMore || canPageProvider) && (
               <div ref={sentinelRef} className="p-2">
-                <button
-                  onClick={handleManualLoad}
-                  disabled={loadingMore || backfilling}
-                  className="w-full flex items-center justify-center gap-1.5 py-2 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-50"
-                >
+                <Button variant="ghost" size="none" radius="keep" layout="flex items-center justify-center" onClick={handleManualLoad} disabled={loadingMore || backfilling} className="w-full gap-1.5 py-2 rounded-md text-xs">
                   {(loadingMore || backfilling) && (
                     <AppIcon name="Loader2" size={12} className="animate-spin" />
                   )}
@@ -584,7 +569,7 @@ export function EmailList({
                       : hasMore
                         ? `Load more (${emails.length} of ${total})`
                         : "Load older messages from server"}
-                </button>
+                </Button>
               </div>
             )}
           </>
@@ -1059,12 +1044,8 @@ function ToolbarBtn({
   onClick?: (e: React.MouseEvent) => void;
 }) {
   return (
-    <button
-      title={label}
-      onClick={onClick}
-      className="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
-    >
+    <Button variant="ghost" size="icon-sm" radius="keep" layout="" title={label} onClick={onClick} className="rounded">
       <Icon size={13} />
-    </button>
+    </Button>
   );
 }
diff --git a/workbench/control_plane/src/app/email/components/EmailToolbar.tsx b/workbench/control_plane/src/app/email/components/EmailToolbar.tsx
index 7c0f958b..360d1d0e 100644
--- a/workbench/control_plane/src/app/email/components/EmailToolbar.tsx
+++ b/workbench/control_plane/src/app/email/components/EmailToolbar.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import AppIcon, { themedIcon } from "@/components/Icon";
 import { useState } from "react";
 import { useEmailStore, isRealFolder } from "../lib/emailStore";
@@ -54,14 +55,10 @@ export function EmailToolbar() {
   return (
     <div className="flex items-center gap-1 px-3 py-2.5 border-b border-border flex-shrink-0 bg-card overflow-x-auto scrollbar-hide">
       {/* Compose — always available */}
-      <button
-        title="New Email"
-        onClick={() => openCompose()}
-        className="flex items-center gap-1.5 px-3 py-2 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex-shrink-0"
-      >
+      <Button size="none" radius="keep" layout="flex items-center" title="New Email" onClick={() => openCompose()} className="gap-1.5 px-3 py-2 rounded-md flex-shrink-0">
         <AppIcon name="Pencil" size={15} />
         <span className="text-xs font-medium">New</span>
-      </button>
+      </Button>
 
       {selectedEmail ? (
         <>
diff --git a/workbench/control_plane/src/app/email/components/MailboxActions.tsx b/workbench/control_plane/src/app/email/components/MailboxActions.tsx
index a8ddb8eb..8fc4ebd1 100644
--- a/workbench/control_plane/src/app/email/components/MailboxActions.tsx
+++ b/workbench/control_plane/src/app/email/components/MailboxActions.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useState } from "react";
 import { Email } from "../lib/types";
@@ -48,29 +49,19 @@ export function MailboxActions({ selectedEmail }: { selectedEmail: Email | null
 
   return (
     <div className="flex items-center gap-1">
-      <button
-        onClick={() => selectedAccountId && triggerSync(selectedAccountId)}
-        disabled={!selectedAccountId || syncing}
-        className="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-40"
-        title={
+      <Button variant="ghost" size="icon-sm" radius="keep" layout="" onClick={() => selectedAccountId && triggerSync(selectedAccountId)} disabled={!selectedAccountId || syncing} title={
           processing
             ? "Processing new mail — applying rules, labels & auto-archive…"
             : "Refresh — sync new mail, drafts & changes from the server"
-        }
-      >
+        } className="rounded">
         <Icon name="RefreshCw" size={15} className={syncing ? "animate-spin" : ""} />
-      </button>
+      </Button>
 
-      <button
-        onClick={() =>
+      <Button variant="ghost" size="icon-sm" radius="keep" layout="" onClick={() =>
           selectedEmail && updateEmail(selectedEmail.id, { folder: "junk" })
-        }
-        disabled={!selectedEmail}
-        className="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-40"
-        title="Mark as spam"
-      >
+        } disabled={!selectedEmail} title="Mark as spam" className="rounded">
         <Icon name="AlertTriangle" size={15} />
-      </button>
+      </Button>
 
       {/* Mailbox settings (gear) */}
       <div className="relative">
diff --git a/workbench/control_plane/src/app/email/components/SearchBar.tsx b/workbench/control_plane/src/app/email/components/SearchBar.tsx
index cbf72bc0..4b277428 100644
--- a/workbench/control_plane/src/app/email/components/SearchBar.tsx
+++ b/workbench/control_plane/src/app/email/components/SearchBar.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useEmailStore, FOLDER_ALL } from "../lib/emailStore";
@@ -114,14 +115,10 @@ export function SearchBar() {
       >
         {/* ── Scope dropdown: says WHERE we're searching ── */}
         <div className="relative flex-shrink-0">
-          <button
-            onClick={() => setScopeOpen((v) => !v)}
-            title="Choose where to search"
-            className="flex items-center gap-1 pl-2.5 pr-2 py-1.5 rounded-l-md text-[11px] text-muted-foreground hover:text-foreground transition-colors max-w-[140px]"
-          >
+          <Button variant="text" size="none" radius="keep" layout="flex items-center" onClick={() => setScopeOpen((v) => !v)} title="Choose where to search" className="gap-1 pl-2.5 pr-2 py-1.5 rounded-l-md text-[11px] max-w-[140px]">
             <span className="truncate">{scopeName}</span>
             <Icon name="ChevronDown" size={11} className="flex-shrink-0" />
-          </button>
+          </Button>
           {scopeOpen && (
             <>
               <div className="fixed inset-0 z-20" onClick={() => setScopeOpen(false)} />
@@ -212,14 +209,9 @@ export function SearchBar() {
         )}
 
         {active && (
-          <button
-            onClick={clearSearch}
-            title="Clear search"
-            aria-label="Clear search"
-            className="p-1 rounded text-muted-foreground hover:text-foreground transition-colors flex-shrink-0"
-          >
+          <Button variant="text" size="icon-xs" radius="keep" layout="" onClick={clearSearch} title="Clear search" aria-label="Clear search" className="rounded flex-shrink-0">
             <Icon name="X" size={13} />
-          </button>
+          </Button>
         )}
 
         {/* ── Filter menu: the discoverable half of the typed grammar ── */}
diff --git a/workbench/control_plane/src/app/email/components/TaskCaptureModal.tsx b/workbench/control_plane/src/app/email/components/TaskCaptureModal.tsx
index 295c7600..2baa9a09 100644
--- a/workbench/control_plane/src/app/email/components/TaskCaptureModal.tsx
+++ b/workbench/control_plane/src/app/email/components/TaskCaptureModal.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useEffect, useState } from "react";
 import {
@@ -497,25 +498,17 @@ export function TaskCaptureModal({
 
         {/* Footer */}
         <div className="flex items-center justify-end gap-2 px-4 py-3 border-t border-border flex-shrink-0">
-          <button
-            onClick={onClose}
-            disabled={saving}
-            className="rounded-lg px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground disabled:opacity-40"
-          >
+          <Button variant="text" size="none" layout="" onClick={onClose} disabled={saving} className="px-3 py-1.5 text-xs">
             Cancel
-          </button>
-          <button
-            onClick={handleSave}
-            disabled={loading || saving || !draft?.title.trim()}
-            className="inline-flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
-          >
+          </Button>
+          <Button layout="inline-flex items-center" onClick={handleSave} disabled={loading || saving || !draft?.title.trim()}>
             {saving ? (
               <Icon name="Loader2" size={13} className="animate-spin" />
             ) : (
               <Icon name="ArrowRight" size={13} />
             )}
             {already ? "Add anyway" : "Add task"}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/workbench/control_plane/src/app/email/components/automation/AutomationView.tsx b/workbench/control_plane/src/app/email/components/automation/AutomationView.tsx
index 919cd119..42ba804a 100644
--- a/workbench/control_plane/src/app/email/components/automation/AutomationView.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/AutomationView.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import AppIcon, { themedIcon } from "@/components/Icon";
 import { AutomationFeature } from "../../lib/types";
 import { AISettingsView } from "./AISettingsView";
@@ -84,13 +85,9 @@ export function AutomationView({
     <div className="flex flex-col h-full w-full bg-background">
       {/* Header */}
       <div className="flex items-center gap-3 px-4 py-2.5 border-b border-border flex-shrink-0 bg-card">
-        <button
-          onClick={onClose}
-          className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
-          aria-label="Back to inbox"
-        >
+        <Button variant="ghost" size="icon-sm" radius="keep" layout="" onClick={onClose} aria-label="Back to inbox" className="rounded-md">
           <AppIcon name="ArrowLeft" size={16} />
-        </button>
+        </Button>
         <div className="w-7 h-7 rounded-lg bg-primary/15 text-primary flex items-center justify-center flex-shrink-0">
           <Icon size={15} />
         </div>
diff --git a/workbench/control_plane/src/app/email/components/automation/BulkUnsubscribeView.tsx b/workbench/control_plane/src/app/email/components/automation/BulkUnsubscribeView.tsx
index c6606fe9..3c920a38 100644
--- a/workbench/control_plane/src/app/email/components/automation/BulkUnsubscribeView.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/BulkUnsubscribeView.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect, useState, useCallback, useMemo, useRef } from "react";
 import {
@@ -1008,19 +1009,14 @@ export function BulkUnsubscribeView({
               </span>
             )}
           </span>
-          <button
-            onClick={autoCategorize}
-            disabled={categorizing}
-            title="Apply the categories these emails' senders, domains and learned patterns already imply"
-            className="ml-auto flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-primary text-primary-foreground text-[11px] font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
-          >
+          <Button size="none" radius="keep" layout="flex items-center" onClick={autoCategorize} disabled={categorizing} title="Apply the categories these emails' senders, domains and learned patterns already imply" className="ml-auto gap-1.5 px-2.5 py-1 rounded-md text-[11px]">
             {categorizing ? (
               <Icon name="Loader2" className="animate-spin" size={12} />
             ) : (
               <Icon name="Sparkles" size={12} />
             )}
             Categorize
-          </button>
+          </Button>
         </div>
       )}
 
@@ -1118,13 +1114,9 @@ export function BulkUnsubscribeView({
               </ActionBtn>
             </>
           )}
-          <button
-            onClick={clearSelection}
-            title="Clear selection"
-            className="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
-          >
+          <Button variant="ghost" size="icon-sm" radius="keep" layout="" onClick={clearSelection} title="Clear selection" className="rounded">
             <Icon name="X" size={13} />
-          </button>
+          </Button>
         </div>
       )}
 
@@ -1241,24 +1233,19 @@ export function BulkUnsubscribeView({
                     onChange={() => toggleOne(s.email)}
                     className="accent-primary flex-shrink-0"
                   />
-                  <button
-                    onClick={() =>
+                  <Button variant="ghost" size="none" radius="keep" layout="" onClick={() =>
                       setExpanded(expanded === s.email ? null : s.email)
-                    }
-                    title={
+                    } title={
                       expanded === s.email
                         ? "Hide this sender's messages"
                         : "Show this sender's messages"
-                    }
-                    aria-label="Toggle messages"
-                    className="p-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors flex-shrink-0"
-                  >
+                    } aria-label="Toggle messages" className="p-0.5 rounded flex-shrink-0">
                     {expanded === s.email ? (
                       <Icon name="ChevronDown" size={13} />
                     ) : (
                       <Icon name="ChevronRight" size={13} />
                     )}
-                  </button>
+                  </Button>
                   <div
                     className="flex-1 min-w-0"
                     title="Right-click to fix this sender's categorization"
@@ -1514,28 +1501,19 @@ export function BulkUnsubscribeView({
                 {o.label}
               </button>
             ))}
-            <button
-              onClick={() => setBackfillOpen(false)}
-              className="px-1.5 py-0.5 text-muted-foreground hover:text-foreground"
-              title="Cancel"
-            >
+            <Button variant="text" size="none" layout="" onClick={() => setBackfillOpen(false)} title="Cancel" className="px-1.5 py-0.5">
               <Icon name="X" size={11} />
-            </button>
+            </Button>
           </div>
         ) : (
-          <button
-            onClick={() => setBackfillOpen(true)}
-            disabled={categorizing}
-            title="Download older mail from your mailbox and categorize it — no AI calls"
-            className="ml-auto flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-primary text-primary-foreground text-[11px] font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
-          >
+          <Button size="none" radius="keep" layout="flex items-center" onClick={() => setBackfillOpen(true)} disabled={categorizing} title="Download older mail from your mailbox and categorize it — no AI calls" className="ml-auto gap-1.5 px-2.5 py-1 rounded-md text-[11px]">
             {categorizing ? (
               <Icon name="Loader2" className="animate-spin" size={12} />
             ) : (
               <Icon name="Clock" size={12} />
             )}
             Clean older mail
-          </button>
+          </Button>
         )}
       </div>
       {/* Archive old mail — age-based bulk archive across ALL senders. Pinned to the
@@ -1569,19 +1547,14 @@ export function BulkUnsubscribeView({
           />
           Only read
         </label>
-        <button
-          onClick={archiveOldMail}
-          disabled={busy === "__sweep__"}
-          title="Archive old inbox mail in one sweep (all senders)"
-          className="flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-primary text-primary-foreground text-[11px] font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 ml-auto"
-        >
+        <Button size="none" radius="keep" layout="flex items-center" onClick={archiveOldMail} disabled={busy === "__sweep__"} title="Archive old inbox mail in one sweep (all senders)" className="gap-1.5 px-2.5 py-1 rounded-md text-[11px] ml-auto">
           {busy === "__sweep__" ? (
             <Icon name="Loader2" className="animate-spin" size={12} />
           ) : (
             <Icon name="Archive" size={12} />
           )}
           Archive old mail
-        </button>
+        </Button>
       </div>
 
       {fixSender && accountId && (
@@ -1782,13 +1755,9 @@ function SenderMessages({
             />
           ) : (
             <>
-              <button
-                onClick={() => act(m.id, "archive")}
-                title="Archive this message"
-                className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors flex-shrink-0"
-              >
+              <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={() => act(m.id, "archive")} title="Archive this message" className="rounded flex-shrink-0">
                 <Icon name="Archive" size={12} />
-              </button>
+              </Button>
               <button
                 onClick={() => act(m.id, "trash")}
                 title="Delete this message (move to Trash)"
diff --git a/workbench/control_plane/src/app/email/components/automation/DashboardView.tsx b/workbench/control_plane/src/app/email/components/automation/DashboardView.tsx
index c8c9c220..6c310fe5 100644
--- a/workbench/control_plane/src/app/email/components/automation/DashboardView.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/DashboardView.tsx
@@ -11,6 +11,7 @@
  * projections) — the email is the snapshot, this is the live ledger.
  */
 
+import Button from "@/components/ui/Button";
 import AppIcon, { themedIcon } from "@/components/Icon";
 import { useEffect, useState, useCallback } from "react";
 import { getDigest, resolveThread, sendDigest, snoozeEmail } from "../../lib/api";
@@ -150,14 +151,10 @@ export function DashboardView({
         >
           <AppIcon name="Settings2" size={13} /> Configure
         </button>
-        <button
-          onClick={send}
-          disabled={sending || loading}
-          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
-        >
+        <Button layout="flex items-center" onClick={send} disabled={sending || loading}>
           {sending ? <AppIcon name="Loader2" className="animate-spin" size={13} /> : <AppIcon name="Send" size={13} />}
           Send to my inbox
-        </button>
+        </Button>
       </div>
 
       {showConfig && accountId && (
diff --git a/workbench/control_plane/src/app/email/components/automation/DigestSettingsDialog.tsx b/workbench/control_plane/src/app/email/components/automation/DigestSettingsDialog.tsx
index e34fad41..c05f8f45 100644
--- a/workbench/control_plane/src/app/email/components/automation/DigestSettingsDialog.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/DigestSettingsDialog.tsx
@@ -11,6 +11,7 @@
  * via `onSaved` so an embedding screen (AI-Settings) can sync its local copy.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect, useState } from "react";
 import {
@@ -90,14 +91,10 @@ export function DigestSettingsDialog({
       onClose={onClose}
       maxWidth="max-w-md"
       footer={
-        <button
-          onClick={save}
-          disabled={saving || !s}
-          className="ml-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
-        >
+        <Button layout="flex items-center" onClick={save} disabled={saving || !s} className="ml-auto">
           {saving ? <Icon name="Loader2" className="animate-spin" size={13} /> : <Icon name="Check" size={13} />}
           Save
-        </button>
+        </Button>
       }
     >
       {!s ? (
diff --git a/workbench/control_plane/src/app/email/components/automation/ai-settings/RulesTab.tsx b/workbench/control_plane/src/app/email/components/automation/ai-settings/RulesTab.tsx
index e74e6258..5f00f207 100644
--- a/workbench/control_plane/src/app/email/components/automation/ai-settings/RulesTab.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/ai-settings/RulesTab.tsx
@@ -4,6 +4,7 @@
 // actions), the action-config sub-editors, and the Rules-tab dialogs (Add rule,
 // Process past emails, artifact picker). Extracted from AISettingsView.tsx.
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useEffect, useRef, useState } from "react";
 import {
@@ -447,12 +448,9 @@ export function RulesTab({
               <Icon name="History" size={13} /> Past emails
             </button>
           )}
-          <button
-            onClick={() => setShowAdd(true)}
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors whitespace-nowrap"
-          >
+          <Button layout="flex items-center" onClick={() => setShowAdd(true)} className="whitespace-nowrap">
             <Icon name="Plus" size={13} /> Add rule
-          </button>
+          </Button>
         </div>
       </div>
       {showAdd && accountId && (
@@ -492,18 +490,14 @@ export function RulesTab({
               Newsletter, Marketing, Calendar, Receipt, Notification, Cold Email)
               or create your own.
             </div>
-            <button
-              onClick={installDefaults}
-              disabled={installing}
-              className="flex items-center gap-1.5 px-3 py-2 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
-            >
+            <Button size="none" layout="flex items-center" onClick={installDefaults} disabled={installing} className="gap-1.5 px-3 py-2 text-xs">
               {installing ? (
                 <Icon name="Loader2" className="animate-spin" size={13} />
               ) : (
                 <Icon name="Sparkles" size={13} />
               )}
               Install default rules
-            </button>
+            </Button>
           </div>
         )}
         {rules.map((rule) => (
@@ -890,13 +884,9 @@ function RuleEditor({
           >
             Cancel
           </button>
-          <button
-            onClick={() => onSave(draft)}
-            disabled={!valid}
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
-          >
+          <Button layout="flex items-center" onClick={() => onSave(draft)} disabled={!valid}>
             <Icon name="Check" size={13} /> {rule.id ? "Save" : "Create"}
-          </button>
+          </Button>
         </>
       }
     >
@@ -1239,13 +1229,9 @@ function ActionConfig({
         <div className="flex items-center gap-0.5 flex-shrink-0">
           {menuItems.length > 0 && (
             <div className="relative">
-              <button
-                onClick={() => setMenuOpen((o) => !o)}
-                title="More options"
-                className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary"
-              >
+              <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={() => setMenuOpen((o) => !o)} title="More options" className="rounded">
                 <Icon name="MoreHorizontal" size={14} />
-              </button>
+              </Button>
               {menuOpen && (
                 <>
                   <div className="fixed inset-0 z-10" onClick={() => setMenuOpen(false)} />
@@ -1946,18 +1932,15 @@ function ActionAttachments({
           <Icon name="FolderOpen" size={12} /> Choose from artifacts
         </button>
         {attachments.some((a) => !a.ai_selected) && (
-          <button
-            onClick={() =>
+          <Button variant="text" size="none" layout="" onClick={() =>
               onChange(
                 attachments.map((a) => ({ ...a, ai_selected: !a.ai_selected })),
               )
-            }
-            className="text-[10px] text-muted-foreground hover:text-foreground"
-          >
+            } className="text-[10px]">
             {attachments.every((a) => a.ai_selected)
               ? "Always attach these"
               : "Let the assistant choose which to attach"}
-          </button>
+          </Button>
         )}
       </div>
       {err && (
@@ -2197,14 +2180,10 @@ function AddRuleDialog({
           >
             Add rule manually
           </button>
-          <button
-            onClick={create}
-            disabled={busy || !text.trim()}
-            className="ml-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
-          >
+          <Button layout="flex items-center" onClick={create} disabled={busy || !text.trim()} className="ml-auto">
             {busy ? <Icon name="Loader2" className="animate-spin" size={13} /> : <Icon name="Wand2" size={13} />}
             Create rules
-          </button>
+          </Button>
         </>
       }
     >
diff --git a/workbench/control_plane/src/app/email/components/automation/ai-settings/SettingsTab.tsx b/workbench/control_plane/src/app/email/components/automation/ai-settings/SettingsTab.tsx
index b8589c66..b3e9f428 100644
--- a/workbench/control_plane/src/app/email/components/automation/ai-settings/SettingsTab.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/ai-settings/SettingsTab.tsx
@@ -5,6 +5,7 @@
 // knowledge base, learned preferences/patterns, cold senders, org domains).
 // Extracted from AISettingsView.tsx.
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useEffect, useState } from "react";
 import {
@@ -704,12 +705,9 @@ function WritingStyleDialog({
       description="Define your tone and style — used to draft replies in your voice."
       onClose={onClose}
       footer={
-        <button
-          onClick={() => onSave(draft)}
-          className="ml-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors"
-        >
+        <Button layout="flex items-center" onClick={() => onSave(draft)} className="ml-auto">
           <Icon name="Check" size={13} /> Save
-        </button>
+        </Button>
       }
     >
       <textarea
@@ -743,12 +741,9 @@ function PersonalInstructionsDialog({
       description="Tell the AI about yourself and how you'd like it to handle your emails."
       onClose={onClose}
       footer={
-        <button
-          onClick={() => onSave(draft)}
-          className="ml-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors"
-        >
+        <Button layout="flex items-center" onClick={() => onSave(draft)} className="ml-auto">
           <Icon name="Check" size={13} /> Save
-        </button>
+        </Button>
       }
     >
       <Field label="About you">
@@ -789,12 +784,9 @@ function SignatureDialog({
       description="Appended to the bottom of your replies. Use rich text or full HTML — links and images supported."
       onClose={onClose}
       footer={
-        <button
-          onClick={() => onSave(draft)}
-          className="ml-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors"
-        >
+        <Button layout="flex items-center" onClick={() => onSave(draft)} className="ml-auto">
           <Icon name="Check" size={13} /> Save
-        </button>
+        </Button>
       }
     >
       <SignatureEditor
@@ -933,12 +925,9 @@ function FollowUpDialog({
             {scanning ? <Icon name="Loader2" className="animate-spin" size={13} /> : <Icon name="RefreshCcw" size={13} />}
             Find follow-ups now
           </button>
-          <button
-            onClick={() => onSave(draft)}
-            className="ml-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors"
-          >
+          <Button layout="flex items-center" onClick={() => onSave(draft)} className="ml-auto">
             <Icon name="Check" size={13} /> Save
-          </button>
+          </Button>
         </>
       }
     >
@@ -1134,14 +1123,10 @@ function KnowledgeBase({ accountId }: { accountId: string | null }) {
             className={`${INPUT_CLS} resize-none`}
           />
           <div className="flex items-center gap-2">
-            <button
-              onClick={save}
-              disabled={busy || !editing.title.trim()}
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
-            >
+            <Button layout="flex items-center" onClick={save} disabled={busy || !editing.title.trim()}>
               {busy ? <Icon name="Loader2" className="animate-spin" size={13} /> : <Icon name="Check" size={13} />}
               Save
-            </button>
+            </Button>
             <button
               onClick={() => setEditing(null)}
               className="px-3 py-1.5 rounded-lg border border-border text-xs text-muted-foreground hover:bg-secondary transition-colors"
diff --git a/workbench/control_plane/src/app/email/components/automation/ai-settings/TestTab.tsx b/workbench/control_plane/src/app/email/components/automation/ai-settings/TestTab.tsx
index 3e39f8f7..5812354e 100644
--- a/workbench/control_plane/src/app/email/components/automation/ai-settings/TestTab.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/ai-settings/TestTab.tsx
@@ -5,6 +5,7 @@
 // The bulk-run sweep state lives in the email store so it survives unmount.
 // Extracted from AISettingsView.tsx.
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useEffect, useState } from "react";
 import { listEmails } from "../../../lib/api";
@@ -234,12 +235,9 @@ export function TestTab({ accountId }: { accountId: string | null }) {
                   ) : isRunning ? (
                     <Icon name="Loader2" className="animate-spin text-muted-foreground" size={14} />
                   ) : (
-                    <button
-                      onClick={() => runOne(e.id)}
-                      className="flex items-center gap-1 px-2.5 py-1 rounded-md bg-primary text-primary-foreground text-[11px] font-medium hover:bg-primary/90 transition-colors"
-                    >
+                    <Button size="none" radius="keep" layout="flex items-center" onClick={() => runOne(e.id)} className="gap-1 px-2.5 py-1 rounded-md text-[11px]">
                       <Icon name="Sparkles" size={12} /> {applyMode ? "Run" : "Test"}
-                    </button>
+                    </Button>
                   )}
                 </div>
               </div>
diff --git a/workbench/control_plane/src/app/email/components/automation/ai-settings/fixDialog.tsx b/workbench/control_plane/src/app/email/components/automation/ai-settings/fixDialog.tsx
index 356e5c26..b73edc79 100644
--- a/workbench/control_plane/src/app/email/components/automation/ai-settings/fixDialog.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/ai-settings/fixDialog.tsx
@@ -5,6 +5,7 @@
 // classification pattern (and re-runs the email); for "New rule" it hands the
 // correction to the AI chat. Extracted from AISettingsView.tsx.
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect, useState } from "react";
 import { listRules, runRuleOnMessage, submitRuleFeedback } from "../../../lib/api";
@@ -214,12 +215,9 @@ export function FixDialog({
       onClose={onClose}
       footer={
         done ? (
-          <button
-            onClick={onClose}
-            className="ml-auto px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors"
-          >
+          <Button size="none" layout="" onClick={onClose} className="ml-auto px-3 py-1.5 text-xs">
             Done
-          </button>
+          </Button>
         ) : expected ? (
           <>
             <button
@@ -229,11 +227,7 @@ export function FixDialog({
             >
               Back
             </button>
-            <button
-              onClick={submit}
-              disabled={busy}
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors disabled:opacity-50"
-            >
+            <Button layout="flex items-center" onClick={submit} disabled={busy}>
               {busy ? (
                 <Icon name="Loader2" className="animate-spin" size={13} />
               ) : willChat ? (
@@ -242,7 +236,7 @@ export function FixDialog({
                 <Icon name="Check" size={13} />
               )}
               {willChat ? "Send to assistant" : "Apply correction"}
-            </button>
+            </Button>
           </>
         ) : undefined
       }
diff --git a/workbench/control_plane/src/app/email/components/automation/ui.tsx b/workbench/control_plane/src/app/email/components/automation/ui.tsx
index 76569371..0d4a3f78 100644
--- a/workbench/control_plane/src/app/email/components/automation/ui.tsx
+++ b/workbench/control_plane/src/app/email/components/automation/ui.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect, useRef, useState } from "react";
 
@@ -47,12 +48,9 @@ export function Modal({
               </div>
             )}
           </div>
-          <button
-            onClick={onClose}
-            className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors flex-shrink-0"
-          >
+          <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={onClose} className="rounded flex-shrink-0">
             <Icon name="X" size={16} />
-          </button>
+          </Button>
         </div>
         <div className="px-4 py-4 space-y-3 overflow-y-auto">{children}</div>
         {footer && (
diff --git a/workbench/control_plane/src/app/email/page.tsx b/workbench/control_plane/src/app/email/page.tsx
index 07950d45..575e68fd 100644
--- a/workbench/control_plane/src/app/email/page.tsx
+++ b/workbench/control_plane/src/app/email/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import AppIcon, { themedIcon } from "@/components/Icon";
 import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import { useViewMode } from "@/components/ViewModeProvider";
@@ -780,15 +781,11 @@ export default function EmailPage() {
             <div className="flex items-center gap-1 flex-1 basis-0 justify-end min-w-fit">
               <MailboxActions selectedEmail={selectedEmail} />
               <div className="w-px h-4 bg-border" />
-              <button
-                onClick={() => setPaletteOpen(true)}
-                title="Command palette (Ctrl/Cmd+K)"
-                className="flex items-center gap-1 px-2 py-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
-              >
+              <Button variant="ghost" size="none" radius="keep" layout="flex items-center" onClick={() => setPaletteOpen(true)} title="Command palette (Ctrl/Cmd+K)" className="gap-1 px-2 py-1 rounded">
                 <span className="text-[10px] border border-border rounded px-1 leading-tight">
                   ⌘K
                 </span>
-              </button>
+              </Button>
             </div>
           </div>
         )}
@@ -796,13 +793,9 @@ export default function EmailPage() {
         {/* ── MOBILE: detail top bar (back button) ── */}
         {isMobile && mobileView === "detail" && selectedEmail && (
           <div className="flex items-center gap-2 px-2 py-2 border-b border-border flex-shrink-0 bg-card">
-            <button
-              onClick={handleBack}
-              className="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
-              aria-label="Back to inbox"
-            >
+            <Button variant="ghost" size="icon-sm" radius="keep" layout="" onClick={handleBack} aria-label="Back to inbox" className="rounded">
               <AppIcon name="ArrowLeft" size={16} />
-            </button>
+            </Button>
             <div className="flex-1 min-w-0">
               <div className="text-xs font-medium text-foreground truncate">
                 {selectedEmail.subject}
@@ -848,15 +841,9 @@ export default function EmailPage() {
                   {unreadCount} unread
                 </span>
               )}
-              <button
-                onClick={() => selectedAccountId && triggerSync(selectedAccountId)}
-                disabled={!selectedAccountId || syncing}
-                className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors disabled:opacity-40"
-                aria-label="Refresh"
-                title="Refresh"
-              >
+              <Button variant="ghost" size="icon-sm" layout="" onClick={() => selectedAccountId && triggerSync(selectedAccountId)} disabled={!selectedAccountId || syncing} aria-label="Refresh" title="Refresh">
                 <AppIcon name="RefreshCw" size={16} className={syncing ? "animate-spin" : ""} />
-              </button>
+              </Button>
             </div>
           </div>
         )}
diff --git a/workbench/control_plane/src/app/integrations/page.tsx b/workbench/control_plane/src/app/integrations/page.tsx
index 73f1a345..dcabe413 100644
--- a/workbench/control_plane/src/app/integrations/page.tsx
+++ b/workbench/control_plane/src/app/integrations/page.tsx
@@ -10,6 +10,7 @@
  *   Plugins — Claude-style self-describing plugins
  */
 
+import Button from "@/components/ui/Button";
 import Icon, { themedIcon } from "@/components/Icon";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import type { IntegrationStatus } from "@/app/api/integrations/status/route";
@@ -243,11 +244,10 @@ function CredentialForm({ api, onSaved }: {
         </div>
       ))}
       {err && <p className="text-xs text-destructive bg-destructive/10 rounded-lg px-3 py-2">{err}</p>}
-      <button onClick={() => void save()} disabled={saving}
-        className="w-full py-2.5 rounded-lg bg-primary hover:opacity-90 disabled:opacity-40 text-sm font-medium text-primary-foreground transition-colors flex items-center justify-center gap-2">
+      <Button size="none" layout="flex items-center justify-center" onClick={() => void save()} disabled={saving} className="w-full py-2.5 text-sm gap-2">
         {saving ? <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" /> : done ? <Icon name="Check" className="w-3.5 h-3.5" /> : null}
         {saving ? "Saving…" : done ? "Saved!" : "Save credentials"}
-      </button>
+      </Button>
     </div>
   );
 }
@@ -442,19 +442,14 @@ function ClickUpConnector({ onChange }: { onChange?: () => void }) {
               className="flex-1 bg-transparent text-sm text-foreground placeholder-muted-foreground focus:outline-none"
             />
           </div>
-          <button
-            type="button"
-            disabled={!token.trim() || busy === "find"}
-            onClick={() => void findWorkspaces()}
-            className="shrink-0 inline-flex items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40 transition-colors"
-          >
+          <Button size="none" layout="inline-flex items-center" type="button" disabled={!token.trim() || busy === "find"} onClick={() => void findWorkspaces()} className="shrink-0 gap-1.5 px-3 py-2 text-sm">
             {busy === "find" ? (
               <Icon name="Loader2" className="w-4 h-4 animate-spin" />
             ) : (
               <Icon name="Plus" className="w-4 h-4" />
             )}
             Find
-          </button>
+          </Button>
         </div>
         <p className="mt-1 text-[10px] text-muted-foreground">
           ClickUp → Settings → Apps → API Token. Stored per-workspace, encrypted
@@ -694,9 +689,9 @@ function ApiSidePanel({ api, agents, onClose, onRefresh }: {
             </div>
           </div>
         </div>
-        <button onClick={onClose} className="text-muted-foreground hover:text-foreground p-1 rounded transition-colors mt-0.5">
+        <Button variant="text" size="icon-xs" radius="keep" layout="" onClick={onClose} className="rounded mt-0.5">
           <Icon name="X" className="w-4 h-4" />
-        </button>
+        </Button>
       </div>
 
       <div className="flex-1 overflow-y-auto p-5 space-y-5">
@@ -756,10 +751,9 @@ function ApiSidePanel({ api, agents, onClose, onRefresh }: {
                 {testing ? <Icon name="Loader2" className="w-3 h-3 animate-spin" /> : <Icon name="RefreshCw" className="w-3 h-3" />}
                 {testing ? "Testing…" : "Test"}
               </button>
-              <button onClick={() => setMode("edit")}
-                className="flex-1 py-2 rounded-lg bg-primary hover:opacity-90 text-xs font-medium text-primary-foreground transition-colors">
+              <Button size="none" layout="" onClick={() => setMode("edit")} className="flex-1 py-2 text-xs">
                 {api.configured ? "Update" : "Configure"}
-              </button>
+              </Button>
             </div>
             {testResult && (
               <div className={`text-xs rounded-lg px-3 py-2 flex items-start gap-2 ${testResult.ok ? "text-success bg-success/10 border border-success/20" : "text-destructive bg-destructive/10 border border-destructive/20"}`}>
@@ -909,11 +903,10 @@ function DiscoverModal({ onClose, onSaved }: { onClose: () => void; onSaved: ()
                     className="w-full pl-9 pr-3 py-2.5 rounded-lg bg-secondary border border-border text-sm text-foreground placeholder-muted-foreground focus:outline-none focus:border-primary transition-colors"
                   />
                 </div>
-                <button onClick={() => void discover()} disabled={!q.trim() || discovering}
-                  className="px-4 py-2 rounded-lg bg-primary hover:opacity-90 disabled:opacity-40 text-sm font-medium text-primary-foreground flex items-center gap-2 shrink-0 transition-colors">
+                <Button size="none" layout="flex items-center" onClick={() => void discover()} disabled={!q.trim() || discovering} className="px-4 py-2 text-sm gap-2 shrink-0">
                   {discovering ? <Icon name="Loader2" className="w-4 h-4 animate-spin" /> : <Icon name="Sparkles" className="w-4 h-4" />}
                   {discovering ? "Searching…" : "Discover"}
-                </button>
+                </Button>
               </div>
               <div>
                 <div className="text-[10px] text-muted uppercase tracking-wider mb-2">Try these</div>
@@ -966,11 +959,10 @@ function DiscoverModal({ onClose, onSaved }: { onClose: () => void; onSaved: ()
                   className="px-4 py-2 rounded-lg border border-border text-sm text-muted-foreground hover:bg-secondary transition-colors">
                   ← Back
                 </button>
-                <button onClick={() => void saveDefinitions()} disabled={selected.size === 0 || savingDefs}
-                  className="flex-1 py-2 rounded-lg bg-primary hover:opacity-90 disabled:opacity-40 text-sm font-medium text-primary-foreground flex items-center justify-center gap-2 transition-colors">
+                <Button size="none" layout="flex items-center justify-center" onClick={() => void saveDefinitions()} disabled={selected.size === 0 || savingDefs} className="flex-1 py-2 text-sm gap-2">
                   {savingDefs ? <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" /> : <Icon name="ArrowRight" className="w-3.5 h-3.5" />}
                   {savingDefs ? "Adding…" : `Add ${selected.size} API${selected.size !== 1 ? "s" : ""}`}
-                </button>
+                </Button>
               </div>
             </>
           )}
@@ -1040,10 +1032,9 @@ function DiscoverModal({ onClose, onSaved }: { onClose: () => void; onSaved: ()
                   className="px-4 py-2 rounded-lg border border-border text-sm text-muted-foreground hover:bg-secondary transition-colors">
                   {configIdx < configQueue.length - 1 ? "Skip →" : "Finish"}
                 </button>
-                <button onClick={() => void advanceOrFinish(false)} disabled={savingCreds}
-                  className="flex-1 py-2 rounded-lg bg-primary hover:opacity-90 disabled:opacity-40 text-sm font-medium text-primary-foreground transition-colors">
+                <Button size="none" layout="" onClick={() => void advanceOrFinish(false)} disabled={savingCreds} className="flex-1 py-2 text-sm">
                   {savingCreds ? "Saving…" : configIdx < configQueue.length - 1 ? "Save & next →" : "Save & finish"}
-                </button>
+                </Button>
               </div>
             </>
           )}
@@ -1142,10 +1133,9 @@ function ApisTab() {
             className="p-1.5 rounded-lg border border-border text-muted-foreground hover:bg-secondary transition-colors">
             <Icon name="RefreshCw" className="w-3.5 h-3.5" />
           </button>
-          <button onClick={() => setShowDiscover(true)}
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary hover:opacity-90 text-xs font-medium text-primary-foreground transition-colors">
+          <Button layout="flex items-center" onClick={() => setShowDiscover(true)}>
             <Icon name="Plus" className="w-3.5 h-3.5" /><span className="hidden sm:inline">Add API</span>
-          </button>
+          </Button>
         </div>
       </div>
 
@@ -1358,10 +1348,9 @@ function EmailTab() {
             className="p-1.5 rounded-lg border border-border text-muted-foreground hover:bg-secondary transition-colors">
             <Icon name="RefreshCw" className="w-3.5 h-3.5" />
           </button>
-          <button onClick={() => setShowAdd(true)}
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary hover:opacity-90 text-xs font-medium text-primary-foreground transition-colors">
+          <Button layout="flex items-center" onClick={() => setShowAdd(true)}>
             <Icon name="Plus" className="w-3.5 h-3.5" /><span className="hidden sm:inline">Add Account</span>
-          </button>
+          </Button>
         </div>
       </div>
 
@@ -1422,10 +1411,9 @@ function EmailTab() {
           <div className="flex flex-col items-center justify-center h-48 gap-3 text-muted-foreground text-sm">
             <Icon name="Mail" className="w-8 h-8 opacity-30" />
             <p>No email accounts connected.</p>
-            <button onClick={() => setShowAdd(true)}
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary hover:opacity-90 text-xs font-medium text-primary-foreground transition-colors">
+            <Button layout="flex items-center" onClick={() => setShowAdd(true)}>
               <Icon name="Plus" className="w-3.5 h-3.5" /> Connect your first account
-            </button>
+            </Button>
           </div>
         ) : (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
@@ -1447,15 +1435,13 @@ function EmailTab() {
                   </div>
                   <div className="flex items-center gap-1">
                     {(account.provider === "gmail" || account.provider === "microsoft") && (
-                      <button onClick={() => handleReconnect(account.provider)} title="Reconnect (re-authorize)"
-                        className="p-1 rounded-md hover:bg-secondary text-muted-foreground hover:text-foreground transition-colors">
+                      <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={() => handleReconnect(account.provider)} title="Reconnect (re-authorize)" className="rounded-md">
                         <Icon name="RotateCcw" className="w-3.5 h-3.5" />
-                      </button>
+                      </Button>
                     )}
-                    <button onClick={() => handleSync(account.id)} title="Sync now"
-                      className="p-1 rounded-md hover:bg-secondary text-muted-foreground hover:text-foreground transition-colors">
+                    <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={() => handleSync(account.id)} title="Sync now" className="rounded-md">
                       <Icon name="RefreshCw" className="w-3.5 h-3.5" />
-                    </button>
+                    </Button>
                     <button onClick={() => handleDelete(account.id)} title="Remove"
                       className="p-1 rounded-md hover:bg-red-500/10 text-muted-foreground hover:text-red-400 transition-colors">
                       <Icon name="X" className="w-3.5 h-3.5" />
@@ -1718,11 +1704,10 @@ function AddIMAPModal({
 
           {error && <p className="text-xs text-destructive bg-destructive/10 rounded-lg px-3 py-2">{error}</p>}
 
-          <button onClick={handleSave} disabled={saving}
-            className="w-full py-2.5 rounded-lg bg-primary hover:opacity-90 disabled:opacity-40 text-sm font-medium text-primary-foreground transition-colors flex items-center justify-center gap-2">
+          <Button size="none" layout="flex items-center justify-center" onClick={handleSave} disabled={saving} className="w-full py-2.5 text-sm gap-2">
             {saving ? <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" /> : null}
             {saving ? "Connecting…" : "Connect Account"}
-          </button>
+          </Button>
         </div>
         <p className="mt-4 text-[10px] text-muted-foreground text-center">
           Credentials are encrypted at rest with AES-256-GCM
@@ -1807,10 +1792,9 @@ function McpsTab() {
                 {loading ? "Loading…" : `${connectedCount} server${connectedCount !== 1 ? "s" : ""} registered`}
               </p>
             </div>
-            <button onClick={() => setShowAdd(true)}
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary hover:opacity-90 text-xs font-medium text-primary-foreground shrink-0 transition-colors">
+            <Button layout="flex items-center" onClick={() => setShowAdd(true)} className="shrink-0">
               <Icon name="Plus" className="w-3.5 h-3.5" /> Add MCP Server
-            </button>
+            </Button>
           </div>
           <p className="text-sm text-muted-foreground mt-2 leading-relaxed max-w-xl">
             MCP is an open standard (by Anthropic) that lets agents connect to external tools. Register any MCP
@@ -1875,10 +1859,9 @@ function McpsTab() {
             <div className="text-sm font-medium text-foreground">No MCP servers registered</div>
             <div className="text-xs text-muted-foreground mt-0.5">Add your first MCP server to give agents new capabilities.</div>
           </div>
-          <button onClick={() => setShowAdd(true)}
-            className="flex items-center gap-1.5 px-4 py-2 rounded-lg bg-primary hover:opacity-90 text-xs font-medium text-primary-foreground transition-colors">
+          <Button size="none" layout="flex items-center" onClick={() => setShowAdd(true)} className="gap-1.5 px-4 py-2 text-xs">
             <Icon name="Plus" className="w-3.5 h-3.5" /> Add MCP Server
-          </button>
+          </Button>
         </div>
       ) : null}
 
@@ -2016,10 +1999,9 @@ function AddMcpModal({ onClose, onAdded }: { onClose: () => void; onAdded: () =>
           {err && <p className="text-xs text-destructive bg-destructive/10 rounded-lg px-3 py-2">{err}</p>}
           <div className="flex gap-2 pt-1">
             <button onClick={onClose} className="flex-1 py-2 rounded-lg border border-border text-sm text-muted-foreground hover:bg-secondary transition-colors">Cancel</button>
-            <button onClick={save} disabled={!form.name.trim() || saving}
-              className="flex-1 py-2 rounded-lg bg-primary hover:opacity-90 disabled:opacity-40 text-sm font-medium text-primary-foreground transition-colors">
+            <Button size="none" layout="" onClick={save} disabled={!form.name.trim() || saving} className="flex-1 py-2 text-sm">
               {saving ? "Saving…" : "Add Server"}
-            </button>
+            </Button>
           </div>
         </div>
       </div>
@@ -2081,10 +2063,9 @@ function PluginsTab() {
                 {loading ? "Loading…" : `${plugins.length} plugin${plugins.length !== 1 ? "s" : ""} installed`}
               </p>
             </div>
-            <button onClick={() => setShowInstall(true)}
-              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary hover:opacity-90 text-xs font-medium text-primary-foreground shrink-0 transition-colors">
+            <Button layout="flex items-center" onClick={() => setShowInstall(true)} className="shrink-0">
               <Icon name="Plus" className="w-3.5 h-3.5" /> Install Plugin
-            </button>
+            </Button>
           </div>
           <p className="text-sm text-muted-foreground mt-2 leading-relaxed max-w-xl">
             Plugins are self-describing tool packages — each one ships a manifest, an OpenAPI spec, and auth config.
@@ -2138,10 +2119,9 @@ function PluginsTab() {
             <div className="text-sm font-medium text-foreground">No plugins installed</div>
             <div className="text-xs text-muted-foreground mt-0.5">Install a plugin from a manifest URL to give agents new SaaS capabilities.</div>
           </div>
-          <button onClick={() => setShowInstall(true)}
-            className="flex items-center gap-1.5 px-4 py-2 rounded-lg bg-primary hover:opacity-90 text-xs font-medium text-primary-foreground transition-colors">
+          <Button size="none" layout="flex items-center" onClick={() => setShowInstall(true)} className="gap-1.5 px-4 py-2 text-xs">
             <Icon name="Plus" className="w-3.5 h-3.5" /> Install Plugin
-          </button>
+          </Button>
         </div>
       ) : null}
 
@@ -2236,7 +2216,7 @@ function InstallPluginModal({ onClose, onInstalled }: { onClose: () => void; onI
                 Plugin <span className="font-mono">{result.name}</span> registered with {result.tools_count} tool{result.tools_count !== 1 ? "s" : ""}.
                 {result.auth_type !== "none" && <> Auth type: {result.auth_type}.</>}
               </div>
-              <button onClick={onClose} className="w-full py-2 rounded-lg bg-primary hover:opacity-90 text-sm font-medium text-primary-foreground transition-colors">Done</button>
+              <Button size="none" layout="" onClick={onClose} className="w-full py-2 text-sm">Done</Button>
             </div>
           ) : (
             <>
@@ -2252,11 +2232,10 @@ function InstallPluginModal({ onClose, onInstalled }: { onClose: () => void; onI
               {err && <p className="text-xs text-destructive bg-destructive/10 rounded-lg px-3 py-2 flex items-start gap-2"><Icon name="AlertCircle" className="w-3.5 h-3.5 mt-0.5 shrink-0" /> {err}</p>}
               <div className="flex gap-2 pt-1">
                 <button onClick={onClose} className="flex-1 py-2 rounded-lg border border-border text-sm text-muted-foreground hover:bg-secondary transition-colors">Cancel</button>
-                <button onClick={install} disabled={!manifestUrl.trim() || installing}
-                  className="flex-1 py-2 rounded-lg bg-primary hover:opacity-90 disabled:opacity-40 text-sm font-medium text-primary-foreground flex items-center justify-center gap-2 transition-colors">
+                <Button size="none" layout="flex items-center justify-center" onClick={install} disabled={!manifestUrl.trim() || installing} className="flex-1 py-2 text-sm gap-2">
                   {installing ? <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" /> : <Icon name="Plus" className="w-3.5 h-3.5" />}
                   {installing ? "Installing…" : "Install"}
-                </button>
+                </Button>
               </div>
             </>
           )}
diff --git a/workbench/control_plane/src/app/notes/components/AskPanel.tsx b/workbench/control_plane/src/app/notes/components/AskPanel.tsx
index d25a56ce..dc82245a 100644
--- a/workbench/control_plane/src/app/notes/components/AskPanel.tsx
+++ b/workbench/control_plane/src/app/notes/components/AskPanel.tsx
@@ -6,6 +6,7 @@
  * (spec §4 Tier-1 / §5.3 provenance-you-can-touch).
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useState } from "react";
 import { askMeeting } from "../lib/api";
@@ -110,14 +111,9 @@ export default function AskPanel({
           placeholder="Ask a question…"
           className="flex-1 rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
         />
-        <button
-          onClick={ask}
-          disabled={loading || !question.trim()}
-          className="p-2 rounded-lg bg-primary text-primary-foreground hover:opacity-90 tech-transition disabled:opacity-50"
-          aria-label="Ask"
-        >
+        <Button size="icon" layout="" onClick={ask} disabled={loading || !question.trim()} aria-label="Ask">
           <Icon name="Send" className="w-4 h-4" />
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/workbench/control_plane/src/app/notes/components/FollowupEmailModal.tsx b/workbench/control_plane/src/app/notes/components/FollowupEmailModal.tsx
index 39549348..93453de1 100644
--- a/workbench/control_plane/src/app/notes/components/FollowupEmailModal.tsx
+++ b/workbench/control_plane/src/app/notes/components/FollowupEmailModal.tsx
@@ -6,6 +6,7 @@
  * and sends via the existing /email/send (spec §3.9). Nothing sends on its own.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect, useState } from "react";
 import {
@@ -174,11 +175,7 @@ export default function FollowupEmailModal({
           >
             Cancel
           </button>
-          <button
-            onClick={send}
-            disabled={sending || loading || accounts.length === 0}
-            className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 tech-transition disabled:opacity-60"
-          >
+          <Button size="none" layout="" onClick={send} disabled={sending || loading || accounts.length === 0} className="px-4 py-2 text-sm">
             <span className="flex items-center gap-1.5">
               {sending ? (
                 <Icon name="Loader2" className="w-4 h-4 animate-spin" />
@@ -187,7 +184,7 @@ export default function FollowupEmailModal({
               )}
               Send
             </span>
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/workbench/control_plane/src/app/notes/components/GlossaryModal.tsx b/workbench/control_plane/src/app/notes/components/GlossaryModal.tsx
index dbaeffb4..9a8b5935 100644
--- a/workbench/control_plane/src/app/notes/components/GlossaryModal.tsx
+++ b/workbench/control_plane/src/app/notes/components/GlossaryModal.tsx
@@ -6,6 +6,7 @@
  * product names, people and customers get spelled right.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect, useState } from "react";
 import {
@@ -91,18 +92,13 @@ export default function GlossaryModal({ onClose }: { onClose: () => void }) {
               placeholder="Add a term (e.g. TwinDragon, Penrose)…"
               className="flex-1 rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
             />
-            <button
-              onClick={add}
-              disabled={busy || !input.trim()}
-              className="p-2 rounded-lg bg-primary text-primary-foreground hover:opacity-90 tech-transition disabled:opacity-50"
-              aria-label="Add term"
-            >
+            <Button size="icon" layout="" onClick={add} disabled={busy || !input.trim()} aria-label="Add term">
               {busy ? (
                 <Icon name="Loader2" className="w-4 h-4 animate-spin" />
               ) : (
                 <Icon name="Plus" className="w-4 h-4" />
               )}
-            </button>
+            </Button>
           </div>
 
           {loading ? (
diff --git a/workbench/control_plane/src/app/notes/components/JoinCallModal.tsx b/workbench/control_plane/src/app/notes/components/JoinCallModal.tsx
index 45602def..911edb08 100644
--- a/workbench/control_plane/src/app/notes/components/JoinCallModal.tsx
+++ b/workbench/control_plane/src/app/notes/components/JoinCallModal.tsx
@@ -7,6 +7,7 @@
  * set up yet" state when no provider key is configured.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect, useState } from "react";
 import { botJoin, getBotConfig } from "../lib/api";
@@ -92,13 +93,9 @@ export default function JoinCallModal({
               are on the roadmap.)
             </p>
           </div>
-          <button
-            onClick={onClose}
-            className="rounded-lg p-1 text-muted-foreground hover:bg-secondary hover:text-foreground tech-transition"
-            aria-label="Close"
-          >
+          <Button variant="ghost" size="icon-xs" layout="" onClick={onClose} aria-label="Close">
             <Icon name="X" className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
 
         {configured === false ? (
@@ -166,24 +163,17 @@ export default function JoinCallModal({
             </p>
 
             <div className="mt-3 flex justify-end gap-2">
-              <button
-                onClick={onClose}
-                className="rounded-lg px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground tech-transition"
-              >
+              <Button variant="text" size="none" layout="" onClick={onClose} className="px-3 py-1.5 text-xs">
                 {anySuccess ? "Done" : "Cancel"}
-              </button>
-              <button
-                onClick={() => void dispatch()}
-                disabled={busy || configured === null || !urls.trim()}
-                className="inline-flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 tech-transition disabled:opacity-50"
-              >
+              </Button>
+              <Button layout="inline-flex items-center" onClick={() => void dispatch()} disabled={busy || configured === null || !urls.trim()}>
                 {busy ? (
                   <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
                 ) : (
                   <Icon name="Video" className="h-3.5 w-3.5" />
                 )}
                 {busy ? "Sending…" : "Send notetaker"}
-              </button>
+              </Button>
             </div>
           </>
         )}
diff --git a/workbench/control_plane/src/app/notes/components/MeetingPrep.tsx b/workbench/control_plane/src/app/notes/components/MeetingPrep.tsx
index 0423b52d..64e4a8c4 100644
--- a/workbench/control_plane/src/app/notes/components/MeetingPrep.tsx
+++ b/workbench/control_plane/src/app/notes/components/MeetingPrep.tsx
@@ -17,6 +17,7 @@
  * after it.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
@@ -517,12 +518,9 @@ export default function MeetingPrep({ meeting, onChanged, onSendBot }: Props) {
         <span className="mr-1 text-xs text-muted-foreground">
           Start when you&apos;re ready —
         </span>
-        <button
-          onClick={() => router.push(`/notes/session/${id}`)}
-          className="inline-flex items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
-        >
+        <Button size="none" layout="inline-flex items-center" onClick={() => router.push(`/notes/session/${id}`)} className="gap-1.5 px-3 py-2 text-sm">
           <Icon name="Mic" className="h-4 w-4" /> Record here
-        </button>
+        </Button>
         <button
           onClick={onSendBot}
           className="inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-sm hover:bg-secondary"
diff --git a/workbench/control_plane/src/app/notes/components/NotesSettingsModal.tsx b/workbench/control_plane/src/app/notes/components/NotesSettingsModal.tsx
index 7fc8aa7e..6f95d47d 100644
--- a/workbench/control_plane/src/app/notes/components/NotesSettingsModal.tsx
+++ b/workbench/control_plane/src/app/notes/components/NotesSettingsModal.tsx
@@ -12,6 +12,7 @@
  * can see what it *would* do before deciding to override it.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect, useState } from "react";
 import { getNotesSettings, saveNotesSettings } from "../lib/api";
@@ -383,13 +384,9 @@ export default function NotesSettingsModal({ onClose }: { onClose: () => void })
           >
             Cancel
           </button>
-          <button
-            onClick={onSave}
-            disabled={saving || loading || loadFailed}
-            className="rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
-          >
+          <Button size="none" layout="" onClick={onSave} disabled={saving || loading || loadFailed} className="px-3 py-1.5 text-sm">
             {saving ? "Saving…" : "Save settings"}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/workbench/control_plane/src/app/notes/components/RecordingDock.tsx b/workbench/control_plane/src/app/notes/components/RecordingDock.tsx
index 531dfde1..062d9370 100644
--- a/workbench/control_plane/src/app/notes/components/RecordingDock.tsx
+++ b/workbench/control_plane/src/app/notes/components/RecordingDock.tsx
@@ -12,6 +12,7 @@
  * pill when both are minimized, so neither is clipped by the menu bar.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { usePathname, useRouter } from "next/navigation";
 import { useTaskStore } from "@/app/tasks/lib/taskStore";
@@ -88,17 +89,13 @@ export function RecordingDock() {
 
         {!finalizing && (
           <>
-            <button
-              onClick={() => (paused ? resume() : pause())}
-              className="rounded-lg p-1.5 text-muted-foreground hover:text-foreground hover:bg-secondary tech-transition"
-              aria-label={paused ? "Resume" : "Pause"}
-            >
+            <Button variant="ghost" size="icon-sm" layout="" onClick={() => (paused ? resume() : pause())} aria-label={paused ? "Resume" : "Pause"}>
               {paused ? (
                 <Icon name="Play" className="w-4 h-4" />
               ) : (
                 <Icon name="Pause" className="w-4 h-4" />
               )}
-            </button>
+            </Button>
             <button
               onClick={() => void onStop()}
               className="rounded-lg bg-destructive/15 p-1.5 text-destructive hover:bg-destructive/25 tech-transition"
diff --git a/workbench/control_plane/src/app/notes/meeting/[id]/page.tsx b/workbench/control_plane/src/app/notes/meeting/[id]/page.tsx
index 02656e35..18e89277 100644
--- a/workbench/control_plane/src/app/notes/meeting/[id]/page.tsx
+++ b/workbench/control_plane/src/app/notes/meeting/[id]/page.tsx
@@ -6,6 +6,7 @@
  * generated notes + draft action items on top of slice 0's transcript view.
  */
 
+import Button from "@/components/ui/Button";
 import Icon, { themedIcon } from "@/components/Icon";
 import { use, useCallback, useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
@@ -454,26 +455,15 @@ export default function MeetingPage({
         </div>
         <div className="flex items-center gap-2 shrink-0">
           {notesMd && (
-            <button
-              onClick={() => setShowEmail(true)}
-              className="shrink-0 rounded-lg border border-border px-2.5 sm:px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition"
-              aria-label="Draft a follow-up email"
-              title="Draft a follow-up email"
-            >
+            <Button variant="secondary" size="none" layout="" onClick={() => setShowEmail(true)} aria-label="Draft a follow-up email" title="Draft a follow-up email" className="shrink-0 px-2.5 sm:px-3 py-2 text-sm">
               <span className="flex items-center gap-1.5">
                 <Icon name="Mail" className="w-4 h-4" />
                 <span className="hidden sm:inline">Follow-up</span>
               </span>
-            </button>
+            </Button>
           )}
           {meeting && meeting.segments.length > 0 && (
-            <button
-              onClick={onSummarize}
-              disabled={summarizing || busy}
-              className="shrink-0 rounded-lg border border-border px-2.5 sm:px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition disabled:opacity-60"
-              aria-label={notesMd ? "Regenerate notes" : "Generate notes"}
-              title={notesMd ? "Regenerate notes" : "Generate notes"}
-            >
+            <Button variant="secondary" size="none" layout="" onClick={onSummarize} disabled={summarizing || busy} aria-label={notesMd ? "Regenerate notes" : "Generate notes"} title={notesMd ? "Regenerate notes" : "Generate notes"} className="shrink-0 px-2.5 sm:px-3 py-2 text-sm">
               <span className="flex items-center gap-1.5">
                 {summarizing ? (
                   <Icon name="Loader2" className="w-4 h-4 animate-spin" />
@@ -486,24 +476,17 @@ export default function MeetingPage({
                   {notesMd ? "Regenerate" : "Generate notes"}
                 </span>
               </span>
-            </button>
+            </Button>
           )}
-          <button
-            onClick={async () => {
+          <Button variant="secondary" size="none" layout="" onClick={async () => {
               setRefreshing(true);
               await refresh();
               setRefreshing(false);
-            }}
-            disabled={refreshing}
-            className="rounded-lg border border-border p-2 text-sm text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition disabled:opacity-60"
-            aria-label="Refresh"
-            title="Refresh"
-          >
+            }} disabled={refreshing} aria-label="Refresh" title="Refresh" className="p-2 text-sm">
             <Icon name="RefreshCw" className={`w-4 h-4 ${refreshing ? "animate-spin" : ""}`} />
-          </button>
+          </Button>
           {meeting && (
-            <button
-              onClick={async () => {
+            <Button variant="destructive" size="none" layout="" onClick={async () => {
                 if (!confirm("Delete this meeting, its audio and transcript?"))
                   return;
                 setDeleting(true);
@@ -516,18 +499,13 @@ export default function MeetingPage({
                   );
                   setDeleting(false);
                 }
-              }}
-              disabled={deleting}
-              className="rounded-lg bg-destructive/10 px-3 py-2 text-sm text-destructive hover:bg-destructive/20 tech-transition disabled:opacity-60"
-              aria-label="Delete this meeting"
-              title="Delete this meeting"
-            >
+              }} disabled={deleting} aria-label="Delete this meeting" title="Delete this meeting" className="px-3 py-2 text-sm">
               {deleting ? (
                 <Icon name="Loader2" className="w-4 h-4 animate-spin" />
               ) : (
                 <Icon name="Trash2" className="w-4 h-4" />
               )}
-            </button>
+            </Button>
           )}
         </div>
       </div>
@@ -642,13 +620,9 @@ export default function MeetingPage({
                   placeholder="email@…"
                   className="w-32 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
                 />
-                <button
-                  onClick={addAttendee}
-                  className="p-1 rounded-md border border-border text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition"
-                  aria-label="Add attendee"
-                >
+                <Button variant="secondary" size="icon-xs" radius="keep" layout="" onClick={addAttendee} aria-label="Add attendee" className="rounded-md">
                   <Icon name="Plus" className="w-3.5 h-3.5" />
-                </button>
+                </Button>
               </span>
             </div>
           )}
@@ -1067,14 +1041,9 @@ export default function MeetingPage({
                     {actions.some(
                       (a) => a.status === "draft" && a.confidence >= 0.8
                     ) && (
-                      <button
-                        onClick={onApproveAll}
-                        disabled={actioning !== null}
-                        title="Tasks are created, emails sent (or drafted when the recipient is unclear), documents drafted"
-                        className="text-[11px] rounded-md border border-border px-2 py-1 text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition disabled:opacity-60"
-                      >
+                      <Button variant="secondary" size="none" radius="keep" layout="" onClick={onApproveAll} disabled={actioning !== null} title="Tasks are created, emails sent (or drafted when the recipient is unclear), documents drafted" className="text-[11px] rounded-md px-2 py-1">
                         Dispatch all ≥80%
-                      </button>
+                      </Button>
                     )}
                   </div>
                   <div className="space-y-2">
@@ -1338,18 +1307,14 @@ export default function MeetingPage({
               </div>
             )}
             <div className="flex items-center gap-2 mt-4">
-              <button
-                onClick={() => void saveSpeaker()}
-                disabled={savingSpeaker}
-                className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50 tech-transition"
-              >
+              <Button size="none" layout="flex items-center" onClick={() => void saveSpeaker()} disabled={savingSpeaker} className="gap-1.5 px-4 py-2 text-xs">
                 {savingSpeaker ? (
                   <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" />
                 ) : (
                   <Icon name="Check" className="w-3.5 h-3.5" />
                 )}
                 Save
-              </button>
+              </Button>
               {speakerNames[editingSpeaker] && (
                 <button
                   onClick={() => {
diff --git a/workbench/control_plane/src/app/notes/page.tsx b/workbench/control_plane/src/app/notes/page.tsx
index d685a1fd..1d0ebfab 100644
--- a/workbench/control_plane/src/app/notes/page.tsx
+++ b/workbench/control_plane/src/app/notes/page.tsx
@@ -18,6 +18,7 @@
  * meeting before you'd said what it was. Template now lives in prep.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
@@ -263,15 +264,11 @@ export default function NotesPage() {
                 behind it, instead of three sibling buttons. */}
             <div className="relative" onClick={(e) => e.stopPropagation()}>
               <div className="flex">
-                <button
-                  onClick={onPrepare}
-                  className="tech-transition rounded-l-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
-                  title="Set up a meeting — agenda, briefing, who's coming — before it starts"
-                >
+                <Button size="none" radius="keep" layout="" onClick={onPrepare} title="Set up a meeting — agenda, briefing, who's coming — before it starts" className="rounded-l-lg px-4 py-2 text-sm">
                   <span className="flex items-center gap-1.5">
                     <Icon name="CalendarPlus" className="h-4 w-4" /> New meeting
                   </span>
-                </button>
+                </Button>
                 <button
                   onClick={() => setShowNewMenu((v) => !v)}
                   aria-label="More ways to start"
diff --git a/workbench/control_plane/src/app/notes/session/[id]/page.tsx b/workbench/control_plane/src/app/notes/session/[id]/page.tsx
index 7ff8e439..e2aa5312 100644
--- a/workbench/control_plane/src/app/notes/session/[id]/page.tsx
+++ b/workbench/control_plane/src/app/notes/session/[id]/page.tsx
@@ -9,6 +9,7 @@
  * notes, and we hand off to the meeting detail view.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { use, useCallback, useEffect, useRef, useState } from "react";
 import Link from "next/link";
@@ -195,12 +196,9 @@ export default function SessionPage({
             <p className="text-xs text-muted-foreground">
               Finish or stop it before starting a new one.
             </p>
-            <button
-              onClick={() => router.push(`/notes/session/${meetingId}`)}
-              className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 tech-transition"
-            >
+            <Button size="none" layout="" onClick={() => router.push(`/notes/session/${meetingId}`)} className="px-4 py-2 text-sm">
               Go to the active recording
-            </button>
+            </Button>
           </div>
         )}
 
diff --git a/workbench/control_plane/src/app/observability/page.tsx b/workbench/control_plane/src/app/observability/page.tsx
index e0061678..f804a2db 100644
--- a/workbench/control_plane/src/app/observability/page.tsx
+++ b/workbench/control_plane/src/app/observability/page.tsx
@@ -21,6 +21,7 @@
  *   drill-down  GET /api/observability/runs?agent=
  */
 
+import Button from "@/components/ui/Button";
 import Icon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
@@ -683,9 +684,9 @@ function AgentDrawer({
               spend{windowDays ? ` · ${windowDays}d` : ""}{spend?.calls ? ` · ${spend.calls}×` : ""}
             </div>
           </div>
-          <button onClick={onClose} className="text-muted-foreground hover:text-foreground text-lg px-2" aria-label="Close">
+          <Button variant="text" size="none" layout="" onClick={onClose} aria-label="Close" className="text-lg px-2">
             ✕
-          </button>
+          </Button>
         </header>
 
         <div className="flex gap-1 p-2 border-b border-border">
diff --git a/workbench/control_plane/src/app/settings/groups/page.tsx b/workbench/control_plane/src/app/settings/groups/page.tsx
index 18b72384..2db8d4bf 100644
--- a/workbench/control_plane/src/app/settings/groups/page.tsx
+++ b/workbench/control_plane/src/app/settings/groups/page.tsx
@@ -15,6 +15,7 @@
  * explicit decision made on their member page.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useEffect, useState } from "react";
 import Link from "next/link";
@@ -133,13 +134,10 @@ export default function GroupsPage() {
             </p>
           </div>
         </div>
-        <button
-          onClick={() => setCreating(true)}
-          className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground tech-transition hover:opacity-90 sm:px-4"
-        >
+        <Button size="lg" layout="flex items-center" onClick={() => setCreating(true)}>
           <Icon name="Plus" size={15} />
           New team
-        </button>
+        </Button>
       </div>
 
       {error && (
@@ -207,21 +205,14 @@ export default function GroupsPage() {
                     <span className="text-[11px] text-muted-foreground">
                       {g.member_count} member{g.member_count === 1 ? "" : "s"}
                     </span>
-                    <button
-                      onClick={() => setAddingTo(g)}
-                      className="flex items-center gap-1.5 rounded-lg border border-border px-2.5 py-1.5 text-[11px] text-muted-foreground tech-transition hover:border-primary/30 hover:text-foreground"
-                    >
+                    <Button variant="secondary" size="none" layout="flex items-center" onClick={() => setAddingTo(g)} className="gap-1.5 px-2.5 py-1.5 text-[11px]">
                       <Icon name="UserPlus" size={12} />
                       Add member
-                    </button>
+                    </Button>
                     {!g.is_center && (
-                      <button
-                        onClick={() => void removeGroup(g.slug)}
-                        className="rounded-lg bg-destructive/10 p-2 text-destructive tech-transition hover:bg-destructive/20"
-                        title="Delete team (must be empty)"
-                      >
+                      <Button variant="destructive" size="icon" layout="" onClick={() => void removeGroup(g.slug)} title="Delete team (must be empty)">
                         <Icon name="Trash2" size={14} />
-                      </button>
+                      </Button>
                     )}
                   </div>
                 </div>
@@ -418,14 +409,10 @@ function CreateGroupDialog({
           >
             Cancel
           </button>
-          <button
-            onClick={() => void submit()}
-            disabled={busy || !slug}
-            className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground tech-transition hover:opacity-90 disabled:opacity-50"
-          >
+          <Button size="none" layout="flex items-center" onClick={() => void submit()} disabled={busy || !slug} className="gap-1.5 px-4 py-2 text-sm">
             {busy && <Icon name="Loader2" size={14} className="animate-spin" />}
             Create team
-          </button>
+          </Button>
         </div>
       </div>
     </div>
@@ -525,14 +512,10 @@ function EditGroupDialog({
           >
             Cancel
           </button>
-          <button
-            onClick={() => void submit()}
-            disabled={busy}
-            className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground tech-transition hover:opacity-90 disabled:opacity-50"
-          >
+          <Button size="none" layout="flex items-center" onClick={() => void submit()} disabled={busy} className="gap-1.5 px-4 py-2 text-sm">
             {busy && <Icon name="Loader2" size={14} className="animate-spin" />}
             Save
-          </button>
+          </Button>
         </div>
       </div>
     </div>
@@ -679,14 +662,10 @@ function AddMemberDialog({
           >
             Cancel
           </button>
-          <button
-            onClick={() => void submit()}
-            disabled={busy || !email || candidates.length === 0}
-            className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground tech-transition hover:opacity-90 disabled:opacity-50"
-          >
+          <Button size="none" layout="flex items-center" onClick={() => void submit()} disabled={busy || !email || candidates.length === 0} className="gap-1.5 px-4 py-2 text-sm">
             {busy && <Icon name="Loader2" size={14} className="animate-spin" />}
             Add
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/workbench/control_plane/src/app/settings/members/[email]/page.tsx b/workbench/control_plane/src/app/settings/members/[email]/page.tsx
index e5bdd676..f64743cb 100644
--- a/workbench/control_plane/src/app/settings/members/[email]/page.tsx
+++ b/workbench/control_plane/src/app/settings/members/[email]/page.tsx
@@ -21,6 +21,7 @@
  * every row looks deliberately configured hides the two rows that actually are.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
@@ -216,14 +217,10 @@ export default function MemberAccessPage() {
             </p>
           </div>
         </div>
-        <button
-          onClick={() => void save()}
-          disabled={!dirty || saving}
-          className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground tech-transition hover:opacity-90 disabled:opacity-40 sm:px-4"
-        >
+        <Button size="lg" layout="flex items-center" onClick={() => void save()} disabled={!dirty || saving}>
           {saving ? <Icon name="Loader2" size={14} className="animate-spin" /> : <Icon name="Save" size={14} />}
           {dirty ? "Save changes" : "Saved"}
-        </button>
+        </Button>
       </div>
 
       {(error || notice) && (
diff --git a/workbench/control_plane/src/app/settings/members/page.tsx b/workbench/control_plane/src/app/settings/members/page.tsx
index 6ed27af0..706ba04e 100644
--- a/workbench/control_plane/src/app/settings/members/page.tsx
+++ b/workbench/control_plane/src/app/settings/members/page.tsx
@@ -24,6 +24,7 @@
  * gateway's, and this is only a courtesy (`lib/access.ts:126-129`).
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
@@ -421,13 +422,10 @@ export default function MembersPage() {
           >
             Roles
           </Link>
-          <button
-            onClick={() => setInviting(true)}
-            className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground tech-transition hover:opacity-90 sm:px-4"
-          >
+          <Button size="lg" layout="flex items-center" onClick={() => setInviting(true)}>
             <Icon name="Plus" size={15} />
             Invite
-          </button>
+          </Button>
         </div>
       </div>
 
@@ -665,20 +663,14 @@ function MemberRow({
           </span>
         )}
         {actions.canActivate && (
-          <button
-            onClick={() => void setStatus(member.email, "active")}
-            className="rounded-lg border border-border px-2.5 py-1.5 text-[11px] text-muted-foreground tech-transition hover:border-primary/30 hover:text-foreground"
-          >
+          <Button variant="secondary" size="none" layout="" onClick={() => void setStatus(member.email, "active")} className="px-2.5 py-1.5 text-[11px]">
             Activate
-          </button>
+          </Button>
         )}
         {actions.canSuspend && (
-          <button
-            onClick={() => void setStatus(member.email, "suspended")}
-            className="rounded-lg bg-destructive/10 px-2.5 py-1.5 text-[11px] text-destructive tech-transition hover:bg-destructive/20"
-          >
+          <Button variant="destructive" size="none" layout="" onClick={() => void setStatus(member.email, "suspended")} className="px-2.5 py-1.5 text-[11px]">
             Suspend
-          </button>
+          </Button>
         )}
         {actions.canRemove && (
           <button
@@ -1031,25 +1023,17 @@ function RequestRow({
       </select>
 
       <div className="flex items-center gap-2">
-        <button
-          onClick={() => void act("approve")}
-          disabled={busy}
-          className="flex items-center gap-1.5 rounded-lg bg-primary px-2.5 py-1.5 text-[11px] font-medium text-primary-foreground tech-transition hover:opacity-90 disabled:opacity-50"
-        >
+        <Button size="none" layout="flex items-center" onClick={() => void act("approve")} disabled={busy} className="gap-1.5 px-2.5 py-1.5 text-[11px]">
           {busy ? (
             <Icon name="Loader2" size={12} className="animate-spin" />
           ) : (
             <Icon name="Check" size={12} />
           )}
           Approve
-        </button>
-        <button
-          onClick={() => void act("deny")}
-          disabled={busy}
-          className="rounded-lg bg-destructive/10 px-2.5 py-1.5 text-[11px] text-destructive tech-transition hover:bg-destructive/20 disabled:opacity-50"
-        >
+        </Button>
+        <Button variant="destructive" size="none" layout="" onClick={() => void act("deny")} disabled={busy} className="px-2.5 py-1.5 text-[11px]">
           Deny
-        </button>
+        </Button>
       </div>
     </div>
   );
@@ -1171,14 +1155,10 @@ function InviteDialog({
           >
             Cancel
           </button>
-          <button
-            onClick={() => void submit()}
-            disabled={busy || !email.includes("@")}
-            className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground tech-transition hover:opacity-90 disabled:opacity-50"
-          >
+          <Button size="none" layout="flex items-center" onClick={() => void submit()} disabled={busy || !email.includes("@")} className="gap-1.5 px-4 py-2 text-sm">
             {busy && <Icon name="Loader2" size={14} className="animate-spin" />}
             Invite
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/workbench/control_plane/src/app/settings/models/page.tsx b/workbench/control_plane/src/app/settings/models/page.tsx
index 61bb21ee..5ed26aab 100644
--- a/workbench/control_plane/src/app/settings/models/page.tsx
+++ b/workbench/control_plane/src/app/settings/models/page.tsx
@@ -10,6 +10,7 @@
  *   3. Tiers — compact rows, expand to edit model assignment
  */
 
+import Button from "@/components/ui/Button";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import type { LLMConfig, ProviderInfo, ModelInfo, TierInfo } from "@/lib/model-types";
 import { PROVIDER_GUIDES, PROVIDER_COLOURS, PROVIDER_ICONS } from "@/lib/model-types";
@@ -318,11 +319,7 @@ export default function ModelsPage() {
           </div>
           <div className="flex items-center gap-1.5 shrink-0">
             {!isStt && (
-              <button
-                onClick={(e) => { e.stopPropagation(); handleTestTier(tier.tier_name); }}
-                disabled={isTesting || !tier.provider_configured}
-                className="rounded-lg border border-border px-2.5 py-1 text-[11px] text-muted-foreground hover:text-foreground hover:border-primary/30 disabled:opacity-40 tech-transition"
-              >{isTesting ? "…" : "Test"}</button>
+              <Button variant="secondary" size="none" layout="" onClick={(e) => { e.stopPropagation(); handleTestTier(tier.tier_name); }} disabled={isTesting || !tier.provider_configured} className="px-2.5 py-1 text-[11px]">{isTesting ? "…" : "Test"}</Button>
             )}
             <svg className={`w-4 h-4 text-muted-foreground/40 tech-transition ${isEditing ? "rotate-90" : ""}`} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
               <path d="M6 3l5 5-5 5" />
@@ -401,11 +398,7 @@ export default function ModelsPage() {
 
             {/* Actions */}
             <div className="flex items-center gap-2 pt-1">
-              <button
-                onClick={() => handleSaveTier(tier.tier_name, editModel, (editProvider === "ollama" || editProvider === "vllm") ? editApiBase || undefined : undefined)}
-                disabled={savingTier || !editModel}
-                className="rounded-lg bg-primary px-4 py-2 text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40 tech-transition"
-              >{savingTier ? "Saving…" : "Save"}</button>
+              <Button size="none" layout="" onClick={() => handleSaveTier(tier.tier_name, editModel, (editProvider === "ollama" || editProvider === "vllm") ? editApiBase || undefined : undefined)} disabled={savingTier || !editModel} className="px-4 py-2 text-xs">{savingTier ? "Saving…" : "Save"}</Button>
               <button onClick={() => { setEditingTier(null); setTestResult(null); setTestedTier(null); }}
                 className="rounded-lg border border-border px-4 py-2 text-xs text-muted-foreground hover:text-foreground tech-transition"
               >Cancel</button>
@@ -539,14 +532,12 @@ export default function ModelsPage() {
                         Synced {new Date(lastSynced).toLocaleDateString(undefined, { month: "short", day: "numeric" })}
                       </span>
                     )}
-                    <button onClick={handleRefreshModels} disabled={refreshing || configuredProviderIds.length === 0}
-                      className="flex items-center gap-1 rounded-lg border border-border px-2.5 py-1 text-[11px] text-muted-foreground hover:text-foreground hover:border-primary/30 disabled:opacity-40 tech-transition"
-                      title="Fetch latest models from all configured providers">
+                    <Button variant="secondary" size="none" layout="flex items-center" onClick={handleRefreshModels} disabled={refreshing || configuredProviderIds.length === 0} title="Fetch latest models from all configured providers" className="gap-1 px-2.5 py-1 text-[11px]">
                       <svg className={`w-3 h-3 ${refreshing ? "animate-spin" : ""}`} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
                         <path d="M14 8A6 6 0 1 1 8 2" /><path d="M14 2v4h-4" />
                       </svg>
                       {refreshing ? "Syncing…" : "Refresh"}
-                    </button>
+                    </Button>
                   </div>
                 </div>
                 <div className="px-4 pb-2">
@@ -762,9 +753,9 @@ function ProviderDetail({ provider, guide, copilotScopeOk, onKeySet, onKeyDiscar
               </span>
             )
           )}
-          <button onClick={onClose} className="p-1 rounded-md hover:bg-secondary text-muted-foreground hover:text-foreground tech-transition">
+          <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={onClose} className="rounded-md">
             <svg className="w-4 h-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 4l8 8M12 4l-8 8" /></svg>
-          </button>
+          </Button>
         </div>
       </div>
       <div className="flex-1 overflow-y-auto p-4 space-y-3">
@@ -810,8 +801,7 @@ function ProviderDetail({ provider, guide, copilotScopeOk, onKeySet, onKeyDiscar
               <button onClick={() => setShow((s) => !s)} className="absolute right-2 top-1/2 -translate-y-1/2 text-[10px] text-muted-foreground hover:text-foreground">{show ? "hide" : "show"}</button>
             </div>
             {err && <p className="text-[10px] text-destructive">{err}</p>}
-            <button onClick={handleSave} disabled={saving || !keyVal.trim()}
-              className="w-full rounded-lg bg-primary px-3 py-2 text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40 tech-transition">{saving ? "Saving & restarting LiteLLM…" : "Save & apply key"}</button>
+            <Button size="none" layout="" onClick={handleSave} disabled={saving || !keyVal.trim()} className="w-full px-3 py-2 text-xs">{saving ? "Saving & restarting LiteLLM…" : "Save & apply key"}</Button>
             {saving && <p className="text-[9px] text-muted-foreground text-center">Writing key and restarting (~25s)…</p>}
             {provider.id === "github" && (
               <div className="rounded-lg border border-primary/20 bg-primary/5 p-3 space-y-2">
@@ -880,9 +870,9 @@ function ModelDetailPanel({ model, enabled, busy, onToggle, onClose }: {
             <span className="font-mono text-[10px] text-muted-foreground truncate">{model.id}</span>
           </div>
         </div>
-        <button onClick={onClose} className="p-1 rounded-md hover:bg-secondary text-muted-foreground hover:text-foreground tech-transition shrink-0 ml-2">
+        <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={onClose} className="rounded-md shrink-0 ml-2">
           <svg className="w-4 h-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 4l8 8M12 4l-8 8" /></svg>
-        </button>
+        </Button>
       </div>
 
       {/* Body */}
diff --git a/workbench/control_plane/src/app/settings/roles/page.tsx b/workbench/control_plane/src/app/settings/roles/page.tsx
index 97770f98..76623768 100644
--- a/workbench/control_plane/src/app/settings/roles/page.tsx
+++ b/workbench/control_plane/src/app/settings/roles/page.tsx
@@ -12,6 +12,7 @@
  * role system is one role per employee.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useEffect, useState } from "react";
 import Link from "next/link";
@@ -101,13 +102,10 @@ export default function RolesPage() {
             </p>
           </div>
         </div>
-        <button
-          onClick={() => setCreating(true)}
-          className="flex items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground tech-transition hover:opacity-90 sm:px-4"
-        >
+        <Button size="lg" layout="flex items-center" onClick={() => setCreating(true)}>
           <Icon name="Plus" size={15} />
           New role
-        </button>
+        </Button>
       </div>
 
       {error && (
@@ -156,13 +154,9 @@ export default function RolesPage() {
                       {r.member_count} member{r.member_count === 1 ? "" : "s"}
                     </span>
                     {!r.is_system && (
-                      <button
-                        onClick={() => void remove(r.slug)}
-                        className="rounded-lg bg-destructive/10 p-2 text-destructive tech-transition hover:bg-destructive/20"
-                        title="Delete role"
-                      >
+                      <Button variant="destructive" size="icon" layout="" onClick={() => void remove(r.slug)} title="Delete role">
                         <Icon name="Trash2" size={14} />
-                      </button>
+                      </Button>
                     )}
                   </div>
                 </div>
@@ -365,14 +359,10 @@ function CreateRoleDialog({
             >
               Cancel
             </button>
-            <button
-              onClick={() => void submit()}
-              disabled={busy || !name.trim() || selected.size === 0}
-              className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground tech-transition hover:opacity-90 disabled:opacity-50"
-            >
+            <Button size="none" layout="flex items-center" onClick={() => void submit()} disabled={busy || !name.trim() || selected.size === 0} className="gap-1.5 px-4 py-2 text-sm">
               {busy && <Icon name="Loader2" size={14} className="animate-spin" />}
               Create role
-            </button>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/workbench/control_plane/src/app/tasks/components/AiTaskActions.tsx b/workbench/control_plane/src/app/tasks/components/AiTaskActions.tsx
index 03baecf0..89e09ea5 100644
--- a/workbench/control_plane/src/app/tasks/components/AiTaskActions.tsx
+++ b/workbench/control_plane/src/app/tasks/components/AiTaskActions.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useState } from "react";
 import { useTaskStore } from "../lib/taskStore";
@@ -165,22 +166,13 @@ export function AiTaskActions({ item }: { item: GtdItem }) {
                   )}
                 </div>
                 <div className="mt-2.5 flex items-center gap-2">
-                  <button
-                    type="button"
-                    onClick={apply}
-                    disabled={chosen.size === 0}
-                    className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
-                  >
+                  <Button size="none" radius="keep" layout="inline-flex items-center" type="button" onClick={apply} disabled={chosen.size === 0} className="gap-1.5 rounded-md px-2.5 py-1.5 text-[12px]">
                     <Icon name="Check" className="h-3.5 w-3.5" />
                     Apply {chosen.size > 0 ? chosen.size : ""}
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setFillOpen(false)}
-                    className="tech-transition rounded-md px-2 py-1.5 text-[12px] font-medium text-muted-foreground hover:bg-secondary hover:text-foreground"
-                  >
+                  </Button>
+                  <Button variant="ghost" size="none" radius="keep" layout="" type="button" onClick={() => setFillOpen(false)} className="rounded-md px-2 py-1.5 text-[12px]">
                     Cancel
-                  </button>
+                  </Button>
                 </div>
                 <p className="mt-1.5 text-[10px] text-muted-foreground">
                   Only empty fields are suggested — nothing you&apos;ve set is
diff --git a/workbench/control_plane/src/app/tasks/components/AttachmentComposer.tsx b/workbench/control_plane/src/app/tasks/components/AttachmentComposer.tsx
index ad0197ac..e7bdff31 100644
--- a/workbench/control_plane/src/app/tasks/components/AttachmentComposer.tsx
+++ b/workbench/control_plane/src/app/tasks/components/AttachmentComposer.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import AppIcon from "@/components/Icon";
 import { useRef, useState } from "react";
 import { apiUploadAttachment } from "../lib/api";
@@ -131,30 +132,19 @@ export function AttachmentComposer({
           className="hidden"
           onChange={(e) => void addFiles(e.target.files)}
         />
-        <button
-          type="button"
-          disabled={uploading}
-          onClick={() => fileRef.current?.click()}
-          title="Attach a photo or file"
-          className="tech-transition inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-[11px] text-muted-foreground hover:bg-secondary hover:text-foreground disabled:opacity-50"
-        >
+        <Button variant="ghost" size="none" radius="keep" layout="inline-flex items-center" type="button" disabled={uploading} onClick={() => fileRef.current?.click()} title="Attach a photo or file" className="gap-1 rounded-md px-1.5 py-1 text-[11px]">
           {uploading ? (
             <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
           ) : (
             <AppIcon name="Paperclip" className="h-3.5 w-3.5" />
           )}
           {!compact && (uploading ? "Uploading…" : "Attach")}
-        </button>
+        </Button>
         {!linkOpen ? (
-          <button
-            type="button"
-            onClick={() => setLinkOpen(true)}
-            title="Add a link"
-            className="tech-transition inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-[11px] text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          <Button variant="ghost" size="none" radius="keep" layout="inline-flex items-center" type="button" onClick={() => setLinkOpen(true)} title="Add a link" className="gap-1 rounded-md px-1.5 py-1 text-[11px]">
             <AppIcon name="Link2" className="h-3.5 w-3.5" />
             {!compact && "Link"}
-          </button>
+          </Button>
         ) : (
           <span className="flex flex-1 items-center gap-1">
             <input
diff --git a/workbench/control_plane/src/app/tasks/components/CalendarView.tsx b/workbench/control_plane/src/app/tasks/components/CalendarView.tsx
index 0fec3072..091c195e 100644
--- a/workbench/control_plane/src/app/tasks/components/CalendarView.tsx
+++ b/workbench/control_plane/src/app/tasks/components/CalendarView.tsx
@@ -10,6 +10,7 @@
 // AppShell). Specs: calendar_timeboxing.md, calendar_focus_os.md,
 // calendar_ai_review.md.
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect, useMemo, useRef, useState } from "react";
 import {
@@ -413,29 +414,15 @@ export function CalendarView() {
         <Icon name="CalendarDays" className="h-5 w-5 shrink-0 text-primary" />
         <h1 className="text-base font-semibold text-foreground">{title}</h1>
         <div className="ml-2 flex items-center gap-0.5">
-          <button
-            type="button"
-            aria-label="Previous"
-            onClick={() => step(-1)}
-            className="tech-transition rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          <Button variant="ghost" size="icon-xs" radius="keep" layout="" type="button" aria-label="Previous" onClick={() => step(-1)} className="rounded-md">
             <Icon name="ChevronLeft" className="h-4 w-4" />
-          </button>
-          <button
-            type="button"
-            onClick={() => setAnchor(startOfDay(new Date()))}
-            className="tech-transition rounded-md px-2 py-1 text-[12px] font-medium text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          </Button>
+          <Button variant="ghost" size="none" radius="keep" layout="" type="button" onClick={() => setAnchor(startOfDay(new Date()))} className="rounded-md px-2 py-1 text-[12px]">
             Today
-          </button>
-          <button
-            type="button"
-            aria-label="Next"
-            onClick={() => step(1)}
-            className="tech-transition rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          </Button>
+          <Button variant="ghost" size="icon-xs" radius="keep" layout="" type="button" aria-label="Next" onClick={() => step(1)} className="rounded-md">
             <Icon name="ChevronRight" className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
         {/* Actions: share the row with the title on desktop (ml-auto), but on
             mobile take a FULL second row so the pills never get squeezed into
@@ -569,16 +556,12 @@ export function CalendarView() {
           >
             Begin (5 min)
           </button>
-          <button
-            type="button"
-            onClick={() => {
+          <Button variant="text" size="none" radius="keep" layout="" type="button" onClick={() => {
               saveFocusPrefs({ startupDoneOn: dayKey() });
               setStartupOffered(false);
-            }}
-            className="tech-transition shrink-0 rounded-md px-2 py-1 text-muted-foreground hover:text-foreground"
-          >
+            }} className="shrink-0 rounded-md px-2 py-1">
             Skip
-          </button>
+          </Button>
         </div>
       )}
 
diff --git a/workbench/control_plane/src/app/tasks/components/CaptureBar.tsx b/workbench/control_plane/src/app/tasks/components/CaptureBar.tsx
index 2ac081c0..e01308bb 100644
--- a/workbench/control_plane/src/app/tasks/components/CaptureBar.tsx
+++ b/workbench/control_plane/src/app/tasks/components/CaptureBar.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useState, useCallback, KeyboardEvent } from "react";
 import { useTaskStore } from "../lib/taskStore";
@@ -38,13 +39,9 @@ export function CaptureBar() {
         aria-label="Capture a new task"
       />
       {value.trim() && (
-        <button
-          type="button"
-          onClick={submit}
-          className="tech-transition flex items-center gap-1 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground hover:opacity-90"
-        >
+        <Button size="none" radius="keep" layout="flex items-center" type="button" onClick={submit} className="gap-1 rounded-md px-2 py-1 text-[11px]">
           Add <Icon name="CornerDownLeft" className="h-3 w-3" />
-        </button>
+        </Button>
       )}
     </div>
   );
diff --git a/workbench/control_plane/src/app/tasks/components/ClarifyModal.tsx b/workbench/control_plane/src/app/tasks/components/ClarifyModal.tsx
index d5abcfc6..1e91fa65 100644
--- a/workbench/control_plane/src/app/tasks/components/ClarifyModal.tsx
+++ b/workbench/control_plane/src/app/tasks/components/ClarifyModal.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect } from "react";
 import { useTaskStore } from "../lib/taskStore";
@@ -104,24 +105,14 @@ export function ClarifyModal() {
             </span>
             <div className="flex items-center gap-1">
               {inboxLeft > 1 && (
-                <button
-                  type="button"
-                  onClick={skip}
-                  title="Leave it in the inbox to decide later"
-                  className="tech-transition inline-flex items-center gap-1 rounded-md px-2 py-1 text-[11px] font-medium text-muted-foreground hover:bg-secondary hover:text-foreground"
-                >
+                <Button variant="ghost" size="none" radius="keep" layout="inline-flex items-center" type="button" onClick={skip} title="Leave it in the inbox to decide later" className="gap-1 rounded-md px-2 py-1 text-[11px]">
                   <Icon name="SkipForward" className="h-3.5 w-3.5" />
                   Skip
-                </button>
+                </Button>
               )}
-              <button
-                type="button"
-                onClick={close}
-                aria-label="Close"
-                className="tech-transition rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
-              >
+              <Button variant="ghost" size="icon-xs" radius="keep" layout="" type="button" onClick={close} aria-label="Close" className="rounded-md">
                 <Icon name="X" className="h-4 w-4" />
-              </button>
+              </Button>
             </div>
           </div>
           <div className="h-0.5 w-full bg-secondary" aria-hidden>
diff --git a/workbench/control_plane/src/app/tasks/components/ClarifyPanel.tsx b/workbench/control_plane/src/app/tasks/components/ClarifyPanel.tsx
index 373fe837..d3845e5a 100644
--- a/workbench/control_plane/src/app/tasks/components/ClarifyPanel.tsx
+++ b/workbench/control_plane/src/app/tasks/components/ClarifyPanel.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import AppIcon, { themedIcon } from "@/components/Icon";
 import type { ThemedIcon } from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -721,26 +722,17 @@ export function ClarifyPanel({
                   className="w-full resize-y rounded-md border border-border bg-background/60 px-3 py-2 text-base text-foreground focus:border-primary/50 focus:outline-none sm:text-sm"
                 />
                 <div className="flex items-center gap-2">
-                  <button
-                    type="button"
-                    onClick={() => void reclarifyWithNote()}
-                    disabled={noteBusy || !note.trim()}
-                    className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
-                  >
+                  <Button size="none" radius="keep" layout="inline-flex items-center" type="button" onClick={() => void reclarifyWithNote()} disabled={noteBusy || !note.trim()} className="gap-1.5 rounded-md px-2.5 py-1.5 text-[12px]">
                     {noteBusy ? (
                       <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
                     ) : (
                       <AppIcon name="Wand2" className="h-3.5 w-3.5" />
                     )}
                     Re-clarify with this
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => { setNoteOpen(false); setNote(""); }}
-                    className="tech-transition rounded-md px-2 py-1.5 text-[12px] font-medium text-muted-foreground hover:text-foreground"
-                  >
+                  </Button>
+                  <Button variant="text" size="none" radius="keep" layout="" type="button" onClick={() => { setNoteOpen(false); setNote(""); }} className="rounded-md px-2 py-1.5 text-[12px]">
                     Cancel
-                  </button>
+                  </Button>
                 </div>
               </div>
             )}
@@ -800,22 +792,13 @@ export function ClarifyPanel({
               </div>
             )}
             <div className="flex items-center gap-2">
-              <button
-                type="button"
-                onClick={acceptTitle}
-                disabled={!suggestedTitle}
-                className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
-              >
+              <Button size="none" radius="keep" layout="inline-flex items-center" type="button" onClick={acceptTitle} disabled={!suggestedTitle} className="gap-1.5 rounded-md px-2.5 py-1.5 text-[12px]">
                 <AppIcon name="Check" className="h-3.5 w-3.5" />
                 Use this title
-              </button>
-              <button
-                type="button"
-                onClick={keepTitle}
-                className="tech-transition rounded-md px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground hover:bg-secondary hover:text-foreground"
-              >
+              </Button>
+              <Button variant="ghost" size="none" radius="keep" layout="" type="button" onClick={keepTitle} className="rounded-md px-2.5 py-1.5 text-[12px]">
                 Keep original
-              </button>
+              </Button>
             </div>
           </div>
         )}
@@ -962,17 +945,12 @@ export function ClarifyPanel({
               silently no-opping — when the decision can't build yet; the form
               below force-opens in that case to show what's missing. */}
           <div className="mt-2.5 flex flex-wrap items-center gap-2">
-            <button
-              type="button"
-              onClick={() => void apply()}
-              disabled={creatingTarget || !canApply}
-              className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-60"
-            >
+            <Button size="none" radius="keep" layout="inline-flex items-center" type="button" onClick={() => void apply()} disabled={creatingTarget || !canApply} className="gap-1.5 rounded-md px-2.5 py-1.5 text-[12px]">
               {creatingTarget ? <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" /> : <AppIcon name="Check" className="h-3.5 w-3.5" />}
               {bigSuggestion
                 ? `Accept & create all ${subtasks.length || 1} step${subtasks.length === 1 ? "" : "s"}`
                 : "Accept & next"}
-            </button>
+            </Button>
             {!showForm && (
               <button
                 type="button"
@@ -1390,22 +1368,13 @@ function ProjectSuggestBanner({
           : `Assigned to you — it'll show up in My Next Actions${synced ? ", and on ClickUp" : ""}.`}
       </p>
       <div className="flex flex-wrap items-center gap-2">
-        <button
-          type="button"
-          disabled={busy}
-          onClick={() => { setBusy(true); onFile(); }}
-          className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
-        >
+        <Button size="none" radius="keep" layout="inline-flex items-center" type="button" disabled={busy} onClick={() => { setBusy(true); onFile(); }} className="gap-1.5 rounded-md px-2.5 py-1.5 text-[12px]">
           {busy ? <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" /> : <AppIcon name="Check" className="h-3.5 w-3.5" />}
           File it here
-        </button>
-        <button
-          type="button"
-          onClick={onDismiss}
-          className="tech-transition ml-auto rounded-md px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground hover:bg-secondary hover:text-foreground"
-        >
+        </Button>
+        <Button variant="ghost" size="none" radius="keep" layout="" type="button" onClick={onDismiss} className="ml-auto rounded-md px-2.5 py-1.5 text-[12px]">
           Choose another place
-        </button>
+        </Button>
       </div>
     </div>
   );
@@ -1441,22 +1410,13 @@ function ParentSuggestBanner({
         File it as a subtask under this task instead of a standalone one.
       </p>
       <div className="flex flex-wrap items-center gap-2">
-        <button
-          type="button"
-          disabled={busy}
-          onClick={async () => { setBusy(true); try { await onFileUnder(); } finally { setBusy(false); } }}
-          className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
-        >
+        <Button size="none" radius="keep" layout="inline-flex items-center" type="button" disabled={busy} onClick={async () => { setBusy(true); try { await onFileUnder(); } finally { setBusy(false); } }} className="gap-1.5 rounded-md px-2.5 py-1.5 text-[12px]">
           {busy ? <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" /> : <AppIcon name="ListTree" className="h-3.5 w-3.5" />}
           File as subtask
-        </button>
-        <button
-          type="button"
-          onClick={onDismiss}
-          className="tech-transition ml-auto rounded-md px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground hover:bg-secondary hover:text-foreground"
-        >
+        </Button>
+        <Button variant="ghost" size="none" radius="keep" layout="" type="button" onClick={onDismiss} className="ml-auto rounded-md px-2.5 py-1.5 text-[12px]">
           It&apos;s its own task
-        </button>
+        </Button>
       </div>
     </div>
   );
@@ -1546,36 +1506,21 @@ function DuplicateBanner({
             Updates the task everywhere it lives (including ClickUp) and drops this inbox item.
           </p>
           <div className="flex items-center gap-2">
-            <button
-              type="button"
-              disabled={busy !== null || !canRename}
-              onClick={() => void run("rename", () => onRename(renameTitle))}
-              className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
-            >
+            <Button size="none" radius="keep" layout="inline-flex items-center" type="button" disabled={busy !== null || !canRename} onClick={() => void run("rename", () => onRename(renameTitle))} className="gap-1.5 rounded-md px-2.5 py-1.5 text-[12px]">
               {busy === "rename" ? <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" /> : <AppIcon name="Check" className="h-3.5 w-3.5" />}
               Save name
-            </button>
-            <button
-              type="button"
-              disabled={busy !== null}
-              onClick={() => { setRenaming(false); setRenameTitle(captureTitle); }}
-              className="tech-transition rounded-md px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground hover:bg-secondary hover:text-foreground disabled:opacity-50"
-            >
+            </Button>
+            <Button variant="ghost" size="none" radius="keep" layout="" type="button" disabled={busy !== null} onClick={() => { setRenaming(false); setRenameTitle(captureTitle); }} className="rounded-md px-2.5 py-1.5 text-[12px]">
               Cancel
-            </button>
+            </Button>
           </div>
         </div>
       ) : (
         <div className="flex flex-wrap items-center gap-2">
-          <button
-            type="button"
-            disabled={busy !== null}
-            onClick={() => void run("merge", onMerge)}
-            className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
-          >
+          <Button size="none" radius="keep" layout="inline-flex items-center" type="button" disabled={busy !== null} onClick={() => void run("merge", onMerge)} className="gap-1.5 rounded-md px-2.5 py-1.5 text-[12px]">
             {busy === "merge" ? <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" /> : <AppIcon name="Plus" className="h-3.5 w-3.5" />}
             Add to existing task
-          </button>
+          </Button>
           <button
             type="button"
             disabled={busy !== null}
@@ -1594,14 +1539,9 @@ function DuplicateBanner({
             {busy === "drop" ? <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" /> : <AppIcon name="Trash2" className="h-3.5 w-3.5" />}
             Delete this inbox item
           </button>
-          <button
-            type="button"
-            disabled={busy !== null}
-            onClick={onDismiss}
-            className="tech-transition ml-auto rounded-md px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground hover:bg-secondary hover:text-foreground disabled:opacity-50"
-          >
+          <Button variant="ghost" size="none" radius="keep" layout="" type="button" disabled={busy !== null} onClick={onDismiss} className="ml-auto rounded-md px-2.5 py-1.5 text-[12px]">
             Not a duplicate
-          </button>
+          </Button>
         </div>
       )}
     </div>
@@ -1716,13 +1656,9 @@ function SubtaskEditor({
           className="min-w-0 flex-1 bg-transparent px-0.5 py-0.5 text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none"
         />
         {draft.trim() && (
-          <button
-            type="button"
-            onClick={add}
-            className="tech-transition shrink-0 rounded-md bg-primary px-2 py-0.5 text-[11px] font-medium text-primary-foreground hover:opacity-90"
-          >
+          <Button size="none" radius="keep" layout="" type="button" onClick={add} className="shrink-0 rounded-md px-2 py-0.5 text-[11px]">
             Add
-          </button>
+          </Button>
         )}
       </div>
     </div>
diff --git a/workbench/control_plane/src/app/tasks/components/DelegateDialog.tsx b/workbench/control_plane/src/app/tasks/components/DelegateDialog.tsx
index db9b8622..c319fa66 100644
--- a/workbench/control_plane/src/app/tasks/components/DelegateDialog.tsx
+++ b/workbench/control_plane/src/app/tasks/components/DelegateDialog.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useMemo, useState } from "react";
 import { useTaskStore } from "../lib/taskStore";
@@ -85,14 +86,9 @@ export function DelegateDialog({
             <Icon name="UserPlus" className="h-4 w-4 text-primary" />
             Delegate to {assignee.name}
           </span>
-          <button
-            type="button"
-            onClick={onClose}
-            aria-label="Close"
-            className="tech-transition rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          <Button variant="ghost" size="icon-xs" radius="keep" layout="" type="button" onClick={onClose} aria-label="Close" className="rounded-md">
             <Icon name="X" className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
 
         <div className="min-h-0 flex-1 overflow-y-auto px-4 py-3">
@@ -204,19 +200,10 @@ export function DelegateDialog({
         </div>
 
         <div className="flex shrink-0 items-center justify-end gap-2 border-t border-border px-4 py-3">
-          <button
-            type="button"
-            onClick={onClose}
-            className="tech-transition rounded-md px-3 py-1.5 text-[12px] font-medium text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          <Button variant="ghost" size="none" radius="keep" layout="" type="button" onClick={onClose} className="rounded-md px-3 py-1.5 text-[12px]">
             Cancel
-          </button>
-          <button
-            type="button"
-            disabled={!canSubmit}
-            onClick={submit}
-            className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
-          >
+          </Button>
+          <Button size="none" radius="keep" layout="inline-flex items-center" type="button" disabled={!canSubmit} onClick={submit} className="gap-1.5 rounded-md px-3 py-1.5 text-[12px]">
             {busy ? (
               <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
             ) : (
@@ -225,7 +212,7 @@ export function DelegateDialog({
               </span>
             )}
             Delegate &amp; create in ClickUp
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/workbench/control_plane/src/app/tasks/components/DelegatePopup.tsx b/workbench/control_plane/src/app/tasks/components/DelegatePopup.tsx
index bad3292f..02efa023 100644
--- a/workbench/control_plane/src/app/tasks/components/DelegatePopup.tsx
+++ b/workbench/control_plane/src/app/tasks/components/DelegatePopup.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useMemo, useState } from "react";
 import { useTaskStore } from "../lib/taskStore";
@@ -119,14 +120,9 @@ function DelegateBody({
               {item.title}
             </p>
           </div>
-          <button
-            type="button"
-            onClick={onClose}
-            aria-label="Close"
-            className="tech-transition rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          <Button variant="ghost" size="icon-xs" radius="keep" layout="" type="button" onClick={onClose} aria-label="Close" className="rounded-md">
             <Icon name="X" className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
 
         <div className="min-h-0 flex-1 overflow-y-auto px-4 py-3">
@@ -186,19 +182,10 @@ function DelegateBody({
             applies through the promote dialog instead, so no footer there. */}
         {isSynced && (
           <div className="flex shrink-0 items-center justify-end gap-2 border-t border-border px-4 py-3">
-            <button
-              type="button"
-              onClick={onClose}
-              className="tech-transition rounded-md px-3 py-1.5 text-[12px] font-medium text-muted-foreground hover:bg-secondary hover:text-foreground"
-            >
+            <Button variant="ghost" size="none" radius="keep" layout="" type="button" onClick={onClose} className="rounded-md px-3 py-1.5 text-[12px]">
               Cancel
-            </button>
-            <button
-              type="button"
-              disabled={busy}
-              onClick={apply}
-              className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
-            >
+            </Button>
+            <Button size="none" radius="keep" layout="inline-flex items-center" type="button" disabled={busy} onClick={apply} className="gap-1.5 rounded-md px-3 py-1.5 text-[12px]">
               {busy ? (
                 <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
               ) : (
@@ -207,7 +194,7 @@ function DelegateBody({
               {selected.length === 0
                 ? "Unassign"
                 : `Delegate to ${selected.length}`}
-            </button>
+            </Button>
           </div>
         )}
       </div>
diff --git a/workbench/control_plane/src/app/tasks/components/DeleteConfirmModal.tsx b/workbench/control_plane/src/app/tasks/components/DeleteConfirmModal.tsx
index b3a454e7..a8d5229d 100644
--- a/workbench/control_plane/src/app/tasks/components/DeleteConfirmModal.tsx
+++ b/workbench/control_plane/src/app/tasks/components/DeleteConfirmModal.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect } from "react";
 import { useTaskStore } from "../lib/taskStore";
@@ -85,12 +86,9 @@ export function DeleteConfirmModal() {
           </button>
         </div>
         <div className="flex items-center justify-end gap-2 border-t border-border px-4 py-3">
-          <button
-            onClick={cancelPendingDelete}
-            className="rounded-lg px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground"
-          >
+          <Button variant="text" size="none" layout="" onClick={cancelPendingDelete} className="px-3 py-1.5 text-xs">
             Cancel
-          </button>
+          </Button>
           <button
             onClick={confirmPendingDelete}
             autoFocus
diff --git a/workbench/control_plane/src/app/tasks/components/EliminatePopup.tsx b/workbench/control_plane/src/app/tasks/components/EliminatePopup.tsx
index e49a74f7..4de93810 100644
--- a/workbench/control_plane/src/app/tasks/components/EliminatePopup.tsx
+++ b/workbench/control_plane/src/app/tasks/components/EliminatePopup.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useTaskStore } from "../lib/taskStore";
 
@@ -39,14 +40,9 @@ export function EliminatePopup() {
               {item.title}
             </p>
           </div>
-          <button
-            type="button"
-            onClick={closeEliminate}
-            aria-label="Close"
-            className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          <Button variant="ghost" size="icon-xs" radius="keep" layout="" type="button" onClick={closeEliminate} aria-label="Close" className="rounded-md">
             <Icon name="X" className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
 
         <div className="flex flex-col gap-2 px-4 py-3">
diff --git a/workbench/control_plane/src/app/tasks/components/FocusMode.tsx b/workbench/control_plane/src/app/tasks/components/FocusMode.tsx
index 948cec7c..6a41278a 100644
--- a/workbench/control_plane/src/app/tasks/components/FocusMode.tsx
+++ b/workbench/control_plane/src/app/tasks/components/FocusMode.tsx
@@ -23,6 +23,7 @@
 // `C` capture hotkey (page.tsx) opens the capture palette on top of the room:
 // a stray thought is one keystroke to the inbox and the timer never stops.
 
+import Button from "@/components/ui/Button";
 import Icon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTaskStore } from "../lib/taskStore";
@@ -378,29 +379,17 @@ function FocusRoom({ itemId }: { itemId: string }) {
             </span>
           </button>
           {!finished && (
-            <button
-              type="button"
-              onClick={togglePause}
-              aria-label={pausedAt != null ? "Resume timer" : "Pause timer"}
-              title={pausedAt != null ? "Resume" : "Pause"}
-              className="tech-transition shrink-0 rounded-md p-1.5 text-muted-foreground hover:bg-secondary hover:text-foreground"
-            >
+            <Button variant="ghost" size="icon-sm" radius="keep" layout="" type="button" onClick={togglePause} aria-label={pausedAt != null ? "Resume timer" : "Pause timer"} title={pausedAt != null ? "Resume" : "Pause"} className="shrink-0 rounded-md">
               {pausedAt != null ? (
                 <Icon name="Play" className="h-3.5 w-3.5" fill="currentColor" />
               ) : (
                 <Icon name="Pause" className="h-3.5 w-3.5" />
               )}
-            </button>
+            </Button>
           )}
-          <button
-            type="button"
-            onClick={expand}
-            aria-label="Expand focus mode"
-            title="Expand"
-            className="tech-transition shrink-0 rounded-md p-1.5 text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          <Button variant="ghost" size="icon-sm" radius="keep" layout="" type="button" onClick={expand} aria-label="Expand focus mode" title="Expand" className="shrink-0 rounded-md">
             <Icon name="Maximize2" className="h-3.5 w-3.5" />
-          </button>
+          </Button>
           <button
             type="button"
             onClick={endSession}
@@ -440,15 +429,9 @@ function FocusRoom({ itemId }: { itemId: string }) {
             </button>
           ))}
         </div>
-        <button
-          type="button"
-          onClick={minimize}
-          aria-label="Minimize focus mode"
-          title="Minimize (esc) — the timer keeps running in a corner dock"
-          className="tech-transition ml-auto rounded-md p-1.5 text-muted-foreground hover:bg-secondary hover:text-foreground"
-        >
+        <Button variant="ghost" size="icon-sm" radius="keep" layout="" type="button" onClick={minimize} aria-label="Minimize focus mode" title="Minimize (esc) — the timer keeps running in a corner dock" className="ml-auto rounded-md">
           <Icon name="Minimize2" className="h-4 w-4" />
-        </button>
+        </Button>
         <button
           type="button"
           onClick={endSession}
@@ -521,13 +504,9 @@ function FocusRoom({ itemId }: { itemId: string }) {
                 <Icon name="ChevronRight" className="h-3.5 w-3.5" />
               </button>
             )}
-            <button
-              type="button"
-              onClick={clearSession}
-              className="mt-3 text-[12px] text-muted-foreground hover:text-foreground"
-            >
+            <Button variant="text" size="none" layout="" type="button" onClick={clearSession} className="mt-3 text-[12px]">
               Back to calendar
-            </button>
+            </Button>
           </>
         ) : (
           <>
@@ -556,13 +535,9 @@ function FocusRoom({ itemId }: { itemId: string }) {
                   <div className="mt-0.5 text-[11px] capitalize text-success">
                     {breakKind} break
                   </div>
-                  <button
-                    type="button"
-                    onClick={() => startWork(false)}
-                    className="mt-1.5 text-[11px] text-muted-foreground hover:text-foreground"
-                  >
+                  <Button variant="text" size="none" layout="" type="button" onClick={() => startWork(false)} className="mt-1.5 text-[11px]">
                     skip → back to work
-                  </button>
+                  </Button>
                 </Ring>
               ) : (
                 <Ring progress={ringProgress} tone="primary">
@@ -604,13 +579,9 @@ function FocusRoom({ itemId }: { itemId: string }) {
                     {b.label}
                   </button>
                 ))}
-                <button
-                  type="button"
-                  onClick={() => startWork(true)}
-                  className="text-[11px] text-muted-foreground hover:text-foreground"
-                >
+                <Button variant="text" size="none" layout="" type="button" onClick={() => startWork(true)} className="text-[11px]">
                   skip
-                </button>
+                </Button>
               </div>
             )}
 
diff --git a/workbench/control_plane/src/app/tasks/components/InboxView.tsx b/workbench/control_plane/src/app/tasks/components/InboxView.tsx
index 8be2306c..268cb86e 100644
--- a/workbench/control_plane/src/app/tasks/components/InboxView.tsx
+++ b/workbench/control_plane/src/app/tasks/components/InboxView.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import AppIcon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import {
   useEffect,
@@ -317,13 +318,9 @@ export function InboxView() {
               className="min-w-0 flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
             />
             {value.trim() ? (
-              <button
-                type="button"
-                onClick={submit}
-                className="tech-transition inline-flex shrink-0 items-center gap-1 rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground hover:opacity-90"
-              >
+              <Button size="none" radius="keep" layout="inline-flex items-center" type="button" onClick={submit} className="shrink-0 gap-1 rounded-md px-2 py-1 text-xs">
                 Add <AppIcon name="CornerDownLeft" className="h-3 w-3" />
-              </button>
+              </Button>
             ) : (
               <kbd className="shrink-0 rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground">
                 ↵
@@ -420,16 +417,10 @@ export function InboxView() {
                   }}
                   className="min-w-0 flex-1 rounded-md border border-border bg-background/70 px-2 py-1 text-[11px] text-foreground focus:border-primary/50 focus:outline-none sm:w-64"
                 />
-                <button
-                  type="button"
-                  aria-label="Save name"
-                  disabled={!dupRenameValue.trim()}
-                  onClick={() => { resolveDupNotice("rename", dupRenameValue); setDupRenaming(false); }}
-                  className="tech-transition inline-flex items-center gap-1 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
-                >
+                <Button size="none" radius="keep" layout="inline-flex items-center" type="button" aria-label="Save name" disabled={!dupRenameValue.trim()} onClick={() => { resolveDupNotice("rename", dupRenameValue); setDupRenaming(false); }} className="gap-1 rounded-md px-2 py-1 text-[11px]">
                   <AppIcon name="Check" className="h-3.5 w-3.5" />
                   Save
-                </button>
+                </Button>
                 <button
                   type="button"
                   aria-label="Cancel rename"
@@ -467,14 +458,10 @@ export function InboxView() {
                     </button>
                   </>
                 )}
-                <button
-                  type="button"
-                  onClick={() => { setDupRenameValue(dupNotice.title); setDupRenaming(true); }}
-                  className="tech-transition inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-foreground"
-                >
+                <Button variant="text" size="none" layout="inline-flex items-center" type="button" onClick={() => { setDupRenameValue(dupNotice.title); setDupRenaming(true); }} className="gap-1 text-[11px]">
                   <AppIcon name="Pencil" className="h-3 w-3" />
                   Rename existing
-                </button>
+                </Button>
                 <button
                   type="button"
                   aria-label="Dismiss"
@@ -509,14 +496,9 @@ export function InboxView() {
                 <BulkBtn icon={themedIcon("Trash2")} danger onClick={bulkDelete}>
                   Delete
                 </BulkBtn>
-                <button
-                  type="button"
-                  onClick={clearSelection}
-                  className="tech-transition rounded-md p-1 text-muted-foreground hover:text-foreground"
-                  aria-label="Clear selection"
-                >
+                <Button variant="text" size="icon-xs" radius="keep" layout="" type="button" onClick={clearSelection} aria-label="Clear selection" className="rounded-md">
                   <AppIcon name="X" className="h-4 w-4" />
-                </button>
+                </Button>
               </div>
             </div>
           ) : (
diff --git a/workbench/control_plane/src/app/tasks/components/ItemDetail.tsx b/workbench/control_plane/src/app/tasks/components/ItemDetail.tsx
index b653f5f1..fcc7aec0 100644
--- a/workbench/control_plane/src/app/tasks/components/ItemDetail.tsx
+++ b/workbench/control_plane/src/app/tasks/components/ItemDetail.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import AppIcon, { themedIcon } from "@/components/Icon";
 import type { ThemedIcon } from "@/components/Icon";
 import { useEffect, useState } from "react";
@@ -555,21 +556,13 @@ export function TaskDetail({
             <span className="min-w-0 flex-1 text-[12.5px] text-foreground">
               No longer your action? Remove it from My Next Actions — it stays on ClickUp.
             </span>
-            <button
-              type="button"
-              onClick={() => { updateItem(item.id, { isMine: false }); setOfferDropFromNext(false); }}
-              className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90"
-            >
+            <Button size="none" radius="keep" layout="inline-flex items-center" type="button" onClick={() => { updateItem(item.id, { isMine: false }); setOfferDropFromNext(false); }} className="gap-1.5 rounded-md px-2.5 py-1.5 text-[12px]">
               <AppIcon name="UserMinus" className="h-3.5 w-3.5" />
               Remove from My Next Actions
-            </button>
-            <button
-              type="button"
-              onClick={() => setOfferDropFromNext(false)}
-              className="tech-transition rounded-md px-2.5 py-1.5 text-[12px] font-medium text-muted-foreground hover:bg-secondary hover:text-foreground"
-            >
+            </Button>
+            <Button variant="ghost" size="none" radius="keep" layout="" type="button" onClick={() => setOfferDropFromNext(false)} className="rounded-md px-2.5 py-1.5 text-[12px]">
               Keep
-            </button>
+            </Button>
           </div>
         )}
 
@@ -687,10 +680,7 @@ export function TaskDetail({
                 <AppIcon name="Clock" className="h-3.5 w-3.5" />
                 Not yet pushed to {item.provider ?? "the tool"}
               </span>
-              <button
-                type="button"
-                disabled={pushState === "busy"}
-                onClick={async () => {
+              <Button size="none" radius="keep" layout="inline-flex items-center" type="button" disabled={pushState === "busy"} onClick={async () => {
                   setPushState("busy");
                   try {
                     await pushItem(item.id);
@@ -698,12 +688,10 @@ export function TaskDetail({
                   } catch (e) {
                     setPushState(e instanceof Error ? e.message : "Push failed");
                   }
-                }}
-                className="tech-transition inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-[11px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
-              >
+                }} className="gap-1 rounded-md px-2.5 py-1.5 text-[11px]">
                 <AppIcon name="UploadCloud" className="h-3.5 w-3.5" />
                 {pushState === "busy" ? "Pushing…" : "Push now"}
-              </button>
+              </Button>
             </div>
             {pushState !== "idle" && pushState !== "busy" && (
               <p className="mt-1 text-[10px] text-destructive">{pushState}</p>
@@ -842,13 +830,9 @@ function LocalSubtasksSection({ item }: { item: GtdItem }) {
                 className="min-w-0 flex-1 bg-transparent px-0.5 py-0.5 text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none"
               />
               {adding.trim() && (
-                <button
-                  type="button"
-                  onClick={() => void add()}
-                  className="tech-transition shrink-0 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground hover:opacity-90"
-                >
+                <Button size="none" radius="keep" layout="" type="button" onClick={() => void add()} className="shrink-0 rounded-md px-2 py-1 text-[11px]">
                   Add
-                </button>
+                </Button>
               )}
             </div>
           )}
diff --git a/workbench/control_plane/src/app/tasks/components/ItemList.tsx b/workbench/control_plane/src/app/tasks/components/ItemList.tsx
index 5a3be629..be83d7d1 100644
--- a/workbench/control_plane/src/app/tasks/components/ItemList.tsx
+++ b/workbench/control_plane/src/app/tasks/components/ItemList.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import AppIcon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import { useMemo, useState, useSyncExternalStore } from "react";
 import { useTaskStore, itemsForView } from "../lib/taskStore";
@@ -386,14 +387,9 @@ export function ItemList() {
                 clearSelection();
               }}
             />
-            <button
-              type="button"
-              onClick={clearSelection}
-              aria-label="Cancel selection"
-              className="tech-transition rounded-md p-1 text-muted-foreground hover:text-foreground"
-            >
+            <Button variant="text" size="icon-xs" radius="keep" layout="" type="button" onClick={clearSelection} aria-label="Cancel selection" className="rounded-md">
               <AppIcon name="X" className="h-4 w-4" />
-            </button>
+            </Button>
           </div>
         </div>
       )}
diff --git a/workbench/control_plane/src/app/tasks/components/ListsSidebar.tsx b/workbench/control_plane/src/app/tasks/components/ListsSidebar.tsx
index cedaeeae..2293ad0f 100644
--- a/workbench/control_plane/src/app/tasks/components/ListsSidebar.tsx
+++ b/workbench/control_plane/src/app/tasks/components/ListsSidebar.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import AppIcon, { themedIcon } from "@/components/Icon";
 import type { ThemedIcon } from "@/components/Icon";
 import { useMemo } from "react";
@@ -237,28 +238,20 @@ export function ListsSidebar({
             </button>
           </div>
         ))}
-        <button
-          type="button"
-          onClick={() => {
+        <Button variant="ghost" size="none" layout="flex items-center" type="button" onClick={() => {
             openWorkspaces();
             onNavigate?.();
-          }}
-          className="tech-transition flex w-full items-center gap-2.5 rounded-lg px-2 py-2 text-left text-[13px] text-muted-foreground hover:bg-secondary hover:text-foreground"
-        >
+          }} className="w-full gap-2.5 px-2 py-2 text-left text-[13px]">
           <AppIcon name="Plug" className="h-3.5 w-3.5 shrink-0" />
           <span className="flex-1">Connect workspace…</span>
-        </button>
-        <button
-          type="button"
-          onClick={() => {
+        </Button>
+        <Button variant="ghost" size="none" layout="flex items-center" type="button" onClick={() => {
             openSettings();
             onNavigate?.();
-          }}
-          className="tech-transition flex w-full items-center gap-2.5 rounded-lg px-2 py-2 text-left text-[13px] text-muted-foreground hover:bg-secondary hover:text-foreground"
-        >
+          }} className="w-full gap-2.5 px-2 py-2 text-left text-[13px]">
           <AppIcon name="Settings2" className="h-3.5 w-3.5 shrink-0" />
           <span className="flex-1">Settings</span>
-        </button>
+        </Button>
       </div>
     </nav>
   );
diff --git a/workbench/control_plane/src/app/tasks/components/PeopleView.tsx b/workbench/control_plane/src/app/tasks/components/PeopleView.tsx
index c8e70f04..6144c043 100644
--- a/workbench/control_plane/src/app/tasks/components/PeopleView.tsx
+++ b/workbench/control_plane/src/app/tasks/components/PeopleView.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect, useMemo, useState } from "react";
 import { useTaskStore } from "../lib/taskStore";
@@ -95,12 +96,9 @@ export function PeopleView() {
               className="w-40 bg-transparent text-xs text-foreground outline-none placeholder:text-muted-foreground"
             />
           </div>
-          <button
-            onClick={() => setEditing("new")}
-            className="flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
-          >
+          <Button size="none" radius="keep" layout="flex items-center" onClick={() => setEditing("new")} className="gap-1.5 rounded-md px-3 py-2 text-xs">
             <Icon name="Plus" size={14} /> Add person
-          </button>
+          </Button>
         </div>
       </div>
 
diff --git a/workbench/control_plane/src/app/tasks/components/PersonEditor.tsx b/workbench/control_plane/src/app/tasks/components/PersonEditor.tsx
index 6d36a0da..7ed211ec 100644
--- a/workbench/control_plane/src/app/tasks/components/PersonEditor.tsx
+++ b/workbench/control_plane/src/app/tasks/components/PersonEditor.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useMemo, useRef, useState } from "react";
 import { useTaskStore } from "../lib/taskStore";
@@ -132,12 +133,9 @@ export function PersonEditor({
           <h2 className="text-sm font-semibold text-foreground">
             {person ? `Edit ${person.name}` : "Add person"}
           </h2>
-          <button
-            onClick={onClose}
-            className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={onClose} className="rounded-md">
             <Icon name="X" size={16} />
-          </button>
+          </Button>
         </div>
 
         {/* Body */}
@@ -281,20 +279,13 @@ export function PersonEditor({
         {/* Footer */}
         <div className="flex items-center gap-2 border-t border-border px-4 py-3">
           <div className="flex-1" />
-          <button
-            onClick={onClose}
-            className="rounded-md px-3 py-1.5 text-xs text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          <Button variant="ghost" size="none" radius="keep" layout="" onClick={onClose} className="rounded-md px-3 py-1.5 text-xs">
             Cancel
-          </button>
-          <button
-            onClick={save}
-            disabled={saving || !name.trim()}
-            className="flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
-          >
+          </Button>
+          <Button radius="keep" layout="flex items-center" onClick={save} disabled={saving || !name.trim()} className="rounded-md">
             {saving && <Icon name="Loader2" size={13} className="animate-spin" />}
             {person ? "Save changes" : "Add person"}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/workbench/control_plane/src/app/tasks/components/ProjectsList.tsx b/workbench/control_plane/src/app/tasks/components/ProjectsList.tsx
index 7f57c478..fd15db28 100644
--- a/workbench/control_plane/src/app/tasks/components/ProjectsList.tsx
+++ b/workbench/control_plane/src/app/tasks/components/ProjectsList.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import AppIcon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import { useMemo, useState } from "react";
 import { useTaskStore } from "../lib/taskStore";
@@ -492,13 +493,9 @@ function AddInline({
   };
   if (!editing) {
     return (
-      <button
-        type="button"
-        onClick={() => setEditing(true)}
-        className="tech-transition inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground hover:bg-secondary hover:text-foreground"
-      >
+      <Button variant="ghost" size="none" radius="keep" layout="inline-flex items-center" type="button" onClick={() => setEditing(true)} className="gap-0.5 rounded px-1.5 py-0.5 text-[10px]">
         <AppIcon name="Plus" className="h-3 w-3" /> {label}
-      </button>
+      </Button>
     );
   }
   return (
@@ -549,13 +546,9 @@ function AddProjectRow({
         className="min-w-0 flex-1 bg-transparent text-[12px] text-foreground placeholder:text-muted-foreground/60 focus:outline-none"
       />
       {name.trim() && (
-        <button
-          type="button"
-          onClick={commit}
-          className="shrink-0 rounded bg-primary px-1.5 py-0.5 text-[10px] font-medium text-primary-foreground hover:opacity-90"
-        >
+        <Button size="none" radius="keep" layout="" type="button" onClick={commit} className="shrink-0 rounded px-1.5 py-0.5 text-[10px]">
           Add
-        </button>
+        </Button>
       )}
     </div>
   );
diff --git a/workbench/control_plane/src/app/tasks/components/QuickCapture.tsx b/workbench/control_plane/src/app/tasks/components/QuickCapture.tsx
index 30447d24..80deacf6 100644
--- a/workbench/control_plane/src/app/tasks/components/QuickCapture.tsx
+++ b/workbench/control_plane/src/app/tasks/components/QuickCapture.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import AppIcon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import { useEffect, useRef, useState } from "react";
 import { useTaskStore } from "../lib/taskStore";
@@ -228,14 +229,9 @@ function QuickCapturePanel() {
           <span className="ml-auto text-[11px] text-muted-foreground">
             Capture only — clarify later
           </span>
-          <button
-            type="button"
-            onClick={close}
-            aria-label="Close"
-            className="tech-transition rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          <Button variant="ghost" size="icon-xs" radius="keep" layout="" type="button" onClick={close} aria-label="Close" className="rounded-md">
             <AppIcon name="X" className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
 
         {mode === "single" ? (
@@ -532,9 +528,9 @@ function CaptureWhen({
           {kind === "remind" ? <AppIcon name="Bell" className="h-3 w-3" /> : <AppIcon name="CalendarClock" className="h-3 w-3" />}
           {kind === "remind" ? "Remind" : "Due"} {dateLabel}
         </span>
-        <button type="button" onClick={() => setOpen(true)} className="text-[11px] text-muted-foreground hover:text-foreground">
+        <Button variant="text" size="none" layout="" type="button" onClick={() => setOpen(true)} className="text-[11px]">
           Change
-        </button>
+        </Button>
         <button type="button" onClick={onClear} className="text-[11px] text-muted-foreground hover:text-destructive">
           Clear
         </button>
@@ -585,13 +581,9 @@ function CaptureWhen({
             {k === "remind" ? "Remind me" : "Due date"}
           </button>
         ))}
-        <button
-          type="button"
-          onClick={() => setOpen(false)}
-          className="ml-auto text-[11px] font-medium text-muted-foreground hover:text-foreground"
-        >
+        <Button variant="text" size="none" layout="" type="button" onClick={() => setOpen(false)} className="ml-auto text-[11px]">
           Done
-        </button>
+        </Button>
       </div>
       <div className="flex flex-wrap items-center gap-1.5">
         {opts.map((o) => (
diff --git a/workbench/control_plane/src/app/tasks/components/ReclarifyModal.tsx b/workbench/control_plane/src/app/tasks/components/ReclarifyModal.tsx
index 291d5313..6bcd0815 100644
--- a/workbench/control_plane/src/app/tasks/components/ReclarifyModal.tsx
+++ b/workbench/control_plane/src/app/tasks/components/ReclarifyModal.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect } from "react";
 import { useTaskStore } from "../lib/taskStore";
@@ -50,14 +51,9 @@ export function ReclarifyModal() {
             <Icon name="RefreshCw" className="h-3.5 w-3.5 text-primary" />
             Re-clarify task
           </span>
-          <button
-            type="button"
-            onClick={close}
-            aria-label="Close"
-            className="tech-transition rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          <Button variant="ghost" size="icon-xs" radius="keep" layout="" type="button" onClick={close} aria-label="Close" className="rounded-md">
             <Icon name="X" className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
         <div className="min-h-0 flex-1 overflow-y-auto">
           <ClarifyPanel key={item.id} item={item} reclarify onDone={close} />
diff --git a/workbench/control_plane/src/app/tasks/components/SchedulePopup.tsx b/workbench/control_plane/src/app/tasks/components/SchedulePopup.tsx
index b05cb7ac..62fc5456 100644
--- a/workbench/control_plane/src/app/tasks/components/SchedulePopup.tsx
+++ b/workbench/control_plane/src/app/tasks/components/SchedulePopup.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useMemo, useState } from "react";
 import { useTaskStore } from "../lib/taskStore";
@@ -117,14 +118,9 @@ export function SchedulePopup() {
               {item.title}
             </p>
           </div>
-          <button
-            type="button"
-            onClick={closeSchedule}
-            aria-label="Close"
-            className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          <Button variant="ghost" size="icon-xs" radius="keep" layout="" type="button" onClick={closeSchedule} aria-label="Close" className="rounded-md">
             <Icon name="X" className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
 
         <div className="flex flex-col gap-2 px-4 py-3">
@@ -171,18 +167,14 @@ export function SchedulePopup() {
                 onChange={(e) => setCustom(e.target.value)}
                 className="min-w-0 flex-1 rounded-md border border-border bg-background px-2 py-1.5 text-[12px] text-foreground focus:border-primary/50 focus:outline-none"
               />
-              <button
-                type="button"
-                onClick={() => {
+              <Button size="sm" radius="keep" layout="inline-flex items-center" type="button" onClick={() => {
                   const v = custom || toLocalInput(presets[0]?.at ?? now);
                   const d = new Date(v);
                   if (!Number.isNaN(d.getTime())) commit(d);
-                }}
-                className="tech-transition inline-flex shrink-0 items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-[12px] font-medium text-primary-foreground hover:opacity-90"
-              >
+                }} className="shrink-0 rounded-md">
                 <Icon name="Check" className="h-3.5 w-3.5" />
                 Set
-              </button>
+              </Button>
             </div>
           </div>
 
diff --git a/workbench/control_plane/src/app/tasks/components/StartupRitual.tsx b/workbench/control_plane/src/app/tasks/components/StartupRitual.tsx
index cc190b8e..8d0f5b69 100644
--- a/workbench/control_plane/src/app/tasks/components/StartupRitual.tsx
+++ b/workbench/control_plane/src/app/tasks/components/StartupRitual.tsx
@@ -7,6 +7,7 @@
 // Completion (or dismissal) stamps today in focusPrefs so it offers once/day;
 // the streak counts completions only.
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect, useMemo, useState } from "react";
 import { GtdItem } from "../lib/types";
@@ -162,14 +163,9 @@ export function StartupRitual({
               streak {streak} 🔥
             </span>
           )}
-          <button
-            type="button"
-            onClick={dismiss}
-            aria-label="Skip today"
-            className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          <Button variant="ghost" size="icon-xs" radius="keep" layout="" type="button" onClick={dismiss} aria-label="Skip today" className="rounded-md">
             <Icon name="X" className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
 
         <div className="flex items-center gap-1.5 border-b border-border px-4 py-2">
@@ -203,17 +199,13 @@ export function StartupRitual({
               </p>
               <div className="mt-4 flex items-center gap-2">
                 {!breathing ? (
-                  <button
-                    type="button"
-                    onClick={() => {
+                  <Button size="none" radius="keep" layout="inline-flex items-center" type="button" onClick={() => {
                       setBreatheLeft(BREATHE_SECS);
                       setBreathing(true);
-                    }}
-                    className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-[12px] font-semibold text-primary-foreground hover:opacity-90"
-                  >
+                    }} className="gap-1.5 rounded-md px-3 py-2 text-[12px] font-semibold">
                     <Icon name="Wind" className="h-3.5 w-3.5" />
                     Begin
-                  </button>
+                  </Button>
                 ) : (
                   <button
                     type="button"
@@ -227,14 +219,10 @@ export function StartupRitual({
                   </button>
                 )}
                 {!breathing && (
-                  <button
-                    type="button"
-                    onClick={() => setStep(1)}
-                    className="tech-transition inline-flex items-center gap-1 rounded-md px-3 py-2 text-[12px] font-medium text-muted-foreground hover:text-foreground"
-                  >
+                  <Button variant="text" size="none" radius="keep" layout="inline-flex items-center" type="button" onClick={() => setStep(1)} className="gap-1 rounded-md px-3 py-2 text-[12px]">
                     Skip
                     <Icon name="ArrowRight" className="h-3.5 w-3.5" />
-                  </button>
+                  </Button>
                 )}
               </div>
             </div>
@@ -289,14 +277,10 @@ export function StartupRitual({
                   due within 2 weeks — the planner will weigh them.
                 </div>
               )}
-              <button
-                type="button"
-                onClick={() => setStep(2)}
-                className="tech-transition inline-flex items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-2 text-[12px] font-semibold text-primary-foreground hover:opacity-90"
-              >
+              <Button size="none" radius="keep" type="button" onClick={() => setStep(2)} className="gap-1.5 rounded-md px-3 py-2 text-[12px] font-semibold">
                 Pick the One Thing
                 <Icon name="ArrowRight" className="h-3.5 w-3.5" />
-              </button>
+              </Button>
             </div>
           )}
 
@@ -363,21 +347,13 @@ export function StartupRitual({
 
         {step === 2 && (
           <div className="flex items-center justify-end gap-2 border-t border-border px-4 py-3">
-            <button
-              type="button"
-              onClick={() => finish(false)}
-              className="rounded-md px-3 py-2 text-[12px] font-medium text-muted-foreground hover:text-foreground"
-            >
+            <Button variant="text" size="none" radius="keep" layout="" type="button" onClick={() => finish(false)} className="rounded-md px-3 py-2 text-[12px]">
               Just start
-            </button>
-            <button
-              type="button"
-              onClick={() => finish(true)}
-              className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-[12px] font-semibold text-primary-foreground hover:opacity-90"
-            >
+            </Button>
+            <Button size="none" radius="keep" layout="inline-flex items-center" type="button" onClick={() => finish(true)} className="gap-1.5 rounded-md px-3 py-2 text-[12px] font-semibold">
               <Icon name="Wand2" className="h-3.5 w-3.5" />
               Rebuild my day
-            </button>
+            </Button>
           </div>
         )}
       </div>
diff --git a/workbench/control_plane/src/app/tasks/components/TaskSettingsModal.tsx b/workbench/control_plane/src/app/tasks/components/TaskSettingsModal.tsx
index 83bf47c0..38ffe183 100644
--- a/workbench/control_plane/src/app/tasks/components/TaskSettingsModal.tsx
+++ b/workbench/control_plane/src/app/tasks/components/TaskSettingsModal.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
 import { useTaskStore } from "../lib/taskStore";
@@ -121,14 +122,9 @@ function SettingsPanel() {
           <h2 className="text-sm font-semibold text-foreground">
             Task Manager settings
           </h2>
-          <button
-            type="button"
-            onClick={close}
-            aria-label="Close"
-            className="tech-transition ml-auto rounded-md p-1.5 text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          <Button variant="ghost" size="icon-sm" radius="keep" layout="" type="button" onClick={close} aria-label="Close" className="ml-auto rounded-md">
             <Icon name="X" className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
 
         <div className="flex flex-col gap-5 overflow-y-auto p-4">
@@ -418,13 +414,9 @@ function StageEditor({
           className="min-w-0 flex-1 bg-transparent px-0.5 py-1 text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none"
         />
         {adding.trim() && (
-          <button
-            type="button"
-            onClick={add}
-            className="tech-transition shrink-0 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground hover:opacity-90"
-          >
+          <Button size="none" radius="keep" layout="" type="button" onClick={add} className="shrink-0 rounded-md px-2 py-1 text-[11px]">
             Add
-          </button>
+          </Button>
         )}
       </div>
     </div>
diff --git a/workbench/control_plane/src/app/tasks/components/TaskToolbar.tsx b/workbench/control_plane/src/app/tasks/components/TaskToolbar.tsx
index 403346ad..9e1d52ec 100644
--- a/workbench/control_plane/src/app/tasks/components/TaskToolbar.tsx
+++ b/workbench/control_plane/src/app/tasks/components/TaskToolbar.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import type { ThemedIcon } from "@/components/Icon";
 import { useMemo, useRef, useState, useEffect } from "react";
@@ -205,14 +206,10 @@ export function TaskToolbar({ items }: { items: GtdItem[] }) {
       />
 
       {active && (
-        <button
-          type="button"
-          onClick={clearFilters}
-          className="tech-transition inline-flex h-7 items-center gap-1 rounded-md px-2 text-[11px] font-medium text-muted-foreground hover:bg-secondary hover:text-foreground"
-        >
+        <Button variant="ghost" size="none" radius="keep" layout="inline-flex items-center" type="button" onClick={clearFilters} className="h-7 gap-1 rounded-md px-2 text-[11px]">
           <Icon name="X" className="h-3 w-3" />
           Clear{nFacets > 1 ? " all" : ""}
-        </button>
+        </Button>
       )}
 
       {/* Group-by + Sort — pushed right */}
diff --git a/workbench/control_plane/src/app/tasks/components/UndoToast.tsx b/workbench/control_plane/src/app/tasks/components/UndoToast.tsx
index 7a7446c3..48ad130e 100644
--- a/workbench/control_plane/src/app/tasks/components/UndoToast.tsx
+++ b/workbench/control_plane/src/app/tasks/components/UndoToast.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect } from "react";
 import { useTaskStore } from "../lib/taskStore";
@@ -67,14 +68,9 @@ export function UndoToast() {
           u
         </kbd>
       </button>
-      <button
-        type="button"
-        onClick={dismissUndo}
-        aria-label="Dismiss"
-        className="tech-transition rounded-md p-0.5 text-muted-foreground hover:text-foreground"
-      >
+      <Button variant="text" size="none" radius="keep" layout="" type="button" onClick={dismissUndo} aria-label="Dismiss" className="rounded-md p-0.5">
         <Icon name="X" className="h-3.5 w-3.5" />
-      </button>
+      </Button>
     </div>
   );
 }
diff --git a/workbench/control_plane/src/app/tasks/components/WorkspacesModal.tsx b/workbench/control_plane/src/app/tasks/components/WorkspacesModal.tsx
index 52e15d59..8b37e82b 100644
--- a/workbench/control_plane/src/app/tasks/components/WorkspacesModal.tsx
+++ b/workbench/control_plane/src/app/tasks/components/WorkspacesModal.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useState } from "react";
 import { useTaskStore } from "../lib/taskStore";
@@ -82,14 +83,9 @@ function WorkspacesPanel() {
           <h2 className="text-sm font-semibold text-foreground">
             PM-tool workspaces
           </h2>
-          <button
-            type="button"
-            onClick={close}
-            aria-label="Close"
-            className="tech-transition ml-auto rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          <Button variant="ghost" size="icon-xs" radius="keep" layout="" type="button" onClick={close} aria-label="Close" className="ml-auto rounded-md">
             <Icon name="X" className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
 
         <div className="flex flex-col gap-4 overflow-y-auto p-4">
@@ -135,27 +131,16 @@ function WorkspacesPanel() {
                         </p>
                       )}
                     </div>
-                    <button
-                      type="button"
-                      title="Pull this workspace's tasks into the GTD views"
-                      disabled={syncing}
-                      onClick={() => void syncNow(a.id)}
-                      className="tech-transition rounded-md p-1.5 text-muted-foreground hover:bg-secondary hover:text-foreground disabled:opacity-50"
-                    >
+                    <Button variant="ghost" size="icon-sm" radius="keep" layout="" type="button" title="Pull this workspace's tasks into the GTD views" disabled={syncing} onClick={() => void syncNow(a.id)} className="rounded-md">
                       {syncing ? (
                         <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
                       ) : (
                         <Icon name="Cloud" className="h-3.5 w-3.5" />
                       )}
-                    </button>
-                    <button
-                      type="button"
-                      title="Re-fetch projects/members/stages"
-                      onClick={() => void refreshAccountSchema(a.id)}
-                      className="tech-transition rounded-md p-1.5 text-muted-foreground hover:bg-secondary hover:text-foreground"
-                    >
+                    </Button>
+                    <Button variant="ghost" size="icon-sm" radius="keep" layout="" type="button" title="Re-fetch projects/members/stages" onClick={() => void refreshAccountSchema(a.id)} className="rounded-md">
                       <Icon name="RefreshCw" className="h-3.5 w-3.5" />
-                    </button>
+                    </Button>
                     <button
                       type="button"
                       title="Disconnect workspace"
@@ -186,19 +171,14 @@ function WorkspacesPanel() {
                   className="flex-1 bg-transparent text-base text-foreground placeholder:text-muted-foreground focus:outline-none sm:text-sm"
                 />
               </div>
-              <button
-                type="button"
-                disabled={!token.trim() || busy === "find" || backend !== "live"}
-                onClick={() => void findWorkspaces()}
-                className="tech-transition inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
-              >
+              <Button size="none" layout="inline-flex items-center" type="button" disabled={!token.trim() || busy === "find" || backend !== "live"} onClick={() => void findWorkspaces()} className="shrink-0 gap-1.5 px-3 py-2 text-sm">
                 {busy === "find" ? (
                   <Icon name="Loader2" className="h-4 w-4 animate-spin" />
                 ) : (
                   <Icon name="Plus" className="h-4 w-4" />
                 )}
                 Find workspaces
-              </button>
+              </Button>
             </div>
             <p className="mt-1 px-1 text-[10px] text-muted-foreground">
               ClickUp → Settings → Apps → API Token. The token is encrypted at
diff --git a/workbench/control_plane/src/app/tasks/components/calendar/CalendarSettings.tsx b/workbench/control_plane/src/app/tasks/components/calendar/CalendarSettings.tsx
index 1e8ad81d..de0131dd 100644
--- a/workbench/control_plane/src/app/tasks/components/calendar/CalendarSettings.tsx
+++ b/workbench/control_plane/src/app/tasks/components/calendar/CalendarSettings.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useState } from "react";
 import {
@@ -99,14 +100,9 @@ export function CalendarSettings({
         </div>
         <div className="flex shrink-0 items-center justify-between px-3 pb-2 pt-2">
           <span className="font-semibold text-foreground">Calendar settings</span>
-          <button
-            type="button"
-            onClick={onClose}
-            aria-label="Close"
-            className="rounded p-1 text-muted-foreground hover:text-foreground"
-          >
+          <Button variant="text" size="icon-xs" radius="keep" layout="" type="button" onClick={onClose} aria-label="Close" className="rounded">
             <Icon name="X" className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
 
         {/* Scrollable body — everything below the header scrolls, with
diff --git a/workbench/control_plane/src/app/tasks/components/calendar/EndOfDayReview.tsx b/workbench/control_plane/src/app/tasks/components/calendar/EndOfDayReview.tsx
index d44c6ba6..5b447fa0 100644
--- a/workbench/control_plane/src/app/tasks/components/calendar/EndOfDayReview.tsx
+++ b/workbench/control_plane/src/app/tasks/components/calendar/EndOfDayReview.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect, useState } from "react";
 import {
@@ -153,14 +154,9 @@ export function EndOfDayReview({
               {dateLabel}
             </p>
           </div>
-          <button
-            type="button"
-            onClick={onClose}
-            aria-label="Close"
-            className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          <Button variant="ghost" size="icon-xs" radius="keep" layout="" type="button" onClick={onClose} aria-label="Close" className="rounded-md">
             <Icon name="X" className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
 
         <div className="min-h-0 flex-1 overflow-y-auto px-4 py-3">
@@ -375,22 +371,13 @@ export function EndOfDayReview({
         )}
 
         <div className="flex items-center justify-end gap-2 border-t border-border px-4 py-3">
-          <button
-            type="button"
-            onClick={onClose}
-            className="rounded-md px-3 py-2 text-[12px] font-medium text-muted-foreground hover:text-foreground"
-          >
+          <Button variant="text" size="none" radius="keep" layout="" type="button" onClick={onClose} className="rounded-md px-3 py-2 text-[12px]">
             Not yet
-          </button>
-          <button
-            type="button"
-            onClick={closeDay}
-            title="Save tomorrow's seeds and end the work day — permission to stop"
-            className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-[12px] font-medium text-primary-foreground hover:opacity-90"
-          >
+          </Button>
+          <Button size="none" radius="keep" layout="inline-flex items-center" type="button" onClick={closeDay} title="Save tomorrow's seeds and end the work day — permission to stop" className="gap-1.5 rounded-md px-3 py-2 text-[12px]">
             <Icon name="Moon" className="h-3.5 w-3.5" />
             Close the day
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/workbench/control_plane/src/app/tasks/components/calendar/NowNextBar.tsx b/workbench/control_plane/src/app/tasks/components/calendar/NowNextBar.tsx
index f9a8b5ec..99a844ba 100644
--- a/workbench/control_plane/src/app/tasks/components/calendar/NowNextBar.tsx
+++ b/workbench/control_plane/src/app/tasks/components/calendar/NowNextBar.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { GtdItem } from "../../lib/types";
 import {
@@ -154,17 +155,12 @@ export function NowNextBar({
             </button>
           </>
         ) : (
-          <button
-            type="button"
-            onClick={onFillGap}
-            title="See what fits in this gap — 2-minute pile first"
-            className="min-w-0 flex-1 truncate text-left text-[12px] text-muted-foreground hover:text-foreground"
-          >
+          <Button variant="text" size="none" layout="" type="button" onClick={onFillGap} title="See what fits in this gap — 2-minute pile first" className="min-w-0 flex-1 truncate text-left text-[12px]">
             Open right now —{" "}
             <span className="font-medium text-primary">
               fill the gap with quick wins?
             </span>
-          </button>
+          </Button>
         )}
       </div>
 
diff --git a/workbench/control_plane/src/app/tasks/components/calendar/PlanDayPanel.tsx b/workbench/control_plane/src/app/tasks/components/calendar/PlanDayPanel.tsx
index a968fd2b..3599341f 100644
--- a/workbench/control_plane/src/app/tasks/components/calendar/PlanDayPanel.tsx
+++ b/workbench/control_plane/src/app/tasks/components/calendar/PlanDayPanel.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useState } from "react";
 import {
@@ -230,14 +231,9 @@ export function PlanDayPanel({
                 : dateLabel}
             </p>
           </div>
-          <button
-            type="button"
-            onClick={onClose}
-            aria-label="Close"
-            className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          <Button variant="ghost" size="icon-xs" radius="keep" layout="" type="button" onClick={onClose} aria-label="Close" className="rounded-md">
             <Icon name="X" className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
 
         {/* Plan-through horizon — how far into the day (or night) to schedule.
@@ -326,17 +322,13 @@ export function PlanDayPanel({
               </span>
             </label>
             {onOpenSettings && (
-              <button
-                type="button"
-                onClick={() => {
+              <Button variant="text" size="none" layout="inline-flex items-center" type="button" onClick={() => {
                   onClose();
                   onOpenSettings();
-                }}
-                className="inline-flex items-center gap-1 text-[10px] font-medium text-muted-foreground hover:text-foreground"
-              >
+                }} className="gap-1 text-[10px]">
                 <Icon name="Settings2" className="h-3 w-3" />
                 Standing prompt
-              </button>
+              </Button>
             )}
           </div>
           <div className="flex items-center gap-2">
@@ -350,19 +342,14 @@ export function PlanDayPanel({
               placeholder="e.g. “low energy”, “calls only”, “deep work”, “work for 2 more hours”, “until 2am”"
               className="min-w-0 flex-1 rounded-md border border-border bg-background/60 px-3 py-2 text-base text-foreground focus:border-primary/50 focus:outline-none sm:text-sm"
             />
-            <button
-              type="button"
-              onClick={() => void run(note)}
-              disabled={loading}
-              className="tech-transition inline-flex shrink-0 items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
-            >
+            <Button size="none" radius="keep" layout="inline-flex items-center" type="button" onClick={() => void run(note)} disabled={loading} className="shrink-0 gap-1.5 rounded-md px-3 py-2 text-[12px]">
               {loading ? (
                 <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
               ) : (
                 <Icon name="Wand2" className="h-3.5 w-3.5" />
               )}
               {plan ? "Redo" : isReplan ? "Fit" : "Plan"}
-            </button>
+            </Button>
           </div>
           <p className="mt-1 text-[10px] text-muted-foreground">
             {isReplan
@@ -511,25 +498,16 @@ export function PlanDayPanel({
           className="flex shrink-0 items-center justify-end gap-2 border-t border-border px-4 py-3"
           style={{ paddingBottom: "max(0.75rem, env(safe-area-inset-bottom))" }}
         >
-          <button
-            type="button"
-            onClick={onClose}
-            className="rounded-md px-3 py-2 text-[12px] font-medium text-muted-foreground hover:text-foreground"
-          >
+          <Button variant="text" size="none" radius="keep" layout="" type="button" onClick={onClose} className="rounded-md px-3 py-2 text-[12px]">
             Cancel
-          </button>
-          <button
-            type="button"
-            onClick={apply}
-            disabled={!plan || (plan.blocks.length === 0 && plan.evicted.length === 0)}
-            className="tech-transition inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-[12px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
-          >
+          </Button>
+          <Button size="none" radius="keep" layout="inline-flex items-center" type="button" onClick={apply} disabled={!plan || (plan.blocks.length === 0 && plan.evicted.length === 0)} className="gap-1.5 rounded-md px-3 py-2 text-[12px]">
             <Icon name="Check" className="h-3.5 w-3.5" />
             Apply
             {plan?.blocks.length
               ? ` ${plan.blocks.length} block${plan.blocks.length === 1 ? "" : "s"}`
               : " plan"}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/workbench/control_plane/src/app/tasks/components/calendar/ScheduleSheet.tsx b/workbench/control_plane/src/app/tasks/components/calendar/ScheduleSheet.tsx
index 15de6eef..d102b48c 100644
--- a/workbench/control_plane/src/app/tasks/components/calendar/ScheduleSheet.tsx
+++ b/workbench/control_plane/src/app/tasks/components/calendar/ScheduleSheet.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useMemo, useState } from "react";
 import { GtdItem } from "../../lib/types";
@@ -134,25 +135,16 @@ export function ScheduleSheet({
               {at ? ` · from ${fmtClock(at)}` : " · first free slot"}
             </p>
           </div>
-          <button
-            type="button"
-            onClick={onClose}
-            aria-label="Close"
-            className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
-          >
+          <Button variant="ghost" size="icon-xs" radius="keep" layout="" type="button" onClick={onClose} aria-label="Close" className="rounded-md">
             <Icon name="X" className="h-4 w-4" />
-          </button>
+          </Button>
         </div>
 
         <div className="px-3 pb-2">
-          <button
-            type="button"
-            onClick={onPlan}
-            className="tech-transition flex w-full items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-2.5 text-[13px] font-semibold text-primary-foreground hover:opacity-90"
-          >
+          <Button size="none" radius="keep" layout="flex items-center justify-center" type="button" onClick={onPlan} className="w-full gap-1.5 rounded-md px-3 py-2.5 text-[13px] font-semibold">
             <Icon name="Wand2" className="h-4 w-4" />
             Rebuild my day with AI
-          </button>
+          </Button>
         </div>
 
         <div className="min-h-0 flex-1 overflow-y-auto px-3 pb-4">
diff --git a/workbench/control_plane/src/app/whatsapp/calls/page.tsx b/workbench/control_plane/src/app/whatsapp/calls/page.tsx
index dbbf151a..07d3bf95 100644
--- a/workbench/control_plane/src/app/whatsapp/calls/page.tsx
+++ b/workbench/control_plane/src/app/whatsapp/calls/page.tsx
@@ -13,6 +13,7 @@
  * See ai-company-brain/specs/whatsapp_calls_note_taker.md.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
@@ -501,18 +502,14 @@ export default function WhatsAppCallsPage() {
             }
             className="flex-1 rounded-lg border border-border bg-background px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground/70 focus:outline-none focus:ring-1 focus:ring-ring"
           />
-          <button
-            onClick={() => void dial()}
-            disabled={busy || !target.trim() || !bridgeUp}
-            className="inline-flex items-center justify-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-xs font-medium text-primary-foreground hover:opacity-90 tech-transition disabled:opacity-50"
-          >
+          <Button size="none" onClick={() => void dial()} disabled={busy || !target.trim() || !bridgeUp} className="gap-1.5 px-4 py-2 text-xs">
             {busy ? (
               <Icon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
             ) : (
               <Icon name="Phone" className="h-3.5 w-3.5" />
             )}
             {busy ? "Calling…" : "Call"}
-          </button>
+          </Button>
         </div>
 
         {mode === "group" && (
@@ -553,12 +550,9 @@ export default function WhatsAppCallsPage() {
               <Icon name="Stethoscope" className="h-3.5 w-3.5" />
               Calling readiness
             </h2>
-            <button
-              onClick={() => void runDiagnostics()}
-              className="text-[10px] text-muted-foreground hover:text-foreground"
-            >
+            <Button variant="text" size="none" layout="" onClick={() => void runDiagnostics()} className="text-[10px]">
               Re-check
-            </button>
+            </Button>
           </div>
           {diag === null ? (
             <Icon name="Loader2" className="h-4 w-4 animate-spin text-muted-foreground" />
@@ -786,18 +780,12 @@ export default function WhatsAppCallsPage() {
               Debug report {copied && <span className="text-success">· copied</span>}
             </h2>
             <div className="flex gap-2">
-              <button
-                onClick={() => void navigator.clipboard.writeText(report)}
-                className="text-[10px] text-muted-foreground hover:text-foreground"
-              >
+              <Button variant="text" size="none" layout="" onClick={() => void navigator.clipboard.writeText(report)} className="text-[10px]">
                 Copy again
-              </button>
-              <button
-                onClick={() => setReport(null)}
-                className="text-[10px] text-muted-foreground hover:text-foreground"
-              >
+              </Button>
+              <Button variant="text" size="none" layout="" onClick={() => setReport(null)} className="text-[10px]">
                 Dismiss
-              </button>
+              </Button>
             </div>
           </div>
           <textarea
diff --git a/workbench/control_plane/src/app/whatsapp/page.tsx b/workbench/control_plane/src/app/whatsapp/page.tsx
index ec9bb169..566d52ae 100644
--- a/workbench/control_plane/src/app/whatsapp/page.tsx
+++ b/workbench/control_plane/src/app/whatsapp/page.tsx
@@ -8,6 +8,7 @@
 // buttons — capability arrives in later phases as streams / settings / drawers,
 // never as more always-on chrome on the queue.
 
+import Button from "@/components/ui/Button";
 import AppIcon from "@/components/Icon";
 import { useCallback, useEffect, useRef, useState } from "react";
 import Link from "next/link";
@@ -1089,18 +1090,14 @@ function Conversation({
                   placeholder="Type a reply…  (⌘↵ to send)"
                   className="min-h-[40px] flex-1 resize-none rounded-lg border border-border bg-background px-3 py-2 text-[12px] outline-none focus:border-primary"
                 />
-                <button
-                  onClick={doSendText}
-                  disabled={!text.trim() || sending}
-                  className="flex h-9 items-center gap-1.5 rounded-lg bg-primary px-3 text-[12px] font-semibold text-primary-foreground hover:opacity-90 disabled:opacity-50"
-                >
+                <Button size="none" layout="flex items-center" onClick={doSendText} disabled={!text.trim() || sending} className="h-9 gap-1.5 px-3 text-[12px] font-semibold">
                   {sending ? (
                     <AppIcon name="Loader2" className="h-3.5 w-3.5 animate-spin" />
                   ) : (
                     <AppIcon name="Send" className="h-3.5 w-3.5" />
                   )}
                   Send
-                </button>
+                </Button>
               </div>
             </div>
           ) : (
diff --git a/workbench/control_plane/src/app/workflows/[id]/page.tsx b/workbench/control_plane/src/app/workflows/[id]/page.tsx
index 34c99f3b..e6d7d8ee 100644
--- a/workbench/control_plane/src/app/workflows/[id]/page.tsx
+++ b/workbench/control_plane/src/app/workflows/[id]/page.tsx
@@ -7,6 +7,7 @@
  * status onto the canvas over SSE.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import {
   Suspense,
@@ -1114,16 +1115,11 @@ function EditorInner({ id }: { id: string }) {
               <Icon name="ChevronDown" className="w-3.5 h-3.5" />
             </button>
           </div>
-          <button
-            onClick={onPublish}
-            disabled={busy !== null || !canPublish}
-            title={
+          <Button size="none" layout="flex items-center" onClick={onPublish} disabled={busy !== null || !canPublish} title={
               canPublish
                 ? undefined
                 : "Publishing needs the workflows:publish permission — ask an admin. You can still edit and Test this draft."
-            }
-            className="rounded-lg bg-primary px-2.5 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 tech-transition flex items-center gap-1 disabled:opacity-50 disabled:cursor-not-allowed"
-          >
+            } className="px-2.5 py-1.5 text-xs gap-1">
             {busy === "publish" ? (
               <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" />
             ) : published ? (
@@ -1132,7 +1128,7 @@ function EditorInner({ id }: { id: string }) {
               <Icon name="Rocket" className="w-3.5 h-3.5" />
             )}
             Publish
-          </button>
+          </Button>
         </div>
       </div>
 
@@ -1302,13 +1298,9 @@ function EditorInner({ id }: { id: string }) {
               placeholder="Describe an automation to generate… e.g. “When a lead emails, log it to Zoho and draft a reply”"
               className="flex-1 min-w-0 bg-transparent text-xs text-foreground placeholder:text-muted-foreground focus:outline-none"
             />
-            <button
-              type="submit"
-              disabled={!describe.trim()}
-              className="shrink-0 rounded-lg bg-primary px-2.5 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 tech-transition disabled:opacity-40"
-            >
+            <Button size="none" layout="" type="submit" disabled={!describe.trim()} className="shrink-0 px-2.5 py-1.5 text-xs">
               Generate
-            </button>
+            </Button>
           </form>
         </div>
         <NodeInspector
diff --git a/workbench/control_plane/src/app/workflows/components/CopilotPanel.tsx b/workbench/control_plane/src/app/workflows/components/CopilotPanel.tsx
index 95d74f55..92998638 100644
--- a/workbench/control_plane/src/app/workflows/components/CopilotPanel.tsx
+++ b/workbench/control_plane/src/app/workflows/components/CopilotPanel.tsx
@@ -9,6 +9,7 @@
  * modules land in the org library with auto-created provenance.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect, useRef, useState } from "react";
 import { askCopilot } from "../lib/api";
@@ -189,14 +190,9 @@ export default function CopilotPanel({
             placeholder="Describe a change…"
             className="flex-1 resize-none rounded-lg border border-input bg-background px-2.5 py-1.5 text-[11px] text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
           />
-          <button
-            onClick={() => send()}
-            disabled={busy || !prompt.trim()}
-            className="self-end rounded-lg bg-primary p-2 text-primary-foreground hover:opacity-90 tech-transition disabled:opacity-50"
-            title="Send"
-          >
+          <Button size="icon" layout="" onClick={() => send()} disabled={busy || !prompt.trim()} title="Send" className="self-end">
             <Icon name="Sparkles" className="w-3.5 h-3.5" />
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/workbench/control_plane/src/app/workflows/components/ModuleStudio.tsx b/workbench/control_plane/src/app/workflows/components/ModuleStudio.tsx
index e43e6d09..6ee917cf 100644
--- a/workbench/control_plane/src/app/workflows/components/ModuleStudio.tsx
+++ b/workbench/control_plane/src/app/workflows/components/ModuleStudio.tsx
@@ -8,6 +8,7 @@
  * modules become "Module" nodes in every workflow's palette.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useEffect, useRef, useState } from "react";
 import Editor from "@monaco-editor/react";
@@ -236,13 +237,10 @@ export default function ModuleStudio() {
       {/* Library list */}
       <div className="w-56 sm:w-64 border-r border-border shrink-0 flex flex-col">
         <div className="p-3 border-b border-border">
-          <button
-            onClick={startFresh}
-            className="w-full rounded-lg bg-primary px-3 py-2 text-xs font-medium text-primary-foreground hover:opacity-90 tech-transition flex items-center justify-center gap-1.5"
-          >
+          <Button size="none" layout="flex items-center justify-center" onClick={startFresh} className="w-full px-3 py-2 text-xs gap-1.5">
             <Icon name="Sparkles" className="w-3.5 h-3.5" />
             New module
-          </button>
+          </Button>
         </div>
         <div className="flex-1 overflow-y-auto scrollbar-thin p-2 space-y-1">
           {loading && (
@@ -334,14 +332,9 @@ export default function ModuleStudio() {
                 placeholder={code ? "Refine the module…" : "Describe the task…"}
                 className="flex-1 resize-none rounded-lg border border-input bg-background px-3 py-2 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
               />
-              <button
-                onClick={onGenerate}
-                disabled={generating || !prompt.trim()}
-                className="self-end rounded-lg bg-primary p-2 text-primary-foreground hover:opacity-90 tech-transition disabled:opacity-50"
-                title="Generate"
-              >
+              <Button size="icon" layout="" onClick={onGenerate} disabled={generating || !prompt.trim()} title="Generate" className="self-end">
                 <Icon name="Sparkles" className="w-4 h-4" />
-              </button>
+              </Button>
             </div>
           </div>
         </div>
@@ -373,18 +366,14 @@ export default function ModuleStudio() {
                 )}
                 Test
               </button>
-              <button
-                onClick={onSave}
-                disabled={!code || !name.trim() || saving}
-                className="rounded-lg bg-primary px-2.5 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 tech-transition flex items-center gap-1 disabled:opacity-50"
-              >
+              <Button size="none" layout="flex items-center" onClick={onSave} disabled={!code || !name.trim() || saving} className="px-2.5 py-1.5 text-xs gap-1">
                 {saving ? (
                   <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin" />
                 ) : (
                   <Icon name="Save" className="w-3.5 h-3.5" />
                 )}
                 Save
-              </button>
+              </Button>
               {selectedId && (
                 <>
                   <button
diff --git a/workbench/control_plane/src/app/workflows/components/RunConsole.tsx b/workbench/control_plane/src/app/workflows/components/RunConsole.tsx
index ae27ba21..cdfd3100 100644
--- a/workbench/control_plane/src/app/workflows/components/RunConsole.tsx
+++ b/workbench/control_plane/src/app/workflows/components/RunConsole.tsx
@@ -8,6 +8,7 @@
  * are painted onto the canvas via onPaintRun.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useEffect, useRef, useState } from "react";
 import { getRun, listRuns } from "../lib/api";
@@ -152,17 +153,13 @@ export default function RunConsole({
             running
           </span>
         )}
-        <button
-          onClick={onToggle}
-          className="ml-auto p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary tech-transition"
-          title={collapsed ? "Expand console" : "Collapse console"}
-        >
+        <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={onToggle} title={collapsed ? "Expand console" : "Collapse console"} className="ml-auto rounded-md">
           {collapsed ? (
             <Icon name="ChevronUp" className="w-4 h-4" />
           ) : (
             <Icon name="ChevronDown" className="w-4 h-4" />
           )}
-        </button>
+        </Button>
       </div>
 
       {!collapsed && tab === "console" && (
@@ -176,13 +173,10 @@ export default function RunConsole({
                   ? ` · ${new Date(inspected.started_at).toLocaleString()}`
                   : ""}
               </span>
-              <button
-                onClick={clearInspection}
-                className="ml-auto flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary tech-transition"
-              >
+              <Button variant="ghost" size="none" radius="keep" layout="flex items-center" onClick={clearInspection} className="ml-auto gap-1 text-[10px] px-1.5 py-0.5 rounded-md">
                 <Icon name="X" className="w-3 h-3" />
                 back to live
-              </button>
+              </Button>
             </div>
           )}
           {shownEvents.length === 0 && (
diff --git a/workbench/control_plane/src/app/workflows/components/TriggerPanel.tsx b/workbench/control_plane/src/app/workflows/components/TriggerPanel.tsx
index 7fddc455..65612443 100644
--- a/workbench/control_plane/src/app/workflows/components/TriggerPanel.tsx
+++ b/workbench/control_plane/src/app/workflows/components/TriggerPanel.tsx
@@ -6,6 +6,7 @@
  * a cron expression. All kinds converge on the same run entrypoint.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useMemo, useState } from "react";
 import type { TriggerSpec } from "../lib/types";
@@ -84,12 +85,9 @@ export default function TriggerPanel({
           <Icon name="Zap" className="w-3.5 h-3.5 text-amber-500" />
           Triggers
         </span>
-        <button
-          onClick={onClose}
-          className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary tech-transition"
-        >
+        <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={onClose} className="rounded-md">
           <Icon name="X" className="w-3.5 h-3.5" />
-        </button>
+        </Button>
       </div>
 
       <div className="p-3 space-y-4 text-xs">
diff --git a/workbench/control_plane/src/app/workflows/page.tsx b/workbench/control_plane/src/app/workflows/page.tsx
index 25959250..3b976915 100644
--- a/workbench/control_plane/src/app/workflows/page.tsx
+++ b/workbench/control_plane/src/app/workflows/page.tsx
@@ -10,6 +10,7 @@
  *        modules /api/workflows/modules*
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
@@ -151,18 +152,14 @@ export default function WorkflowsPage() {
             <Icon name="RefreshCw" className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
           </button>
           {tab === "workflows" && (
-            <button
-              onClick={onCreate}
-              disabled={creating}
-              className="rounded-lg bg-primary px-3 sm:px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 tech-transition flex items-center gap-1.5 disabled:opacity-50"
-            >
+            <Button size="lg" layout="flex items-center" onClick={onCreate} disabled={creating}>
               {creating ? (
                 <Icon name="Loader2" className="w-4 h-4 animate-spin" />
               ) : (
                 <Icon name="Plus" className="w-4 h-4" />
               )}
               New workflow
-            </button>
+            </Button>
           )}
         </div>
       </div>
@@ -252,12 +249,9 @@ export default function WorkflowsPage() {
                     No workflows yet. Build your first automation — trigger →
                     agents → tools → done.
                   </p>
-                  <button
-                    onClick={onCreate}
-                    className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 tech-transition"
-                  >
+                  <Button size="none" layout="" onClick={onCreate} className="px-4 py-2 text-sm">
                     Create a workflow
-                  </button>
+                  </Button>
                 </div>
               )}
               {!loading && !error && filtered.length > 0 && (
@@ -285,13 +279,9 @@ export default function WorkflowsPage() {
                             <Icon name="Loader2" className="w-3.5 h-3.5 animate-spin text-muted-foreground" />
                           ) : (
                             <span className="hidden group-hover:flex items-center gap-1">
-                              <button
-                                onClick={(e) => onDuplicate(e, wf.id)}
-                                title="Duplicate workflow"
-                                className="p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary tech-transition"
-                              >
+                              <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={(e) => onDuplicate(e, wf.id)} title="Duplicate workflow" className="rounded-md">
                                 <Icon name="Copy" className="w-3.5 h-3.5" />
-                              </button>
+                              </Button>
                               <button
                                 onClick={(e) => onDelete(e, wf.id)}
                                 title={
diff --git a/workbench/control_plane/src/components/AddAgentWizard.tsx b/workbench/control_plane/src/components/AddAgentWizard.tsx
index 32a9ee3c..1258eb57 100644
--- a/workbench/control_plane/src/components/AddAgentWizard.tsx
+++ b/workbench/control_plane/src/components/AddAgentWizard.tsx
@@ -17,6 +17,7 @@
  *   onCancel   — called if user dismisses before completing
  */
 
+import Button from "@/components/ui/Button";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import type { AgentEntry } from "@/app/api/agent/list/route";
 import type { IntegrationStatus } from "@/app/api/integrations/status/route";
@@ -178,13 +179,9 @@ function IntegrationFormCard({
       {/* Actions */}
       {!state.saved && !state.skipped && (
         <div className="flex gap-3 pt-1">
-          <button
-            onClick={onSave}
-            disabled={!allFilled || state.saving}
-            className="flex-1 py-2 rounded-lg bg-primary hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed text-sm font-medium text-primary-foreground transition-colors"
-          >
+          <Button size="none" layout="" onClick={onSave} disabled={!allFilled || state.saving} className="flex-1 py-2 text-sm">
             {state.saving ? "Saving…" : "Save & continue"}
-          </button>
+          </Button>
           <button
             onClick={onTest}
             disabled={!allFilled || state.testing}
@@ -418,12 +415,9 @@ export default function AddAgentWizard({
                 Step {Math.min(stepIndex + 1, totalSteps)} of {totalSteps}
               </p>
             </div>
-            <button
-              onClick={onCancel}
-              className="text-muted-foreground hover:text-foreground transition-colors text-sm"
-            >
+            <Button variant="text" size="none" layout="" onClick={onCancel} className="text-sm">
               ✕
-            </button>
+            </Button>
           </div>
           <ProgressBar current={stepIndex + 1} total={totalSteps} />
         </div>
@@ -660,12 +654,9 @@ export default function AddAgentWizard({
                     Start chatting →
                   </button>
                 ) : (
-                  <button
-                    onClick={() => setStepIndex(1)}
-                    className="px-5 py-2 rounded-lg bg-primary hover:opacity-90 text-sm font-medium text-primary-foreground transition-colors"
-                  >
+                  <Button size="none" layout="" onClick={() => setStepIndex(1)} className="px-5 py-2 text-sm">
                     Set up integrations →
-                  </button>
+                  </Button>
                 )}
               </>
             )}
diff --git a/workbench/control_plane/src/components/AgentChat.tsx b/workbench/control_plane/src/components/AgentChat.tsx
index 8f25b67e..64bb9267 100644
--- a/workbench/control_plane/src/components/AgentChat.tsx
+++ b/workbench/control_plane/src/components/AgentChat.tsx
@@ -8,6 +8,7 @@
  * or dismiss the banner and configure later in the Integrations page.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useState, useRef, useEffect, useCallback, useMemo, useSyncExternalStore } from "react";
 import React from "react";
@@ -1533,12 +1534,9 @@ export default function AgentChat({
           </a>
         )}
         {isRoom && (
-          <button
-            onClick={() => setRailOpen((v) => !v)}
-            className="ml-auto shrink-0 rounded-md px-1.5 py-0.5 text-[11px] text-muted-foreground hover:bg-secondary hover:text-foreground tech-transition lg:hidden"
-          >
+          <Button variant="ghost" size="none" radius="keep" layout="" onClick={() => setRailOpen((v) => !v)} className="ml-auto shrink-0 rounded-md px-1.5 py-0.5 text-[11px] lg:hidden">
             {railOpen ? "Hide room" : "Room"}
-          </button>
+          </Button>
         )}
       </div>
       )}
@@ -2056,13 +2054,10 @@ export default function AgentChat({
 
               {/* Thinking mode — compact dropdown (saves space, easier tap on mobile) */}
               <div className="relative">
-                <button type="button"
-                  onClick={() => setShowThinkMenu((v) => !v)}
-                  className="flex items-center gap-1 px-2 py-1 rounded-md hover:bg-secondary hover:text-foreground tech-transition text-muted-foreground"
-                  title={THINK_MODES.find((t) => t.mode === thinkMode)?.title}>
+                <Button variant="ghost" size="none" radius="keep" layout="flex items-center" type="button" onClick={() => setShowThinkMenu((v) => !v)} title={THINK_MODES.find((t) => t.mode === thinkMode)?.title} className="gap-1 px-2 py-1 rounded-md">
                   <span>{THINK_MODES.find((t) => t.mode === thinkMode)?.label ?? "Auto"}</span>
                   <span className="text-muted-foreground/50 text-[9px]">▾</span>
-                </button>
+                </Button>
                 {showThinkMenu && (
                   <div className="absolute bottom-full left-0 mb-1.5 w-44 rounded-lg border border-border bg-popover shadow-xl z-50 py-1 tech-glass-subtle"
                     onMouseLeave={() => setShowThinkMenu(false)}>
diff --git a/workbench/control_plane/src/components/AppShell.tsx b/workbench/control_plane/src/components/AppShell.tsx
index a1254d93..0c06e085 100644
--- a/workbench/control_plane/src/components/AppShell.tsx
+++ b/workbench/control_plane/src/components/AppShell.tsx
@@ -13,6 +13,7 @@
  * rely on plain Tailwind responsive prefixes (kept in sync via the viewport meta).
  */
 
+import Button from "@/components/ui/Button";
 import AppIcon, { themedIcon, type ThemedIcon } from "@/components/Icon";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -241,21 +242,15 @@ function MobileBottomNavInner({
       </nav>
       <div className="mt-auto border-t border-border p-3 space-y-2">
         <ThemeToggleMenuItem onClick={close} />
-        <button
-          onClick={() => { toggleView(); close(); }}
-          className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-muted-foreground hover:bg-secondary hover:text-foreground tech-transition"
-        >
+        <Button variant="ghost" size="none" layout="flex items-center" onClick={() => { toggleView(); close(); }} className="w-full gap-3 px-3 py-2.5 text-sm">
           <AppIcon name="Monitor" size={16} className="shrink-0" />
           Desktop view
-        </button>
+        </Button>
         {session?.user && (
-          <button
-            onClick={() => signOut({ callbackUrl: "/signin" })}
-            className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-muted-foreground hover:bg-secondary hover:text-foreground tech-transition"
-          >
+          <Button variant="ghost" size="none" layout="flex items-center" onClick={() => signOut({ callbackUrl: "/signin" })} className="w-full gap-3 px-3 py-2.5 text-sm">
             <AppIcon name="LogOut" size={16} className="shrink-0" />
             Sign out
-          </button>
+          </Button>
         )}
         {session?.user && (
           <div className="px-3 pt-1">
@@ -311,35 +306,23 @@ function MobileBottomNavInner({
         </button>
         {isEmailPage && (
           <>
-            <button
-              onClick={() => dispatchNav("email-accounts")}
-              className="flex flex-1 min-w-0 flex-col items-center gap-0.5 px-1 py-1 rounded-lg transition-colors text-muted-foreground hover:text-foreground"
-            >
+            <Button variant="text" size="none" layout="flex items-center" onClick={() => dispatchNav("email-accounts")} className="flex-1 min-w-0 flex-col gap-0.5 px-1 py-1">
               <AppIcon name="Mail" size={20} />
               <span className="text-[10px] font-medium leading-none">Inbox</span>
-            </button>
-            <button
-              onClick={() => dispatchNav("email-automation")}
-              className="flex flex-1 min-w-0 flex-col items-center gap-0.5 px-1 py-1 rounded-lg transition-colors text-muted-foreground hover:text-foreground"
-            >
+            </Button>
+            <Button variant="text" size="none" layout="flex items-center" onClick={() => dispatchNav("email-automation")} className="flex-1 min-w-0 flex-col gap-0.5 px-1 py-1">
               <AppIcon name="Zap" size={20} />
               <span className="text-[10px] font-medium leading-none">Automation</span>
-            </button>
-            <button
-              onClick={() => dispatchNav("email-ai")}
-              className="flex flex-1 min-w-0 flex-col items-center gap-0.5 px-1 py-1 rounded-lg transition-colors text-muted-foreground hover:text-foreground"
-            >
+            </Button>
+            <Button variant="text" size="none" layout="flex items-center" onClick={() => dispatchNav("email-ai")} className="flex-1 min-w-0 flex-col gap-0.5 px-1 py-1">
               <AppIcon name="MessageCircle" size={20} />
               <span className="text-[10px] font-medium leading-none">AI Chat</span>
-            </button>
+            </Button>
           </>
         )}
         {isChatPage && (
           <>
-            <button
-              onClick={() => dispatchNav("chats")}
-              className="relative flex flex-1 min-w-0 flex-col items-center gap-0.5 px-1 py-1 rounded-lg transition-colors text-muted-foreground hover:text-foreground"
-            >
+            <Button variant="text" size="none" layout="flex items-center" onClick={() => dispatchNav("chats")} className="relative flex-1 min-w-0 flex-col gap-0.5 px-1 py-1">
               <AppIcon name="MessageCircle" size={20} />
               {activeCount > 0 && (
                 <span className="absolute -top-0.5 right-2 flex items-center justify-center min-w-[16px] h-4 px-1 rounded-full bg-success text-success-foreground text-[9px] font-bold animate-pulse">
@@ -347,14 +330,11 @@ function MobileBottomNavInner({
                 </span>
               )}
               <span className="text-[10px] font-medium leading-none">Chats</span>
-            </button>
-            <button
-              onClick={() => dispatchNav("files")}
-              className="flex flex-1 min-w-0 flex-col items-center gap-0.5 px-1 py-1 rounded-lg transition-colors text-muted-foreground hover:text-foreground"
-            >
+            </Button>
+            <Button variant="text" size="none" layout="flex items-center" onClick={() => dispatchNav("files")} className="flex-1 min-w-0 flex-col gap-0.5 px-1 py-1">
               <AppIcon name="FolderOpen" size={20} />
               <span className="text-[10px] font-medium leading-none">Files</span>
-            </button>
+            </Button>
           </>
         )}
         {isTasksPage && (
diff --git a/workbench/control_plane/src/components/ArtifactCard.tsx b/workbench/control_plane/src/components/ArtifactCard.tsx
index 12c9fa4b..7a713c86 100644
--- a/workbench/control_plane/src/components/ArtifactCard.tsx
+++ b/workbench/control_plane/src/components/ArtifactCard.tsx
@@ -13,6 +13,7 @@
  *   /api/agent/workspace/{sessionId}/file?path={rel_path}
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useViewMode } from "@/components/ViewModeProvider";
@@ -247,13 +248,9 @@ export default function ArtifactCard({
           </button>
         )}
         {!isMobile && (
-          <button
-            onClick={(e) => { e.stopPropagation(); handleOpen(); }}
-            className="rounded-lg p-1.5 text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
-            title={isDoc ? "Open in modal viewer" : "Open in viewer"}
-          >
+          <Button variant="ghost" size="icon-sm" layout="" onClick={(e) => { e.stopPropagation(); handleOpen(); }} title={isDoc ? "Open in modal viewer" : "Open in viewer"}>
             <Icon name="Maximize2" size={14} />
-          </button>
+          </Button>
         )}
         <a
           href={fileUrl}
diff --git a/workbench/control_plane/src/components/ArtifactSidebar.tsx b/workbench/control_plane/src/components/ArtifactSidebar.tsx
index 57a94bf9..26f2949c 100644
--- a/workbench/control_plane/src/components/ArtifactSidebar.tsx
+++ b/workbench/control_plane/src/components/ArtifactSidebar.tsx
@@ -11,6 +11,7 @@
  *   artifactUpdates  — new FileEntry objects pushed in from SSE (ST-AV-06); merged into tree
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useEffect, useRef, useState } from "react";
 
@@ -494,21 +495,13 @@ export default function ArtifactSidebar({
             )}
           </div>
           <div className="flex items-center gap-1">
-            <button
-              onClick={fetchTree}
-              className="rounded p-1 text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
-              title="Refresh file tree"
-            >
+            <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={fetchTree} title="Refresh file tree" className="rounded">
               <Icon name="RefreshCw" size={12} className={loading ? "animate-spin" : ""} />
-            </button>
-            <button
-              onClick={onToggle}
-              className="rounded p-1 text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
-              title="Collapse file browser"
-            >
+            </Button>
+            <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={onToggle} title="Collapse file browser" className="rounded">
               {/* Chevron points toward the edge the panel collapses into. */}
               {side === "right" ? <Icon name="ChevronRight" size={14} /> : <Icon name="ChevronLeft" size={14} />}
-            </button>
+            </Button>
           </div>
         </div>
       )}
diff --git a/workbench/control_plane/src/components/ArtifactViewerModal.tsx b/workbench/control_plane/src/components/ArtifactViewerModal.tsx
index eec27657..50b03bd3 100644
--- a/workbench/control_plane/src/components/ArtifactViewerModal.tsx
+++ b/workbench/control_plane/src/components/ArtifactViewerModal.tsx
@@ -13,6 +13,7 @@
  *   other               → hex-dump excerpt + download button
  */
 
+import Button from "@/components/ui/Button";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -542,13 +543,9 @@ export default function ArtifactViewerModal({ sessionId, entry, onClose, onDelet
                 )}
               </>
             )}
-            <button
-              onClick={onClose}
-              className="rounded p-1 text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors text-lg leading-none"
-              title="Close"
-            >
+            <Button variant="ghost" size="none" radius="keep" layout="" onClick={onClose} title="Close" className="rounded p-1 text-lg leading-none">
               ×
-            </button>
+            </Button>
           </div>
         </div>
 
diff --git a/workbench/control_plane/src/components/DocumentPane.tsx b/workbench/control_plane/src/components/DocumentPane.tsx
index ba2d164c..e95bd5c6 100644
--- a/workbench/control_plane/src/components/DocumentPane.tsx
+++ b/workbench/control_plane/src/components/DocumentPane.tsx
@@ -19,6 +19,7 @@
  * watches it stream in.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
@@ -172,22 +173,14 @@ export default function DocumentPane({ sessionId, path, name, live }: DocumentPa
       {dirty && <span className="text-[10px] text-accent">● unsaved</span>}
       <div className="ml-auto flex items-center gap-1">
         {previewable && mode === "edit" && (
-          <button
-            onClick={() => setMode("preview")}
-            className="flex items-center gap-1 rounded px-2 py-1 text-[11px] text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
-            title="Rendered preview"
-          >
+          <Button variant="ghost" size="none" radius="keep" layout="flex items-center" onClick={() => setMode("preview")} title="Rendered preview" className="gap-1 rounded px-2 py-1 text-[11px]">
             <Icon name="Eye" size={12} /> Preview
-          </button>
+          </Button>
         )}
         {editable && mode === "preview" && (
-          <button
-            onClick={startEdit}
-            className="flex items-center gap-1 rounded px-2 py-1 text-[11px] text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
-            title="Edit"
-          >
+          <Button variant="ghost" size="none" radius="keep" layout="flex items-center" onClick={startEdit} title="Edit" className="gap-1 rounded px-2 py-1 text-[11px]">
             <Icon name="Pencil" size={12} /> Edit
-          </button>
+          </Button>
         )}
         {mode === "edit" && (
           <>
@@ -199,14 +192,9 @@ export default function DocumentPane({ sessionId, path, name, live }: DocumentPa
             >
               <Icon name="Save" size={12} /> {saving ? "Saving…" : "Save"}
             </button>
-            <button
-              onClick={cancelEdit}
-              disabled={saving}
-              className="flex items-center gap-1 rounded px-2 py-1 text-[11px] text-muted-foreground hover:bg-secondary hover:text-foreground transition-colors"
-              title="Discard changes"
-            >
+            <Button variant="ghost" size="none" radius="keep" layout="flex items-center" onClick={cancelEdit} disabled={saving} title="Discard changes" className="gap-1 rounded px-2 py-1 text-[11px]">
               <Icon name="RotateCcw" size={12} />
-            </button>
+            </Button>
           </>
         )}
         <a
diff --git a/workbench/control_plane/src/components/IntegrationSetup.tsx b/workbench/control_plane/src/components/IntegrationSetup.tsx
index 41760043..8dff29b2 100644
--- a/workbench/control_plane/src/components/IntegrationSetup.tsx
+++ b/workbench/control_plane/src/components/IntegrationSetup.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import type { IntegrationStatus } from "@/app/api/integrations/status/route";
 import GitHubDeviceConnect from "@/components/GitHubDeviceConnect";
@@ -397,12 +398,9 @@ export default function IntegrationSetup({
     return (
       <div className="flex flex-col items-center justify-center h-full gap-4">
         <p className="text-success text-sm">All integrations are configured.</p>
-        <button
-          onClick={onComplete}
-          className="px-4 py-2 rounded-lg bg-primary hover:opacity-90 text-sm text-primary-foreground transition-colors"
-        >
+        <Button size="none" layout="" onClick={onComplete} className="px-4 py-2 text-sm">
           Start chatting
-        </button>
+        </Button>
       </div>
     );
   }
diff --git a/workbench/control_plane/src/components/ProviderCard.tsx b/workbench/control_plane/src/components/ProviderCard.tsx
index d16af6dd..dd0b9f9b 100644
--- a/workbench/control_plane/src/components/ProviderCard.tsx
+++ b/workbench/control_plane/src/components/ProviderCard.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import { useState } from "react";
 import {
   type ProviderInfo,
@@ -347,13 +348,9 @@ export default function ProviderCard({
           </div>
           {keyError && <p className="text-xs text-destructive">{keyError}</p>}
           <div className="flex gap-2">
-            <button
-              onClick={handleSave}
-              disabled={saving || !keyVal.trim()}
-              className="rounded-lg bg-primary px-3 py-1 text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40 tech-transition"
-            >
+            <Button size="none" layout="" onClick={handleSave} disabled={saving || !keyVal.trim()} className="px-3 py-1 text-xs">
               {saving ? "Saving & restarting LiteLLM…" : "Save & apply"}
-            </button>
+            </Button>
             <button
               onClick={() => { setEditing(false); setKeyVal(""); setKeyError(null); }}
               disabled={saving}
diff --git a/workbench/control_plane/src/components/ThemeToggle.tsx b/workbench/control_plane/src/components/ThemeToggle.tsx
index ed589514..5ae9157e 100644
--- a/workbench/control_plane/src/components/ThemeToggle.tsx
+++ b/workbench/control_plane/src/components/ThemeToggle.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
@@ -28,14 +29,9 @@ export default function ThemeToggle() {
   const isDark = theme === "dark";
 
   return (
-    <button
-      onClick={() => setTheme(isDark ? "light" : "dark")}
-      className="rounded-lg p-1.5 text-muted-foreground hover:bg-secondary hover:text-foreground tech-transition"
-      aria-label={isDark ? "Switch to light theme" : "Switch to dark theme"}
-      title={isDark ? "Light mode" : "Dark mode"}
-    >
+    <Button variant="ghost" size="icon-sm" layout="" onClick={() => setTheme(isDark ? "light" : "dark")} aria-label={isDark ? "Switch to light theme" : "Switch to dark theme"} title={isDark ? "Light mode" : "Dark mode"}>
       {isDark ? <Icon name="Sun" size={15} /> : <Icon name="Moon" size={15} />}
-    </button>
+    </Button>
   );
 }
 
@@ -57,15 +53,12 @@ export function ThemeToggleMenuItem({ onClick }: { onClick?: () => void }) {
   const isDark = theme === "dark";
 
   return (
-    <button
-      onClick={() => {
+    <Button variant="ghost" size="none" layout="flex items-center" onClick={() => {
         setTheme(isDark ? "light" : "dark");
         onClick?.();
-      }}
-      className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm text-muted-foreground hover:bg-secondary hover:text-foreground tech-transition"
-    >
+      }} className="w-full gap-3 px-3 py-2.5 text-sm">
       {isDark ? <Icon name="Sun" size={16} className="shrink-0" /> : <Icon name="Moon" size={16} className="shrink-0" />}
       {isDark ? "Light mode" : "Dark mode"}
-    </button>
+    </Button>
   );
 }
diff --git a/workbench/control_plane/src/components/TierCard.tsx b/workbench/control_plane/src/components/TierCard.tsx
index 1e5d7ea6..d992b43b 100644
--- a/workbench/control_plane/src/components/TierCard.tsx
+++ b/workbench/control_plane/src/components/TierCard.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import { useState } from "react";
 import {
   type TierInfo,
@@ -92,19 +93,12 @@ export default function TierCard({
           </div>
         </div>
         <div className="flex gap-2 shrink-0">
-          <button
-            onClick={handleTest}
-            disabled={testing || !tier.provider_configured}
-            className="rounded-lg px-3 py-1.5 text-xs border border-border text-muted-foreground hover:text-foreground hover:border-primary/30 disabled:opacity-40 tech-transition"
-          >
+          <Button variant="secondary" size="none" layout="" onClick={handleTest} disabled={testing || !tier.provider_configured} className="px-3 py-1.5 text-xs">
             {testing ? "Testing…" : "Test"}
-          </button>
-          <button
-            onClick={() => { setEditing((e) => !e); setTestResult(null); }}
-            className="rounded-lg px-3 py-1.5 text-xs border border-border text-muted-foreground hover:text-foreground hover:border-primary/30 tech-transition"
-          >
+          </Button>
+          <Button variant="secondary" size="none" layout="" onClick={() => { setEditing((e) => !e); setTestResult(null); }} className="px-3 py-1.5 text-xs">
             {editing ? "Cancel" : "Edit"}
-          </button>
+          </Button>
         </div>
       </div>
 
@@ -194,13 +188,9 @@ export default function TierCard({
             >
               Cancel
             </button>
-            <button
-              onClick={handleSave}
-              disabled={saving || !selectedModel}
-              className="rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40 tech-transition"
-            >
+            <Button size="none" layout="" onClick={handleSave} disabled={saving || !selectedModel} className="px-3 py-1.5 text-xs">
               {saving ? "Saving…" : "Save"}
-            </button>
+            </Button>
           </div>
         </div>
       )}
diff --git a/workbench/control_plane/src/components/ToolCardShell.tsx b/workbench/control_plane/src/components/ToolCardShell.tsx
index 92a50305..ae3ad3f3 100644
--- a/workbench/control_plane/src/components/ToolCardShell.tsx
+++ b/workbench/control_plane/src/components/ToolCardShell.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useState } from "react";
 
@@ -29,26 +30,18 @@ export function ToolCardShell({
   return (
     <div className="rounded-lg border border-border bg-card/40 overflow-hidden">
       <div className="flex items-center gap-1.5 px-2.5 py-1.5">
-        <button
-          onClick={() => setCollapsed((c) => !c)}
-          className="flex items-center gap-1.5 flex-1 min-w-0 text-left text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
-        >
+        <Button variant="text" size="none" layout="flex items-center" onClick={() => setCollapsed((c) => !c)} className="gap-1.5 flex-1 min-w-0 text-left text-xs">
           <Icon name="ChevronDown"
             size={12}
             className={`flex-shrink-0 transition-transform ${collapsed ? "-rotate-90" : ""}`}
           />
           {icon}
           <span className="truncate">{title}</span>
-        </button>
+        </Button>
         {onDismiss && (
-          <button
-            onClick={onDismiss}
-            title="Dismiss"
-            aria-label="Dismiss"
-            className="p-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors flex-shrink-0"
-          >
+          <Button variant="ghost" size="none" radius="keep" layout="" onClick={onDismiss} title="Dismiss" aria-label="Dismiss" className="p-0.5 rounded flex-shrink-0">
             <Icon name="X" size={12} />
-          </button>
+          </Button>
         )}
       </div>
       {!collapsed && <div className="px-2.5 pb-2.5">{children}</div>}
diff --git a/workbench/control_plane/src/components/email/EmailToolCards.tsx b/workbench/control_plane/src/components/email/EmailToolCards.tsx
index 9b98ec38..893fe170 100644
--- a/workbench/control_plane/src/components/email/EmailToolCards.tsx
+++ b/workbench/control_plane/src/components/email/EmailToolCards.tsx
@@ -22,6 +22,7 @@
  * current selection — so they work in the chat app too.
  */
 
+import Button from "@/components/ui/Button";
 import AppIcon from "@/components/Icon";
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
@@ -564,14 +565,10 @@ function DraftResultCard({
               {state === "saving" ? <AppIcon name="Loader2" size={11} className="animate-spin" /> : <AppIcon name="PenLine" size={11} />}
               Save to Drafts
             </button>
-            <button
-              onClick={send}
-              disabled={!canAct || state === "saving" || state === "sending"}
-              className="flex items-center gap-1 text-[10px] px-2 py-1 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
-            >
+            <Button size="none" radius="keep" layout="flex items-center" onClick={send} disabled={!canAct || state === "saving" || state === "sending"} className="gap-1 text-[10px] px-2 py-1 rounded-md">
               {state === "sending" ? <AppIcon name="Loader2" size={11} className="animate-spin" /> : <AppIcon name="Send" size={11} />}
               Send
-            </button>
+            </Button>
           </>
         )}
         {state === "error" && (
@@ -1378,30 +1375,15 @@ function EmailRow({
                   <AppIcon name="Tag" size={11} />
                 )}
               </button>
-              <button
-                onClick={markRead}
-                title="Mark as read"
-                aria-label="Mark as read"
-                className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary"
-              >
+              <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={markRead} title="Mark as read" aria-label="Mark as read" className="rounded">
                 <AppIcon name="MailOpen" size={11} />
-              </button>
-              <button
-                onClick={archive}
-                title="Archive"
-                aria-label="Archive"
-                className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary"
-              >
+              </Button>
+              <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={archive} title="Archive" aria-label="Archive" className="rounded">
                 <AppIcon name="Archive" size={11} />
-              </button>
-              <button
-                onClick={() => openEmail(row.id)}
-                title="Open in inbox"
-                aria-label="Open in inbox"
-                className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary"
-              >
+              </Button>
+              <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={() => openEmail(row.id)} title="Open in inbox" aria-label="Open in inbox" className="rounded">
                 <AppIcon name="ExternalLink" size={11} />
-              </button>
+              </Button>
             </>
           )}
         </div>
diff --git a/workbench/control_plane/src/components/room/PresenceRail.tsx b/workbench/control_plane/src/components/room/PresenceRail.tsx
index fa01bf46..80fcdb53 100644
--- a/workbench/control_plane/src/components/room/PresenceRail.tsx
+++ b/workbench/control_plane/src/components/room/PresenceRail.tsx
@@ -14,6 +14,7 @@
  * reading it.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useState } from "react";
 import { AgentAvatar, useAgentAvatars } from "@/components/AgentAvatar";
@@ -104,13 +105,9 @@ export function PresenceRail({
   return (
     <aside className="flex w-full flex-col gap-5 overflow-y-auto border-l border-border bg-sidebar px-3 py-4 text-sm lg:w-72">
       {onClose && (
-        <button
-          onClick={onClose}
-          className="self-end rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground lg:hidden"
-          aria-label="Close room panel"
-        >
+        <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={onClose} aria-label="Close room panel" className="self-end rounded-md lg:hidden">
           <Icon name="X" className="h-4 w-4" />
-        </button>
+        </Button>
       )}
 
       {/* ── People ───────────────────────────────────────────────────────── */}
@@ -179,13 +176,9 @@ export function PresenceRail({
         <h3 className="mb-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-faint">
           Agents here
           {room.you.canManage && addable.length > 0 && (
-            <button
-              onClick={() => setAdding((v) => !v)}
-              className="ml-auto rounded-md p-0.5 text-muted-foreground hover:bg-secondary hover:text-foreground"
-              title="Add an agent to this room"
-            >
+            <Button variant="ghost" size="none" radius="keep" layout="" onClick={() => setAdding((v) => !v)} title="Add an agent to this room" className="ml-auto rounded-md p-0.5">
               <Icon name="Plus" className="h-3.5 w-3.5" />
-            </button>
+            </Button>
           )}
         </h3>
 
@@ -233,19 +226,15 @@ export function PresenceRail({
           <ul className="mt-1 max-h-48 space-y-0.5 overflow-y-auto rounded-lg border border-border bg-background p-1">
             {addable.map((name) => (
               <li key={name}>
-                <button
-                  disabled={busy !== null}
-                  onClick={() =>
+                <Button variant="ghost" size="none" radius="keep" layout="flex items-center" disabled={busy !== null} onClick={() =>
                     act(name, async () => {
                       await addRoomAgent(room.sessionId, name, "mentioned");
                       setAdding(false);
                     })
-                  }
-                  className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] text-muted-foreground hover:bg-secondary hover:text-foreground disabled:opacity-50"
-                >
+                  } className="w-full gap-2 rounded-md px-2 py-1.5 text-left text-[13px]">
                   <Icon name="UserPlus" className="h-3 w-3" />
                   {name}
-                </button>
+                </Button>
               </li>
             ))}
           </ul>
diff --git a/workbench/control_plane/src/components/room/ShareSheet.tsx b/workbench/control_plane/src/components/room/ShareSheet.tsx
index 0fbaf982..b559ce43 100644
--- a/workbench/control_plane/src/components/room/ShareSheet.tsx
+++ b/workbench/control_plane/src/components/room/ShareSheet.tsx
@@ -19,6 +19,7 @@
  * mysterious failure three turns later.
  */
 
+import Button from "@/components/ui/Button";
 import Icon from "@/components/Icon";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
@@ -123,13 +124,9 @@ export function ShareSheet({
               {room.title || "Untitled"} · everyone you add reads the transcript
             </p>
           </div>
-          <button
-            onClick={onClose}
-            className="rounded-md p-1 text-muted-foreground hover:bg-secondary hover:text-foreground"
-            aria-label="Close"
-          >
+          <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={onClose} aria-label="Close" className="rounded-md">
             <Icon name="X" className="h-4 w-4" />
-          </button>
+          </Button>
         </header>
 
         <div className="max-h-[70vh] overflow-y-auto px-5 py-4">
diff --git a/workbench/control_plane/src/components/tasks/TaskToolCards.tsx b/workbench/control_plane/src/components/tasks/TaskToolCards.tsx
index 2eb253e3..01defd8e 100644
--- a/workbench/control_plane/src/components/tasks/TaskToolCards.tsx
+++ b/workbench/control_plane/src/components/tasks/TaskToolCards.tsx
@@ -22,6 +22,7 @@
  * `full_id: <uuid>` (lists) or `(id: <uuid>)` (schedules) for exactly this.
  */
 
+import Button from "@/components/ui/Button";
 import AppIcon from "@/components/Icon";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
@@ -211,22 +212,12 @@ function TaskRowView({ row }: { row: TaskRow }) {
           <AppIcon name="Loader2" size={12} className="animate-spin text-muted-foreground mx-1" />
         ) : (
           <>
-            <button
-              onClick={complete}
-              title="Mark done"
-              aria-label="Mark done"
-              className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary"
-            >
+            <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={complete} title="Mark done" aria-label="Mark done" className="rounded">
               <AppIcon name="CheckCircle2" size={11} />
-            </button>
-            <button
-              onClick={() => openTask(row.id)}
-              title="Open in Tasks"
-              aria-label="Open in Tasks"
-              className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-secondary"
-            >
+            </Button>
+            <Button variant="ghost" size="icon-xs" radius="keep" layout="" onClick={() => openTask(row.id)} title="Open in Tasks" aria-label="Open in Tasks" className="rounded">
               <AppIcon name="ExternalLink" size={11} />
-            </button>
+            </Button>
           </>
         )}
       </div>
diff --git a/workbench/control_plane/src/components/ui/Button.tsx b/workbench/control_plane/src/components/ui/Button.tsx
index df7f10ed..72b8351d 100644
--- a/workbench/control_plane/src/components/ui/Button.tsx
+++ b/workbench/control_plane/src/components/ui/Button.tsx
@@ -21,8 +21,9 @@
 
 import Icon from "@/components/Icon";
 
-export type ButtonVariant = "primary" | "secondary" | "ghost" | "destructive";
-export type ButtonSize = "sm" | "md" | "lg" | "icon";
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "destructive" | "text";
+
+export type ButtonSize = "sm" | "md" | "lg" | "icon-xs" | "icon-sm" | "icon" | "none";
 
 /**
  * Colour per variant. `cc-button-filled` adds the theme's stroke on solid
@@ -34,16 +35,28 @@ const VARIANTS: Record<ButtonVariant, string> = {
     "border border-border text-muted-foreground hover:text-foreground hover:border-primary/30",
   ghost: "text-muted-foreground hover:bg-secondary hover:text-foreground",
   destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20",
+  /** Bare text action — no surface, no border. Common in dense toolbars. */
+  text: "text-muted-foreground hover:text-foreground",
 };
 
-/** Geometry per size — the three shapes that already existed in the app. */
+/**
+ * Geometry per size. Three icon sizes rather than one because the app
+ * genuinely uses three; collapsing them would resize ~100 existing controls.
+ */
 const SIZES: Record<ButtonSize, string> = {
   sm: "gap-1 px-2.5 py-1.5 text-[12px]",
   md: "gap-1.5 px-3 py-1.5 text-xs",
   lg: "gap-1.5 px-3 sm:px-4 py-2 text-sm",
+  "icon-xs": "p-1",
+  "icon-sm": "p-1.5",
   icon: "p-2",
+  /** Caller supplies its own padding, gap and text size. */
+  none: "",
 };
 
+/** Display and alignment a normal button wants. */
+const LAYOUT_DEFAULT = "inline-flex items-center justify-center";
+
 export type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className"> & {
   variant?: ButtonVariant;
   size?: ButtonSize;
@@ -55,6 +68,26 @@ export type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "c
    * part everyone forgets, and a double-submit is a real bug.
    */
   loading?: boolean;
+  /**
+   * Whether the button takes the theme's button radius.
+   *
+   * `keep` omits it so an explicit `rounded-*` in `className` wins — for
+   * controls that predate the primitive and use a radius unrelated to the
+   * theme token. Adopting the primitive should give them the theme's label
+   * treatment, state layer and focus ring WITHOUT resizing their corners.
+   * Prefer `theme` for anything new.
+   */
+  radius?: "theme" | "keep";
+  /**
+   * Display and alignment classes, REPLACING the default.
+   *
+   * A prop rather than something `className` can override, because Tailwind
+   * cannot: `justify-center` and `justify-start` have equal specificity, so
+   * which applies depends on their order in the generated stylesheet, not the
+   * class attribute. An empty string is meaningful too — a bare `<button>` is
+   * `inline-block`, and forcing `inline-flex` on one moves its content.
+   */
+  layout?: string;
   /** Extra classes for layout only — never for colour, radius or weight. */
   className?: string;
   children?: React.ReactNode;
@@ -65,6 +98,8 @@ export default function Button({
   size = "md",
   icon,
   loading = false,
+  radius = "theme",
+  layout = LAYOUT_DEFAULT,
   disabled,
   className = "",
   children,
@@ -75,7 +110,7 @@ export default function Button({
     <button
       {...rest}
       disabled={disabled || loading}
-      className={`cc-control cc-button inline-flex items-center justify-center disabled:cursor-not-allowed disabled:opacity-50 ${VARIANTS[variant]} ${SIZES[size]} ${className}`}
+      className={`cc-control ${radius === "theme" ? "cc-button" : ""} ${layout} disabled:cursor-not-allowed disabled:opacity-50 ${VARIANTS[variant]} ${SIZES[size]} ${className}`}
     >
       {loading ? (
         <Icon name="Loader2" size={iconSize} className="animate-spin" />

From 1ed1fa6505c7caa8876acde2cf849361f58afff5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 6 Aug 2026 17:44:17 +0000
Subject: [PATCH 08/10] chore: drop the one-off button migration script

It sat in the app root next to package.json, and hardcoded an absolute path
to this checkout, so it would not run for anyone else. The approach and its
self-audit are recorded in the migration commit; re-deriving it is cheaper
than maintaining a broken copy.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SyTtr9JJXCS8xNkzW5Fny5
---
 workbench/control_plane/codemod-buttons.mjs | 299 --------------------
 1 file changed, 299 deletions(-)
 delete mode 100644 workbench/control_plane/codemod-buttons.mjs

diff --git a/workbench/control_plane/codemod-buttons.mjs b/workbench/control_plane/codemod-buttons.mjs
deleted file mode 100644
index 7b6e8a8c..00000000
--- a/workbench/control_plane/codemod-buttons.mjs
+++ /dev/null
@@ -1,299 +0,0 @@
-/**
- * Migrate hand-rolled `<button>` elements onto the shared <Button> primitive.
- *
- * STRICT BY CONSTRUCTION. Unlike the icon migration, this one changes how
- * things LOOK, so a wrong guess is a visual regression somebody notices weeks
- * later. A button is only converted when its class list decomposes exactly
- * into (a) one recognised variant, (b) one recognised size, and (c) layout
- * classes that <Button> does not own. Anything else — a conditional
- * className, an unrecognised class, a card-style tile — is SKIPPED and
- * reported, never approximated.
- *
- * Run with --dry to classify without writing.
- */
-
-import { readFileSync, writeFileSync } from "node:fs";
-import { execSync } from "node:child_process";
-import ts from "typescript";
-
-const DRY = process.argv.includes("--dry");
-const ROOT = "/home/user/CommandCenter/workbench/control_plane";
-
-const EXCLUDE = new Set(["src/components/ui/Button.tsx"]);
-
-/**
- * Classes <Button> emits itself. Present-or-absent is fine; what matters is
- * that seeing one does not disqualify a button, because the primitive will
- * re-emit an equivalent.
- */
-const OWNED = new Set([
-  "rounded-lg", "tech-transition", "transition-colors",
-  "transition-all", "font-medium", "cursor-pointer",
-  "disabled:opacity-50", "disabled:opacity-40", "disabled:opacity-60",
-  "disabled:cursor-not-allowed",
-]);
-
-/**
- * Display and alignment travel through the `layout` prop, never className:
- * Tailwind cannot override `justify-center` with `justify-start` from a class
- * attribute, because the two have equal specificity and the stylesheet's order
- * decides. Reproducing the original's layout exactly is what keeps a
- * full-width, left-aligned menu item left-aligned.
- */
-const LAYOUT_DEFAULT = "inline-flex items-center justify-center";
-const isLayoutClass = (c) =>
-  c === "flex" || c === "inline-flex" || /^(items-|justify-)/.test(c);
-
-/** Colour signatures → variant. Every listed class must be present. */
-const VARIANTS = [
-  // Ordered most-specific first: `ghost` and `text` share a colour, and the
-  // one with the extra hover surface must win.
-  { name: "primary", need: ["bg-primary", "text-primary-foreground"],
-    optional: ["hover:opacity-90"] },
-  { name: "destructive", need: ["bg-destructive/10", "text-destructive"],
-    optional: ["hover:bg-destructive/20"] },
-  { name: "secondary", need: ["border", "border-border", "text-muted-foreground"],
-    optional: ["hover:text-foreground", "hover:border-primary/30"] },
-  { name: "ghost", need: ["text-muted-foreground", "hover:bg-secondary"],
-    optional: ["hover:text-foreground"] },
-  { name: "text", need: ["text-muted-foreground", "hover:text-foreground"], optional: [] },
-];
-
-/**
- * Size signatures, DERIVED from what <Button> actually emits (see
- * BUTTON_SIZES below). Hand-written need-lists drifted from the component and
- * let a gapless button match `md`, which silently added `gap-1.5` between its
- * icon and label. Deriving them makes that impossible.
- */
-const TEXT_SIZES = ["text-xs", "text-sm", "text-[12px]", "text-[11px]", "text-[10px]", "text-base"];
-
-/**
- * Classify a class list into (variant, size, layout, radius, leftover).
- *
- * EXACT matching on every visible axis. An earlier version matched a variant
- * when its required classes were merely PRESENT, with a permissive list of
- * "optional" hovers — and a static diff of all 404 conversions showed that
- * silently changed things: a button whose hover was `hover:bg-secondary`
- * acquired `hover:text-foreground hover:border-primary/30` instead, `px-4`
- * became `px-3 sm:px-4`, and buttons that were plain `inline-block` gained
- * `inline-flex items-center justify-center gap-1.5`. Requiring set EQUALITY is
- * what makes the migration provably invisible.
- */
-const eq = (a, b) => a.size === b.size && [...a].every((c) => b.has(c));
-
-/** Alternate spellings of the same effect, normalised before comparison. */
-const NORMALISE = new Map([
-  ["hover:bg-primary/90", "hover:opacity-90"],
-  ["hover:opacity-80", "hover:opacity-90"],
-  ["transition-colors", "tech-transition"],
-  ["transition-all", "tech-transition"],
-]);
-const norm = (c) => NORMALISE.get(c) ?? c;
-
-const isColour = (c) =>
-  /^(bg-|border$|border-(?!width))/.test(c) ||
-  (/^text-/.test(c) && !/^text-(xs|sm|base|lg|\[|left|center|right)/.test(c)) ||
-  c.startsWith("hover:");
-const isGeometry = (c) =>
-  /^(p|px|py|pt|pb|pl|pr)-/.test(c) || /^gap-/.test(c) ||
-  /^text-(xs|sm|base|lg|\[)/.test(c) || /^sm:(px|py|p)-/.test(c);
-const isRadius = (c) => /^rounded(-|$)/.test(c);
-
-function classify(classes) {
-  const colour = new Set(classes.filter(isColour).map(norm));
-  const geometry = new Set(classes.filter(isGeometry));
-  const layoutClasses = classes.filter(isLayoutClass);
-  const radiusClass = classes.find(isRadius);
-
-  const variant = VARIANTS.find((v) =>
-    eq(new Set([...v.need, ...(v.optional ?? [])].map(norm)), colour),
-  );
-  if (!variant) return { skip: "no exact variant match" };
-
-  let size = SIZES.find((s) => eq(new Set(s.need), geometry));
-  if (!size) {
-    // Bespoke geometry: the primitive supplies none and the original's
-    // padding/gap/text travel through className untouched.
-    if (!geometry.size) return { skip: "no geometry" };
-    size = { name: "none", need: [...geometry], keepPadding: true };
-  }
-
-  // `rounded-lg` is the theme radius, which `cc-button` reproduces. Anything
-  // else must be preserved verbatim, or corners change size.
-  const keepRadius = Boolean(radiusClass) && radiusClass !== "rounded-lg";
-
-  const consumed = new Set([
-    ...variant.need, ...(variant.optional ?? []),
-    ...classes.filter(isColour),
-    ...(size.keepPadding ? [] : size.need),
-    ...(size.keepPadding ? [] : [...geometry]),
-    ...OWNED, ...layoutClasses,
-    ...(keepRadius ? [] : [radiusClass].filter(Boolean)),
-  ]);
-  const leftover = classes.filter((c) => !consumed.has(c));
-
-  const LAYOUT_OK = /^(w-|h-|min-w-|max-w-|min-h-|mt-|mb-|ml-|mr-|mx-|my-|self-|flex-|grow|shrink|order-|col-|row-|whitespace-|truncate|text-left|text-center|text-right|relative|absolute|z-|sm:|md:|lg:|overflow-|leading-|font-)/;
-  const preserved = new Set([
-    ...(keepRadius && radiusClass ? [radiusClass] : []),
-    ...(size.keepPadding ? size.need : []),
-  ]);
-  const unknown = leftover.filter((c) => !LAYOUT_OK.test(c) && !preserved.has(c));
-  if (unknown.length) return { skip: `unknown classes: ${unknown.slice(0, 3).join(" ")}` };
-
-  // Layout is reproduced EXACTLY, including "the original had none" — a bare
-  // <button> is inline-block, and forcing inline-flex on it moves its content.
-  const layout = layoutClasses.join(" ");
-
-  return { variant: variant.name, size: size.name, leftover, keepRadius, layout };
-}
-
-const files = execSync(`grep -rl '<button' src --include=*.tsx`, { cwd: ROOT, encoding: "utf8" })
-  .split("\n").filter(Boolean).filter((f) => !EXCLUDE.has(f));
-
-/**
- * Self-audit. The codemod knows exactly which original produced which
- * conversion, so it — not an after-the-fact matcher — is the right place to
- * prove the rewrite is invisible. Reconstruct what <Button> will emit and diff
- * it against the original on every axis a user can see.
- */
-const BUTTON_VARIANTS = {
-  primary: "cc-button-filled bg-primary text-primary-foreground hover:opacity-90",
-  secondary: "border border-border text-muted-foreground hover:text-foreground hover:border-primary/30",
-  ghost: "text-muted-foreground hover:bg-secondary hover:text-foreground",
-  destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20",
-  text: "text-muted-foreground hover:text-foreground",
-};
-const BUTTON_SIZES = {
-  sm: "gap-1 px-2.5 py-1.5 text-[12px]",
-  md: "gap-1.5 px-3 py-1.5 text-xs",
-  lg: "gap-1.5 px-3 sm:px-4 py-2 text-sm",
-  "icon-xs": "p-1", "icon-sm": "p-1.5", icon: "p-2", none: "",
-};
-const SIZES = Object.entries(BUTTON_SIZES)
-  .filter(([name]) => name !== "none")
-  .map(([name, cls]) => ({
-    name,
-    need: cls.split(/\s+/).filter(Boolean),
-    // An icon button carries padding and no text size; without this a `p-2`
-    // button with `text-xs` would match `icon` and lose its text sizing.
-    forbid: name.startsWith("icon") ? TEXT_SIZES : [],
-  }));
-
-const AXES = {
-  display: (c) => c === "flex" || c === "inline-flex",
-  align: (c) => /^(items-|justify-)/.test(c),
-  padding: (c) => /^(p|px|py|pt|pb|pl|pr)-/.test(c) || /^sm:(px|py|p)-/.test(c),
-  gap: (c) => /^gap-/.test(c),
-  textSize: (c) => /^text-(xs|sm|base|lg|\[)/.test(c),
-  radius: (c) => /^rounded(-|$)/.test(c) || c === "cc-button",
-  colour: isColour,
-};
-const RADIUS_EQUIVALENT = (missing, added) =>
-  missing.every((c) => c === "rounded-lg") && added.every((c) => c === "cc-button");
-
-const audit = [];
-function auditConversion(rel, original, r) {
-  const emitted = [
-    "cc-control",
-    ...(r.keepRadius ? [] : ["cc-button"]),
-    ...r.layout.split(/\s+/),
-    ...BUTTON_VARIANTS[r.variant].split(/\s+/),
-    ...BUTTON_SIZES[r.size].split(/\s+/),
-    ...r.leftover,
-  ].filter(Boolean);
-
-  for (const [axis, test] of Object.entries(AXES)) {
-    const a = new Set(original.filter(test).map(norm));
-    const b = new Set(emitted.filter(test).map(norm));
-    const missing = [...a].filter((c) => !b.has(c));
-    const added = [...b].filter((c) => !a.has(c));
-    if (!missing.length && !added.length) continue;
-    if (axis === "radius" && RADIUS_EQUIVALENT(missing, added)) continue;
-    audit.push(`${rel}\n    ${axis}: -[${missing.join(" ")}] +[${added.join(" ")}]\n    was: ${original.join(" ")}`);
-  }
-}
-
-const stats = { converted: 0, files: 0 };
-const skips = {};
-const note = (why) => { skips[why] = (skips[why] ?? 0) + 1; };
-
-for (const rel of files) {
-  const path = `${ROOT}/${rel}`;
-  const original = readFileSync(path, "utf8");
-  const sf = ts.createSourceFile(rel, original, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
-  const edits = [];
-
-  const handle = (open, closeTag) => {
-    const attrs = open.attributes.properties;
-    const cn = attrs.find(
-      (a) => ts.isJsxAttribute(a) && a.name.getText(sf) === "className",
-    );
-    if (!cn) { note("no className"); return; }
-    // Only a plain string literal is safe: a template or expression usually
-    // encodes a selected/active state the primitive knows nothing about.
-    const init = cn.initializer;
-    if (!init || !ts.isStringLiteral(init)) { note("dynamic className"); return; }
-
-    const result = classify(init.text.split(/\s+/).filter(Boolean));
-    if (result.skip) { note(result.skip); return; }
-
-    const keep = attrs
-      .filter((a) => a !== cn)
-      .map((a) => a.getText(sf))
-      .join(" ");
-    const cls = result.leftover.length ? ` className="${result.leftover.join(" ")}"` : "";
-    const props =
-      `${result.variant === "primary" ? "" : ` variant="${result.variant}"`}` +
-      `${result.size === "md" ? "" : ` size="${result.size}"`}` +
-      `${result.keepRadius ? ` radius="keep"` : ""}` +
-      `${result.layout === LAYOUT_DEFAULT ? "" : ` layout="${result.layout}"`}` +
-      `${keep ? " " + keep : ""}${cls}`;
-
-    auditConversion(rel, init.text.split(/\s+/).filter(Boolean), result);
-    edits.push([open.getStart(sf), open.getEnd(), `<Button${props}>`]);
-    if (closeTag) edits.push([closeTag.getStart(sf), closeTag.getEnd(), `</Button>`]);
-    stats.converted++;
-  };
-
-  const visit = (n) => {
-    if (ts.isJsxElement(n) && n.openingElement.tagName.getText(sf) === "button") {
-      handle(n.openingElement, n.closingElement);
-    } else if (ts.isJsxSelfClosingElement(n) && n.tagName.getText(sf) === "button") {
-      note("self-closing button");
-    }
-    n.forEachChild(visit);
-  };
-  sf.forEachChild(visit);
-
-  if (!edits.length) continue;
-
-  edits.sort((a, b) => b[0] - a[0]);
-  let src = original;
-  for (const [s, e, text] of edits) src = src.slice(0, s) + text + src.slice(e);
-
-  if (!/from "@\/components\/ui\/Button"/.test(src)) {
-    const anchor = src.search(/^import\s/m);
-    const line = `import Button from "@/components/ui/Button";\n`;
-    src = anchor === -1 ? line + src : src.slice(0, anchor) + line + src.slice(anchor);
-  }
-
-  // Reparse: a botched rewrite must not reach disk.
-  const check = ts.createSourceFile(rel, src, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
-  void check;
-
-  if (!DRY) writeFileSync(path, src);
-  stats.files++;
-}
-
-console.log(`converted ${stats.converted} button(s) in ${stats.files} file(s)`);
-if (audit.length) {
-  console.log(`\n!! ${audit.length} conversion(s) would CHANGE APPEARANCE:\n`);
-  for (const a of audit.slice(0, 20)) console.log("  " + a + "\n");
-  process.exitCode = 1;
-} else {
-  console.log("audit: every conversion is byte-for-byte equivalent on all visible axes");
-}
-console.log("skipped:");
-for (const [why, n] of Object.entries(skips).sort((a, b) => b[1] - a[1])) {
-  console.log(`  ${String(n).padStart(4)}  ${why}`);
-}

From d1175545df6e28d1998f6cc9ed989cc3237f2ba1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 6 Aug 2026 20:19:48 +0000
Subject: [PATCH 09/10] BO-10: one async engine/pool per process + non-blocking
 audit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes the last two BO-10 items. Every async caller now resolves to a
single engine and pool, and acb_audit.record() no longer blocks the loop.

The seam lives in packages/acb_common/acb_common/db.py, not in
gateway/db.py. acb_auth.access resolves a member's permissions from
Postgres on the request path and runs inside the gateway process, but it
cannot import gateway — so while the seam lived there the gateway had two
pools no matter how many route packages were converted. acb_common is the
one package both sides already depend on. gateway/db.py stays as a
re-export because that is the import path the routes use.

Converted the six remaining route packages (admin, apps, email, notes,
whatsapp, workflows), joining tasks and crm, plus acb_auth.access. Each
keeps its historical get_db / _get_db / _get_session_factory name as a
re-export, so ~50 call sites and every monkeypatch.setattr(<sibling>,
"_get_db", ...) in the suite are untouched. acb_auth's engine had never
carried the connect-phase or idle-in-transaction bounds added after the
2026-08-06 outage; it inherits both now.

Pool ceiling is 30 (db_pool_size 10 + db_max_overflow 20, now tunable),
unchanged from the pre-consolidation seam and deliberately not the old
~165 sum: stock Postgres allows 100 and Langfuse, LiteLLM and the
ingestion services share the server, so that sum was a budget that could
not be spent, only exceeded.

record() keeps its sync signature and dispatches to asyncio.to_thread
only when called from a running event loop; sync callers still write
inline, which is what the orchestrator's agents expect. acb_audit.drain()
is awaited last in the gateway lifespan so shutdown cannot cancel an
in-flight row — without it, non-blocking would have been a regression
against the old behaviour where the write completed before the handler
returned.

Ratchet: tests/unit/test_db_engine_seam.py fails on a new
create_async_engine call site (AST-parsed, not grepped — these modules
mention the name in prose saying they do not call it) and separately
fails when an allowlist entry stops creating an engine, so the list
cannot rot into blanket permission. Plus tests/unit/test_audit_non_blocking.py.

Left open by design and recorded in the allowlist: acb_graph/db.py's sync
create_engine (different caller set; folding it in is an acb_graph
rewrite) and email_ingestion's per-run engines (separate process,
disposed when the run ends).

Verified against a live Postgres 16 with all 148 migrations replayed:
4447 tests pass; nine consumers resolve to one engine object with real
queries executed. The 2 remaining failures need a running gateway HTTP
server and fail identically on main.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SyTtr9JJXCS8xNkzW5Fny5
---
 FOUNDATION_BUILDOUT_CHECKLIST.md              |  24 ++-
 FOUNDATION_CONTINUATION.md                    |   8 +-
 ai-company-brain/work_plan.md                 |   2 +-
 apps/services/gateway/AGENTS.md               |   2 +-
 apps/services/gateway/gateway/db.py           | 150 +++------------
 apps/services/gateway/gateway/main.py         |  12 ++
 .../gateway/gateway/routes/admin/_common.py   |  52 ++---
 .../gateway/gateway/routes/apps/_common.py    |  46 ++---
 .../gateway/gateway/routes/email/__init__.py  |   6 +-
 .../gateway/gateway/routes/email/core.py      |  51 ++---
 .../gateway/gateway/routes/notes/core.py      |  47 ++---
 .../gateway/gateway/routes/whatsapp/core.py   |  48 ++---
 .../gateway/gateway/routes/workflows/core.py  |  50 ++---
 packages/AGENTS.md                            |   4 +-
 packages/acb_audit/acb_audit/__init__.py      |   4 +-
 packages/acb_audit/acb_audit/log.py           |  68 ++++++-
 packages/acb_auth/acb_auth/access.py          |  46 ++---
 packages/acb_common/acb_common/db.py          | 136 +++++++++++++
 packages/acb_common/acb_common/settings.py    |  13 ++
 packages/acb_common/pyproject.toml            |   6 +
 tests/unit/test_audit_non_blocking.py         | 146 ++++++++++++++
 tests/unit/test_db_engine_seam.py             | 181 ++++++++++++++++++
 tests/unit/test_email_infra.py                |  10 +-
 tests/unit/test_owner_bootstrap.py            |   8 +-
 tests/unit/test_session_authority.py          |  12 +-
 uv.lock                                       |   4 +
 26 files changed, 751 insertions(+), 385 deletions(-)
 create mode 100644 packages/acb_common/acb_common/db.py
 create mode 100644 tests/unit/test_audit_non_blocking.py
 create mode 100644 tests/unit/test_db_engine_seam.py

diff --git a/FOUNDATION_BUILDOUT_CHECKLIST.md b/FOUNDATION_BUILDOUT_CHECKLIST.md
index 5428aab8..9988a74d 100644
--- a/FOUNDATION_BUILDOUT_CHECKLIST.md
+++ b/FOUNDATION_BUILDOUT_CHECKLIST.md
@@ -34,11 +34,12 @@ added**:
 |---|---|---|---|
 | 1 | ~~**`main` has no branch protection**~~ **CLOSED 2026‑08‑03** | §BO‑17 / `work_plan.md` WS‑5 | Was 404 / rulesets `[]` for months. **Now enabled:** PRs required (`required_approving_review_count: 0` — a sole maintainer must still be able to land work), `enforce_admins: true` (without it the protection is decorative for the only person who pushes), force‑pushes and deletions **blocked**. ⚠️ **`required_status_checks` is deliberately `null`** — `pr-check.yml` carries `paths-ignore: ["**.md", "ai-company-brain/**"]`, so a docs‑only PR runs **no** checks at all; requiring those contexts would leave every docs PR permanently unmergeable. To require them, first give `pr-check` an always‑runs sentinel job, then add that job as the only required context. |
 | 2 | **No *scheduled* backup; no restore ever exercised** | **§BO‑23** (below) | ◐ 2026‑08‑03: `backup_db.sh` + `restore_db.sh` + runbook shipped, and `apply_migrations.sh` now fails closed without a pre‑migration dump. **But nothing schedules it** (the systemd units need a `deploy/` write) and **no restore has been run**. Measured recovery position meanwhile: Hostinger VM images only, weekly, **2 retained, newest 5 days old**, ~58 min restore, whole‑machine granularity. **OWNER‑GATE** — install the timer, then run one restore. |
-| 3 | **DB engine sprawl** | §BO‑10 | **12 `create_async_engine` call sites across 10 modules** (+ one sync engine), 8 of them undisposed process‑lifetime singletons. One arrived per app. **This is the only item whose cost compounds per app** — fix the seam before the next app, not after. |
+| 3 | ~~**DB engine sprawl**~~ **CLOSED 2026‑08‑06** | §BO‑10 | Was **12 `create_async_engine` call sites across 10 modules** (+ one sync engine), 8 of them undisposed process‑lifetime singletons, one arriving per app — the only item whose cost compounded per app. **Now one engine and one pool for every async caller**, in `acb_common/db.py` (not the gateway: `acb_auth.access` runs in the gateway process and cannot import it). `acb_audit.record()` is non-blocking on the loop, drained at shutdown. A new engine now fails `tests/unit/test_db_engine_seam.py`. Remaining by design: `acb_graph`'s **sync** engine and `email_ingestion`'s per‑run engines. |
 
 Nothing else on this list needs to be closed first. Items 1 and 2 are risk
-containment the owner must action; item 3 is the one an agent should fix before
-the next app opens engine number 13.
+containment the owner must action; item 3 was the one an agent should fix before
+the next app opened engine number 13 — **closed 2026‑08‑06, and the seam is now
+guarded by a test rather than by a note in this file.**
 
 ---
 
@@ -177,8 +178,17 @@ was stale — corrected 2026-08-02 to match §BO‑20) were anonymous‑reachabl
 - **Dependencies:** Alembic; a one‑time baseline of the current schema (`schema.generated.sql` exists as a start).
 - **Approach:** Adopt Alembic (autogenerate baselined against `schema.generated.sql`), run it in `lifespan`/entrypoint, keep the raw files as historical. Add a CI check for unique numeric prefixes until then.
 
-### BO‑10 — Consolidate DB access to one engine/pool *(P2)* ◑
-- **Done (Session 2, 2026‑07‑13):** **every** engine now bounds the CONNECT phase so a slow/unreachable DB can't hang callers — `settings.db_connect_timeout` (default 10s) on `acb_graph.get_engine()` (`ccccdc8`, live in prod), the two gateway asyncpg engines (`1684e1a`), and the four `email_ingestion` async engines (`1ff6c0d`, local, unpushed) via `connect_args={"timeout": …}`. This makes `acb_audit.record()`'s "never block the caller" guarantee real against a hung connect. Test: `tests/unit/test_db_connect_timeout.py`.
+### BO‑10 — Consolidate DB access to one engine/pool *(P2)* ✅ **CLOSED 2026‑08‑06**
+- **Closed (2026‑08‑06).** Every async caller now resolves to ONE engine and ONE pool, and `acb_audit.record()` no longer blocks the loop. What actually shipped, and the two places it departs from the "Approach" line written below in July:
+  - **The seam lives in `packages/acb_common/acb_common/db.py`, not in `acb_graph`.** `acb_graph` was the wrong home twice over: the gateway does not depend on it (nominating it would drag pgvector/AGE into a process that needs neither), and its own engine is **sync**. `acb_common` is the one package every service and every `acb_*` library already imports. `gateway/db.py` remains as a re-export because that is the import path the route packages use.
+  - **`acb_auth.access` is why the seam had to leave the gateway.** It resolves a member's permissions from Postgres *on the request path*, runs inside the gateway process, and cannot import `gateway`. While the seam lived in `gateway/db.py` the gateway had two pools no matter how many route packages were converted — so "one engine" was unreachable by converting routes alone. Its engine had also never carried the connect-phase or `idle in transaction` bounds added after the 2026‑08‑06 outage; it inherits both now.
+  - **Converted:** the six remaining route packages (`admin`, `apps`, `email`, `notes`, `whatsapp`, `workflows`) joining `tasks` and `crm`, plus `acb_auth.access`. Each kept its historical `get_db` / `_get_db` / `_get_session_factory` name as a re-export, so ~50 call sites and every `monkeypatch.setattr(<sibling>, "_get_db", …)` in the test suite are untouched. Verified live: nine consumers, one engine object, real queries.
+  - **Pool ceiling: 30** (`settings.db_pool_size` 10 + `db_max_overflow` 20, both now tunable), unchanged from the pre-consolidation seam. Deliberately *not* raised to the old sum: the twelve pools summed to ~165 connections from one process against a stock `max_connections` of 100 that Langfuse, LiteLLM and the ingestion services also draw from — a budget that could not be spent, only exceeded.
+  - **`dispose()` in the lifespan was considered and rejected**, contradicting the July approach line. The pool's lifetime *is* the process's; a dispose seam is a way to close connections other in-flight handlers are still using. BO‑9's "nothing disposes anything" observation is correct about the fact and wrong about the remedy for this engine.
+  - **`acb_audit.record()`** keeps its sync signature (25-odd call sites, most of them sync) and dispatches the write to `asyncio.to_thread` **only when called from a running event loop**; sync callers still write inline, which is what they expect. `acb_audit.drain()` is awaited last in the gateway lifespan, so shutdown cannot cancel an in-flight row — without it, non-blocking would have been a regression against the old behaviour, where the write completed before the handler returned.
+  - **Ratchet:** `tests/unit/test_db_engine_seam.py` fails the build on a new `create_async_engine` call site (AST-parsed, not grepped — every one of these modules mentions the name in prose saying it does *not* call it) and separately fails when an allowlist entry stops creating an engine, so the allowlist cannot rot into blanket permission. Plus `tests/unit/test_audit_non_blocking.py` (loop not blocked, write genuinely off-thread, sync callers still inline, drain waits, drain is bounded).
+- **Still open, deliberately:** `packages/acb_graph/acb_graph/db.py:32`'s **sync** `create_engine`. It serves a different (sync) caller set — including `acb_audit`'s own write — and folding it in is an `acb_graph` rewrite, not this ticket. The four `email_ingestion` engines also stay: separate process, per-run lifetime, disposed when the run ends. Both are recorded in the test's allowlist with those reasons.
+- **Done earlier (Session 2, 2026‑07‑13):** **every** engine now bounds the CONNECT phase so a slow/unreachable DB can't hang callers — `settings.db_connect_timeout` (default 10s) on `acb_graph.get_engine()` (`ccccdc8`, live in prod), the two gateway asyncpg engines (`1684e1a`), and the four `email_ingestion` async engines (`1ff6c0d`, local, unpushed) via `connect_args={"timeout": …}`. This makes `acb_audit.record()`'s "never block the caller" guarantee real against a hung connect. Test: `tests/unit/test_db_connect_timeout.py`.
 - **Missing — the "three+" above was written in July and is now materially wrong; re‑measured 2026‑08‑03.** It is **12 `create_async_engine(...)` call sites across 10 modules**, plus a 13th **sync** `create_engine` in `acb_graph/db.py:32`:
   | Module | Sites | Shape |
   |---|---|---|
@@ -194,8 +204,8 @@ was stale — corrected 2026-08-02 to match §BO‑20) were anonymous‑reachabl
   | `email_ingestion/scheduler.py:142, 527, 560` | 3 | per‑call, disposed at `:424`/`:540`/`:590` |
   | `packages/acb_graph/acb_graph/db.py:32` | (1 sync) | `create_engine`, a different flavour again |
   **The eight cached singletons are never disposed** — repo‑wide, the only `engine.dispose()` calls are the four `email_ingestion` per‑call engines cleaning up after themselves, and nothing in the gateway lifespan disposes anything (BO‑9). Also still open: sync `acb_audit.record()` blocks the async loop (H11) — connect_timeout bounds the hang but the call is still synchronous.
+  *(The table above is the 2026‑08‑03 measurement, kept as the record of what was found. Every async row in it is closed as of 2026‑08‑06 — see the top of this section for what replaced them and why the July approach line was not followed literally.)*
 - **Why it moved up the list:** the count grew by *one engine per app* — `notes`, `whatsapp`, `workflows` and `apps` all arrived with their own. This is the only foundation item whose cost **compounds per app**, so it is the one to fix before the next app rather than after (see `work_plan.md` §2's "Can we go app by app?" block, exception 3).
-- **Approach:** Provide a single configured async engine in `acb_graph` (sized pool), funnel all callers through it, dispose it in the gateway lifespan, and make `acb_audit.record()` async (or always call via `to_thread`).
 
 ### BO‑11 — Decide `acb_schemas`: wire in or delete *(P2)* ✅
 - **Done:** deleted the package (0 production importers, drifted from the ORM — H10). Removed its 7 `pyproject` dependency declarations + `tool.uv.sources` entry, the smoke‑test import, and the stale "wire/API surface" comment in `acb_graph/models.py`; re‑locked. Bonus: this exposed a latent under‑declared dependency — `orchestrator/triage/schema.py` uses pydantic `EmailStr` (needs `email‑validator`) but only got it transitively via `acb_schemas`; now declared explicitly as `pydantic[email]` on the orchestrator.
@@ -1674,7 +1684,7 @@ non‑blocking style backlog.
 
 1. **P0 hardening sprint (do first):** **BO‑23 (backup/restore — scripts + runbook are AGENT‑SAFE; it is P0 because it is the only unrecoverable failure mode here)**, BO‑8 (rotate+purge secrets), BO‑2 (auth enforcement — ✅ since), BO‑1 (Action Broker), BO‑3 (mutation governance). These close the Critical trust‑boundary and governance gaps that everything else sits on.
 2. **P1 sprint:** BO‑7 (sandbox), BO‑5 (observability+cost), BO‑6 (migrations), BO‑12/BO‑14 (runtime + permission model), BO‑15 (LLM config SoT — **tier→model half only**), BO‑17/BO‑18 (gates), **BO‑20 (event‑bus consumer + job queue)**. *(BO‑19 closed 2026‑08‑03.)*
-3. **P2/P3:** BO‑9, **BO‑10 (promoted in practice — it is the one item that compounds per app; see the verdict block at the top)**, BO‑11, BO‑13, BO‑16, **BO‑21 (memory activation)**.
+3. **P2/P3:** BO‑9, ~~BO‑10~~ **(✅ closed 2026‑08‑06 — one engine/pool + non-blocking audit; it was the one item that compounded per app)**, BO‑11, BO‑13, BO‑16, **BO‑21 (memory activation)**.
 
 **Competitive‑informed items** (proven reference implementations from Hermes Agent / OpenClaw — full mapping in `ai-company-brain/specs/competitive_hardening_2026-07.md`): CH‑1→BO‑7/BO‑14, CH‑2→BO‑1, CH‑3→BO‑20, CH‑4→WBS 3.3, CH‑5→BO‑12, CH‑6→BO‑21, CH‑7→Phase‑5 Annealer, CH‑8→BO‑5. These do not change the sequencing above — they attach a "what good looks like" reference to items we already have, plus the two new items (BO‑20/BO‑21) the comparison surfaced.
 
diff --git a/FOUNDATION_CONTINUATION.md b/FOUNDATION_CONTINUATION.md
index a9cd31d6..489774f3 100644
--- a/FOUNDATION_CONTINUATION.md
+++ b/FOUNDATION_CONTINUATION.md
@@ -51,7 +51,7 @@ Non-negotiable #4 went from *false* → *enforceable on demand*:
 ### 4. The larger P1/P2 (buildable autonomously, no owner gate — good next-session work)
 - **BO-7** sandbox dynamic agent execution (security-critical, big — needs a substrate call: reuse the mutation container vs nsjail).
 - **BO-6** Alembic + auto-apply (start with the `schema_migrations` ledger, the smallest safe win).
-- **BO-10 rest:** consolidate to ONE shared async engine + make `acb_audit.record()` non-blocking (`to_thread`).
+- ~~**BO-10 rest:** consolidate to ONE shared async engine + make `acb_audit.record()` non-blocking (`to_thread`).~~ **DONE 2026-08-06** — see the BO-10 row in the table below.
 - **BO-13 finish:** decompose `run_agent_stream` (~1,600 lines) behind a `Runtime` interface — extend the harness to the **Copilot tier + idle-timeout** branches FIRST (can only be exercised on Linux/CI, not the Windows dev box — see the caveat below).
 - **BO-15** tier→model single source of truth (then **BO-16** can retire the now-load-bearing `config.yaml`), **BO-5** OTLP export, **BO-9** lifecycle, **BO-17** graduate CI gates + broaden eval paths, **BO-14** destructive-tool registry.
 
@@ -117,7 +117,7 @@ uv run python -m pytest -m integration -q              # NEW: needs the docker s
 
 **DB connection facts:**
 - Settings key: `database_url` (`packages/acb_common/acb_common/settings.py`), default `postgresql+psycopg://acb:acb_dev_change_me@localhost:5432/acb`.
-- Access layer: `acb_graph.get_session()` (sync SQLAlchemy). Async engines also exist in `routes/tasks/core.py` and `routes/email/core.py` (see BO-10).
+- Access layer: `acb_graph.get_session()` (sync SQLAlchemy) for sync callers. **Every async caller shares ONE engine and pool: `acb_common.db` (`get_db`/`get_session_factory`), re-exported as `gateway.db`** — BO-10, closed 2026-08-06. Adding a second `create_async_engine` fails `tests/unit/test_db_engine_seam.py`.
 - Migrations dir: `infra/postgres/NN_*.sql` (idempotent by hand); runner: `scripts/apply_migrations.sh`; applied on deploy by `deploy/hostinger/deploy.sh:71` and `.github/workflows/deploy.yml:163`.
 
 ---
@@ -223,7 +223,7 @@ Two runtimes coexist (native MAF + GitHub Copilot SDK) while `AGENTS.md` claims
 | **BO-4** event bus | Redis Streams producer (`apps/services/ingestion/ingestion/queue.py`) has **no consumer** — no `xreadgroup`/`xack` anywhere in the repo, so `ingestion:*` and `ingestion:dlq` are write-only and trimmed unread. **Correction (2026-08-02): "webhook→agent flow not wired" is stale** — ClickUp fans out through `ingestion.event_hooks` to `workflows.triggers.dispatch_event` → `start_run` today (commit `e20ea830`); Gmail/Zoho receivers are still TODO stubs. | `apps/services/ingestion/` | **Owner: `FOUNDATION_BUILDOUT_CHECKLIST.md` §BO-20 (= BO-4). This row is a pointer, not a second plan** — the earlier "ship it OR drop the claim" fork is withdrawn; §BO-20 owns the scope, the tickets (BO-20a–f), the acceptance criteria and the one open owner decision (§BO-20.0, the process model). Redis is already provisioned. |
 | **BO-5** observability | OTel disabled + exporter not installed + no collector | `acb_common` deps, `infra/docker-compose.yml`, `executor` kill-switch | Either add `opentelemetry-exporter-otlp` + a collector (Langfuse half-present under `obs` profile) and re-enable MAF/LiteLLM tracing, or delete the OTel deps + "OTLP-ready" claim. |
 | **BO-9** lifecycle | Fire-and-forget `ensure_future` warmups untracked/never cancelled; no engine/Neo4j dispose on shutdown; Redis per-call in ingestion | `apps/gateway/gateway/main.py`, `ingestion/queue.py` | Hold task refs + cancel after `yield`; create/dispose a shared engine + Redis pool in `lifespan`. |
-| **BO-10** DB engines ◑ | **Partial:** `connect_timeout` now on **every** engine — `acb_graph` (ccccdc8), the two gateway engines (1684e1a), and the four `email_ingestion` engines (`1ff6c0d`, local). **Left:** consolidate to ONE shared async engine; **make sync `acb_audit.record()` non-blocking** (still blocks the loop on async paths). | `acb_graph/db.py`, `routes/tasks/core.py`, `routes/email/core.py`, `email_ingestion/*`, `acb_audit/log.py` | Provide one configured async engine in `acb_graph`; funnel all callers; make `record()` async (or always `to_thread`). |
+| **BO-10** DB engines ✅ | **CLOSED 2026-08-06.** `connect_timeout` was already on every engine (`ccccdc8`/`1684e1a`/`1ff6c0d`). Both remaining items are now done. **(a) ONE async engine.** The seam lives in `acb_common/db.py` — not in `gateway/db.py`, because `acb_auth.access` resolves permissions from Postgres on the request path *inside* the gateway process and cannot import `gateway`, so a gateway-owned seam could never get below two pools. `gateway/db.py` is a re-export. All eight gateway route packages plus `acb_auth.access` resolve to it; each kept its historical `get_db`/`_get_db`/`_get_session_factory` name as a re-export so ~50 call sites and every `monkeypatch.setattr(<sibling>, "_get_db", …)` are untouched. **acb_auth's engine had never carried the 2026-08-06 connect/`idle in transaction` bounds — it does now.** Pool ceiling 30 (`db_pool_size`+`db_max_overflow`, tunable), against ~165 before: stock Postgres allows 100 and Langfuse/LiteLLM/ingestion share it, so the old sum was a budget that could not be spent, only exceeded. **(b) Non-blocking audit.** `record()` keeps its sync signature and dispatches to `asyncio.to_thread` only when called from a running loop; sync callers still write inline. `acb_audit.drain()` is awaited last in the gateway lifespan so a shutdown cannot cancel an in-flight row. Ratchet: `tests/unit/test_db_engine_seam.py` (AST-parsed, allowlisted, fails on a new engine AND on a stale allowlist entry) + `tests/unit/test_audit_non_blocking.py`. **Still open, deliberately:** `acb_graph/db.py`'s **sync** `create_engine` — a different pool for a different (sync) caller set, and converting it is an acb_graph rewrite, not this ticket. | `acb_common/db.py` (new), `gateway/db.py`, `routes/{admin,apps,email,notes,whatsapp,workflows}/*`, `acb_auth/access.py`, `acb_audit/log.py`, `gateway/main.py` | — |
 | **BO-15** LLM SoT | tier→model still defined in 4 disagreeing places; `_TIER_CONTEXT_WINDOWS` a stale copy | `acb_llm/client.py`, `infra/litellm/*.yaml`, `settings.py`, DB `model_config` | Make DB `model_config` authoritative; delete `tier_overrides.yaml`/`enabled_models.json`/proxy directives once seeded; have `settings.py` read windows from `context.py`. |
 | **BO-16** vestigial proxy | `infra/litellm/config.yaml` is a full proxy config but no proxy runs; `provider_models_cache.json` a rotting committed cache | `infra/litellm/`, `infra/provider_models_cache.json` | Reduce to the tier map (or DB); delete the cache; align `infra/AGENTS.md`. |
 | **BO-7** sandbox | Dynamic agent code runs in-process w/ full gateway privileges; deps install into shared venv | `acb_skills/loader.py` | Run agent execution in the mutation-style container / restricted subprocess w/ per-run venv. Big; security-critical. |
@@ -238,7 +238,7 @@ Two runtimes coexist (native MAF + GitHub Copilot SDK) while `AGENTS.md` claims
 The foundation is "production-ready" (the audit's bar) when:
 1. **Trust boundaries enforced:** default-deny auth (B2); Action Broker gates all outward writes (A2/B1); dynamic agent code sandboxed (BO-7); leaked secret rotated + purged from history (BO-8 residual).
 2. **Governance real:** self-mutation counter + human gate + real test gate — **done** (BO-3/F8); mutation wired into the streaming path or explicitly scoped (H5).
-3. **Data layer sound:** Alembic + auto-apply (A1); one DB engine + non-blocking audit (BO-10).
+3. **Data layer sound:** Alembic + auto-apply (A1); one DB engine + non-blocking audit — **done** (BO-10, 2026-08-06).
 4. **Observability honest:** either real OTLP export + collector, or the claim removed; cost per-tier populated — **partly done** (BO-5).
 5. **Event flow wired:** the webhook→run path is real for ClickUp already (via the event-sink registry, not Redis); the bar here is the durable half — a consumer draining `ingestion:*` with retry/DLQ, and Gmail/Zoho receivers at ClickUp parity. Owned by `FOUNDATION_BUILDOUT_CHECKLIST.md` §BO-20 (= BO-4); the "or remove the claim" alternative is withdrawn.
 6. **Executor maintainable:** `run_agent_stream` decomposed behind a `Runtime` interface, xenon ceiling ratcheted (C1).
diff --git a/ai-company-brain/work_plan.md b/ai-company-brain/work_plan.md
index 73151c24..dbae515b 100644
--- a/ai-company-brain/work_plan.md
+++ b/ai-company-brain/work_plan.md
@@ -99,7 +99,7 @@ looks. Full statements live in `FOUNDATION_BUILDOUT_CHECKLIST.md`.
 |---|---|---|---|
 | 1 | ~~**`main` has no branch protection**~~ — **CLOSED 2026-08-03** | WS-5 · checklist §BO-17 | Was `404 Branch not protected` with rulesets `[]` under both mechanisms, so every CI gate in the YAMLs was decorative. **Enabled 2026-08-03** (owner-authorised in-session): PRs required, `required_approving_review_count: 0`, **`enforce_admins: true`**, force-push and deletion blocked. Verified by reading the protection back. ⚠️ **`required_status_checks` is deliberately `null`**: `pr-check.yml` has `paths-ignore: ["**.md", "ai-company-brain/**"]`, so a docs-only PR produces **no** check-runs — requiring those contexts would make every docs PR permanently unmergeable (this row's own PR included). Tightening path: add an always-runs sentinel job to `pr-check`, then require **that** one context. |
 | 2 | **No backup / restore path** | **new: checklist §BO-23** | The only DB script that dumps anything is `scripts/dump_schema.sh`, which is `pg_dump --schema-only` (`:52`) — **structure, zero rows**. There is no `pg_restore`, no logical data dump, no WAL archiving (`archive_mode`/`wal_level`/`pgbackrest`/`wal-g` appear nowhere in `infra/` or `deploy/`), and no restore runbook. Meanwhile `scripts/apply_migrations.sh` replays **every** numbered migration ≥ `02_` on **every** deploy under `psql -v ON_ERROR_STOP=1` (`:59-74`) with no ledger and no down-migrations — 140 files today, 142 numbered files on disk. `deploy/hostinger/README.md:115` is honest that the only backup is Hostinger's **weekly whole-VPS** image and that PITR is a "later" item. Largest uncovered risk, and it scales with app count. |
-| 3 | **DB engine sprawl** | checklist §BO-10 | Measured 2026-08-03: **12 `create_async_engine(...)` call sites across 10 modules** (`acb_auth/access.py:69`; gateway `routes/{admin,apps,email,notes,tasks,whatsapp,workflows}/*core*.py`; `email_ingestion/{inbound,scheduler}.py` ×4), plus a 13th **sync** `create_engine` in `acb_graph/db.py:32`. Eight are module-level cached `_ENGINE` singletons and **none of them is disposed on shutdown** — the only `engine.dispose()` calls in the tree are the four `email_ingestion` per-call engines cleaning up after themselves. **This is the one that compounds: one engine per app, added by each app.** The next app should extend a shared seam, not add engine 13. |
+| 3 | ~~**DB engine sprawl**~~ **CLOSED 2026-08-06** | checklist §BO-10 | Measured 2026-08-03: **12 `create_async_engine(...)` call sites across 10 modules** (`acb_auth/access.py:69`; gateway `routes/{admin,apps,email,notes,tasks,whatsapp,workflows}/*core*.py`; `email_ingestion/{inbound,scheduler}.py` ×4), plus a 13th **sync** `create_engine` in `acb_graph/db.py:32`. Eight are module-level cached `_ENGINE` singletons and **none of them is disposed on shutdown** — the only `engine.dispose()` calls in the tree are the four `email_ingestion` per-call engines cleaning up after themselves. **This is the one that compounds: one engine per app, added by each app.** The next app should extend a shared seam, not add engine 13. **CLOSED 2026-08-06:** every async caller now resolves to ONE engine and pool in `packages/acb_common/acb_common/db.py` — not `acb_graph` (the gateway does not depend on it, and its engine is sync) and not `gateway/db.py` (which `acb_auth/access.py` cannot import, so a gateway-owned seam could never get below two pools in the gateway process). The six remaining route packages plus `acb_auth.access` were converted, each keeping its historical `get_db`/`_get_db`/`_get_session_factory` name as a re-export so ~50 call sites and every test monkeypatch are untouched; `gateway/db.py` is a re-export. `acb_auth`'s engine had never carried the 2026-08-06 connect/`idle in transaction` bounds — it does now. Pool ceiling 30 (tunable via `db_pool_size`/`db_max_overflow`), deliberately not the old ~165 sum, which exceeded a stock `max_connections` of 100 shared with Langfuse/LiteLLM/ingestion. `acb_audit.record()` is non-blocking on the loop (`to_thread` only when a loop is running; sync callers still inline) and `acb_audit.drain()` is awaited last in the gateway lifespan. Guarded by `tests/unit/test_db_engine_seam.py` + `tests/unit/test_audit_non_blocking.py`. Still open by design: `acb_graph/db.py`'s **sync** `create_engine` and `email_ingestion`'s per-run engines. |
 
 ### Substrate (foundation)
 
diff --git a/apps/services/gateway/AGENTS.md b/apps/services/gateway/AGENTS.md
index 2555c0d0..f9a42fb1 100644
--- a/apps/services/gateway/AGENTS.md
+++ b/apps/services/gateway/AGENTS.md
@@ -13,7 +13,7 @@ webhook receivers, OAuth callbacks, and the Control Plane API.
 
 ## Local Contracts
 
-0. db.py -- **The shared async engine seam (BO-10).** `get_engine()` / `get_session_factory()` / `get_db()`, module-level cached, SQLAlchemy's async stack imported INSIDE the functions so importing this module does not drag it into a process that never opens a connection. The engine is never disposed here: the pool's lifetime is the process's, and a `dispose()` seam would be a way to close connections other handlers are still using. **A new app package consumes this rather than adding engine thirteen** — `routes/crm` does, and `routes/tasks/core.py` was converted to it as the proof. See item 12c.
+0. db.py -- **The shared async engine seam (BO-10) — now a re-export of `acb_common.db`, which is where the seam and its reasoning live.** `get_engine()` / `get_session_factory()` / `get_db()`, module-level cached, SQLAlchemy's async stack imported INSIDE the functions so importing it does not drag it into a process that never opens a connection. The engine is never disposed: the pool's lifetime is the process's, and a `dispose()` seam would be a way to close connections other handlers are still using. **The gateway makes ZERO `create_async_engine` calls of its own** — closed 2026-08-06 by converting the last six route packages (`admin`, `apps`, `email`, `notes`, `whatsapp`, `workflows`), each of which kept its historical `get_db`/`_get_db`/`_get_session_factory` names as re-exports so ~50 call sites and every `monkeypatch.setattr(<sibling>, "_get_db", …)` in the tests are untouched. Why the seam moved OUT of the gateway: `acb_auth.access` resolves permissions from Postgres on the request path and runs *inside* this process but cannot import `gateway`, so while the seam lived here the gateway had two pools no matter how many route packages were converted — and that second engine also never carried the 2026-08-06 connect/`idle in transaction` bounds. `acb_common` is the one package both sides already depend on. Pool sizing is `db_pool_size`/`db_max_overflow` (default 10+20 = 30, unchanged from the pre-consolidation seam) because the arithmetic is deployment-wide: stock Postgres allows 100 and Langfuse/LiteLLM/ingestion share the server — the twelve old pools summed to ~165, a budget that could not be spent, only exceeded. **A new app package consumes this rather than adding an engine**, and `tests/unit/test_db_engine_seam.py` fails the build if one appears (AST-parsed, not grepped, with an allowlist that must not go stale). See item 12c.
 1. main.py -- FastAPI app factory, lifespan (key loading, model cache warmup, aiosmtpd inbound SMTP startup, background email sync scheduler, and the seven supervised loops — email sync, WhatsApp enrichment, tasks provider-sync, calendar auto-rollover, workflow schedule scanner, the BO-20a ingestion event-bus consumer `ingestion.consumer.start_ingestion_consumer` (flag-gated OFF on `INGESTION_CONSUMER`), and the CRM⟷Zoho two-way sync `routes.crm.sync_zoho.start_crm_zoho_sync` (flag-gated OFF on `CRM_ZOHO_SYNC`, and the gate lives inside that function, not here); **every one of the seven is stopped unconditionally on shutdown**, including the flag-gated ones whose loop may never have started — for the ingestion consumer that contract is pinned by `tests/unit/test_ingestion_consumer.py::test_gateway_lifespan_starts_the_consumer_and_stops_it_after_yield`, which reads `main.py` as text and asserts start-before-`yield`, stop-after, and no flag guard on the stop), /copilot/chat AG-UI endpoint (relayed through stream_relay.run_detached when thread_id present)
 2. routes/agent.py -- /agent/run, /agent/run/stream (detached: agent survives client disconnect), /agent/run/{thread_id}/reconnect (replay + live follow), /agent/webhook, agent CRUD, mutation inbox (approve/reject). Org access control: `GET /agent` filters the registry to agents the caller may run (unless they hold `agents:manage`, who see everything); all THREE run endpoints (`/run`, `/run/stream`, `/run/async`) call `assert_can_run_agent` — the filtered picker is UX, the endpoint check is the boundary of record. Registry writes (register/patch/delete/pull) need `agents:manage`. `/agent/webhook/{source}` is the fourth run path and is authenticated by HMAC-SHA256 over the raw body (`X-CC-Signature`; per-source `AGENT_WEBHOOK_SECRET_<SOURCE>` overrides the global one) — it FAILS CLOSED with 503 when no secret is configured, because it starts an agent run and is internet-reachable. The same events also fan out to workflow event triggers (`routes/workflows/triggers.dispatch_event`, best-effort) — an event can route to an agent, to workflows, or both
 3. routes/chat.py -- Chat history CRUD (Postgres-backed sessions and messages) + GET /chat/active-sessions (Redis cc:active:* scan for running agents). Authorization is MEMBERSHIP, not ownership: every predicate that used to be `WHERE user_id = :uid` now goes through `gateway/rooms.py` (`SESSION_VISIBLE_SQL` for lists, `resolve_room_access` for a single session), which is the same answer when a session has one participant. `_get_messages` also applies two room rules that are no-ops outside a room — the late-joiner waterline (`chat_session_participant.join_message_ts`) and the clearance filter (`_render_message` redacts a turn produced by a run acting on capabilities the reader does not hold). `_upsert_messages` stamps authorship SET-ONCE: the three racing writers cannot rename an author, and a human turn is always attributed to the authenticated caller, never to a client-supplied identity.
diff --git a/apps/services/gateway/gateway/db.py b/apps/services/gateway/gateway/db.py
index 86be70d5..85f9444a 100644
--- a/apps/services/gateway/gateway/db.py
+++ b/apps/services/gateway/gateway/db.py
@@ -1,126 +1,36 @@
 """The gateway's shared async database seam (BO-10).
 
-The gateway had **twelve** module-level ``create_async_engine`` call sites, one
-per app package, each with its own pool that nobody can size, drain or observe
-as a whole. The board's standing instruction is that the next app extends a
-shared seam rather than adding engine thirteen — so this module exists and
-``routes/crm`` consumes only it.
-
-This is the ``routes/tasks/core.py`` block **lifted, not redesigned**: the same
-URL coercion, the same pool sizing, the same bounded connect phase. Converting a
-consumer to it is therefore a no-op at runtime, which is the property that makes
-``routes/tasks/core.py`` usable as the proof that the seam works (D-CRM-4,
-``ai-company-brain/specs/crm_app.md`` §4). Converting the other ten call sites
-is explicitly out of scope there and is its own chore.
-
-Two rules worth keeping:
-
-* ``sqlalchemy.ext.asyncio`` is imported **inside** the functions, not at module
-  scope. Every app package does it that way and the gateway's import graph
-  depends on it — importing this module must not drag SQLAlchemy's async stack
-  into a process that never opens a connection.
-* The engine is created on first use and cached for the process. It is never
-  disposed here: the pool's lifetime is the process's, and a ``dispose()`` seam
-  would be a way to close connections other request handlers are still using.
+This module is now a **re-export of** :mod:`acb_common.db`, which is where the
+seam and all of its reasoning live. It stays here because it is the import path
+every gateway route package already uses, and because "the gateway's DB seam" is
+the name people look for.
+
+Why the seam moved out of the gateway: ``acb_auth.access`` resolves a member's
+permissions from Postgres on the request path and runs *inside* this process,
+but ``acb_auth`` cannot import ``gateway``. While the seam lived here the
+gateway had two pools no matter how many route packages were converted, so the
+ticket's "one engine/pool" could not actually be reached. ``acb_common`` is the
+one package everything already depends on, so that is where it went.
+
+The gateway makes **zero** ``create_async_engine`` calls of its own — see
+``tests/unit/test_db_engine_seam.py``, which fails the build if a new one
+appears.
 """
 
 from __future__ import annotations
 
-import os
-from typing import Any
-
-from acb_common import get_settings
-
-#: Process-wide, created on first use. Module-level rather than app-state so a
-#: background loop or a broker handler with no ``Request`` reaches the same pool.
-_ENGINE: Any = None
-_SESSION_FACTORY: Any = None
-
-
-def async_database_url() -> str:
-    """The configured database URL, coerced onto the asyncpg driver.
-
-    ``DATABASE_URL`` wins over the setting because LiteLLM's Prisma client needs
-    the plain ``postgresql://`` form in the environment, so the two disagree by
-    design and the environment is the one deploy sets.
-    """
-    settings = get_settings()
-    db_url = os.environ.get("DATABASE_URL", settings.database_url)
-    if "postgresql+psycopg" in db_url:
-        return db_url.replace("postgresql+psycopg", "postgresql+asyncpg")
-    if db_url.startswith("postgresql://"):
-        return db_url.replace("postgresql://", "postgresql+asyncpg://")
-    return db_url
-
-
-#: Ceiling on how long one of OUR sessions may sit `idle in transaction`, in ms.
-#:
-#: This is a lock-release deadline, not a performance knob. SQLAlchemy's
-#: ``AsyncSession`` opens a transaction on first ``execute()`` and holds it until
-#: commit/rollback/close, so a handler that reads a row and then awaits a slow
-#: network call is `idle in transaction` — holding an ACCESS SHARE lock — for the
-#: whole call. That is normal and fine. What is not fine is an await that never
-#: returns: on 2026-08-06 a hung LLM call pinned one such transaction for 14h44m,
-#: a migration's ``ALTER TABLE`` queued behind its lock, and because Postgres's
-#: lock queue is FIFO every later reader of that table queued behind the *waiting*
-#: ALTER. Sending mail stopped, and the pool drained behind the blocked readers.
-#:
-#: ⚠️ MUST stay comfortably above the LLM wall-clock worst case, because the email
-#: automation package legitimately awaits completions with a session open.
-#: ``acb_llm.client`` bounds one call at 3 attempts x 90s + 6s backoff ≈ 276s. At
-#: 600s a genuine retrying completion can never trip this, while a hang is capped
-#: at ten minutes instead of unbounded. Raise ``LLM_REQUEST_TIMEOUT_SECS`` and you
-#: must raise this too — that coupling is the whole reason both numbers are
-#: written down next to their reasoning.
-_IDLE_IN_TXN_TIMEOUT_MS = "600000"  # 10 minutes
-
-
-def engine_connect_args() -> dict[str, Any]:
-    """Driver-level connect args every gateway engine should share.
-
-    Two bounds, both about failing instead of hanging:
-
-    * ``timeout`` — asyncpg's CONNECT-phase ceiling, so a slow or unreachable DB
-      fails fast rather than stalling request handlers.
-    * ``idle_in_transaction_session_timeout`` — the server-side deadline above.
-      Set through asyncpg's ``server_settings`` so it rides the connection's
-      startup packet and applies to every session from this pool, with no
-      migration and no ``ALTER ROLE``. Scoping it to the app's own connections is
-      deliberate: ``pg_dump`` and the migration runner connect as the same role
-      and must NOT inherit an app-tuned deadline.
-    """
-    return {
-        "timeout": get_settings().db_connect_timeout,
-        "server_settings": {
-            "idle_in_transaction_session_timeout": _IDLE_IN_TXN_TIMEOUT_MS,
-        },
-    }
-
-
-def get_engine() -> Any:
-    """The shared pooled async engine, created on first use."""
-    global _ENGINE
-    if _ENGINE is None:
-        from sqlalchemy.ext.asyncio import create_async_engine
-
-        _ENGINE = create_async_engine(
-            async_database_url(), echo=False, pool_pre_ping=True,
-            pool_size=10, max_overflow=20, pool_recycle=1800,
-            connect_args=engine_connect_args(),
-        )
-    return _ENGINE
-
-
-def get_session_factory() -> Any:
-    """The shared ``async_sessionmaker`` over :func:`get_engine`."""
-    global _SESSION_FACTORY
-    if _SESSION_FACTORY is None:
-        from sqlalchemy.ext.asyncio import async_sessionmaker
-
-        _SESSION_FACTORY = async_sessionmaker(get_engine(), expire_on_commit=False)
-    return _SESSION_FACTORY
-
-
-async def get_db() -> Any:
-    """Return a new async session from the shared, pooled engine."""
-    return get_session_factory()()
+from acb_common.db import (
+    async_database_url,
+    engine_connect_args,
+    get_db,
+    get_engine,
+    get_session_factory,
+)
+
+__all__ = [
+    "async_database_url",
+    "engine_connect_args",
+    "get_db",
+    "get_engine",
+    "get_session_factory",
+]
diff --git a/apps/services/gateway/gateway/main.py b/apps/services/gateway/gateway/main.py
index 375d026e..6bfa0768 100644
--- a/apps/services/gateway/gateway/main.py
+++ b/apps/services/gateway/gateway/main.py
@@ -386,6 +386,18 @@ def _clone(n: str, r: str | None, lp: str | None) -> None:
     except Exception:
         pass
 
+    # Flush audit writes that are still on worker threads. `acb_audit.record`
+    # is non-blocking on the event loop (BO-10), which means an event recorded
+    # moments before shutdown is in flight rather than committed; exiting here
+    # would cancel it. Last, and after every loop above, so writes those loops
+    # made on their way out are included. Bounded internally — a wedged audit
+    # DB cannot hold the shutdown open.
+    try:
+        from acb_audit import drain as drain_audit
+        await drain_audit()
+    except Exception:
+        pass
+
     _log.info("gateway.shutdown")
 
 
diff --git a/apps/services/gateway/gateway/routes/admin/_common.py b/apps/services/gateway/gateway/routes/admin/_common.py
index 2f5c6b87..b589c484 100644
--- a/apps/services/gateway/gateway/routes/admin/_common.py
+++ b/apps/services/gateway/gateway/routes/admin/_common.py
@@ -34,7 +34,6 @@
 
 from __future__ import annotations
 
-import os
 from datetime import datetime, timezone
 from typing import Any
 
@@ -44,8 +43,13 @@
     invalidate_access,
     permission_matches,
 )
-from acb_common import get_logger, get_settings
+from acb_common import get_logger
 from fastapi import APIRouter, Depends, HTTPException
+
+# The shared gateway engine (BO-10) — see the DB section below for why the
+# names are re-exported rather than imported at each call site.
+from gateway.db import get_db  # noqa: F401
+from gateway.db import get_session_factory as _get_session_factory  # noqa: F401
 from sqlalchemy import text
 
 _log = get_logger("gateway.admin")
@@ -61,39 +65,17 @@
 NON_ASSIGNABLE_ROLES = frozenset({"agent_service"})
 
 
-# ── DB (shared pooled async engine, same recipe as routes/apps/_common.py) ───
-
-_ENGINE = None
-_SESSION_FACTORY = None
-
-
-def _get_session_factory() -> Any:
-    global _ENGINE, _SESSION_FACTORY
-    if _SESSION_FACTORY is None:
-        from sqlalchemy.ext.asyncio import (  # noqa: PLC0415
-            async_sessionmaker,
-            create_async_engine,
-        )
-
-        from gateway.db import engine_connect_args
-        settings = get_settings()
-        db_url = os.environ.get("DATABASE_URL", settings.database_url)
-        if "postgresql+psycopg" in db_url:
-            db_url = db_url.replace("postgresql+psycopg", "postgresql+asyncpg")
-        elif db_url.startswith("postgresql://"):
-            db_url = db_url.replace("postgresql://", "postgresql+asyncpg://")
-        _ENGINE = create_async_engine(
-            db_url, echo=False, pool_pre_ping=True,
-            pool_size=5, max_overflow=10, pool_recycle=1800,
-            connect_args=engine_connect_args(),
-        )
-        _SESSION_FACTORY = async_sessionmaker(_ENGINE, expire_on_commit=False)
-    return _SESSION_FACTORY
-
-
-async def get_db() -> Any:
-    """Return a new async session from the shared, pooled engine."""
-    return _get_session_factory()()
+# ── DB (the one shared gateway engine — gateway/db.py, BO-10) ────────────────
+#
+# This package used to build its own engine here, with its own pool of 5+10.
+# It now has none: `get_db` and `_get_session_factory` at the top of this module
+# are re-exports of the shared seam, so every `from ._common import get_db` in
+# this package keeps working with a single pool behind it.
+#
+# The re-export is deliberate rather than pointing each caller at `gateway.db`.
+# Sibling modules import the name from here and the tests monkeypatch it *on the
+# sibling* (`monkeypatch.setattr(groups, "get_db", ...)`), so the name has to
+# stay resolvable through this module for both to keep working.
 
 
 # ── Auth gate ───────────────────────────────────────────────────────────────
diff --git a/apps/services/gateway/gateway/routes/apps/_common.py b/apps/services/gateway/gateway/routes/apps/_common.py
index 110b5be3..857e9345 100644
--- a/apps/services/gateway/gateway/routes/apps/_common.py
+++ b/apps/services/gateway/gateway/routes/apps/_common.py
@@ -16,7 +16,6 @@
 
 import hashlib
 import json
-import os
 import re
 from collections.abc import Collection, Sequence
 from pathlib import Path
@@ -25,6 +24,10 @@
 from acb_auth import UserContext, UserRole, get_current_user
 from acb_common import get_logger, get_settings
 from fastapi import APIRouter, Depends, HTTPException
+
+# The shared gateway engine (BO-10) — see the DB section below.
+from gateway.db import get_db as _get_db
+from gateway.db import get_session_factory as _get_session_factory  # noqa: F401
 from sqlalchemy import text
 
 _log = get_logger("gateway.apps")
@@ -67,39 +70,14 @@
 DEFAULT_AI_TIER = "tier-fast"
 
 
-# ── DB (shared pooled async engine, same recipe as tasks/core.py) ────────────
-
-_ENGINE = None
-_SESSION_FACTORY = None
-
-
-def _get_session_factory() -> Any:
-    global _ENGINE, _SESSION_FACTORY
-    if _SESSION_FACTORY is None:
-        from sqlalchemy.ext.asyncio import (
-            async_sessionmaker,
-            create_async_engine,
-        )
-
-        from gateway.db import engine_connect_args
-        settings = get_settings()
-        db_url = os.environ.get("DATABASE_URL", settings.database_url)
-        if "postgresql+psycopg" in db_url:
-            db_url = db_url.replace("postgresql+psycopg", "postgresql+asyncpg")
-        elif db_url.startswith("postgresql://"):
-            db_url = db_url.replace("postgresql://", "postgresql+asyncpg://")
-        _ENGINE = create_async_engine(
-            db_url, echo=False, pool_pre_ping=True,
-            pool_size=10, max_overflow=20, pool_recycle=1800,
-            connect_args=engine_connect_args(),
-        )
-        _SESSION_FACTORY = async_sessionmaker(_ENGINE, expire_on_commit=False)
-    return _SESSION_FACTORY
-
-
-async def _get_db() -> Any:
-    """Return a new async session from the shared, pooled engine."""
-    return _get_session_factory()()
+# ── DB (the one shared gateway engine — gateway/db.py, BO-10) ────────────────
+#
+# This package used to build its own engine here with its own 10+20 pool. It now
+# has none: `_get_db` / `_get_session_factory` at the top of this module are
+# re-exports of the shared seam. The private names are kept so that every
+# `from ._common import _get_db` in this package — and every test that
+# monkeypatches `_get_db` on the sibling module it is imported into — keeps
+# working unchanged.
 
 
 # ── Auth gate ────────────────────────────────────────────────────────────────
diff --git a/apps/services/gateway/gateway/routes/email/__init__.py b/apps/services/gateway/gateway/routes/email/__init__.py
index e7fcb455..084a1ab6 100644
--- a/apps/services/gateway/gateway/routes/email/__init__.py
+++ b/apps/services/gateway/gateway/routes/email/__init__.py
@@ -19,8 +19,10 @@
 
 # Flatten submodule namespaces into the package so the historical public surface
 # (incl. private ``_helpers`` the scheduler/tests import by name) is preserved.
-# NOTE: reassigned module globals (e.g. core._ENGINE) live on their submodule;
-# read those via ``email.core.<name>``, not the flattened copy.
+# NOTE: this copies BINDINGS once, at import. A name later reassigned on its
+# submodule (or monkeypatched there by a test) diverges from the flattened copy
+# — read and patch those via ``email.<submodule>.<name>``, never through the
+# package namespace.
 for _mod in (core, transport, automation, digest):
     for _k, _v in vars(_mod).items():
         if not _k.startswith("__"):
diff --git a/apps/services/gateway/gateway/routes/email/core.py b/apps/services/gateway/gateway/routes/email/core.py
index e2150b8f..a6cd51db 100644
--- a/apps/services/gateway/gateway/routes/email/core.py
+++ b/apps/services/gateway/gateway/routes/email/core.py
@@ -17,6 +17,9 @@
 
 from acb_common import get_logger, get_settings
 from fastapi import APIRouter, HTTPException
+
+# The shared gateway engine (BO-10) — see the DB section below.
+from gateway.db import get_session_factory as _get_session_factory
 from pydantic import BaseModel
 from sqlalchemy import text
 from acb_auth import require_feature_router
@@ -380,40 +383,20 @@ async def hydrate_message_body(db: Any, message_id: str, user_email: str) -> str
         return row.body_text or ""
 
 
-_ENGINE = None
-
-
-_SESSION_FACTORY = None
-
-
-def _get_session_factory():
-    global _ENGINE, _SESSION_FACTORY
-    if _SESSION_FACTORY is None:
-        from sqlalchemy.ext.asyncio import (
-            async_sessionmaker,
-            create_async_engine,
-        )
-
-        from gateway.db import engine_connect_args
-        settings = get_settings()
-        db_url = os.environ.get("DATABASE_URL", settings.database_url)
-        if "postgresql+psycopg" in db_url:
-            db_url = db_url.replace("postgresql+psycopg", "postgresql+asyncpg")
-        elif db_url.startswith("postgresql://"):
-            db_url = db_url.replace("postgresql://", "postgresql+asyncpg://")
-        elif "+asyncpg" not in db_url and "postgresql" in db_url:
-            db_url = db_url.replace("postgresql://", "postgresql+asyncpg://")
-        _ENGINE = create_async_engine(
-            db_url, echo=False, pool_pre_ping=True,
-            pool_size=10, max_overflow=20, pool_recycle=1800,
-            # Bounds the connect phase AND how long one of our sessions may sit
-            # `idle in transaction`. This engine is the one that drained on
-            # 2026-08-06 — see gateway/db.py::engine_connect_args for why the
-            # second bound exists and why it is 10 minutes and not 5.
-            connect_args=engine_connect_args(),
-        )
-        _SESSION_FACTORY = async_sessionmaker(_ENGINE, expire_on_commit=False)
-    return _SESSION_FACTORY
+# ── DB (the one shared gateway engine — gateway/db.py, BO-10) ────────────────
+#
+# This package used to build its own engine here with its own 10+20 pool — the
+# engine that drained on 2026-08-06 behind a transaction left `idle in
+# transaction` for 14h44m. Both bounds that came out of that incident now live
+# on the shared seam (``acb_common.db.engine_connect_args``, re-exported as
+# ``gateway.db``), which is where the reasoning for the 10-minute deadline is
+# written down.
+#
+# `_get_session_factory` at the top of this module is a re-export of that seam.
+# `_get_db` stays a real function here only to keep its signature: callers pass
+# nothing today, but the parameter is part of the historical surface this
+# package flattens into ``gateway.routes.email`` (see __init__.py), and tests
+# monkeypatch `_get_db` on the sibling module they exercise.
 
 
 async def _get_db(request_id: str | None = None):
diff --git a/apps/services/gateway/gateway/routes/notes/core.py b/apps/services/gateway/gateway/routes/notes/core.py
index 362acbcf..c8cadc2b 100644
--- a/apps/services/gateway/gateway/routes/notes/core.py
+++ b/apps/services/gateway/gateway/routes/notes/core.py
@@ -16,8 +16,12 @@
 from pathlib import Path
 from typing import Any
 
-from acb_common import get_logger, get_settings
+from acb_common import get_logger
 from fastapi import APIRouter, HTTPException
+
+# The shared gateway engine (BO-10) — see the DB section below.
+from gateway.db import get_db as _get_db  # noqa: F401
+from gateway.db import get_session_factory as _get_session_factory  # noqa: F401
 from pydantic import BaseModel
 from sqlalchemy import text
 from acb_auth import require_feature_router
@@ -139,39 +143,14 @@ class PatchMeetingRequest(BaseModel):
     copilot_enabled: bool | None = None
 
 
-# ── DB (shared pooled async engine, same recipe as tasks/core.py) ────────────
-
-_ENGINE = None
-_SESSION_FACTORY = None
-
-
-def _get_session_factory():
-    global _ENGINE, _SESSION_FACTORY
-    if _SESSION_FACTORY is None:
-        from sqlalchemy.ext.asyncio import (
-            async_sessionmaker,
-            create_async_engine,
-        )
-
-        from gateway.db import engine_connect_args
-        settings = get_settings()
-        db_url = os.environ.get("DATABASE_URL", settings.database_url)
-        if "postgresql+psycopg" in db_url:
-            db_url = db_url.replace("postgresql+psycopg", "postgresql+asyncpg")
-        elif db_url.startswith("postgresql://"):
-            db_url = db_url.replace("postgresql://", "postgresql+asyncpg://")
-        _ENGINE = create_async_engine(
-            db_url, echo=False, pool_pre_ping=True,
-            pool_size=5, max_overflow=10, pool_recycle=1800,
-            connect_args=engine_connect_args(),
-        )
-        _SESSION_FACTORY = async_sessionmaker(_ENGINE, expire_on_commit=False)
-    return _SESSION_FACTORY
-
-
-async def _get_db():
-    """Return a new async session from the shared, pooled engine."""
-    return _get_session_factory()()
+# ── DB (the one shared gateway engine — gateway/db.py, BO-10) ────────────────
+#
+# This package used to build its own engine here with its own 5+10 pool. It now
+# has none: `_get_db` / `_get_session_factory` at the top of this module are
+# re-exports of the shared seam. The private names are kept so that every
+# `from .core import _get_db` in this package — and every test that
+# monkeypatches `_get_db` on the sibling module it is imported into — keeps
+# working unchanged.
 
 
 # ── Ownership — one predicate, one loader ────────────────────────────────────
diff --git a/apps/services/gateway/gateway/routes/whatsapp/core.py b/apps/services/gateway/gateway/routes/whatsapp/core.py
index 79f87a42..63f20961 100644
--- a/apps/services/gateway/gateway/routes/whatsapp/core.py
+++ b/apps/services/gateway/gateway/routes/whatsapp/core.py
@@ -9,11 +9,14 @@
 from __future__ import annotations
 
 import json
-import os
 from typing import Any
 
-from acb_common import get_logger, get_settings
+from acb_common import get_logger
 from fastapi import APIRouter, HTTPException
+
+# The shared gateway engine (BO-10) — see the DB section below.
+from gateway.db import get_db as _get_db  # noqa: F401
+from gateway.db import get_session_factory as _get_session_factory  # noqa: F401
 from pydantic import BaseModel
 from acb_auth import require_feature_router
 
@@ -113,39 +116,14 @@ class WhatsAppMessageModel(BaseModel):
     sent_at: str | None = None
 
 
-# ── DB session (own pooled engine, same pattern as email.core) ────────────────
-
-_ENGINE = None
-_SESSION_FACTORY = None
-
-
-def _get_session_factory():
-    global _ENGINE, _SESSION_FACTORY
-    if _SESSION_FACTORY is None:
-        from sqlalchemy.ext.asyncio import (
-            async_sessionmaker,
-            create_async_engine,
-        )
-
-        from gateway.db import engine_connect_args
-        settings = get_settings()
-        db_url = os.environ.get("DATABASE_URL", settings.database_url)
-        if "postgresql+psycopg" in db_url:
-            db_url = db_url.replace("postgresql+psycopg", "postgresql+asyncpg")
-        elif db_url.startswith("postgresql://"):
-            db_url = db_url.replace("postgresql://", "postgresql+asyncpg://")
-        _ENGINE = create_async_engine(
-            db_url, echo=False, pool_pre_ping=True,
-            pool_size=5, max_overflow=10, pool_recycle=1800,
-            connect_args=engine_connect_args(),
-        )
-        _SESSION_FACTORY = async_sessionmaker(_ENGINE, expire_on_commit=False)
-    return _SESSION_FACTORY
-
-
-async def _get_db():
-    """Return a new async session from the shared, pooled engine."""
-    return _get_session_factory()()
+# ── DB (the one shared gateway engine — gateway/db.py, BO-10) ────────────────
+#
+# This package used to build its own engine here with its own 5+10 pool. It now
+# has none: `_get_db` / `_get_session_factory` at the top of this module are
+# re-exports of the shared seam. The private names are kept so that every
+# `from .core import _get_db` in this package — and every test that
+# monkeypatches `_get_db` on the sibling module it is imported into — keeps
+# working unchanged.
 
 
 # ── provider adapter ──────────────────────────────────────────────────────────
diff --git a/apps/services/gateway/gateway/routes/workflows/core.py b/apps/services/gateway/gateway/routes/workflows/core.py
index 7e4d716e..b6f92936 100644
--- a/apps/services/gateway/gateway/routes/workflows/core.py
+++ b/apps/services/gateway/gateway/routes/workflows/core.py
@@ -14,13 +14,16 @@
 from __future__ import annotations
 
 import json
-import os
 import secrets
 from typing import Any
 
 from acb_auth import UserContext, require_feature_router
 from acb_common import get_logger, get_settings
 from fastapi import APIRouter, HTTPException
+
+# The shared gateway engine (BO-10) — see the DB section below.
+from gateway.db import get_db as _get_db  # noqa: F401
+from gateway.db import get_session_factory as _get_session_factory  # noqa: F401
 from sqlalchemy import text
 
 _log = get_logger("gateway.workflows")
@@ -41,43 +44,14 @@
 MAX_RUNS_PAGE = 100
 HOOK_RATE_LIMIT_PER_MINUTE = 60  # per hook token
 
-# ── DB (shared pooled async engine, same recipe as apps/_common.py) ──────────
-
-_ENGINE = None
-_SESSION_FACTORY = None
-
-
-def _get_session_factory() -> Any:
-    global _ENGINE, _SESSION_FACTORY
-    if _SESSION_FACTORY is None:
-        from sqlalchemy.ext.asyncio import (
-            async_sessionmaker,
-            create_async_engine,
-        )
-
-        from gateway.db import engine_connect_args
-        settings = get_settings()
-        db_url = os.environ.get("DATABASE_URL", settings.database_url)
-        if "postgresql+psycopg" in db_url:
-            db_url = db_url.replace("postgresql+psycopg", "postgresql+asyncpg")
-        elif db_url.startswith("postgresql://"):
-            db_url = db_url.replace("postgresql://", "postgresql+asyncpg://")
-        _ENGINE = create_async_engine(
-            db_url,
-            echo=False,
-            pool_pre_ping=True,
-            pool_size=5,
-            max_overflow=10,
-            pool_recycle=1800,
-            connect_args=engine_connect_args(),
-        )
-        _SESSION_FACTORY = async_sessionmaker(_ENGINE, expire_on_commit=False)
-    return _SESSION_FACTORY
-
-
-async def _get_db() -> Any:
-    """Return a new async session from the shared, pooled engine."""
-    return _get_session_factory()()
+# ── DB (the one shared gateway engine — gateway/db.py, BO-10) ────────────────
+#
+# This package used to build its own engine here with its own 5+10 pool. It now
+# has none: `_get_db` / `_get_session_factory` at the top of this module are
+# re-exports of the shared seam. The private names are kept so that every
+# `from .core import _get_db` in this package — and every test that
+# monkeypatches `_get_db` on the sibling module it is imported into — keeps
+# working unchanged.
 
 
 # ── Small helpers ────────────────────────────────────────────────────────────
diff --git a/packages/AGENTS.md b/packages/AGENTS.md
index 49c761b8..788376d5 100644
--- a/packages/AGENTS.md
+++ b/packages/AGENTS.md
@@ -8,8 +8,8 @@ Reusable Python packages shared across all CommandCenter services.
 - acb_llm/ -- LiteLLM integration, unified credential store (LLM + integration keys), model routing
 - acb_memory/ -- Mem0 and Graphiti memory providers. `compartments.py` owns the scope vocabulary (`scope_key`/`scope_kind`: a bare email, `prefs:<email>`, `room:<thread_id>`, `agent:<name>`, `org:global`) and `resolve_clearance` — WHICH compartments a run may read and the ONE it may write (spec: docs/multiplayer/memory-clearance.md §3). Solo resolves to exactly the three scopes and the write target it always had; a shared run swaps the actor's private compartment for the room's and keeps their prefs. The point is that an excluded compartment's scope key is never passed to `search()` — a boundary, not a request in a system prompt. Dependency-free on purpose: the CALLER decides `shared` (the gateway has `resolve_room_access`), which keeps acb_memory below acb_auth and the gateway in the import graph. `session_cache` keys on the clearance fingerprint as well as the thread — without it a thread cached while solo keeps serving the owner's private block after it is shared.
 - acb_graph/ -- Postgres entity graph (SQLAlchemy sessions)
-- acb_common/ -- Shared settings, logging, activity/cost feed, utilities. `_log.py` owns the run-correlation stamp: `_RUN_CONTEXT_KEYS` = `(run_id, thread_id, agent, user, source, instance)` — decision D1's attribution four-tuple plus the thread. Binds are **additive and non-empty-only**, so a caller may top up one field later (the executor resolves `instance` only after the agent config loads) and the shared partition `''` binds nothing rather than an empty value. `activity.py::_INHERIT` copies the same keys onto any event whose emitter omits them — which is why a model call inside a run is attributed with no change at its call site. Extend those two tuples together or attribution silently half-lands (`tests/unit/test_observability.py::test_inherit_and_run_context_keys_match` drift-fails if you don't). `instance` names the partition of the run that RESOLVED it — inheritance means a delegated sub-run carries its caller's key while writing blobs under the shared partition, so the stamp is not a join key onto `agent_blob` without knowing which run emitted it. The presence key (`cc:activity:live:{run_id}`) is written once from the `phase="start"` body, so a field resolved after start reaches `/observability/active` only via `activity.refresh_run_presence`. Spec: ai-company-brain/specs/observability_e2.md §7
-- acb_audit/ -- Audit event recording
+- acb_common/ -- Shared settings, logging, activity/cost feed, utilities. **`db.py` is the ONE async engine and pool for a process (BO-10)** — `get_db()` / `get_session_factory()` / `get_engine()`, cached at module level, SQLAlchemy's async stack imported INSIDE the functions so importing `acb_common` costs a process that never opens a connection nothing (`acb_common/__init__.py` deliberately does not import it). It lives here rather than in the gateway because `acb_auth.access` resolves permissions from Postgres on the request path *inside* the gateway process and cannot import `gateway` — a gateway-owned seam could never get that process below two pools. Every gateway route package re-exports from it under whatever `get_db`/`_get_db` name it has always used; `gateway/db.py` is a re-export too. The engine is **never disposed**: the pool's lifetime is the process's, and a dispose seam is a way to close connections other handlers are still using. Sized by `db_pool_size`/`db_max_overflow` (10+20), a deployment-wide number — stock Postgres allows 100 and Langfuse/LiteLLM/ingestion share the server. Adding a second `create_async_engine` anywhere under `apps/` or `packages/` fails `tests/unit/test_db_engine_seam.py`; the allowlist there is `acb_graph`'s sync engine and `email_ingestion`'s per-run engines, each with its reason. `_log.py` owns the run-correlation stamp: `_RUN_CONTEXT_KEYS` = `(run_id, thread_id, agent, user, source, instance)` — decision D1's attribution four-tuple plus the thread. Binds are **additive and non-empty-only**, so a caller may top up one field later (the executor resolves `instance` only after the agent config loads) and the shared partition `''` binds nothing rather than an empty value. `activity.py::_INHERIT` copies the same keys onto any event whose emitter omits them — which is why a model call inside a run is attributed with no change at its call site. Extend those two tuples together or attribution silently half-lands (`tests/unit/test_observability.py::test_inherit_and_run_context_keys_match` drift-fails if you don't). `instance` names the partition of the run that RESOLVED it — inheritance means a delegated sub-run carries its caller's key while writing blobs under the shared partition, so the stamp is not a join key onto `agent_blob` without knowing which run emitted it. The presence key (`cc:activity:live:{run_id}`) is written once from the `phase="start"` body, so a field resolved after start reaches `/observability/active` only via `activity.refresh_run_presence`. Spec: ai-company-brain/specs/observability_e2.md §7
+- acb_audit/ -- Audit event recording. `record()` logs always and DB-writes best-effort (`_persist`, which swallows its own errors — `routes/admin/members.py::purge_member` reasons explicitly about what that does and does not guarantee). The write goes through `acb_graph.get_session()`, a **sync** engine, so on an event loop `record()` hands it to `asyncio.to_thread` and returns immediately (BO-10); called from sync code, with no running loop, it still writes inline, which is what the orchestrator's agents expect. The cost is that an async caller's row is not written by the time the call returns — `await drain()` if you need it now, and the gateway lifespan awaits `drain()` last on shutdown so exiting cannot cancel an in-flight row. Pinned by `tests/unit/test_audit_non_blocking.py`.
 - acb_auth/ -- Authentication, roles, and org access control. Two guard styles coexist: the original coarse `require_role(UserRole.EXECUTIVE)` (unchanged) and `require_permission("feature:whatsapp")`, backed by DB roles + per-user allow/deny overrides (`permissions.py` is pure and testable; `access.py` does the I/O with a 60s cache). `require_authenticated(public=...)` is the app-wide default-deny guard (BO-2 #1) — authentication, not authorization. **`permissions.FEATURES` is the feature vocabulary, not `feature_catalog`**: `allowed_features()` iterates that tuple and `/auth/me` returns exactly it, so a slug seeded in SQL but absent from the tuple is unreachable for every principal *including an owner holding `*`* (the wildcard is only matched against those literals). Seeding a feature_catalog row therefore always means editing `FEATURES` too — the Centers case is pinned by `tests/unit/test_org_access_control.py::test_every_center_has_a_feature_slug` (anchored on a literal, not derived from another tuple, so shortening a source cannot make it vacuous) and `::test_centers_registry_matches_the_feature_vocabulary` (parses `workbench/control_plane/src/lib/centers.ts`, the registry the UI actually renders, and pins it to `FEATURES` in both directions). Full registration checklist: `ai-company-brain/specs/department_centers.md` §2. Two DISTINCT secrets: `GATEWAY_INTERNAL_TOKEN` is service identity (grants everything, never handed to agents) and `LITELLM_MASTER_KEY` is the /v1 API key agents hold, checked only by `require_llm_api_auth`. **The separation only exists once `GATEWAY_INTERNAL_TOKEN` is provisioned** — unset, `_get_internal_token()` falls back to the LLM key (that precedence ladder lives in exactly one place, `_resolve_internal_token() -> (token, is_fallback)`; `_get_internal_token` and `_internal_token_is_llm_fallback` are both readers of it, because a second copy that drifted would start refusing a legitimately provisioned token), and while that holds a Bearer proves nothing more than "holds the key every agent holds", so it can assert any colleague's `X-User-Email` (branch 1a) or act as the platform (1b). `GATEWAY_REFUSE_LLM_KEY_IDENTITY=1` refuses the fallback **for identity only** (`get_current_user`; the two Bearer guards keep accepting it, so a mis-provisioned box degrades to "nobody is anybody" rather than to "Bearer auth disabled"). It defaults OFF and flipping it is OWNER-GATE: the Next.js BFF mirrors the same fallback, so flipping before the token is set in BOTH `.env` and the workbench `.env.local` 401s every member. `X-User-Email`/`X-User-Role` are internal-only headers that nothing in this package can distinguish from forged ones — the boundary is the reverse proxy stripping them at the public vhost. `resolve_access(..., record_request=False)` files an unprovisioned email into `access_request` (migration 143, spec colleague_onboarding.md §6) so the owner can see who is locked out instead of the refusal dying in journald. ⚠️ **The default must stay False and `deps._with_resolved_access` must stay its only caller passing True**: `resolve_access` is NOT sign-in-only — `routes/rooms.py`, `resolve_session_access`, `routes/chat.py` and `orchestrator/executor.py` all call it over emails that are not somebody knocking, and filing those would queue people who never tried to sign in. **Do not read that list as the safety argument** — it is illustrative and has already been wrong twice. The property is "the default is `False`", enforced by `tests/unit/test_signin_requests.py`, which reads the tree and fails if a second `record_request=True` appears anywhere; a fifth caller needs no edit here. The write is best-effort (a failure changes neither the refusal nor the log line) and its volume is bounded by the same 60s cache, not the request rate. `allowed_email_domain()` / `is_company_email()` are the one **live** reader of `ALLOWED_EMAIL_DOMAIN` (`acb_common/settings.py` declares an `allowed_email_domain` field too, with the same default and zero consumers — collapse them if anything ever reads it) — a **label, not a boundary**: branch 1a only LOGS an off-domain identity, and the Entra tenant pin does not exclude these addresses either (a B2B guest IS a directory member), so the sign-in queue marks such a row `is_external` for the admin rather than pretending it cannot happen. Spec: ai-company-brain/specs/org_access_control.md
 
 ## Conventions
diff --git a/packages/acb_audit/acb_audit/__init__.py b/packages/acb_audit/acb_audit/__init__.py
index 9b375eeb..e627b617 100644
--- a/packages/acb_audit/acb_audit/__init__.py
+++ b/packages/acb_audit/acb_audit/__init__.py
@@ -1,6 +1,6 @@
 """Append-only audit log. Every agent decision + human override lands here.
 The Annealer (Phase 4) mines this log for recurring intervention patterns.
 """
-from acb_audit.log import AuditEvent, record
+from acb_audit.log import AuditEvent, drain, record
 
-__all__ = ["AuditEvent", "record"]
+__all__ = ["AuditEvent", "drain", "record"]
diff --git a/packages/acb_audit/acb_audit/log.py b/packages/acb_audit/acb_audit/log.py
index 2d53bee0..194651b8 100644
--- a/packages/acb_audit/acb_audit/log.py
+++ b/packages/acb_audit/acb_audit/log.py
@@ -3,9 +3,20 @@
 Phase-0: writes to Postgres `audit_event` (schema in infra/postgres/01_schema.sql)
 AND mirrors to structlog so traces show up locally even if the DB is down.
 The Annealer (Phase 4) reads from this table to mine intervention patterns.
+
+**The DB write is synchronous** — it goes through ``acb_graph.get_session()``,
+which is a sync SQLAlchemy engine, and most callers here are sync code
+(``orchestrator.executor``, the pull agents). But the gateway's route handlers
+are ``async`` and call :func:`record` on the event loop, where a blocking
+psycopg round-trip stalls *every* other request in the process for its duration
+— and this write is best-effort, so it can stall them behind a DB that is
+timing out. BO-10's remaining item. :func:`record` therefore keeps its sync
+signature (25-odd call sites, most of them sync) and dispatches the write to a
+worker thread **only when it is called from a running event loop**.
 """
 from __future__ import annotations
 
+import asyncio
 from dataclasses import asdict, dataclass, field
 from datetime import datetime, timezone
 from typing import Any
@@ -15,6 +26,13 @@
 
 _log = get_logger("acb_audit")
 
+#: Strong references to in-flight off-loop writes.
+#:
+#: ``asyncio`` holds only a weak reference to a task, so a fire-and-forget task
+#: with no other referent can be garbage-collected mid-write. Discarded by the
+#: done-callback, so this is bounded by concurrency, not by uptime.
+_PENDING: set[asyncio.Task[None]] = set()
+
 
 @dataclass(slots=True)
 class AuditEvent:
@@ -26,9 +44,8 @@ class AuditEvent:
     at: datetime = field(default_factory=lambda: datetime.now(timezone.utc))
 
 
-def record(event: AuditEvent) -> None:
-    """Persist an audit event. Logs always; DB write is best-effort."""
-    _log.info("audit", **asdict(event))
+def _persist(event: AuditEvent) -> None:
+    """The blocking half: one row, its own session, never raises."""
     try:
         # Local import avoids a hard dep from acb_audit -> acb_graph at import time
         # (acb_audit is intentionally usable without the DB layer).
@@ -48,3 +65,48 @@ def record(event: AuditEvent) -> None:
             )
     except Exception as exc:  # never block the caller on audit-DB failures
         _log.warning("audit.persist_failed", error=str(exc))
+
+
+def record(event: AuditEvent) -> None:
+    """Persist an audit event. Logs always; DB write is best-effort.
+
+    Synchronous by signature, and synchronous in fact for sync callers. On an
+    event loop the DB write is handed to a worker thread and this returns
+    immediately, so an async handler is never blocked by it.
+
+    ⚠️ What that costs, stated plainly: for an async caller the row is no longer
+    written by the time this returns. Nothing depended on that ordering — the
+    write has always been in its own session, outside the caller's transaction,
+    and has always been allowed to fail silently (see
+    ``routes/admin/members.py::purge_member``, which reasons explicitly about
+    both) — but a caller that wants the row *now* must ``await drain()``.
+    """
+    _log.info("audit", **asdict(event))
+    try:
+        loop = asyncio.get_running_loop()
+    except RuntimeError:
+        # No event loop: we are sync code (or already on a worker thread).
+        # Blocking here blocks only this caller, which is what it asked for.
+        _persist(event)
+        return
+
+    task = loop.create_task(asyncio.to_thread(_persist, event))
+    _PENDING.add(task)
+    task.add_done_callback(_PENDING.discard)
+
+
+async def drain(timeout: float = 5.0) -> None:
+    """Wait for off-loop audit writes to finish. Call on shutdown.
+
+    Without this, a process that exits right after a write cancels the task and
+    loses the row — which would be a regression against the old blocking
+    behaviour, where the write was complete before the handler returned. The
+    timeout is a bound, not a promise: a wedged audit DB must not hold the
+    shutdown open, and a lost audit row is by contract survivable.
+    """
+    pending = [t for t in _PENDING if not t.done()]
+    if not pending:
+        return
+    _done, still_running = await asyncio.wait(pending, timeout=timeout)
+    if still_running:
+        _log.warning("audit.drain_timeout", pending=len(still_running))
diff --git a/packages/acb_auth/acb_auth/access.py b/packages/acb_auth/acb_auth/access.py
index bd1f3024..832fd609 100644
--- a/packages/acb_auth/acb_auth/access.py
+++ b/packages/acb_auth/acb_auth/access.py
@@ -17,10 +17,13 @@
 
 import os
 import time
-from typing import Any
 
 from acb_common import get_logger
 
+# The one shared pool (BO-10) — see the Engine section below. Re-exported under
+# the private name this module has always used.
+from acb_common.db import get_session_factory as _get_session_factory
+
 from acb_auth.permissions import (
     LEGACY_ROLE_MAP,
     EffectiveAccess,
@@ -42,36 +45,27 @@
 )
 
 _cache: dict[str, tuple[float, EffectiveAccess]] = {}
-_ENGINE: Any = None
-_SESSION_FACTORY: Any = None
 #: Set once the access tables are confirmed missing, so we degrade to the
 #: legacy mapping without re-querying a failing table on every request.
 _tables_missing = False
 
 
-# ── Engine (same recipe as gateway routes/apps/_common.py) ──────────────────
-
-def _get_session_factory() -> Any:
-    global _ENGINE, _SESSION_FACTORY
-    if _SESSION_FACTORY is None:
-        from sqlalchemy.ext.asyncio import (  # noqa: PLC0415
-            async_sessionmaker,
-            create_async_engine,
-        )
-        from acb_common import get_settings  # noqa: PLC0415
-
-        settings = get_settings()
-        db_url = os.environ.get("DATABASE_URL", settings.database_url)
-        if "postgresql+psycopg" in db_url:
-            db_url = db_url.replace("postgresql+psycopg", "postgresql+asyncpg")
-        elif db_url.startswith("postgresql://"):
-            db_url = db_url.replace("postgresql://", "postgresql+asyncpg://")
-        _ENGINE = create_async_engine(
-            db_url, echo=False, pool_pre_ping=True,
-            pool_size=5, max_overflow=10, pool_recycle=1800,
-        )
-        _SESSION_FACTORY = async_sessionmaker(_ENGINE, expire_on_commit=False)
-    return _SESSION_FACTORY
+# ── Engine (the one shared pool — acb_common.db, BO-10) ─────────────────────
+#
+# This module used to build its own 5+10 engine. It ran *inside* the gateway
+# process alongside the route packages' pools, so it was the reason the gateway
+# could never get to one pool by converting routes alone — hence the seam living
+# in `acb_common`, the only package both sides already depend on.
+#
+# Two things came free with the move. This engine never carried the connect-phase
+# and `idle in transaction` bounds that came out of the 2026-08-06 incident
+# (`acb_common.db.engine_connect_args`) — a permission resolution that hung used
+# to hold its lock indefinitely. And it resolved `DATABASE_URL` with its own copy
+# of the coercion, which is now one function.
+#
+# `_get_session_factory` is imported at the top of this module. It keeps the
+# private name so `tests/unit/test_signin_requests.py`, which monkeypatches it
+# onto a fixture engine, keeps working.
 
 
 # ── Cache ───────────────────────────────────────────────────────────────────
diff --git a/packages/acb_common/acb_common/db.py b/packages/acb_common/acb_common/db.py
new file mode 100644
index 00000000..cb1a25bc
--- /dev/null
+++ b/packages/acb_common/acb_common/db.py
@@ -0,0 +1,136 @@
+"""The one shared async database seam for a process (BO-10).
+
+The gateway had **twelve** module-level ``create_async_engine`` call sites, one
+per app package, each with its own pool that nobody could size, drain or observe
+as a whole. Their ceilings summed to ~165 connections from a single process,
+against a stock Postgres ``max_connections`` of 100 that Langfuse, LiteLLM and
+the ingestion services also draw from — so the old arrangement could not
+actually be spent, it could only fail. This module is the single seam they now
+all resolve through: **one engine, one pool, per process.**
+
+It lives in ``acb_common`` rather than in the gateway because ``acb_common`` is
+the one package every service and every ``acb_*`` library already depends on.
+``acb_auth.access`` resolves permissions from Postgres on the request path and
+runs *inside* the gateway process; while the seam lived in ``gateway.db`` it
+could not reach it, so the gateway had two pools no matter how many route
+packages were converted. Putting the seam here is what makes "one pool" true
+rather than approximately true.
+
+Two rules worth keeping:
+
+* ``sqlalchemy.ext.asyncio`` is imported **inside** the functions, not at module
+  scope. Every caller does it that way and the import graphs depend on it —
+  importing this module must not drag SQLAlchemy's async stack into a process
+  that never opens a connection. That is also why importing ``acb_common`` does
+  not import this module.
+* The engine is created on first use and cached for the process. It is never
+  disposed here: the pool's lifetime is the process's, and a ``dispose()`` seam
+  would be a way to close connections other request handlers are still using.
+  A process that genuinely owns a short-lived engine (the ingestion scheduler's
+  per-run engines) should keep building its own and disposing it, not reach for
+  this one.
+"""
+
+from __future__ import annotations
+
+import os
+from typing import Any
+
+from acb_common.settings import get_settings
+
+#: Process-wide, created on first use. Module-level rather than app-state so a
+#: background loop or a broker handler with no ``Request`` reaches the same pool.
+_ENGINE: Any = None
+_SESSION_FACTORY: Any = None
+
+
+def async_database_url() -> str:
+    """The configured database URL, coerced onto the asyncpg driver.
+
+    ``DATABASE_URL`` wins over the setting because LiteLLM's Prisma client needs
+    the plain ``postgresql://`` form in the environment, so the two disagree by
+    design and the environment is the one deploy sets.
+    """
+    settings = get_settings()
+    db_url = os.environ.get("DATABASE_URL", settings.database_url)
+    if "postgresql+psycopg" in db_url:
+        return db_url.replace("postgresql+psycopg", "postgresql+asyncpg")
+    if db_url.startswith("postgresql://"):
+        return db_url.replace("postgresql://", "postgresql+asyncpg://")
+    return db_url
+
+
+#: Ceiling on how long one of OUR sessions may sit `idle in transaction`, in ms.
+#:
+#: This is a lock-release deadline, not a performance knob. SQLAlchemy's
+#: ``AsyncSession`` opens a transaction on first ``execute()`` and holds it until
+#: commit/rollback/close, so a handler that reads a row and then awaits a slow
+#: network call is `idle in transaction` — holding an ACCESS SHARE lock — for the
+#: whole call. That is normal and fine. What is not fine is an await that never
+#: returns: on 2026-08-06 a hung LLM call pinned one such transaction for 14h44m,
+#: a migration's ``ALTER TABLE`` queued behind its lock, and because Postgres's
+#: lock queue is FIFO every later reader of that table queued behind the *waiting*
+#: ALTER. Sending mail stopped, and the pool drained behind the blocked readers.
+#:
+#: ⚠️ MUST stay comfortably above the LLM wall-clock worst case, because the email
+#: automation package legitimately awaits completions with a session open.
+#: ``acb_llm.client`` bounds one call at 3 attempts x 90s + 6s backoff ≈ 276s. At
+#: 600s a genuine retrying completion can never trip this, while a hang is capped
+#: at ten minutes instead of unbounded. Raise ``LLM_REQUEST_TIMEOUT_SECS`` and you
+#: must raise this too — that coupling is the whole reason both numbers are
+#: written down next to their reasoning.
+_IDLE_IN_TXN_TIMEOUT_MS = "600000"  # 10 minutes
+
+
+def engine_connect_args() -> dict[str, Any]:
+    """Driver-level connect args every engine from this seam shares.
+
+    Two bounds, both about failing instead of hanging:
+
+    * ``timeout`` — asyncpg's CONNECT-phase ceiling, so a slow or unreachable DB
+      fails fast rather than stalling request handlers.
+    * ``idle_in_transaction_session_timeout`` — the server-side deadline above.
+      Set through asyncpg's ``server_settings`` so it rides the connection's
+      startup packet and applies to every session from this pool, with no
+      migration and no ``ALTER ROLE``. Scoping it to the app's own connections is
+      deliberate: ``pg_dump`` and the migration runner connect as the same role
+      and must NOT inherit an app-tuned deadline.
+    """
+    return {
+        "timeout": get_settings().db_connect_timeout,
+        "server_settings": {
+            "idle_in_transaction_session_timeout": _IDLE_IN_TXN_TIMEOUT_MS,
+        },
+    }
+
+
+def get_engine() -> Any:
+    """The shared pooled async engine, created on first use."""
+    global _ENGINE
+    if _ENGINE is None:
+        from sqlalchemy.ext.asyncio import create_async_engine
+
+        settings = get_settings()
+        _ENGINE = create_async_engine(
+            async_database_url(), echo=False, pool_pre_ping=True,
+            pool_size=settings.db_pool_size,
+            max_overflow=settings.db_max_overflow,
+            pool_recycle=1800,
+            connect_args=engine_connect_args(),
+        )
+    return _ENGINE
+
+
+def get_session_factory() -> Any:
+    """The shared ``async_sessionmaker`` over :func:`get_engine`."""
+    global _SESSION_FACTORY
+    if _SESSION_FACTORY is None:
+        from sqlalchemy.ext.asyncio import async_sessionmaker
+
+        _SESSION_FACTORY = async_sessionmaker(get_engine(), expire_on_commit=False)
+    return _SESSION_FACTORY
+
+
+async def get_db() -> Any:
+    """Return a new async session from the shared, pooled engine."""
+    return get_session_factory()()
diff --git a/packages/acb_common/acb_common/settings.py b/packages/acb_common/acb_common/settings.py
index 033163a8..8e40976c 100644
--- a/packages/acb_common/acb_common/settings.py
+++ b/packages/acb_common/acb_common/settings.py
@@ -35,6 +35,19 @@ class Settings(BaseSettings):
     # never trips in normal operation.
     db_connect_timeout: int = 10
 
+    # Size of the ONE shared async pool per process (acb_common.db, BO-10).
+    # Ceiling = db_pool_size + db_max_overflow = 30 connections from a process.
+    #
+    # These are knobs, not constants, because the arithmetic is deployment-wide:
+    # a stock Postgres allows 100 connections total and the gateway is not its
+    # only client — Langfuse, LiteLLM and the ingestion services draw from the
+    # same server. 30 is what `gateway/db.py` already used for the packages that
+    # had been converted, and it is deliberately unchanged here so consolidating
+    # the rest is a no-op per package rather than a silent retune. Raise it when
+    # you have raised `max_connections` (or put PgBouncer in front), not before.
+    db_pool_size: int = 10
+    db_max_overflow: int = 20
+
     # Redis (event bus)
     redis_url: str = "redis://localhost:6379/0"
 
diff --git a/packages/acb_common/pyproject.toml b/packages/acb_common/pyproject.toml
index 4f017632..41db2c37 100644
--- a/packages/acb_common/pyproject.toml
+++ b/packages/acb_common/pyproject.toml
@@ -12,6 +12,12 @@ dependencies = [
     "opentelemetry-sdk>=1.28",
     "redis>=5.2",
     "psycopg[binary]>=3.2",
+    # acb_common.db — the one shared async engine/pool per process (BO-10).
+    # Imported lazily inside the functions so a process that never opens a
+    # connection does not pay for SQLAlchemy's async stack, but it is a real
+    # dependency of this package and is declared as one.
+    "sqlalchemy>=2.0",
+    "asyncpg>=0.30",
 ]
 
 [build-system]
diff --git a/tests/unit/test_audit_non_blocking.py b/tests/unit/test_audit_non_blocking.py
new file mode 100644
index 00000000..04a58abd
--- /dev/null
+++ b/tests/unit/test_audit_non_blocking.py
@@ -0,0 +1,146 @@
+"""BO-10 — ``acb_audit.record()`` must not block the event loop.
+
+The DB write is synchronous (``acb_graph.get_session()`` is a sync engine) and
+most callers are sync code. But the gateway's route handlers are async and call
+``record()`` on the loop, where a blocking psycopg round-trip stalls every other
+request in the process — behind a write that is best-effort by contract.
+
+These tests pin the three properties that make the fix safe rather than merely
+fast: the loop is not blocked, sync callers keep their old blocking behaviour,
+and an in-flight write is not lost at shutdown.
+"""
+
+from __future__ import annotations
+
+import asyncio
+import threading
+import time
+
+import pytest
+from acb_audit import log as audit
+
+
+def _event() -> audit.AuditEvent:
+    return audit.AuditEvent(actor="user:t@x", action="test", target="thing:1")
+
+
+@pytest.mark.asyncio
+async def test_record_does_not_block_the_event_loop(monkeypatch) -> None:
+    started = threading.Event()
+
+    def slow_persist(event: audit.AuditEvent) -> None:
+        started.set()
+        time.sleep(0.5)
+
+    monkeypatch.setattr(audit, "_persist", slow_persist)
+
+    t0 = time.monotonic()
+    audit.record(_event())
+    elapsed = time.monotonic() - t0
+
+    # The 0.5s write is on a worker thread; the call itself must be immediate.
+    assert elapsed < 0.1, f"record() blocked the loop for {elapsed:.3f}s"
+
+    # ...and it really is running, not silently dropped.
+    await audit.drain(timeout=2.0)
+    assert started.is_set()
+
+
+@pytest.mark.asyncio
+async def test_record_runs_the_write_off_the_loop_thread(monkeypatch) -> None:
+    """Not just deferred — actually on another thread.
+
+    A `loop.call_soon` style deferral would also return fast while still
+    blocking the loop later, which is the bug wearing a disguise.
+    """
+    loop_thread = threading.get_ident()
+    seen: list[int] = []
+
+    monkeypatch.setattr(
+        audit, "_persist", lambda event: seen.append(threading.get_ident())
+    )
+
+    audit.record(_event())
+    await audit.drain(timeout=2.0)
+
+    assert seen and seen[0] != loop_thread
+
+
+def test_sync_callers_still_write_inline(monkeypatch) -> None:
+    """No event loop → no thread hand-off.
+
+    The orchestrator's agents call `record()` from plain sync code and expect
+    the row to exist when it returns. Deferring for them would need a drain
+    they have nowhere to call.
+    """
+    calls: list[audit.AuditEvent] = []
+    monkeypatch.setattr(audit, "_persist", calls.append)
+
+    ev = _event()
+    audit.record(ev)
+
+    assert calls == [ev]
+
+
+@pytest.mark.asyncio
+async def test_drain_waits_for_in_flight_writes(monkeypatch) -> None:
+    """Shutdown must not cancel a write that is still running.
+
+    This is the one real regression risk in making the call non-blocking: the
+    old code finished the write before the handler returned.
+    """
+    finished: list[str] = []
+
+    def slow_persist(event: audit.AuditEvent) -> None:
+        time.sleep(0.2)
+        finished.append(event.target)
+
+    monkeypatch.setattr(audit, "_persist", slow_persist)
+
+    audit.record(_event())
+    assert finished == []          # still in flight
+    await audit.drain(timeout=5.0)
+    assert finished == ["thing:1"]  # completed, not cancelled
+
+
+@pytest.mark.asyncio
+async def test_drain_is_bounded_by_its_timeout(monkeypatch) -> None:
+    """A wedged audit DB must not hold the shutdown open forever."""
+    monkeypatch.setattr(audit, "_persist", lambda event: time.sleep(3.0))
+
+    audit.record(_event())
+    t0 = time.monotonic()
+    await audit.drain(timeout=0.2)
+    assert time.monotonic() - t0 < 1.5
+
+    # Leave no thread running into the next test.
+    await audit.drain(timeout=5.0)
+
+
+@pytest.mark.asyncio
+async def test_a_failing_write_never_reaches_the_caller(monkeypatch) -> None:
+    """Best-effort by contract, on the threaded path too.
+
+    `_persist` swallows its own errors; this guards the wiring around it, where
+    an exception would surface as an unretrieved-task warning instead.
+    """
+    def boom(event: audit.AuditEvent) -> None:
+        raise RuntimeError("audit db down")
+
+    monkeypatch.setattr(audit, "_persist", boom)
+
+    audit.record(_event())  # must not raise
+    with pytest.raises(RuntimeError):
+        # The task itself does surface it — drain() gathers, it does not hide.
+        await asyncio.wait_for(next(iter(audit._PENDING)), timeout=2.0)
+
+
+@pytest.mark.asyncio
+async def test_pending_set_does_not_grow_without_bound(monkeypatch) -> None:
+    """The strong-reference set is bounded by concurrency, not by uptime."""
+    monkeypatch.setattr(audit, "_persist", lambda event: None)
+    before = len(audit._PENDING)
+    for _ in range(5):
+        audit.record(_event())
+    await audit.drain(timeout=5.0)
+    assert len(audit._PENDING) == before
diff --git a/tests/unit/test_db_engine_seam.py b/tests/unit/test_db_engine_seam.py
new file mode 100644
index 00000000..e8ab846f
--- /dev/null
+++ b/tests/unit/test_db_engine_seam.py
@@ -0,0 +1,181 @@
+"""BO-10 — one async engine and one pool per process.
+
+The gateway once had twelve module-level ``create_async_engine`` call sites, one
+per app package. Their pool ceilings summed to roughly 165 connections from a
+single process, against a stock Postgres ``max_connections`` of 100 that
+Langfuse, LiteLLM and the ingestion services also draw from — a budget that
+could not be spent, only exceeded. They now all resolve through
+``acb_common.db``.
+
+This is the ratchet. It is a source-level check on purpose: the failure mode it
+guards is a *new* engine being introduced by a new app package, which no runtime
+assertion sees until that package is under load in production.
+"""
+
+from __future__ import annotations
+
+import ast
+from pathlib import Path
+
+import pytest
+
+_REPO = Path(__file__).resolve().parents[2]
+
+#: Every file allowed to call ``create_async_engine``, and why.
+#:
+#: To add an entry you must have a reason that survives the question "why can
+#: this not use the shared pool?". The two accepted reasons so far:
+#:
+#:   * it IS the shared pool, or
+#:   * it is a short-lived engine in a separate, non-gateway process that
+#:     disposes it when the run ends — a background job's engine has a
+#:     different lifetime from a request handler's and must not outlive it in
+#:     the shared pool.
+_ALLOWED: dict[str, str] = {
+    "packages/acb_common/acb_common/db.py": "the shared seam itself",
+    "apps/services/email_ingestion/email_ingestion/inbound.py":
+        "separate process; per-call engine, disposed in a finally block",
+    "apps/services/email_ingestion/email_ingestion/scheduler.py":
+        "separate process; per-run engines, disposed when the run ends",
+}
+
+
+def _python_files() -> list[Path]:
+    roots = [_REPO / "apps", _REPO / "packages"]
+    out: list[Path] = []
+    for root in roots:
+        out.extend(
+            p for p in root.rglob("*.py")
+            if "__pycache__" not in p.parts and ".venv" not in p.parts
+        )
+    return out
+
+
+def _calls_create_async_engine(path: Path) -> bool:
+    """True if the file CALLS ``create_async_engine``.
+
+    Parsed rather than grepped: every one of these modules mentions the name in
+    prose explaining that it does not call it, and a substring match would read
+    the documentation as a violation.
+    """
+    # utf-8-sig: at least one module in the tree carries a BOM, and a leading
+    #  is a syntax error to ast.parse.
+    tree = ast.parse(path.read_text(encoding="utf-8-sig"), filename=str(path))
+    for node in ast.walk(tree):
+        if not isinstance(node, ast.Call):
+            continue
+        func = node.func
+        name = (
+            func.id if isinstance(func, ast.Name)
+            else func.attr if isinstance(func, ast.Attribute)
+            else None
+        )
+        if name == "create_async_engine":
+            return True
+    return False
+
+
+def test_no_new_async_engines() -> None:
+    offenders = sorted(
+        str(p.relative_to(_REPO)).replace("\\", "/")
+        for p in _python_files()
+        if _calls_create_async_engine(p)
+    )
+    unexpected = [p for p in offenders if p not in _ALLOWED]
+    assert not unexpected, (
+        "New create_async_engine() call site(s):\n  "
+        + "\n  ".join(unexpected)
+        + "\n\nUse acb_common.db (get_db / get_session_factory) — one engine and "
+          "one pool per process. If this engine genuinely needs its own "
+          "lifetime, add it to _ALLOWED in this test with the reason."
+    )
+
+
+def test_allowlist_has_no_stale_entries() -> None:
+    """A file that stopped creating engines must leave the allowlist.
+
+    Otherwise the list silently grows into permission for anything, and the
+    next reader cannot tell which entries are still load-bearing.
+    """
+    offenders = {
+        str(p.relative_to(_REPO)).replace("\\", "/")
+        for p in _python_files()
+        if _calls_create_async_engine(p)
+    }
+    stale = sorted(set(_ALLOWED) - offenders)
+    assert not stale, f"Allowlist entries that no longer create an engine: {stale}"
+
+
+def test_gateway_makes_no_engine_of_its_own() -> None:
+    """The gateway process holds exactly one pool.
+
+    Narrower than the repo-wide check above and worth stating separately: the
+    gateway is where the twelve pools were, and it is the process where a second
+    one is most expensive — it also runs ``acb_auth.access``, which resolves
+    permissions from Postgres on the request path.
+    """
+    gateway = _REPO / "apps" / "services" / "gateway"
+    offenders = sorted(
+        str(p.relative_to(_REPO)).replace("\\", "/")
+        for p in gateway.rglob("*.py")
+        if "__pycache__" not in p.parts and _calls_create_async_engine(p)
+    )
+    assert offenders == []
+
+
+@pytest.mark.parametrize(
+    "module_path",
+    [
+        "gateway.db",
+        "gateway.routes.admin._common",
+        "gateway.routes.apps._common",
+        "gateway.routes.crm.core",
+        "gateway.routes.email.core",
+        "gateway.routes.notes.core",
+        "gateway.routes.projects.core",
+        "gateway.routes.tasks.core",
+        "gateway.routes.whatsapp.core",
+        "gateway.routes.workflows.core",
+    ],
+)
+def test_route_packages_resolve_to_the_shared_factory(module_path: str) -> None:
+    """Each converted package's DB entry point IS the shared one.
+
+    The source check above proves no package *builds* an engine; this proves
+    each one *reaches* the shared pool. Both are needed — a package could stop
+    calling ``create_async_engine`` and still point at some other factory.
+
+    Packages expose the seam under whichever names they historically used
+    (``get_db`` in ``admin``, ``_get_db`` elsewhere, some also re-exporting the
+    factory), so every seam name the module has must resolve to the shared one
+    and at least one must be present.
+    """
+    import importlib
+
+    from acb_common import db as shared
+
+    mod = importlib.import_module(module_path)
+    expected = {
+        "get_session_factory": shared.get_session_factory,
+        "_get_session_factory": shared.get_session_factory,
+        "get_db": shared.get_db,
+        "_get_db": shared.get_db,
+    }
+    found = [n for n in expected if hasattr(mod, n)]
+    assert found, f"{module_path} exposes no DB seam name at all"
+    for name in found:
+        # email.core keeps a thin wrapper to preserve its `request_id` param —
+        # what matters is that nothing shadows the seam with another pool.
+        if module_path == "gateway.routes.email.core" and name == "_get_db":
+            continue
+        assert getattr(mod, name) is expected[name], (
+            f"{module_path}.{name} does not resolve to acb_common.db.{name.lstrip('_')}"
+        )
+
+
+def test_acb_auth_shares_the_pool() -> None:
+    """Access resolution runs in the gateway process and must not add a pool."""
+    from acb_auth import access
+    from acb_common import db as shared
+
+    assert access._get_session_factory is shared.get_session_factory
diff --git a/tests/unit/test_email_infra.py b/tests/unit/test_email_infra.py
index 5c5c7a13..e5dd1ed8 100644
--- a/tests/unit/test_email_infra.py
+++ b/tests/unit/test_email_infra.py
@@ -1,6 +1,7 @@
 """Regression tests for email backend infrastructure fixes (code-review pass)."""
 from __future__ import annotations
 
+from acb_common import db as shared_db
 from gateway.routes import email as m
 
 
@@ -10,4 +11,11 @@ def test_session_factory_is_cached_single_engine() -> None:
     f1 = m.core._get_session_factory()
     f2 = m.core._get_session_factory()
     assert f1 is f2
-    assert m.core._ENGINE is not None
+    assert shared_db._ENGINE is not None
+
+
+def test_email_uses_the_shared_engine() -> None:
+    # BO-10: this package must not own an engine. It reads the shared seam, so
+    # the caching assertion above is a statement about the ONE process pool.
+    assert m.core._get_session_factory is shared_db.get_session_factory
+    assert not hasattr(m.core, "_ENGINE")
diff --git a/tests/unit/test_owner_bootstrap.py b/tests/unit/test_owner_bootstrap.py
index 73d90199..602db8c0 100644
--- a/tests/unit/test_owner_bootstrap.py
+++ b/tests/unit/test_owner_bootstrap.py
@@ -96,8 +96,12 @@ def ownerless(monkeypatch):
     )
     access_mod.invalidate()
     monkeypatch.setattr(access_mod, "CACHE_TTL_SECONDS", 0.0)
-    monkeypatch.setattr(access_mod, "_ENGINE", None)
-    monkeypatch.setattr(access_mod, "_SESSION_FACTORY", None)
+    # The engine is the process-wide one in acb_common.db (BO-10) — reset it
+    # there, not on access_mod, which no longer owns any engine state.
+    import acb_common.db as db_mod
+
+    monkeypatch.setattr(db_mod, "_ENGINE", None)
+    monkeypatch.setattr(db_mod, "_SESSION_FACTORY", None)
     yield
     _purge()
     for user_id, role_id, assigned_by in saved:
diff --git a/tests/unit/test_session_authority.py b/tests/unit/test_session_authority.py
index 1a9eb1c4..2e554e6d 100644
--- a/tests/unit/test_session_authority.py
+++ b/tests/unit/test_session_authority.py
@@ -122,19 +122,23 @@ def _seed_session(*participants: tuple[str, str]) -> str:
 
 @pytest.fixture
 def clean(monkeypatch):
-    """Purge seed data, disable the 60s access cache, and reset the module's
+    """Purge seed data, disable the 60s access cache, and reset the shared
     async engine — it binds to the event loop of the test that first created
     it, and pytest-asyncio gives every test a fresh loop, so a reused engine
     fails with 'Event loop is closed' and resolve_access degrades to
     no-access, which would make every assertion here pass or fail for the
-    wrong reason."""
+    wrong reason.
+
+    The engine lives in ``acb_common.db`` (BO-10, one pool per process), not on
+    ``acb_auth.access`` — that module holds only the cache now."""
     import acb_auth.access as access_mod
+    import acb_common.db as db_mod
 
     _purge()
     access_mod.invalidate()
     monkeypatch.setattr(access_mod, "CACHE_TTL_SECONDS", 0.0)
-    monkeypatch.setattr(access_mod, "_ENGINE", None)
-    monkeypatch.setattr(access_mod, "_SESSION_FACTORY", None)
+    monkeypatch.setattr(db_mod, "_ENGINE", None)
+    monkeypatch.setattr(db_mod, "_SESSION_FACTORY", None)
     yield
     _purge()
     access_mod.invalidate()
diff --git a/uv.lock b/uv.lock
index 7f4376fe..a80ae8d8 100644
--- a/uv.lock
+++ b/uv.lock
@@ -78,6 +78,7 @@ name = "acb-common"
 version = "0.0.1"
 source = { editable = "packages/acb_common" }
 dependencies = [
+    { name = "asyncpg" },
     { name = "opentelemetry-api" },
     { name = "opentelemetry-sdk" },
     { name = "psycopg", extra = ["binary"] },
@@ -85,11 +86,13 @@ dependencies = [
     { name = "pydantic-settings" },
     { name = "python-dotenv" },
     { name = "redis" },
+    { name = "sqlalchemy" },
     { name = "structlog" },
 ]
 
 [package.metadata]
 requires-dist = [
+    { name = "asyncpg", specifier = ">=0.30" },
     { name = "opentelemetry-api", specifier = ">=1.28" },
     { name = "opentelemetry-sdk", specifier = ">=1.28" },
     { name = "psycopg", extras = ["binary"], specifier = ">=3.2" },
@@ -97,6 +100,7 @@ requires-dist = [
     { name = "pydantic-settings", specifier = ">=2.6" },
     { name = "python-dotenv", specifier = ">=1.0" },
     { name = "redis", specifier = ">=5.2" },
+    { name = "sqlalchemy", specifier = ">=2.0" },
     { name = "structlog", specifier = ">=24.4" },
 ]
 

From 3064a36cfe452f6c1deb47c7e311f2c93ba7c1bd Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 6 Aug 2026 22:04:37 +0000
Subject: [PATCH 10/10] feat(theming): make apps themed by construction, and
 keep them that way
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The engine stopped at the iframe boundary. Custom Apps, generative-UI cards
and React artifacts run in an opaque-origin sandbox that inherits nothing
from us, so they were handed a `--cc-*` token block instead. The vocabulary
was right — it is written into agent-app-builder's instructions and into
design.md — but its VALUES were hand-written RapidTool literals switching
only on light/dark. Every app ever built stayed RapidTool-blue while the
shell around it turned Fluent or Material. Nothing errored; it just quietly
did not theme.

The contract now derives from the active manifest (lib/theme/app-tokens.ts),
and the frame that carries it is its own React-free module
(lib/theme/sandbox-frame.ts) so the e2e suite drives the real frame rather
than a copy that could pass while the original was broken.

What crosses the boundary now: colour with `-fg` ink pairs, type, shape,
motion, and the theme's control PERSONALITY — Material's pill buttons and
8% state layer, Fluent's ring, Graphite's uppercase labels — so an app
built a year ago picks up a new theme's behaviour, not merely its palette.
Icons cross as SVG resolved from the active pack; they were pinned to
Lucide. Applied twice: in the frame's first <style> so there is no flash,
and as a postMessage patch on a theme change — a patch, not a rebuild,
because rebuilding srcDoc remounts the document and a published app would
throw away whatever the user had typed into it.

Three bugs surfaced on the way, each silent by construction:

* Font stacks embed `var(--font-geist-sans)`, a next/font handle that
  exists only on our <html>. An unresolvable var() invalidates the whole
  font-family, so apps had no themed font at all. Handles are stripped;
  named and system families cross. Self-hosted webfonts cannot — the
  frame's CSP is `font-src data:` — and that limit is now written down.
* `controls.buttonRadius` is `var(--radius)`, likewise undefined in the
  frame, so themed buttons silently lost their radius. Resolved on export.
* Ink on a warning fill was hardcoded near-black, legible only over a
  yellow warning. A theme with a dark warning rendered black on dark.

Also token-ised genUITemplates and TodoPanel. The weather pictograms stay
literal and are hoisted into one argued constant: a sun is yellow because
suns are yellow, and recolouring it per theme is broken art, not themed art.

Keeping it true is now enforced rather than asked for.
`lib/theme/conformance.test.ts` fails the build on a hardcoded colour, a
lucide-react import, an arbitrary Tailwind colour class, or a hand-rolled
solid control. Existing debt is a frozen baseline that may only shrink: a
file with no budget must be clean, a baselined file may not get worse, and
one that got BETTER fails until its number is lowered — without that last
rule the figures quietly become fiction. Values that are genuinely not
theme decisions (Gmail's label palette, a person's identity hue, the
pictograms) sit in an exceptions list with the argument for each, because
the next author's real question is never "is this allowed" but "is mine
like that one".

Docs rewritten where agents actually read them: DESIGN_SYSTEM.md,
control_plane/AGENTS.md, root AGENTS.md, agent-app-builder/instructions.md,
and design.md — whose HSL table was being presented as a spec to copy from
rather than one theme's values. A test checks the app-builder token list
against the code in both directions, so a token that exists is always
documented and a documented one always exists.

playwright.config.ts gains an opt-in PLAYWRIGHT_EXECUTABLE_PATH; unset, it
behaves exactly as before.

Verified: 383 unit tests, 31 theming/sandbox/artifact e2e in a real browser
(tokens survive the CSP, differ per theme, and a live patch restyles a
running document without remounting it), clean tsc, clean build, lint
unchanged from baseline. The 8 failing e2e in chat/email specs need a live
gateway and fail identically without this change.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SyTtr9JJXCS8xNkzW5Fny5
---
 AGENTS.md                                     |  26 +-
 apps/agents/agent-app-builder/instructions.md |  55 +-
 docs/THEMING_ENGINE_SCOPE.md                  |  37 +
 packages/acb_skills/acb_skills/design.md      |  48 +-
 workbench/control_plane/AGENTS.md             |  21 +
 workbench/control_plane/DESIGN_SYSTEM.md      | 522 ++++++--------
 .../control_plane/e2e/react-artifact.spec.ts  |  14 +-
 .../control_plane/e2e/sandbox-theming.spec.ts | 227 ++++++
 workbench/control_plane/playwright.config.ts  |  12 +-
 .../src/app/build/apps/[slug]/edit/page.tsx   |  10 +-
 .../src/app/build/apps/[slug]/page.tsx        |   8 +-
 .../src/components/ArtifactViewerModal.tsx    |  17 +-
 .../src/components/DocumentPane.tsx           |  17 +-
 .../src/components/GenerativeUINode.tsx       |  23 +-
 .../src/components/SandboxedHtml.tsx          | 674 ++---------------
 .../src/components/SandboxedReact.tsx         |  12 +-
 .../src/components/TodoPanel.tsx              |  10 +-
 .../src/components/genUITemplates.tsx         | 142 ++--
 workbench/control_plane/src/lib/iconSvg.ts    |  41 +-
 .../src/lib/theme/app-tokens.test.ts          | 146 ++++
 .../control_plane/src/lib/theme/app-tokens.ts | 195 +++++
 .../src/lib/theme/conformance.test.ts         | 338 +++++++++
 .../src/lib/theme/sandbox-frame.ts            | 677 ++++++++++++++++++
 23 files changed, 2193 insertions(+), 1079 deletions(-)
 create mode 100644 workbench/control_plane/e2e/sandbox-theming.spec.ts
 create mode 100644 workbench/control_plane/src/lib/theme/app-tokens.test.ts
 create mode 100644 workbench/control_plane/src/lib/theme/app-tokens.ts
 create mode 100644 workbench/control_plane/src/lib/theme/conformance.test.ts
 create mode 100644 workbench/control_plane/src/lib/theme/sandbox-frame.ts

diff --git a/AGENTS.md b/AGENTS.md
index f898a3b9..c32de348 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -116,10 +116,28 @@ Copilot SDK sandboxes.
 - Tests in tests/unit/ and tests/integration/ -- pytest with asyncio
 - CI/CD via GitHub Actions: deploy.yml (push-to-deploy on main), pr-check.yml (lint+test on PRs)
 - Deploy target: Hostinger KVM 4 VPS (Ubuntu 24.04 + Docker)
-- **Control Plane UI**: All frontend work MUST follow `workbench/control_plane/DESIGN_SYSTEM.md`.
-  Use shared components (`Tabs`, `FilterPills`, etc.) from `src/components/` — never inline
-  ad-hoc tab bars, filter pills, or page headers. Use semantic Tailwind color tokens
-  (`bg-primary`, `text-foreground`, `border-border`) — never arbitrary hex values.
+- **Control Plane UI is THEMED. Read `workbench/control_plane/DESIGN_SYSTEM.md`
+  before writing any of it.** Settings → Appearance switches the whole org between
+  RapidTool, Fluent, Material and Graphite, which disagree about palette, corner
+  radius, icon pack, glass/glow and control behaviour (Material buttons are pills,
+  Graphite's labels are uppercase). Three rules, all machine-checked by
+  `src/lib/theme/conformance.test.ts`:
+  1. **Never write a colour.** Use `bg-primary`, `text-foreground`,
+     `border-border`, `var(--success)` — not `#0ea5e9`, `hsl(…)` or `bg-[#1a1b1e]`.
+     Text on a coloured fill takes the `-foreground` partner, never `text-white`.
+  2. **Never import `lucide-react`.** Use `<Icon name="Plus" />`; Lucide names are
+     the vocabulary, the theme picks the pack.
+  3. **Never hand-roll a control.** Use `Button`/`Input`/`Badge` from
+     `src/components/ui/` — a theme's state layer, focus ring and label transform
+     are not expressible in a class string, which is why the primitives exist.
+  Also use the shared `Tabs`, `FilterPills` and page-header patterns from
+  `src/components/` rather than inlining ad-hoc versions.
+- **Apps that run in the sandbox** (Custom Apps, generative UI, React artifacts)
+  inherit nothing from the shell — they get the `--cc-*` contract instead
+  (`src/lib/theme/app-tokens.ts`, documented in
+  `apps/agents/agent-app-builder/instructions.md`). Style with those tokens and
+  the app follows the org's theme for life; write one hex value and that part of
+  it leaves the design system permanently.
 - Agent-generated artefacts (images, reports, PDFs) MUST be written to
   `inputs/`, `outputs/`, or `agent-data/` within the agent workspace so the
   Control Plane file browser and inline chat cards can discover them.  These
diff --git a/apps/agents/agent-app-builder/instructions.md b/apps/agents/agent-app-builder/instructions.md
index 0602fbd0..1e0271c3 100644
--- a/apps/agents/agent-app-builder/instructions.md
+++ b/apps/agents/agent-app-builder/instructions.md
@@ -116,14 +116,53 @@ single line of CSS. Reach for these instead of hand-rolling equivalent styles;
 it's both the fastest path (no CSS to write or debug) and the only way the app
 is guaranteed to look native, not "close enough."
 
-**Never redeclare these** (no `:root { --primary: ... }`, no `.cc-card { ... }`
-override) — use them as-is, the same rule `load_design_system`'s full reference
-states for reports.
-
-- **Tokens** (use directly in your own CSS, never redefine): `--cc-bg`,
-  `--cc-card`, `--cc-fg`, `--cc-muted`, `--cc-border`, `--cc-secondary`,
-  `--cc-primary`, `--cc-primary-fg`, `--cc-accent`, `--cc-success`,
-  `--cc-warning`, `--cc-danger`, `--cc-radius`, `--cc-ease`.
+### The one rule that matters: never write a colour
+
+**CommandCenter is themed, and the theme is an org-wide setting somebody can
+change at any time.** RapidTool, Fluent, Material and Graphite differ in palette
+*and* in personality — corner radius, button shape, icon set, whether labels are
+uppercase, how a control reacts to hover. Settings → Appearance switches all of
+it, for everyone, in one click.
+
+Every `--cc-*` value below is resolved from **whatever theme is active when your
+app is opened**, and updates live if it changes while the app is running. So an
+app styled with tokens follows the company's design system for the rest of its
+life, with no edit. An app with `background: #0ea5e9` in it is stuck looking like
+2026's theme forever, on a surface where everything around it has moved on — and
+because it *renders fine*, nobody will notice until it looks broken.
+
+That is the whole deal: **use the tokens and you get theming for free; write one
+hex value and that part of your app leaves the design system permanently.**
+
+**Never redeclare a token** (no `:root { --cc-primary: ... }`, no
+`.cc-card { ... }` override) — a redeclaration is a hardcoded colour with extra
+steps, and it wins over the theme.
+
+- **Colour** — `--cc-bg` (page), `--cc-card` (panel), `--cc-fg` (text),
+  `--cc-muted` (secondary text), `--cc-border`, `--cc-secondary` (quiet fills),
+  `--cc-primary` + `--cc-primary-fg` (the interactive colour and the ink that
+  goes ON it), `--cc-accent`, and the four states `--cc-success`,
+  `--cc-warning`, `--cc-danger` each with an ink pair `--cc-success-fg`,
+  `--cc-warning-fg`, `--cc-danger-fg`.
+  **Always use the `-fg` partner for text on a coloured fill.** White is not
+  safe: some themes ship a pale warning colour, and white-on-pale is invisible.
+- **Type** — `--cc-font` (UI stack), `--cc-mono` (figures, code, anything that
+  should line up in columns), `--cc-heading-weight`, `--cc-heading-tracking`.
+  *Caveat worth knowing:* the frame can only pass **named and system** families,
+  so you get Segoe UI on Fluent and Roboto on Material, but not a self-hosted
+  webfont — the sandbox blocks font loading by design. Shape, spacing and colour
+  cross intact; that one thing does not.
+- **Shape & motion** — `--cc-radius`, `--cc-border-width`, `--cc-shadow`,
+  `--cc-duration`, `--cc-ease`. Use `--cc-ease` and `--cc-duration` for
+  transitions rather than inventing curves; it is how the app feels the same as
+  the shell around it.
+- **Control personality** — `--cc-button-radius` (Material makes buttons full
+  pills, Fluent nearly square), `--cc-control-filled-border`,
+  `--cc-control-state-layer`, `--cc-control-focus-ring`,
+  `--cc-control-label-tracking`, `--cc-control-label-transform`.
+  You mostly won't touch these: `.cc-btn` and the native controls already apply
+  them. They are here for when you build a control the kit doesn't have, so it
+  can behave like the ones it does.
 - **Buttons & panels** — `<button class="cc-btn cc-primary">Save</button>` /
   `<button class="cc-btn">Cancel</button>`, `<div class="cc-card">…</div>`.
   Native `input`/`select`/`textarea`/`input[type=range]` are already styled
diff --git a/docs/THEMING_ENGINE_SCOPE.md b/docs/THEMING_ENGINE_SCOPE.md
index 63ec1a8e..362d042c 100644
--- a/docs/THEMING_ENGINE_SCOPE.md
+++ b/docs/THEMING_ENGINE_SCOPE.md
@@ -48,6 +48,43 @@ them, and rendered offline.
 `themedIcon(name)` returns a memoised component bound to one name, for tables
 that store an icon rather than rendering it inline; `ThemedIcon` is its type.
 
+**Apps and generated UI follow the theme too.** Custom Apps, generative-UI
+cards and React artifacts run in an opaque-origin iframe: they inherit nothing —
+not our stylesheet, not `data-theme`, not one custom property. They already had
+a token vocabulary (`--cc-*`, written into `agent-app-builder`'s instructions
+and `acb_skills/design.md`), but its **values were hand-written RapidTool
+literals switching only on light/dark**, so every app ever built stayed
+RapidTool-blue while the shell around it turned Fluent or Material. Nothing
+errored; it just quietly did not theme.
+
+`app-tokens.ts` now derives that block from the active manifest, and
+`sandbox-frame.ts` builds the frame around it. Colour, ink pairs, type, shape,
+motion and the theme's *control personality* (Material's pill buttons and 8%
+state layer, Fluent's tight ring, Graphite's uppercase labels) all cross, so an
+app built a year ago picks up a new theme's behaviour and not merely its
+palette. Icons cross as SVG resolved from the active pack. The block is applied
+twice: in the frame's first `<style>` so there is no flash, and as a live
+`postMessage` patch on a theme change — a patch rather than a rebuild, because
+rebuilding `srcDoc` remounts the document and a published app would throw away
+whatever the user had typed into it.
+
+`--cc-*` is deliberately a *separate, smaller, stable* vocabulary rather than
+our own tokens: our set is Tailwind's `@theme inline` surface and we rename
+things in it, while `--cc-*` is published into apps we cannot go back and edit.
+The two are kept in sync by a test that checks the code against the agent
+instructions in both directions. One honest limit: **self-hosted webfonts do not
+cross** — the frame's CSP is `font-src data:` — so an app gets the theme's named
+and system families (Segoe UI, Roboto) and falls back where one is absent.
+
+**Staying themed** is enforced, not asked for. `conformance.test.ts` fails the
+build on a hardcoded colour, a `lucide-react` import, an arbitrary Tailwind
+colour class, or a hand-rolled solid control. Existing debt is a frozen
+baseline that may only shrink: a file with no budget must be clean, a baselined
+file may not get worse, and one that got *better* fails until its number is
+lowered — so the figures can never quietly become fiction. Values that are
+genuinely not theme decisions (weather pictograms, Gmail's label palette, a
+person's identity hue) sit in an exceptions list with the argument for each.
+
 **Third-party surfaces** — Monaco and Shiki — name their equivalents per theme
 in `surfaces`, so a code view follows the theme rather than only the colour
 mode. Fluent highlights with VS Code's own dark-plus, Material with
diff --git a/packages/acb_skills/acb_skills/design.md b/packages/acb_skills/acb_skills/design.md
index 2978c831..416a51d5 100644
--- a/packages/acb_skills/acb_skills/design.md
+++ b/packages/acb_skills/acb_skills/design.md
@@ -35,10 +35,22 @@ Design mood words: **precise, calm, technical, trustworthy, spacious.**
 
 ## 2. Color palette & roles
 
-Use these semantic roles, not raw hex. In-app, they exist as CSS variables
-(`var(--primary)` etc.); in generated HTML sandboxes they are pre-defined as
-`--cc-*` variables (see §9). The HSL values below are the dark theme (the base);
-light-theme overrides are applied automatically by the app.
+Use these semantic roles, **never a raw hex value**. In-app they exist as CSS
+variables (`var(--primary)` etc.); in generated HTML sandboxes they are
+pre-injected as `--cc-*` variables (see §9).
+
+⚠️ **The HSL values in the table below are ONE theme's, and they are there to
+tell you what a role means — not to be copied.** CommandCenter is themed:
+Settings → Appearance switches the whole org between RapidTool, Fluent, Material
+and Graphite, which disagree about palette, corner radius, icon set and control
+behaviour. The token resolves to whatever is active when your artifact is
+*viewed*, which may be months after you wrote it and may not be what is active
+now. Write `var(--primary)` and it follows; write `hsl(198 89% 50%)` and that
+part of your artifact leaves the design system permanently — while still
+rendering fine, so nobody notices until it looks wrong.
+
+The values shown are RapidTool's dark mode. Light-mode and per-theme overrides
+are applied automatically.
 
 | Role | Token | Dark value | Use for |
 |------|-------|-----------|---------|
@@ -58,9 +70,11 @@ light-theme overrides are applied automatically by the app.
 | Ring | `--ring` | `hsl(198 89% 50%)` | Focus outline (matches primary) |
 
 **Rules:**
-- Blue (`--primary`) is the ONLY interactive color. If it's clickable, it's blue.
-- Orange (`--accent`) is a spotlight, not a second button color. Use it for one
-  key metric, a highlight, or an "attention" badge — never for large fills.
+- `--primary` is the ONLY interactive color. If it's clickable, it's primary.
+  (It is blue on RapidTool; other themes choose their own — which is the point,
+  and why the rule names the token and not the colour.)
+- `--accent` is a spotlight, not a second button color. Use it for one key
+  metric, a highlight, or an "attention" badge — never for large fills.
 - Never introduce colors outside this palette. No pure black (`#000`), no pure
   white text on dark (use `--foreground`), no random greens/purples.
 
@@ -70,7 +84,8 @@ light-theme overrides are applied automatically by the app.
 
 - **Font family:** the app's system UI stack (Inter / system-ui, sans-serif).
   In generated HTML, use `font-family: var(--cc-font, system-ui, -apple-system, "Segoe UI", sans-serif)`.
-- Monospace (code, data, keys): `ui-monospace, "SF Mono", Menlo, Consolas, monospace`.
+- Monospace (code, data, keys): `var(--cc-mono)` in a sandbox, `font-mono`
+  in-app. Both follow the theme — Fluent uses Cascadia, Material Roboto Mono.
 - **Hierarchy:**
   - Page title / H1 — `1.5rem`, weight `600`, tight tracking.
   - Section / H2 — `1.125rem`, weight `600`.
@@ -316,10 +331,23 @@ Both render in a locked sandbox with these CSS variables **pre-injected** — us
 them, don't redefine colors:
 
 ```
---cc-primary  --cc-accent  --cc-fg  --cc-muted  --cc-card  --cc-secondary
---cc-border   --cc-success --cc-warning --cc-danger --cc-radius --cc-ease
+colour   --cc-bg --cc-card --cc-fg --cc-muted --cc-border --cc-secondary
+         --cc-primary --cc-primary-fg --cc-accent
+         --cc-success --cc-warning --cc-danger  (+ -fg ink for each)
+type     --cc-font --cc-mono --cc-heading-weight --cc-heading-tracking
+shape    --cc-radius --cc-border-width --cc-shadow
+motion   --cc-duration --cc-ease
+control  --cc-button-radius --cc-control-filled-border --cc-control-state-layer
+         --cc-control-focus-ring --cc-control-label-tracking
+         --cc-control-label-transform
 ```
 
+Text on a coloured fill takes the `-fg` partner, never `white` — some themes
+ship a pale warning colour and white-on-pale is invisible. The full list with
+per-token guidance is in `apps/agents/agent-app-builder/instructions.md`, which
+a test checks against the code that injects them in both directions — so a token
+listed here always exists, and one that exists is always listed.
+
 - Wrap the document in a container with `max-width` and centered layout.
 - Use `--cc-card` panels on the `--cc-*` background, `--cc-border` hairlines,
   `--cc-primary` for anything interactive, one `--cc-accent` highlight.
diff --git a/workbench/control_plane/AGENTS.md b/workbench/control_plane/AGENTS.md
index 8bd0e390..d711bff8 100644
--- a/workbench/control_plane/AGENTS.md
+++ b/workbench/control_plane/AGENTS.md
@@ -3,3 +3,24 @@
 
 This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
 <!-- END:nextjs-agent-rules -->
+
+# This UI is themed — read DESIGN_SYSTEM.md first
+
+`DESIGN_SYSTEM.md` in this directory is the contract, not a style suggestion.
+The short version, because these are the three mistakes that actually happen:
+
+1. **Never write a colour.** `bg-primary`, `text-muted-foreground`,
+   `var(--success)` — never `#0ea5e9`, `hsl(…)`, or `bg-[#1a1b1e]`. On a
+   coloured fill use the `-foreground` partner, not `text-white`.
+2. **Never `import … from "lucide-react"`.** Use `<Icon name="Plus" />` — the
+   active theme decides which pack draws it.
+3. **Never hand-roll a control.** `Button` / `Input` / `Badge` from
+   `src/components/ui/`. Material makes every button a pill, Graphite uppercases
+   every label; no class string can express that.
+
+All three are enforced by `src/lib/theme/conformance.test.ts`, which carries a
+frozen baseline for existing debt: a file with no budget must be clean, a
+baselined file may not get worse, and a baselined file that got *better* fails
+until you lower its number — so the debt figures never quietly become fiction.
+
+`npx vitest run src/lib/theme/` before you push.
diff --git a/workbench/control_plane/DESIGN_SYSTEM.md b/workbench/control_plane/DESIGN_SYSTEM.md
index 883f1b2e..c73e94f7 100644
--- a/workbench/control_plane/DESIGN_SYSTEM.md
+++ b/workbench/control_plane/DESIGN_SYSTEM.md
@@ -1,374 +1,272 @@
 # CommandCenter Control Plane — Design System
 
-Unified UI/UX standards for all Control Plane pages. Every page, endpoint, and
-agent-generated UI MUST follow these conventions.
+**The whole document in one sentence: never write a colour, an icon import, or a
+control's chrome by hand — every one of those is a theme decision, and the theme
+is a setting somebody can change for the entire company in one click.**
 
----
+This is the contract for every page in the Control Plane and every app built
+inside CommandCenter. `src/lib/theme/conformance.test.ts` enforces the parts a
+machine can check; the rest is here.
 
-## The design system is themeable
+---
 
-The Control Plane ships several themes — RapidTool (default), Fluent
-(Microsoft), Material (Google) and Graphite — and members switch between them
-in **Settings → Appearance**. A theme changes colours, fonts, corner radius,
-effects **and the icon pack**, all at once, across every page.
+## 0. What "themed" actually means here
 
-This works only because components describe intent (`bg-primary`,
-`rounded-lg`, `<Icon name="Plus">`) rather than appearance (`bg-[#0ea5e9]`,
-`rounded-[12px]`, `<Plus />`). Hardcoding any visual value opts that element
-out of theming: it will look correct on the default theme and wrong on every
-other one.
+CommandCenter ships four themes — RapidTool, Fluent, Material, Graphite —
+switchable at **Settings → Appearance**, org-wide. They differ by far more than
+palette:
 
-**The three rules that keep the app themeable:**
+| | RapidTool | Fluent | Material | Graphite |
+|---|---|---|---|---|
+| Corner radius | `0.75rem` | `0.25rem` | `1rem` | `0.125rem` |
+| Button radius | follows radius | follows radius | `9999px` — full pills | follows radius |
+| Icon set | Lucide | Fluent UI | Material Symbols | Lucide |
+| Button labels | sentence case | sentence case | sentence case | **UPPERCASE** |
+| Hover | opacity shift | opacity shift | 8% state layer | opacity shift |
+| Glass blur | 16px | 30px | **0 — flat** | 8px |
+| Glow | on | off | off | off |
 
-1. **Never hardcode a colour.** Use the semantic tokens below.
-2. **Never hardcode a radius, blur, shadow or transition.** Use `rounded-*`,
-   `tech-glass`, `tech-elevated`, `tech-transition`.
-3. **Never import from `lucide-react` in a component.** Use
-   `<Icon name="Plus" />` from `@/components/Icon`.
+Two axes, deliberately independent:
 
-Themes are data: `src/lib/theme/themes.ts`. Adding one is a manifest entry —
-no component, CSS or Tailwind change. See "Theming engine" at the end of this
-document.
+* **style** — the theme identity, on `<html data-theme="…">`
+* **mode** — light/dark, on the `.light` / `.dark` class (next-themes)
 
----
+Every theme supplies both modes, so the axes never interfere. A component that
+handles one but not the other is broken on half the matrix.
 
-## Color Tokens (HSL — Tailwind CSS v4)
-
-Every theme supplies a full set of these; the table shows the default theme's
-values. Always use the semantic token name, never a raw hex value.
-
-| Token | Dark (default) | Light (.light) | Usage |
-|---|---|---|---|
-| `--primary` | `hsl(198 89% 50%)` | `hsl(198 89% 35%)` | Primary actions, active states, links |
-| `--accent` | `hsl(27 96% 61%)` | `hsl(27 96% 61%)` | Call-to-action highlights |
-| `--background` | `hsl(220 13% 8%)` | `hsl(0 0% 100%)` | Page background |
-| `--foreground` | `hsl(210 40% 98%)` | `hsl(222.2 84% 4.9%)` | Primary text |
-| `--card` | `hsl(220 13% 10%)` | `hsl(0 0% 100%)` | Card / panel surfaces |
-| `--secondary` | `hsl(220 13% 14%)` | `hsl(210 40% 96%)` | Secondary surfaces, hover states |
-| `--muted` | `hsl(220 13% 15%)` | `hsl(210 40% 96%)` | Muted backgrounds |
-| `--muted-foreground` | `hsl(215 20% 65%)` | `hsl(215.4 16.3% 46.9%)` | Secondary text, placeholders |
-| `--border` | `hsl(220 13% 16%)` | `hsl(214.3 31.8% 91.4%)` | Borders, dividers |
-| `--success` | `hsl(142 76% 47%)` | `hsl(142 76% 47%)` | Success states, connected indicators |
-| `--warning` | `hsl(47 96% 53%)` | `hsl(47 96% 53%)` | Warning states |
-| `--destructive` | `hsl(0 63% 60%)` | `hsl(0 84.2% 60.2%)` | Error states, delete actions |
-| `--ring` | `hsl(198 89% 50%)` | `hsl(198 89% 50%)` | Focus rings |
-
-**Tailwind classes:** `bg-primary`, `text-foreground`, `border-border`, etc.
-Never use `bg-[#1a1b1e]` or arbitrary hex values.
+**The consequence for you:** a hardcoded value is not "a small inconsistency."
+It is a pixel that permanently leaves the design system, and it will *render
+fine* — so nobody catches it until the day the theme changes and that one card
+looks like it belongs to a different product.
 
 ---
 
-## Typography
+## 1. Colour — always a token
 
-Fonts come from the active theme — `font-sans` resolves to Geist on RapidTool,
-Segoe UI on Fluent, Roboto on Material. Never name a family directly.
+Tailwind v4 is wired to the theme's custom properties, so the semantic class
+names *are* the theme.
 
-| Element | Font | Class |
+| Token | Class | Use |
 |---|---|---|
-| Body text | theme's app font | `font-sans` (default) |
-| Code / monospace | theme's mono font | `font-mono` |
-| Page title (`h1`) | theme font | `text-base sm:text-lg font-bold text-foreground` |
-| Section heading | theme font | `text-sm font-semibold text-foreground` |
-| Body / description | theme font | `text-xs text-muted-foreground` |
-| Small label / badge | theme font | `text-[10px] text-muted-foreground` |
+| `--background` / `--foreground` | `bg-background` `text-foreground` | page base, primary text |
+| `--card` / `--card-foreground` | `bg-card` | panels, tiles |
+| `--popover` | `bg-popover` | menus, tooltips |
+| `--primary` / `--primary-foreground` | `bg-primary` `text-primary` | interactive: buttons, links, active state |
+| `--secondary` | `bg-secondary` | quiet fills, hover surfaces |
+| `--muted` / `--muted-foreground` | `bg-muted` `text-muted-foreground` | subtle fill / secondary text |
+| `--accent` | `text-accent` | one highlight, used sparingly |
+| `--success` `--warning` `--destructive` (+ `-foreground`) | `text-success` … | states |
+| `--border` / `--input` / `--ring` | `border-border` `ring-ring` | hairlines, focus |
+
+**Never:** `#0ea5e9`, `rgb(…)`, `hsl(…)`, `bg-[#1a1b1e]`, or `style={{ color:
+"…" }}` with a literal.
+
+**Text on a coloured fill takes the `-foreground` partner**, not white.
+`text-white` on `bg-warning` is invisible on a theme with a pale warning colour —
+which is not hypothetical, it was a real bug in the sandbox stylesheet.
+
+**Tints and translucency are fine and stay themed:** `bg-primary/10`,
+`border-primary/30`, `color-mix(in srgb, var(--success) 12%, var(--card))`. A
+token at an opacity is still a token.
+
+### The three exceptions, and why they are exceptions
+
+A literal is right only when the value is **not a theme decision**:
+
+1. **Illustration** — a sun in a weather glyph is yellow because suns are
+   yellow. Recolouring it per theme produces broken art, not themed art.
+   (`genUITemplates.tsx`'s `WEATHER_INK`, `observability/pixel.tsx`.)
+2. **Someone else's palette** — Gmail's label colours must match Gmail's or the
+   value does not round-trip to the real mailbox. Meta blue on a "Connect with
+   Facebook" button is Meta's, not ours.
+3. **Identity** — a per-person avatar hue derived from their email must be
+   *stable*; deriving it from the theme defeats the thing it is for.
+
+"It would be a lot of work to migrate" is not on this list — that is debt, and
+it belongs in the conformance test's baseline where it stays visible.
 
 ---
 
-## Shared Components
-
-**Always import from `@/components/` — never inline ad-hoc versions.**
-
-### Tabs (`@/components/Tabs`)
-
-Two variants for tab navigation:
-
-- **`variant="segmented"`** — Pill-group style. Best for 2–5 short text labels.
-  Used in: Settings > Models.
-- **`variant="underline"`** — Bottom-border highlight style. Best for tabs
-  with icons or longer labels. Used in: Integrations.
-
-```tsx
-import Tabs from "@/components/Tabs";
-
-// `icon` is a Lucide NAME, not a component — a component would pin the tab
-// bar to one icon pack while the rest of the app follows the theme.
-<Tabs
-  tabs={[
-    { id: "apis",    label: "APIs",    icon: "Zap" },
-    { id: "email",   label: "Email",   icon: "Mail" },
-    { id: "mcps",    label: "MCPs",    icon: "Server" },
-    { id: "plugins", label: "Plugins", icon: "Puzzle" },
-  ]}
-  activeTab={tab}
-  onTabChange={setTab}
-  variant="underline"
-/>
-```
-
-### FilterPills (`@/components/FilterPills`)
-
-Rounded pill buttons for filtering lists. Used in: Agents, Models.
-
-```tsx
-import FilterPills from "@/components/FilterPills";
-
-<FilterPills
-  items={[
-    { id: "all",     label: "All",     count: 12 },
-    { id: "builtin", label: "Built-in", count: 5 },
-    { id: "custom",  label: "Custom",   count: 7 },
-  ]}
-  activeId={filter}
-  onChange={setFilter}
-/>
-```
-
-### Buttons, inputs and badges — use the primitives
+## 2. Icons — `<Icon>`, never an import
 
 ```tsx
-import Button from "@/components/ui/Button";
-import { Input, Textarea } from "@/components/ui/Input";
-import Badge from "@/components/ui/Badge";
-
-<Button onClick={save}>Save</Button>                            // primary
-<Button variant="secondary" size="sm">Cancel</Button>
-<Button variant="destructive" icon="Trash2" loading={busy}>Delete</Button>
-<Button variant="ghost" size="icon" icon="X" aria-label="Close" />
-
-<Input icon="Search" value={q} onChange={…} placeholder="Search" />
-<Textarea rows={4} value={body} onChange={…} />
+import Icon from "@/components/Icon";
 
-<Badge tone="success" dot>Connected</Badge>
+<Icon name="Plus" size={16} className="text-primary" />
 ```
 
-| Prop | Values |
-|---|---|
-| `variant` | `primary` (default) · `secondary` · `ghost` · `destructive` |
-| `size` | `sm` · `md` (default) · `lg` · `icon` |
-| `icon` | Lucide icon name — follows the theme's pack |
-| `loading` | Shows a spinner **and disables the button**, so a double-submit is impossible |
-
-**Do not hand-roll a button from classes.** The old recipe table lived here and
-was copied into ~75 files. It could carry colour and radius, because those are
-tokens — but not *behaviour*, and behaviour is where a design system's identity
-actually is: Material renders pills with a translucent state layer on hover,
-Fluent strokes even its solid buttons and weights labels heavier, Graphite
-upper-cases them. Those come from the control tokens (`--button-radius`,
-`--control-state-layer`, `--control-filled-border`, `--control-focus-ring`,
-`--control-label-tracking`, `--control-label-transform`) and need one component
-to apply them. A copied class string opts that control out.
-
-`className` on a primitive is for **layout only** — margins, width, grid
-placement. Colour, radius and weight come from the variant.
+Lucide names are the shared **vocabulary**; the active theme picks the **pack**.
+`"Plus"` renders Lucide's `Plus` on RapidTool, `fluent:add-20-regular` on
+Fluent, `material-symbols:add-rounded` on Material. Call sites never know.
 
-Anything genuinely bespoke that still needs to feel like a control (a
-selectable chip, a toggle) should carry the `cc-control` class, which supplies
-the theme's label weight, tracking, transform and focus ring without imposing a
-variant.
+`import { Plus } from "lucide-react"` pins that one glyph to Lucide on every
+theme — one Lucide icon in a row of Material Symbols, which reads as a bug. Only
+`components/Icon.tsx` and `lib/icons.tsx` may import it, and the conformance
+test enforces that with no budget and no exceptions.
 
-### Page Header
-
-Every page MUST use the same header pattern:
-
-```tsx
-<div className="flex items-center justify-between px-4 sm:px-6 py-3 sm:py-4 border-b border-border shrink-0">
-  <div>
-    <h1 className="text-base sm:text-lg font-bold text-foreground">Page Title</h1>
-    <p className="text-xs text-muted-foreground mt-0.5">Brief description or status</p>
-  </div>
-  {/* Action buttons go here */}
-</div>
-```
+Need a component reference rather than an element (a `tabs={[{icon}]}` prop)?
+Use `themedIcon("Plus")` from `@/components/Icon` — memoised, so it is stable
+across renders.
 
-### Status Indicators
+**A name with no mapping in the active pack falls back to Lucide** rather than
+rendering nothing. If you add an icon, add its mapping in
+`lib/theme/icon-registry.ts` too, or it will silently stay Lucide forever.
 
-- **Connected/Ready:** `text-success` with a `bg-success` dot (`w-1.5 h-1.5 rounded-full`)
-- **Disconnected/Blocked:** `text-muted-foreground` with a `bg-muted` dot
-- **Warning:** `text-warning` with `bg-warning` dot
-
-### Cards / Tiles
-
-Interactive cards (agent tiles, provider cards, API cards) use:
-
-```tsx
-<button className={`text-left w-full p-3 sm:p-4 rounded-xl border tech-transition
-  ${selected ? "border-primary bg-primary/5 ring-1 ring-primary/20"
-             : "border-border bg-card hover:border-primary/40 hover:bg-secondary/30"}`}>
-  {/* card content */}
-</button>
-```
+Sizes: `14`–`16` inline with text, `18`–`20` standalone. Pick one per context.
 
 ---
 
-## Icons
-
-Use the **`<Icon>`** component. It renders the glyph from whichever pack the
-active theme asks for — Lucide, Fluent System Icons, or Material Symbols.
+## 3. Controls — the primitives, not a class string
 
 ```tsx
-import Icon from "@/components/Icon";
+import Button from "@/components/ui/Button";
+import Input, { Textarea } from "@/components/ui/Input";
+import Badge from "@/components/ui/Badge";
 
-<Icon name="Plus" size={16} />
-<Icon name="AlertTriangle" size={14} className="text-warning" />
+<Button variant="primary" icon="Save" loading={saving}>Save</Button>
+<Button variant="secondary">Cancel</Button>
+<Button variant="ghost" size="icon" aria-label="Close"><Icon name="X" size={14} /></Button>
 ```
 
-**Lucide names are the vocabulary.** `name` is always a Lucide component name
-(`Plus`, `Trash2`, `MessageCircle`); other packs map onto those names. Any of
-Lucide's ~1,600 names works — one without a mapping simply renders the Lucide
-glyph on every theme, which is a safe default, not an error.
+`Button` — `variant`: `primary | secondary | ghost | destructive | text`;
+`size`: `sm | md | lg | icon-xs | icon-sm | icon | none`; plus `icon`,
+`loading`, `radius`, `layout`.
+
+**Why this is a component and not a documented class string.** Colour can be a
+class. A theme's *control personality* cannot: Material's 8% hover state layer,
+Fluent's outline on solid fills, the theme's focus-ring width and label
+tracking. None of that is expressible in a `className`, which is exactly why the
+primitives exist. A raw `<button className="bg-primary …">` is themed for colour
+and frozen for everything else.
+
+Graphite uppercases every button label and Material makes every button a pill —
+neither is something a call site opts into, and neither is reachable from a
+class string. That is the concrete reason for the primitive.
+
+Two props exist because Tailwind genuinely cannot express the alternative — read
+their doc comments before working around them:
+
+* `layout` **replaces** the default `inline-flex items-center justify-center`.
+  It is a prop, not something `className` can override, because
+  `justify-center` and `justify-start` have equal specificity: which one wins
+  depends on stylesheet order, not on your class attribute. `layout=""` is
+  meaningful — a bare `<button>` is `inline-block`, and forcing `inline-flex`
+  moves its content.
+* `radius="keep"` omits the theme's button radius so an explicit `rounded-*`
+  survives. For controls that predate the primitive and want the theme's label
+  treatment and focus ring *without* resized corners. Use `theme` for anything
+  new.
+
+`className` on a primitive is for **layout only** — never colour, radius or
+weight. If you find yourself reaching for those, the variant you want is
+missing; add it to the primitive.
+
+**Not every `<button>` is a control.** A clickable card or list row is a button
+element for accessibility, and those legitimately stay raw — the rule is about
+things that *look* like controls.
 
-Migrating an existing call site is a one-line change:
+---
 
-```diff
-- import { Plus } from "lucide-react";
-+ import Icon from "@/components/Icon";
-- <Plus size={16} />
-+ <Icon name="Plus" size={16} />
-```
+## 4. Effects, shape and motion
 
-**Do not import from `lucide-react` in a component.** A direct import pins that
-glyph to Lucide, so it stays Lucide-shaped while everything around it turns
-Fluent or Material.
+Use the utilities; they read theme tokens, so a flat theme flattens them.
 
-Two deliberate exceptions, both because they cannot run React hooks:
-`resolveIcon()` in `@/lib/icons` (used by server components) and
-`iconSvg.ts` (renders to a static SVG string for the HTML sandbox).
+| Class | What it does |
+|---|---|
+| `tech-transition` | the theme's duration + easing on all properties |
+| `tech-glass` / `tech-glass-subtle` | frosted panel — **opaque on flat themes**, by design |
+| `tech-glow` | primary glow — **off** where `glowStrength: 0` |
+| `pb-safe` / `pt-safe` | iOS safe-area padding |
 
-Common icon sizes:
-- Inline with text: `size={14}` or `size={16}`
-- Standalone buttons: `size={16}` or `size={18}`
-- Card/tile icons: `size={20}`
+Radius comes from `--radius` via `rounded-sm/md/lg`. Don't write `rounded-[14px]`.
 
-To add a mapping for a new icon, add it to `MAP` in
-`scripts/build-icon-packs.mjs` and run `npm run build:icons`. The script
-resolves candidates against the real collections, so a name that does not
-exist fails loudly rather than shipping a blank square.
+Motion: `duration-[var(--motion-duration)]` / `ease-[var(--motion-easing)]`, or
+just `tech-transition`. Respect `prefers-reduced-motion`.
 
 ---
 
-## Page Layout
-
-Every page follows this structure:
-
-```
-┌──────────────────────────────────────────────┐
-│ Page Header (h1 + description + actions)     │ ← border-b
-├──────────────────────────────────────────────┤
-│ Tabs or FilterPills (if needed)              │ ← border-b
-├──────────────────────────────────────────────┤
-│ Main content area (flex-1 overflow-y-auto)   │
-│   - Filters / search bar                     │
-│   - Grid or list of items                    │
-│   - Optional side panel (desktop, w-[380px]) │
-└──────────────────────────────────────────────┘
-```
+## 5. Apps that run in the sandbox
+
+Custom Apps, generative-UI cards and React artifacts run in an **opaque-origin
+iframe**. They inherit nothing from us — not our stylesheet, not `data-theme`,
+not one custom property — so they get a separate, deliberately stable
+vocabulary: the **`--cc-*` contract**.
+
+* Defined in `src/lib/theme/app-tokens.ts`. **Nothing else may write those
+  variables.** The frame itself — CSP, token block, `.cc-*` component kit and
+  the `postMessage` bridge — is `src/lib/theme/sandbox-frame.ts`, deliberately
+  free of React so the e2e suite can drive the *real* frame rather than a copy
+  of it.
+* Documented for app authors in
+  `apps/agents/agent-app-builder/instructions.md`, which the conformance test
+  checks against the code in both directions — a token that exists but is
+  undocumented is one no app will use; a documented token that does not exist is
+  one an app *will* use and silently lose, because an unresolvable `var()`
+  invalidates the whole declaration.
+* Applied twice: in the frame's initial `<style>` (so the first paint is
+  correct, no flash) and as a live `postMessage` patch on a theme change — a
+  patch rather than a rebuild, because rebuilding `srcDoc` remounts the document
+  and a running app would lose whatever the user had typed into it.
+* Icons cross as pre-rendered SVG from the active pack, so a sandboxed app's
+  glyphs match the shell's.
+
+**Adding a `--cc-*` token:** add it to `appTokens()`, document it in the
+app-builder instructions, and the test will confirm you did both.
+
+One honest limit: **self-hosted webfonts do not cross the boundary.** The frame's
+CSP is `font-src data:` and the `@font-face` rules live in a stylesheet it cannot
+reach, so a sandboxed app gets the theme's *named and system* families (Segoe UI
+on Fluent, Roboto on Material) and falls back where one is absent. Colour, shape,
+spacing, motion and icons all cross intact.
 
 ---
 
-## Tech Utilities (from globals.css)
-
-All of these are token-driven, so their behaviour changes with the theme — a
-flat theme like Material renders `tech-glass` opaque and `tech-glow` invisible
-rather than needing a separate code path.
-
-| Class | Purpose |
-|---|---|
-| `tech-transition` | Themed transition on all properties (`--motion-duration` / `--motion-easing`) |
-| `tech-glass` | Frosted panel — blur and opacity from `--glass-blur` / `--glass-opacity` |
-| `tech-glass-subtle` | Same material at higher opacity, for modals and drawers over live content |
-| `tech-glow` | Primary-colour glow, scaled by `--glow-strength` (0 disables it) |
-| `tech-elevated` | Elevation shadow from `--elevation` — how flat themes express depth |
-| `pb-safe` / `pt-safe` | iOS safe-area padding |
+## 6. Shared components
 
----
+Check `src/components/` before writing a tab bar, filter pills or a page header.
 
-## Rules for Agents & Contributors
+* `Tabs` — `variant="segmented"` (2–5 short labels) or `"underline"` (icons or
+  longer labels). Takes icon **names**, not components.
+* `FilterPills` — rounded filter buttons with counts.
+* Page header — every page uses the same shape:
 
-1. **Use shared components.** Check `src/components/` before writing any
-   tab bar, filter pills, or page header. Import `Tabs`, `FilterPills`,
-   or existing components.
+```tsx
+<div className="flex items-center justify-between px-4 sm:px-6 py-3 sm:py-4 border-b border-border shrink-0">
+  <div>
+    <h1 className="text-base sm:text-lg font-bold text-foreground">Title</h1>
+    <p className="text-xs text-muted-foreground mt-0.5">Description or status</p>
+  </div>
+  {/* actions */}
+</div>
+```
 
-2. **Follow the color tokens.** Never use arbitrary hex values or Tailwind
-   arbitrary values like `bg-[#1a1b1e]`. Use `bg-primary`, `text-foreground`,
-   `border-border`, etc.
+Layout: header → tabs/filters → `flex-1 overflow-y-auto` content, optional
+`w-[380px]` desktop side panel (bottom sheet on mobile).
 
-3. **Match the page layout.** Every new page should mirror the header →
-   tabs/filters → content pattern described above.
+Spacing: page padding `px-4 sm:px-6`, content `p-4`, grid gaps `gap-3`.
+Grids: `grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5`.
 
-4. **Use consistent spacing.** Page-level padding is `px-4 sm:px-6`.
-   Content padding is `p-4`. Gaps between grid items are `gap-3`.
+---
 
-5. **Support every theme, in both modes.** Colour usage must work in dark and
-   light, and must not assume the default theme's shape or effects. Check a
-   new surface against Fluent (square corners, no glow) and Material (round
-   corners, flat) as well as the default — those two catch nearly every
-   hardcoded value.
+## 7. Contrast
 
-6. **Mobile-responsive.** Use `sm:` breakpoint prefixes. Side panels slide
-   up from the bottom on mobile (`sm:hidden` + fixed bottom sheet).
-   Grid columns: `grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5`.
+Themes are checked against WCAG 2.1 AA by `src/lib/theme/contrast.test.ts`. It
+carries a `KNOWN_SHORTFALLS` ratchet for pre-existing pairs: they may improve,
+never regress, and **fixing one requires deleting its entry**, so the list can
+never quietly become fiction.
 
-7. **Use `<Icon>`, never a direct `lucide-react` import.** See Icons above.
+If you add or edit a theme, run that test. Never signal state with colour alone —
+pair it with an icon or a label.
 
 ---
 
-## Theming engine
-
-Where things live:
+## 8. Checklist before you open a PR
 
-| File | Role |
-|---|---|
-| `src/lib/theme/themes.ts` | The themes themselves. **Add a theme here and nowhere else.** |
-| `src/lib/theme/types.ts` | Token vocabulary — what a theme is allowed to set |
-| `src/lib/theme/css.ts` | Manifests → `html[data-theme="…"]` CSS scopes |
-| `src/lib/theme/store.ts` | Active theme, density, accent; org default vs member override |
-| `src/lib/theme/surfaces.ts` | Monaco / Shiki theme resolution for the active theme |
-| `src/lib/theme/boot.ts` | Pre-paint script that applies the stored theme (no flash) |
-| `src/components/Icon.tsx` | The themed icon primitive |
-| `scripts/build-icon-packs.mjs` | Regenerates the pruned icon packs (`npm run build:icons`) |
-| `src/app/settings/appearance/` | The Settings UI |
-
-**Two independent axes.** *Style* (which theme) lives on
-`<html data-theme="…">`; *mode* (dark/light) stays on the `.light` / `.dark`
-class managed by next-themes. Every theme defines both modes, so the axes never
-interact. Structural tokens — radius, fonts, effects — are emitted once on the
-theme's base scope and inherited by its light scope.
-
-**Why `globals.css` still contains the default theme's values.** Those
-`:root` / `.light` blocks are the no-JavaScript fallback. The generated scopes
-outrank them on specificity (0,1,1 vs 0,1,0), so they never apply in a normal
-session. They must stay identical to the `rapidtool` manifest —
-`src/lib/theme/themes.test.ts` parses the stylesheet and fails if they drift.
-**Change how the app looks by editing the manifest, not `globals.css`.**
-
-**Third-party surfaces.** Monaco and Shiki ship closed sets of named themes and
-cannot be driven by our CSS tokens, so each theme names its equivalents in
-`surfaces`. Read them with `useMonacoTheme()` / `useShikiTheme()` — never branch
-on `resolvedTheme === "light"`, which sees two states where the app has eight.
-A unit test checks the names against Monaco's built-ins and the Shiki bundle,
-because a typo there is invisible until someone opens a code view.
-
-xyflow's `colorMode` legitimately stays dark/light: it only drives the
-library's own chrome, and our nodes are styled with our tokens already.
-
-**Preference resolution:** member override → organisation default → built-in
-default. Members' choices are per-browser (localStorage); the org default is
-stored in Postgres (`org_settings`, migration 145) and served by the gateway at
-`GET/PUT /settings/appearance`, then cached locally so it survives the first
-paint. Writing it needs `admin:settings:manage` — it changes everyone's UI.
-An admin can lock the org to one theme by turning off personal overrides.
-
-The gateway deliberately does **not** know which themes exist. `themeId` is
-stored as an opaque, selector-safe string, because validating it against a copy
-of `THEMES` would mean a backend deploy for every new theme. The frontend
-re-validates on read and falls back for an id it cannot render.
-
-**Contrast is gated.** `contrast.test.ts` measures every theme × mode × text
-pair against WCAG AA and fails the build below it. Seven pairs in the original
-RapidTool palette predate the gate and are recorded in `KNOWN_SHORTFALLS` as a
-ratchet — they may improve, never regress, and fixing one forces its entry to
-be deleted. **New themes get no such latitude: they must meet AA outright.**
-
-Coverage: `src/lib/theme/*.test.ts` (manifests, CSS generation, icon registry,
-contrast) and `e2e/theming.spec.ts` (computed styles and real glyph swapping in
-a browser — the only place cascade order can actually be verified).
+1. `npx vitest run src/lib/theme/` — conformance, contrast and token contract.
+2. No literal colour, no `lucide-react` import, no hand-rolled control chrome.
+3. Switch theme **and** mode in Settings → Appearance and look at your surface.
+   Fluent and Material are the useful pair: `0.25rem` corners and 30px glass
+   against `1rem` corners, pill buttons and no glass at all. Anything you
+   hardcoded shows up immediately. Graphite is the second check — it uppercases
+   button labels, so a control that missed the primitive stays sentence case
+   next to ones that did not.
diff --git a/workbench/control_plane/e2e/react-artifact.spec.ts b/workbench/control_plane/e2e/react-artifact.spec.ts
index a5758351..fdd878c9 100644
--- a/workbench/control_plane/e2e/react-artifact.spec.ts
+++ b/workbench/control_plane/e2e/react-artifact.spec.ts
@@ -20,6 +20,8 @@
 import { expect, test } from "@playwright/test";
 
 import { compileArtifact } from "../src/lib/compileArtifact";
+import { appTokenCss } from "../src/lib/theme/app-tokens";
+import { resolveTheme } from "../src/lib/theme/themes";
 
 /** An agent-authored artifact using the API surface agents are told to use. */
 const SOURCE = `
@@ -41,7 +43,9 @@ export default function Dashboard() {
   );
 }`;
 
-/** Mirrors SandboxedHtml's frame: same CSP, content first, bridge LAST. */
+/** Mirrors the sandbox frame: same CSP, content first, bridge LAST. The token
+ *  block is imported rather than copied — a stale copy would keep passing while
+ *  the real one drifted, which is the exact failure this line guards. */
 const CSP = [
   "default-src 'none'", "style-src 'unsafe-inline'",
   "script-src 'unsafe-inline' 'unsafe-eval'", "img-src data:", "font-src data:",
@@ -61,7 +65,8 @@ function buildHost(js: string): string {
   const srcDoc =
     `<!doctype html><html data-theme="dark"><head><meta charset="utf-8">` +
     `<meta http-equiv="Content-Security-Policy" content="${CSP}">` +
-    `<style>:root{--cc-primary:hsl(198 89% 50%)}.cc-eyebrow{color:var(--cc-primary)}</style>` +
+    `<style>:root{\n${appTokenCss(resolveTheme("rapidtool"), "dark")}\n}` +
+    `.cc-eyebrow{color:var(--cc-primary)}</style>` +
     `</head><body>${mount}${BRIDGE}</body></html>`;
   return (
     `<!doctype html><html><body><iframe id="f" sandbox="allow-scripts" ` +
@@ -91,7 +96,10 @@ test("a React artifact renders, stays interactive, and reaches the agent", async
   await frame.locator("#slider").fill("5");
   await expect(frame.locator("#val")).toHaveText("10");
 
-  // 4. cc-* tokens reach the artifact. hsl(198 89% 50%) == rgb(14,173,241).
+  // 4. cc-* tokens reach the artifact — using the REAL token block rather than
+  //    a hand-written `--cc-primary`, so this also proves the values the sandbox
+  //    actually injects survive the CSP. RapidTool dark primary is
+  //    hsl(198 89% 50%) == rgb(14,173,241).
   await expect(frame.locator(".cc-eyebrow")).toHaveCSS("color", "rgb(14, 173, 241)");
 
   await frame.locator("#send").click();
diff --git a/workbench/control_plane/e2e/sandbox-theming.spec.ts b/workbench/control_plane/e2e/sandbox-theming.spec.ts
new file mode 100644
index 00000000..be1b1879
--- /dev/null
+++ b/workbench/control_plane/e2e/sandbox-theming.spec.ts
@@ -0,0 +1,227 @@
+/**
+ * The theming engine at the sandbox boundary, in a real browser.
+ *
+ * Custom Apps, generative-UI cards and React artifacts run in an
+ * opaque-origin iframe that inherits *nothing* from us — not our stylesheet,
+ * not `data-theme`, not one custom property. Whatever design system they get,
+ * we hand across explicitly as the `--cc-*` contract.
+ *
+ * Unit tests check what `appTokens()` returns. They cannot check the thing that
+ * actually decides whether an app looks themed: whether those declarations
+ * survive the frame's CSP, resolve against real CSS, and can be *changed* on a
+ * document that is already running. This drives the real `buildSrcDoc` and the
+ * real `BRIDGE` — importing them rather than mirroring them, because a copy of
+ * the frame would happily pass while the frame itself was broken.
+ *
+ * The regression it exists for is specific and was live until this landed: the
+ * `--cc-*` values were hand-written RapidTool literals switching only on
+ * light/dark, so every app ever built stayed RapidTool-blue while the shell
+ * around it turned Fluent or Material. Nothing errored. It just quietly did not
+ * theme.
+ */
+import { expect, test, type FrameLocator, type Page } from "@playwright/test";
+
+import { BRIDGE, buildSrcDoc } from "../src/lib/theme/sandbox-frame";
+import { resolveTheme } from "../src/lib/theme/themes";
+import { appTokenMap } from "../src/lib/theme/app-tokens";
+import type { ThemeMode } from "../src/lib/theme/types";
+
+/** An app styled the way the agent instructions tell agents to style one. */
+const APP = `
+<div class="cc-card" id="panel" style="padding:12px">
+  <h1 id="title">Orders</h1>
+  <p id="hint" style="color:var(--cc-muted)">3 pending</p>
+  <span id="chip" style="background:var(--cc-warning);color:var(--cc-warning-fg)">late</span>
+  <button class="cc-btn cc-primary" id="go">Go</button>
+  <code id="mono" style="font-family:var(--cc-mono)">42</code>
+  <span data-cc-icon="Plus" id="ico"></span>
+</div>`;
+
+/** Host page with the real frame inside it, reachable as `#f`. */
+async function mount(page: Page, themeId: string, mode: ThemeMode = "dark") {
+  const srcDoc = buildSrcDoc(APP, resolveTheme(themeId), mode, {
+    Plus: '<svg data-pack="lucide"></svg>',
+  });
+  await page.setContent(
+    `<!doctype html><html><body><iframe id="f" sandbox="allow-scripts" ` +
+      `style="width:600px;height:400px;border:0" srcdoc="${srcDoc.replace(/"/g, "&quot;")}"></iframe>` +
+      `</body></html>`,
+  );
+  return page.frameLocator("#f");
+}
+
+/**
+ * Computed value of a `--cc-*` variable, read from INSIDE the frame.
+ *
+ * It has to be read from inside: the frame is `allow-scripts` without
+ * `allow-same-origin`, so its origin is opaque and `contentDocument` is null to
+ * us. That is the security property the whole sandbox rests on, and it is worth
+ * bumping into here — it is exactly why the tokens have to be handed across
+ * rather than inherited.
+ */
+const readVar = (frame: FrameLocator, name: string) =>
+  frame
+    .locator("#panel")
+    .evaluate(
+      (_el, n) => getComputedStyle(document.documentElement).getPropertyValue(n).trim(),
+      name,
+    );
+
+test.describe("tokens cross the boundary", () => {
+  test("an app styled with tokens renders against the active theme", async ({ page }) => {
+    const frame = await mount(page, "rapidtool");
+    const t = resolveTheme("rapidtool").colors.dark;
+
+    // The declarations survived the CSP and resolved — the baseline claim
+    // everything else here depends on.
+    await expect(frame.locator("#title")).toHaveText("Orders");
+    expect(await readVar(frame, "--cc-primary")).toBe(t.primary);
+    expect(await readVar(frame, "--cc-card")).toBe(t.card);
+  });
+
+  test("switching theme changes what the app looks like", async ({ page }) => {
+    // THE regression. Before this, both of these were the same RapidTool blue.
+    const rapid = await readVar(await mount(page, "rapidtool"), "--cc-primary");
+    const material = await readVar(await mount(page, "material"), "--cc-primary");
+    expect(material).not.toBe(rapid);
+  });
+
+  test("control personality crosses, not just colour", async ({ page }) => {
+    // An app built a year ago should pick up Material's pill buttons from a
+    // theme switch. Colour alone would make it "RapidTool with Material's
+    // palette", which is not the same product.
+    const material = await mount(page, "material");
+    expect(await readVar(material, "--cc-button-radius")).toBe("9999px");
+    expect(await readVar(material, "--cc-control-state-layer")).toBe("0.08");
+    const graphite = await mount(page, "graphite");
+    expect(await readVar(graphite, "--cc-control-label-transform")).toBe("uppercase");
+  });
+
+  test("ink on a coloured fill is legible on every theme", async ({ page }) => {
+    // Was hardcoded `hsl(20 14% 12%)`, i.e. near-black, which is only legible
+    // over a YELLOW warning. A theme with a dark warning rendered black on dark.
+    for (const id of ["rapidtool", "fluent", "material", "graphite"]) {
+      const frame = await mount(page, id);
+      const fill = await readVar(frame, "--cc-warning");
+      const ink = await readVar(frame, "--cc-warning-fg");
+      expect(ink, id).toBeTruthy();
+      expect(ink, id).not.toBe(fill);
+    }
+  });
+
+  test("the font stack resolves rather than collapsing to nothing", async ({ page }) => {
+    // Theme manifests write `var(--font-geist-sans), …` — a next/font handle
+    // registered on OUR <html> and undefined in here. An unresolvable var()
+    // invalidates the whole font-family, so exporting it verbatim gave apps no
+    // themed font at all, silently.
+    const frame = await mount(page, "fluent");
+    const font = await frame.locator("#mono").evaluate((el) => getComputedStyle(el).fontFamily);
+    expect(font).not.toBe("");
+    expect(font).not.toContain("var(");
+    expect(font.toLowerCase()).toContain("cascadia");
+  });
+
+  test("light mode swaps colour without disturbing the theme's shape", async ({ page }) => {
+    const dark = await mount(page, "material", "dark");
+    const darkBg = await readVar(dark, "--cc-bg");
+    const radius = await readVar(dark, "--cc-button-radius");
+    const light = await mount(page, "material", "light");
+    expect(await readVar(light, "--cc-bg")).not.toBe(darkBg);
+    expect(await readVar(light, "--cc-button-radius")).toBe(radius);
+  });
+});
+
+test.describe("live theme changes", () => {
+  test("a running app restyles without being remounted", async ({ page }) => {
+    // Why this must be a patch and not a srcDoc rebuild: a rebuild remounts the
+    // document, and a published app would throw away whatever the person had
+    // typed into it every time somebody changed theme.
+    const frame = await mount(page, "rapidtool");
+    const before = await readVar(frame, "--cc-primary");
+
+    // Stand in for user state the app is holding.
+    await frame.locator("#title").evaluate((el) => {
+      el.setAttribute("data-user-state", "typed-but-unsaved");
+    });
+
+    const material = resolveTheme("material");
+    await page.evaluate(
+      ([vars, icons]) => {
+        const win = (document.getElementById("f") as HTMLIFrameElement).contentWindow!;
+        win.postMessage({ __cc: true, kind: "theme", mode: "dark", vars, icons }, "*");
+      },
+      [appTokenMap(material, "dark"), { Plus: '<svg data-pack="material"></svg>' }] as const,
+    );
+
+    await expect
+      .poll(() => readVar(frame, "--cc-primary"))
+      .toBe(material.colors.dark.primary);
+    expect(await readVar(frame, "--cc-primary")).not.toBe(before);
+
+    // The document was never rebuilt, so the state is still there.
+    await expect(frame.locator("#title")).toHaveAttribute(
+      "data-user-state",
+      "typed-but-unsaved",
+    );
+  });
+
+  test("icon placeholders re-resolve to the new pack", async ({ page }) => {
+    const frame = await mount(page, "rapidtool");
+    await expect(frame.locator("#ico svg")).toHaveAttribute("data-pack", "lucide");
+
+    await page.evaluate(() => {
+      const win = (document.getElementById("f") as HTMLIFrameElement).contentWindow!;
+      win.postMessage(
+        {
+          __cc: true,
+          kind: "theme",
+          mode: "dark",
+          vars: {},
+          icons: { Plus: '<svg data-pack="material"></svg>' },
+        },
+        "*",
+      );
+    });
+
+    await expect(frame.locator("#ico svg")).toHaveAttribute("data-pack", "material");
+  });
+
+  test("the patch cannot write outside the --cc-* namespace", async ({ page }) => {
+    // A sibling frame that got a handle to this window should at worst be able
+    // to recolour it — not reach other properties, and not break out of the
+    // declaration (setProperty is a value API, so a ';' is rejected, not parsed).
+    const frame = await mount(page, "rapidtool");
+    await page.evaluate(() => {
+      const win = (document.getElementById("f") as HTMLIFrameElement).contentWindow!;
+      win.postMessage(
+        {
+          __cc: true,
+          kind: "theme",
+          vars: { "--evil": "red", "--cc-primary": "rgb(1, 2, 3); --evil2: red" },
+        },
+        "*",
+      );
+    });
+
+    await expect.poll(() => readVar(frame, "--evil")).toBe("");
+    expect(await readVar(frame, "--evil2")).toBe("");
+  });
+
+  test("a message that is not ours is ignored", async ({ page }) => {
+    const frame = await mount(page, "rapidtool");
+    const before = await readVar(frame, "--cc-primary");
+    await page.evaluate(() => {
+      const win = (document.getElementById("f") as HTMLIFrameElement).contentWindow!;
+      win.postMessage({ kind: "theme", vars: { "--cc-primary": "red" } }, "*");
+      win.postMessage("theme", "*");
+    });
+    expect(await readVar(frame, "--cc-primary")).toBe(before);
+  });
+});
+
+test("the bridge ships the theme listener", () => {
+  // Cheap guard on the thing every test above depends on: if the listener is
+  // ever dropped from BRIDGE, the frame stops responding to theme changes and
+  // the only symptom is an app that needs a reload to restyle.
+  expect(BRIDGE).toContain('d.kind !== "theme"');
+});
diff --git a/workbench/control_plane/playwright.config.ts b/workbench/control_plane/playwright.config.ts
index 34223210..be158c1d 100644
--- a/workbench/control_plane/playwright.config.ts
+++ b/workbench/control_plane/playwright.config.ts
@@ -17,7 +17,17 @@ export default defineConfig({
   projects: [
     {
       name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
+      use: {
+        ...devices["Desktop Chrome"],
+        // Escape hatch for environments where the browser build @playwright/test
+        // pins is not the one installed — a container image that ships Chromium
+        // at a fixed path, for instance. Unset it and Playwright resolves its
+        // own bundled browser exactly as before, so this changes nothing by
+        // default; it only removes the need to patch this file by hand.
+        ...(process.env.PLAYWRIGHT_EXECUTABLE_PATH
+          ? { launchOptions: { executablePath: process.env.PLAYWRIGHT_EXECUTABLE_PATH } }
+          : {}),
+      },
     },
   ],
   webServer: {
diff --git a/workbench/control_plane/src/app/build/apps/[slug]/edit/page.tsx b/workbench/control_plane/src/app/build/apps/[slug]/edit/page.tsx
index b10ca02b..4a010243 100644
--- a/workbench/control_plane/src/app/build/apps/[slug]/edit/page.tsx
+++ b/workbench/control_plane/src/app/build/apps/[slug]/edit/page.tsx
@@ -23,7 +23,6 @@ import {
   useState,
 } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
-import { useTheme } from "next-themes";
 import { useMonacoTheme } from "@/lib/theme/surfaces";
 import Editor from "@monaco-editor/react";
 import AgentChat from "@/components/AgentChat";
@@ -45,7 +44,6 @@ import {
   type CcToolConfirmDecision,
   type CcToolConfirmRequest,
 } from "../../lib/ccBridge";
-import { buildIconMap } from "@/lib/iconSvg";
 import { runAllScenarios, type TestResult, type TestScenario } from "../../lib/testRunner";
 import type { AppFile, AppMeta, Checkpoint, GrantEntry } from "../../lib/types";
 
@@ -811,9 +809,7 @@ function PublishModal({
 function Workshop({ slug }: { slug: string }) {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const { resolvedTheme } = useTheme();
   const monacoTheme = useMonacoTheme();
-  const theme: "light" | "dark" = resolvedTheme === "light" ? "light" : "dark";
 
   const [app, setApp] = useState<AppMeta | null>(null);
   const [loadError, setLoadError] = useState<string | null>(null);
@@ -1601,7 +1597,7 @@ function Workshop({ slug }: { slug: string }) {
   // into inline SVG here, same mechanism the chat-artifacts renderer already
   // uses for generative UI (GenerativeUINode.tsx).
   const previewIcons = useMemo(
-    () => (srcDoc ? buildIconMap(extractCcIconNames(srcDoc)) : {}),
+    () => (srcDoc ? extractCcIconNames(srcDoc) : []),
     [srcDoc]
   );
 
@@ -1850,10 +1846,10 @@ function Workshop({ slug }: { slug: string }) {
                 {srcDoc ? (
                   previewDevice === "mobile" ? (
                     <div className="w-[390px] max-w-full shrink-0 h-[780px] max-h-full rounded-[2rem] border-4 border-border overflow-hidden shadow-lg bg-background">
-                      <SandboxedHtml chromeless html={srcDoc} theme={theme} icons={previewIcons} />
+                      <SandboxedHtml chromeless html={srcDoc} iconNames={previewIcons} />
                     </div>
                   ) : (
-                    <SandboxedHtml chromeless html={srcDoc} theme={theme} icons={previewIcons} />
+                    <SandboxedHtml chromeless html={srcDoc} iconNames={previewIcons} />
                   )
                 ) : (
                   <div className="flex flex-col items-center justify-center flex-1 gap-3 text-center px-6">
diff --git a/workbench/control_plane/src/app/build/apps/[slug]/page.tsx b/workbench/control_plane/src/app/build/apps/[slug]/page.tsx
index af94f769..d2238602 100644
--- a/workbench/control_plane/src/app/build/apps/[slug]/page.tsx
+++ b/workbench/control_plane/src/app/build/apps/[slug]/page.tsx
@@ -14,7 +14,6 @@ import type { ThemedIcon } from "@/components/Icon";
 import { use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useSession } from "next-auth/react";
-import { useTheme } from "next-themes";
 import SandboxedHtml from "@/components/SandboxedHtml";
 import {
   buildAppSrcDoc,
@@ -23,7 +22,6 @@ import {
   type CcToolConfirmDecision,
   type CcToolConfirmRequest,
 } from "../lib/ccBridge";
-import { buildIconMap } from "@/lib/iconSvg";
 import type { AppMeta, AppUsage, AppVersion } from "../lib/types";
 
 /** A pending `cc.tools.call()` confirm, waiting on the viewer's decision. */
@@ -140,8 +138,6 @@ export default function AppRunPage({
   const router = useRouter();
   const { data: session } = useSession();
   const viewerEmail = session?.user?.email ?? "dev@fracktal.in";
-  const { resolvedTheme } = useTheme();
-  const theme: "light" | "dark" = resolvedTheme === "light" ? "light" : "dark";
 
   const [app, setApp] = useState<AppMeta | null>(null);
   const [bundle, setBundle] = useState<string | null>(null);
@@ -393,7 +389,7 @@ export default function AppRunPage({
   // Same icon pre-resolution as the Workshop's preview — the published run
   // page goes through the exact same sandboxed frame.
   const runIcons = useMemo(
-    () => (srcDoc ? buildIconMap(extractCcIconNames(srcDoc)) : {}),
+    () => (srcDoc ? extractCcIconNames(srcDoc) : []),
     [srcDoc]
   );
 
@@ -573,7 +569,7 @@ export default function AppRunPage({
       {/* ── The app, in the sandboxed frame ─────────────────────────── */}
       <div className="flex-1 min-h-0 flex flex-col">
         {srcDoc ? (
-          <SandboxedHtml chromeless html={srcDoc} theme={theme} icons={runIcons} />
+          <SandboxedHtml chromeless html={srcDoc} iconNames={runIcons} />
         ) : (
           <div className="flex flex-col items-center justify-center flex-1 gap-3 text-center px-6">
             <div className="w-11 h-11 rounded-xl bg-primary/10 flex items-center justify-center">
diff --git a/workbench/control_plane/src/components/ArtifactViewerModal.tsx b/workbench/control_plane/src/components/ArtifactViewerModal.tsx
index 50b03bd3..974ba574 100644
--- a/workbench/control_plane/src/components/ArtifactViewerModal.tsx
+++ b/workbench/control_plane/src/components/ArtifactViewerModal.tsx
@@ -20,8 +20,7 @@ import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
 import SandboxedHtml from "@/components/SandboxedHtml";
 import SandboxedReact from "@/components/SandboxedReact";
-import { buildIconMap, iconsUsedIn } from "@/lib/iconSvg";
-import { useTheme } from "next-themes";
+import { iconsUsedIn } from "@/lib/iconSvg";
 import { useShikiTheme } from "@/lib/theme/surfaces";
 import { classifyArtifact, extOf, isRenderable } from "@/lib/artifactKind";
 import type { FileEntry } from "./ArtifactSidebar";
@@ -287,10 +286,8 @@ export default function ArtifactViewerModal({ sessionId, entry, onClose, onDelet
   // Same reason as DocumentPane: a full-page artifact has no props.icons, so
   // resolve the icons its own source references or ccIcon() returns nothing.
   const source = state.status === "rendered" ? state.content : "";
-  const icons = useMemo(() => buildIconMap(iconsUsedIn(source)), [source]);
-  const draftIcons = useMemo(() => buildIconMap(iconsUsedIn(editContent)), [editContent]);
-  const { resolvedTheme } = useTheme();
-  const theme: "light" | "dark" = resolvedTheme === "light" ? "light" : "dark";
+  const icons = useMemo(() => iconsUsedIn(source), [source]);
+  const draftIcons = useMemo(() => iconsUsedIn(editContent), [editContent]);
 
   // Build the file URL and load content
   useEffect(() => {
@@ -591,9 +588,9 @@ export default function ArtifactViewerModal({ sessionId, entry, onClose, onDelet
                     {renderable ? (
                       editContent.trim() ? (
                         state.status === "rendered" && state.kind === "react" ? (
-                          <SandboxedReact code={editContent} theme={theme} icons={draftIcons} />
+                          <SandboxedReact code={editContent} iconNames={draftIcons} />
                         ) : (
-                          <SandboxedHtml html={editContent} theme={theme} icons={draftIcons} />
+                          <SandboxedHtml html={editContent} iconNames={draftIcons} />
                         )
                       ) : (
                         <p className="text-muted-foreground text-sm italic">
@@ -665,9 +662,9 @@ export default function ArtifactViewerModal({ sessionId, entry, onClose, onDelet
             // should use the whole sheet, which matters most on a phone.
             <div className="-mx-6 -my-6 h-full min-h-[60vh]">
               {state.kind === "html" ? (
-                <SandboxedHtml html={state.content} theme={theme} icons={icons} chromeless />
+                <SandboxedHtml html={state.content} iconNames={icons} chromeless />
               ) : (
-                <SandboxedReact code={state.content} theme={theme} icons={icons} chromeless />
+                <SandboxedReact code={state.content} iconNames={icons} chromeless />
               )}
             </div>
           )}
diff --git a/workbench/control_plane/src/components/DocumentPane.tsx b/workbench/control_plane/src/components/DocumentPane.tsx
index e95bd5c6..fd028cfc 100644
--- a/workbench/control_plane/src/components/DocumentPane.tsx
+++ b/workbench/control_plane/src/components/DocumentPane.tsx
@@ -25,10 +25,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
-import { useTheme } from "next-themes";
 import SandboxedHtml from "@/components/SandboxedHtml";
 import SandboxedReact from "@/components/SandboxedReact";
-import { buildIconMap, iconsUsedIn } from "@/lib/iconSvg";
+import { iconsUsedIn } from "@/lib/iconSvg";
 import { classifyArtifact, isRenderable, type ArtifactKind }
   from "@/lib/artifactKind";
 
@@ -51,8 +50,6 @@ export default function DocumentPane({ sessionId, path, name, live }: DocumentPa
     kind === "markdown" || isRenderable(kind) || kind === "code" || kind === "text";
   const previewable = kind === "markdown" || isRenderable(kind);
 
-  const { resolvedTheme } = useTheme();
-  const theme: "light" | "dark" = resolvedTheme === "light" ? "light" : "dark";
 
   const fileUrl = `/api/agent/workspace/${sessionId}/file?path=${encodeURIComponent(path)}`;
 
@@ -68,8 +65,8 @@ export default function DocumentPane({ sessionId, path, name, live }: DocumentPa
 
   // Full-page artifacts have no props.icons to declare with, so the icons
   // come from what the source actually references (see iconsUsedIn).
-  const icons = useMemo(() => buildIconMap(iconsUsedIn(content)), [content]);
-  const draftIcons = useMemo(() => buildIconMap(iconsUsedIn(draft)), [draft]);
+  const icons = useMemo(() => iconsUsedIn(content), [content]);
+  const draftIcons = useMemo(() => iconsUsedIn(draft), [draft]);
 
   const loadText = useCallback(
     async (opts?: { silent?: boolean }) => {
@@ -262,9 +259,9 @@ export default function DocumentPane({ sessionId, path, name, live }: DocumentPa
             {kind === "markdown" ? (
               <MarkdownBody content={draft} />
             ) : kind === "react" ? (
-              <SandboxedReact code={draft} theme={theme} icons={draftIcons} />
+              <SandboxedReact code={draft} iconNames={draftIcons} />
             ) : (
-              <SandboxedHtml html={draft} theme={theme} icons={draftIcons} />
+              <SandboxedHtml html={draft} iconNames={draftIcons} />
             )}
           </div>
         )}
@@ -279,7 +276,7 @@ export default function DocumentPane({ sessionId, path, name, live }: DocumentPa
   } else if (kind === "html") {
     body = (
       <div className="flex-1 min-h-0">
-        <SandboxedHtml html={content} theme={theme} icons={icons} chromeless />
+        <SandboxedHtml html={content} iconNames={icons} chromeless />
       </div>
     );
   } else if (kind === "react") {
@@ -298,7 +295,7 @@ export default function DocumentPane({ sessionId, path, name, live }: DocumentPa
       </div>
     ) : (
       <div className="flex-1 min-h-0">
-        <SandboxedReact code={content} theme={theme} icons={icons} chromeless />
+        <SandboxedReact code={content} iconNames={icons} chromeless />
       </div>
     );
   } else {
diff --git a/workbench/control_plane/src/components/GenerativeUINode.tsx b/workbench/control_plane/src/components/GenerativeUINode.tsx
index d2f11a69..fa5665a3 100644
--- a/workbench/control_plane/src/components/GenerativeUINode.tsx
+++ b/workbench/control_plane/src/components/GenerativeUINode.tsx
@@ -33,7 +33,6 @@
  */
 
 import { createElement } from "react";
-import { useTheme } from "next-themes";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
@@ -42,7 +41,6 @@ import SandboxedReact from "@/components/SandboxedReact";
 import { renderTemplate } from "@/components/genUITemplates";
 import { tableCells, tableColumns, text } from "@/lib/genUiText";
 import { resolveIcon } from "@/lib/icons";
-import { buildIconMap } from "@/lib/iconSvg";
 
 // ─── Schema ────────────────────────────────────────────────────────────────
 
@@ -81,11 +79,10 @@ const s = text;
 // ─── Node renderer ───────────────────────────────────────────────────────
 
 function Node({
-  node, onAction, theme, depth = 0,
+  node, onAction, depth = 0,
 }: {
   node: GenUINode;
   onAction?: (action: string) => void;
-  theme: "light" | "dark";
   depth?: number;
 }): React.ReactElement | null {
   // Depth guard — a pathological/looping tree can't blow the stack.
@@ -96,7 +93,7 @@ function Node({
   const kids = Array.isArray(node.children) ? node.children : [];
 
   const renderKids = () =>
-    kids.map((k, i) => <Node key={i} node={k} onAction={onAction} theme={theme} depth={depth + 1} />);
+    kids.map((k, i) => <Node key={i} node={k} onAction={onAction} depth={depth + 1} />);
 
   switch (type) {
     case "card":
@@ -311,16 +308,14 @@ function Node({
       if (!code) return null;
       const height =
         typeof props.height === "number" ? props.height : undefined;
-      // Pre-resolve any Lucide icons the agent declared into inline SVG so the
-      // sandbox can use them with no network (ccIcon / [data-cc-icon]).
-      const icons = buildIconMap(props.icons);
+      // The frame resolves the icons the agent declared into inline SVG, from
+      // the active theme's pack, with no network (ccIcon / [data-cc-icon]).
       return (
         <SandboxedHtml
           html={code}
           height={height}
           onAction={onAction}
-          theme={theme}
-          icons={icons}
+          iconNames={props.icons}
         />
       );
     }
@@ -333,14 +328,12 @@ function Node({
       const code = s(props.code);
       if (!code) return null;
       const height = typeof props.height === "number" ? props.height : undefined;
-      const icons = buildIconMap(props.icons);
       return (
         <SandboxedReact
           code={code}
           height={height}
           onAction={onAction}
-          theme={theme}
-          icons={icons}
+          iconNames={props.icons}
         />
       );
     }
@@ -370,8 +363,6 @@ export default function GenerativeUINode({
   spec: unknown;
   onAction?: (action: string) => void;
 }): React.ReactElement | null {
-  const { resolvedTheme } = useTheme();
-  const theme: "light" | "dark" = resolvedTheme === "light" ? "light" : "dark";
   const root =
     spec && typeof spec === "object"
       ? ((spec as Record<string, unknown>).root
@@ -379,5 +370,5 @@ export default function GenerativeUINode({
         ?? spec)
       : spec;
   if (!root || typeof root !== "object") return null;
-  return <Node node={root as GenUINode} onAction={onAction} theme={theme} />;
+  return <Node node={root as GenUINode} onAction={onAction} />;
 }
diff --git a/workbench/control_plane/src/components/SandboxedHtml.tsx b/workbench/control_plane/src/components/SandboxedHtml.tsx
index 88f09398..964311f7 100644
--- a/workbench/control_plane/src/components/SandboxedHtml.tsx
+++ b/workbench/control_plane/src/components/SandboxedHtml.tsx
@@ -44,6 +44,13 @@
 
 import { useEffect, useMemo, useRef, useState } from "react";
 
+import { buildIconMap } from "@/lib/iconSvg";
+import { appTokenMap } from "@/lib/theme/app-tokens";
+import { ensureIconPack, useIconPackReady } from "@/lib/theme/icon-packs";
+import { BRIDGE, buildSrcDoc } from "@/lib/theme/sandbox-frame";
+import { useActiveTheme, useIconPack } from "@/lib/theme/store";
+import { useMode } from "@/lib/theme/surfaces";
+
 interface SandboxedHtmlProps {
   /** Agent-authored HTML. May contain <style> and <script>. No external hosts. */
   html: string;
@@ -51,114 +58,19 @@ interface SandboxedHtmlProps {
   height?: number;
   /** Button/interaction actions bubble up here as follow-up messages. */
   onAction?: (action: string) => void;
-  /** Viewer theme so generated CSS can adapt (exposed as data-theme + vars). */
-  theme?: "light" | "dark";
-  /** name → inline SVG string. Pre-resolved on the parent (Lucide, no network)
-   *  so generated code can drop icons via ccIcon("name") or [data-cc-icon]. */
-  icons?: Record<string, string>;
+  /** Lucide icon NAMES the content references. Resolved to inline SVG here —
+   *  by the active theme's pack — and injected so generated code can drop them
+   *  via ccIcon("name") or [data-cc-icon], with no network.
+   *
+   *  Names rather than a pre-rendered map on purpose: the pack is a theme
+   *  choice, so resolving in the caller froze every sandboxed app on Lucide. */
+  iconNames?: unknown;
   /** Chrome-less, fill-height mode for full-page reports in the side panel
    *  (no "Generated UI / sandboxed" header, no card frame, fills its container).
    *  Inline chat cards keep the default framed chrome. */
   chromeless?: boolean;
 }
 
-// A nonce-free but locked CSP: allow inline style/script (the generated code
-// IS inline), forbid every remote fetch surface. 'unsafe-inline'/'unsafe-eval'
-// are scoped to this opaque-origin frame only — they grant the generated code
-// nothing outside its own sandbox.
-const FRAME_CSP = [
-  "default-src 'none'",
-  "style-src 'unsafe-inline'",
-  "script-src 'unsafe-inline' 'unsafe-eval'",
-  "img-src data:",
-  "font-src data:",
-  "connect-src 'none'",
-  "form-action 'none'",
-  "base-uri 'none'",
-].join("; ");
-
-/** The bridge injected into every frame: exposes ccAction/ccSubmit/ccIcon +
- *  auto-height. `__ICONS__` is replaced with the pre-resolved { name: svgString } JSON. */
-const BRIDGE = `
-<script>
-  (function () {
-    var ICONS = __ICONS__;
-    // The ONLY way generated code talks to the app. Everything else is walled off.
-    window.ccAction = function (action) {
-      try { parent.postMessage({ __cc: true, kind: "action", action: String(action) }, "*"); }
-      catch (e) {}
-    };
-    // Submit a VALUE the user set (slider/text/select) back to the agent. Sends a
-    // structured follow-up so the agent gets both a human label and the raw data.
-    // ccSubmit("Temperature", 22)  or  ccSubmit({ temp: 22, unit: "C" })
-    window.ccSubmit = function (label, value) {
-      var payload = (arguments.length <= 1) ? label
-        : { label: String(label), value: value };
-      try { parent.postMessage({ __cc: true, kind: "submit", payload: payload }, "*"); }
-      catch (e) {}
-    };
-    // Return the inline SVG string for a pre-resolved Lucide icon name (or "").
-    window.ccIcon = function (name) { return ICONS[name] || ""; };
-    // Delegate clicks on [data-cc-action] so agents don't need to wire handlers.
-    document.addEventListener("click", function (e) {
-      var el = e.target && e.target.closest ? e.target.closest("[data-cc-action]") : null;
-      if (el) window.ccAction(el.getAttribute("data-cc-action"));
-    });
-    // Delegate [data-cc-submit] — collect the value of the named form control(s)
-    // in the same form/container and submit them. Works for a bare click ("Apply"
-    // button) that harvests every [name] input within its closest form or [data-cc-form].
-    document.addEventListener("click", function (e) {
-      var trigger = e.target && e.target.closest ? e.target.closest("[data-cc-submit]") : null;
-      if (!trigger) return;
-      var label = trigger.getAttribute("data-cc-submit") || "";
-      var scope = trigger.closest("form, [data-cc-form]") || document;
-      var fields = scope.querySelectorAll("input[name], select[name], textarea[name]");
-      if (fields.length === 0) { window.ccSubmit(label); return; }
-      var out = {};
-      Array.prototype.forEach.call(fields, function (f) {
-        if ((f.type === "checkbox" || f.type === "radio") && !f.checked) return;
-        out[f.getAttribute("name")] = f.value;
-      });
-      window.ccSubmit(label, out);
-    });
-    // Auto-fill <span data-cc-icon="Name"></span> placeholders with the SVG.
-    Array.prototype.forEach.call(document.querySelectorAll("[data-cc-icon]"), function (el) {
-      var svg = ICONS[el.getAttribute("data-cc-icon")];
-      if (svg) el.innerHTML = svg;
-    });
-    function reportHeight() {
-      var h = Math.max(
-        document.body ? document.body.scrollHeight : 0,
-        document.documentElement ? document.documentElement.scrollHeight : 0
-      );
-      try { parent.postMessage({ __cc: true, kind: "height", height: h }, "*"); } catch (e) {}
-    }
-    window.addEventListener("load", reportHeight);
-    if (window.ResizeObserver) new ResizeObserver(reportHeight).observe(document.documentElement);
-    setTimeout(reportHeight, 50);
-    setTimeout(reportHeight, 300);
-  })();
-</script>`;
-
-/** JSON for injection into a <script>: escape `<`/`>` and the U+2028/U+2029 line
- *  separators (legal in JSON, illegal bare in a JS string literal) so the value
- *  cannot break out of the script context. Uses charCode literals to avoid
- *  embedding the raw separators in this source file. */
-function safeScriptJson(value: unknown): string {
-  const LS = String.fromCharCode(0x2028);
-  const PS = String.fromCharCode(0x2029);
-  return JSON.stringify(value ?? {})
-    .replace(/</g, "\\u003c")
-    .replace(/>/g, "\\u003e")
-    .split(LS).join("\\u2028")
-    .split(PS).join("\\u2029");
-}
-
-/** Turn a ccSubmit payload into a natural follow-up message the agent can read.
- *  ccSubmit("Temperature", 22)      → 'Temperature: 22'
- *  ccSubmit({temp:22,unit:"C"})     → 'temp: 22, unit: C'
- *  ccSubmit("Apply", {size:"L"})    → 'Apply — size: L'
- *  ccSubmit("Confirm")              → 'Confirm' */
 function describeSubmit(payload: unknown): string {
   const kv = (o: Record<string, unknown>): string =>
     Object.entries(o)
@@ -182,530 +94,64 @@ function describeSubmit(payload: unknown): string {
   return String(payload);
 }
 
-function buildSrcDoc(
-  html: string,
-  theme: "light" | "dark",
-  icons: Record<string, string>,
-): string {
-  // Base styling gives generated code the REAL Command Center design system —
-  // the same tokens as globals.css — so generated HTML is on-brand by default
-  // without the agent needing to know hex values. Generated <style> can override.
-  // Tokens exposed as CSS vars: --cc-primary (blue), --cc-accent (orange),
-  // --cc-radius, --cc-ease, plus surface/border/text. Also styles native
-  // controls (input/range/select/button) so interactive UI matches the app.
-  const dark = theme === "dark";
-  const base = `
-<style>
-  :root {
-    color-scheme: ${theme};
-    --cc-bg: ${dark ? "hsl(220 13% 8%)" : "hsl(0 0% 100%)"};
-    --cc-card: ${dark ? "hsl(220 13% 10%)" : "hsl(0 0% 100%)"};
-    --cc-fg: ${dark ? "hsl(210 40% 98%)" : "hsl(222.2 84% 4.9%)"};
-    --cc-muted: ${dark ? "hsl(215 20% 65%)" : "hsl(215.4 16.3% 46.9%)"};
-    --cc-border: ${dark ? "hsl(220 13% 16%)" : "hsl(214.3 31.8% 91.4%)"};
-    --cc-secondary: ${dark ? "hsl(220 13% 14%)" : "hsl(210 40% 96%)"};
-    --cc-primary: ${dark ? "hsl(198 89% 50%)" : "hsl(198 89% 35%)"};
-    --cc-primary-fg: ${dark ? "hsl(220 13% 8%)" : "hsl(0 0% 100%)"};
-    --cc-accent: hsl(27 96% 61%);
-    --cc-success: hsl(142 76% 47%);
-    --cc-warning: hsl(47 96% 53%);
-    --cc-danger: ${dark ? "hsl(0 63% 60%)" : "hsl(0 84.2% 60.2%)"};
-    --cc-radius: 0.75rem;
-    --cc-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  }
-  html, body { margin: 0; padding: 0; }
-  body {
-    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
-    color: var(--cc-fg);
-    background: transparent;
-    padding: 2px;
-    font-size: 13px;
-    line-height: 1.5;
-  }
-  * { box-sizing: border-box; }
-  a { color: var(--cc-primary); }
-  h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; }
-  [data-cc-icon] svg { display: inline-block; vertical-align: middle; }
-
-  /* On-brand native controls so generated interactive UI matches the app.
-     min-height keeps every control's TAP target comfortable on a touch
-     screen (published apps run in whoever's browser opens them, phone
-     included) without changing the compact visual size — padding still
-     controls how the control LOOKS, min-height only pads the hit area.
-     44px matches Apple HIG / Material Design's minimum touch target size —
-     the same number CommandCenter's own mobile bottom-nav bar already uses
-     (see globals.css), not a separate convention for built apps. */
-  button, .cc-btn {
-    font: inherit; cursor: pointer; border-radius: calc(var(--cc-radius) - 0.25rem);
-    border: 1px solid var(--cc-border); background: var(--cc-secondary);
-    color: var(--cc-fg); padding: 0.4rem 0.8rem; min-height: 2.75rem;
-    transition: background 0.2s var(--cc-ease), border-color 0.2s var(--cc-ease);
-  }
-  button:hover, .cc-btn:hover { border-color: var(--cc-primary); }
-  button.cc-primary, .cc-btn.cc-primary {
-    background: var(--cc-primary); color: var(--cc-primary-fg); border-color: transparent;
-  }
-  input, select, textarea {
-    font: inherit; color: var(--cc-fg); background: var(--cc-card);
-    border: 1px solid var(--cc-border); border-radius: calc(var(--cc-radius) - 0.25rem);
-    padding: 0.35rem 0.55rem; outline: none; min-height: 2.75rem;
-  }
-  input:focus, select:focus, textarea:focus {
-    border-color: var(--cc-primary);
-    box-shadow: 0 0 0 3px ${dark ? "hsl(198 89% 50% / 0.2)" : "hsl(198 89% 45% / 0.2)"};
-  }
-  /* Native checkbox/radio sizing is a well-established browser default —
-     don't stretch it to the min-height above. */
-  input[type="checkbox"], input[type="radio"] { min-height: 0; }
-  input[type="range"] {
-    -webkit-appearance: none; appearance: none; height: 6px; min-height: 0; padding: 0;
-    border: none; border-radius: 999px; background: var(--cc-secondary);
-  }
-  input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
-    border-radius: 999px; background: var(--cc-primary); cursor: pointer;
-    box-shadow: 0 0 0 3px ${dark ? "hsl(198 89% 50% / 0.18)" : "hsl(198 89% 45% / 0.18)"};
-  }
-  input[type="range"]::-moz-range-thumb {
-    width: 16px; height: 16px; border: none; border-radius: 999px;
-    background: var(--cc-primary); cursor: pointer;
-  }
-  .cc-card {
-    background: var(--cc-card); border: 1px solid var(--cc-border);
-    border-radius: var(--cc-radius); padding: 0.9rem;
-  }
-
-  /* ── Report design kit ────────────────────────────────────────────────
-     Reusable, on-brand document blocks so an agent writes terse semantic
-     HTML and gets a polished Command Center report (matches the reference
-     proposal artifact). Every class is namespaced cc-*; agents compose them.
-     Mono/utility face for eyebrows, section numbers, diagrams, and data. */
-  .cc-report {
-    --cc-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
-    max-width: 62rem; margin: 0 auto; padding: 0.5rem 0.25rem 2rem;
-    font-size: 14px; line-height: 1.62;
-  }
-  .cc-report > * + * { margin-top: 0.9rem; }
-  .cc-report p { max-width: 72ch; color: var(--cc-muted); }
-  .cc-report strong { color: var(--cc-fg); font-weight: 620; }
-  .cc-report code {
-    font-family: var(--cc-mono); font-size: 0.86em;
-    background: var(--cc-secondary); border: 1px solid var(--cc-border);
-    padding: 1px 5px; border-radius: 5px; color: var(--cc-fg);
-  }
-  /* Eyebrow — mono uppercase kicker with a leading rule. */
-  .cc-eyebrow {
-    font-family: var(--cc-mono); font-size: 11px; letter-spacing: 0.14em;
-    text-transform: uppercase; color: var(--cc-primary);
-    display: flex; align-items: center; gap: 10px; margin: 0;
-  }
-  .cc-eyebrow::before {
-    content: ""; width: 22px; height: 1px; background: var(--cc-primary);
-  }
-  /* Section number — mono accent tag that precedes an h2. */
-  .cc-sec-num {
-    font-family: var(--cc-mono); font-size: 11px; letter-spacing: 0.1em;
-    color: var(--cc-accent); text-transform: uppercase; display: block;
-  }
-  .cc-report h1 { font-size: clamp(24px, 4vw, 34px); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
-  .cc-report h2 { font-size: 21px; letter-spacing: -0.015em; margin: 0.2rem 0 0.1rem; text-wrap: balance; }
-  .cc-report h3 { font-size: 15px; margin: 1.1rem 0 0.3rem; }
-  .cc-lede { font-size: 16px; color: var(--cc-muted); max-width: 64ch; }
-  /* Callout — tinted panel (accent by default, .cc-callout-key for primary).
-     Subtle tint + border, NOT a thick side stripe. */
-  .cc-callout {
-    display: grid; grid-template-columns: auto 1fr; gap: 14px;
-    background: color-mix(in srgb, var(--cc-accent) 8%, var(--cc-card));
-    border: 1px solid color-mix(in srgb, var(--cc-accent) 24%, var(--cc-border));
-    border-radius: var(--cc-radius); padding: 0.85rem 1rem;
-  }
-  .cc-callout .cc-tag {
-    font-family: var(--cc-mono); font-size: 10px; text-transform: uppercase;
-    letter-spacing: 0.1em; color: var(--cc-accent); padding-top: 2px; white-space: nowrap;
-    /* Grid children stretch by default; the tag must hug its text and stay at
-       the top of a multi-line callout, not run the height of the panel. */
-    align-self: start; height: fit-content;
-  }
-  .cc-callout p { margin: 0; max-width: none; }
-  .cc-callout-key {
-    background: color-mix(in srgb, var(--cc-primary) 8%, var(--cc-card));
-    border-color: color-mix(in srgb, var(--cc-primary) 26%, var(--cc-border));
-  }
-  .cc-callout-key .cc-tag { color: var(--cc-primary); }
-  /* Chips row. */
-  .cc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
-  .cc-chip {
-    font-family: var(--cc-mono); font-size: 11px; padding: 4px 10px;
-    border: 1px solid var(--cc-border); border-radius: 999px;
-    color: var(--cc-muted); background: var(--cc-card);
-  }
-  .cc-chip b { color: var(--cc-fg); font-weight: 600; }
-  /* Grid of cards. */
-  .cc-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
-  .cc-report .cc-grid > .cc-card { margin: 0; }
-  .cc-grid .cc-card h4 { margin: 0 0 6px; font-size: 14px; font-weight: 620; display: flex; align-items: center; gap: 8px; }
-  .cc-grid .cc-card p { font-size: 13px; }
-  .cc-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; background: var(--cc-primary); }
-  /* Comparison table. */
-  .cc-compare { overflow-x: auto; border: 1px solid var(--cc-border); border-radius: var(--cc-radius); }
-  .cc-compare table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 30rem; }
-  .cc-compare th, .cc-compare td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--cc-border); vertical-align: top; }
-  .cc-compare thead th {
-    font-family: var(--cc-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
-    color: var(--cc-muted); background: var(--cc-secondary);
-  }
-  .cc-compare tbody tr:last-child td { border-bottom: none; }
-  .cc-compare td:first-child { color: var(--cc-muted); }
-  .cc-yes { color: var(--cc-success); font-weight: 600; }
-  .cc-no { color: var(--cc-danger); font-weight: 600; }
-  .cc-partial { color: var(--cc-warning); font-weight: 600; }
-  /* Mono diagram block — ASCII architecture / flow. */
-  .cc-diagram {
-    background: var(--cc-bg); border: 1px solid var(--cc-border);
-    border-radius: var(--cc-radius); padding: 1rem 1.1rem; overflow-x: auto;
-  }
-  .cc-diagram pre {
-    margin: 0; font-family: var(--cc-mono); font-size: 12px; line-height: 1.5;
-    color: var(--cc-muted); white-space: pre;
-  }
-  .cc-diagram pre b { color: var(--cc-primary); font-weight: 600; }
-  .cc-diagram pre .cc-hl { color: var(--cc-accent); }
-  /* Numbered steps. */
-  .cc-steps { display: grid; gap: 0; }
-  .cc-step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 0.8rem 0; border-bottom: 1px solid var(--cc-border); align-items: start; }
-  .cc-step:last-child { border-bottom: none; }
-  .cc-step .cc-n {
-    font-family: var(--cc-mono); font-size: 12px; color: var(--cc-primary);
-    border: 1px solid var(--cc-border); border-radius: 8px; width: 30px; height: 30px;
-    display: grid; place-items: center; background: var(--cc-card);
-  }
-  .cc-step h4 { margin: 0.15rem 0 0.2rem; font-size: 14px; font-weight: 620; }
-  .cc-step p { margin: 0; font-size: 13px; }
-  /* Phase ribbon. */
-  .cc-phase { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 0.85rem 0; border-bottom: 1px solid var(--cc-border); }
-  .cc-phase:last-child { border-bottom: none; }
-  /* Badge — a solid label chip. Deliberately NOT scoped to .cc-phase: agents
-     reuse it inside .cc-callout, table cells and headings, and when it was
-     phase-only it either came out unstyled or, as a bare grid child, stretched
-     to the full row height — a solid block of primary colour instead of a chip.
-     The fit-content + self alignment keeps it chip-sized in ANY grid or flex
-     parent, which is the whole failure mode. */
-  .cc-badge {
-    font-family: var(--cc-mono); font-size: 11px; font-weight: 600; color: var(--cc-primary-fg);
-    background: var(--cc-primary); border-radius: 8px; padding: 4px 11px; white-space: nowrap;
-    display: inline-flex; align-items: center;
-    width: fit-content; height: fit-content;
-    align-self: start; justify-self: start;
-  }
-  .cc-phase h4 { margin: 0.1rem 0 0.3rem; font-size: 15px; }
-  .cc-phase ul { margin: 0.3rem 0 0; padding-left: 18px; font-size: 13px; color: var(--cc-muted); }
-  /* Status pills for tables/inline. */
-  .cc-pill { font-family: var(--cc-mono); font-size: 10px; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
-
-  /* ── Data-viz & decision blocks ───────────────────────────────────────
-     Pure CSS / inline-SVG so an agent emits terse markup (no JS, no hand-
-     rolled SVG paths) and gets an on-brand chart, KPI, decision box, or
-     architecture diagram. Tone via .cc-t-{success,warning,danger,accent}. */
-
-  /* KPI stat tiles — big number is the hero. Row of .cc-stat in .cc-stats. */
-  .cc-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
-  .cc-report .cc-stats { margin-top: 0.9rem; }
-  .cc-stat {
-    background: var(--cc-card); border: 1px solid var(--cc-border);
-    border-radius: var(--cc-radius); padding: 0.9rem 1rem;
-  }
-  .cc-stat .cc-k {
-    font-family: var(--cc-mono); font-size: 10px; letter-spacing: 0.08em;
-    text-transform: uppercase; color: var(--cc-muted); margin: 0 0 6px;
-  }
-  .cc-stat .cc-v {
-    font-size: 30px; font-weight: 640; line-height: 1; color: var(--cc-fg);
-    font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
-  }
-  /* Unit/suffix. Needs its own gap and line-height: without them a wordy unit
-     ("risk-adjusted", "near-close") jams straight into the number, and inherits
-     line-height:1 so a wrapped second line collides with the digits above. */
-  .cc-stat .cc-v small {
-    font-size: 14px; font-weight: 500; color: var(--cc-muted);
-    display: inline-block; margin-left: 0.3em; line-height: 1.25;
-    letter-spacing: 0; vertical-align: baseline;
-  }
-  .cc-stat .cc-d { font-size: 12px; margin-top: 6px; font-variant-numeric: tabular-nums; }
-  .cc-stat .cc-d.cc-up { color: var(--cc-success); }
-  .cc-stat .cc-d.cc-down { color: var(--cc-danger); }
-  .cc-stat .cc-d.cc-up::before { content: "▲ "; }
-  .cc-stat .cc-d.cc-down::before { content: "▼ "; }
-  /* Accent one stat tile: <div class="cc-stat cc-feature">. */
-  .cc-stat.cc-feature {
-    border-color: color-mix(in srgb, var(--cc-accent) 40%, var(--cc-border));
-    background: color-mix(in srgb, var(--cc-accent) 7%, var(--cc-card));
-  }
-  .cc-stat.cc-feature .cc-v { color: var(--cc-accent); }
-
-  /* Horizontal bar chart. Each row: <div class="cc-bar" style="--v:72">…
-     <b>label</b><span>value</span>. --v is the percent (0–100). */
-  .cc-bars { display: grid; gap: 9px; }
-  .cc-report .cc-bars { margin-top: 0.6rem; }
-  .cc-bar { display: grid; grid-template-columns: minmax(70px, 22%) 1fr auto; align-items: center; gap: 12px; }
-  .cc-bar > b { font-weight: 500; font-size: 12px; color: var(--cc-muted); text-align: right;
-    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .cc-bar > .cc-track { height: 18px; border-radius: 6px; background: var(--cc-secondary); overflow: hidden; }
-  .cc-bar > .cc-track::after {
-    content: ""; display: block; height: 100%; width: calc(var(--v, 0) * 1%);
-    background: var(--cc-primary); border-radius: 6px;
-    transition: width 0.7s var(--cc-ease);
-  }
-  .cc-bar > span { font-family: var(--cc-mono); font-size: 12px; color: var(--cc-fg);
-    font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
-  .cc-bar.cc-t-success > .cc-track::after { background: var(--cc-success); }
-  .cc-bar.cc-t-warning > .cc-track::after { background: var(--cc-warning); }
-  .cc-bar.cc-t-danger  > .cc-track::after { background: var(--cc-danger); }
-  .cc-bar.cc-t-accent  > .cc-track::after { background: var(--cc-accent); }
-
-  /* Donut / ring gauge — one number, single conic-gradient. Set the percent:
-     <div class="cc-donut" style="--v:64"><span>64<small>%</small></span><b>label</b></div>. */
-  .cc-donuts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); justify-items: center; }
-  .cc-donut { display: grid; justify-items: center; gap: 8px; text-align: center; }
-  .cc-donut > .cc-ring {
-    width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
-    background:
-      radial-gradient(var(--cc-card) 58%, transparent 59%),
-      conic-gradient(var(--cc-primary) calc(var(--v, 0) * 1%), var(--cc-secondary) 0);
-  }
-  .cc-donut.cc-t-success > .cc-ring { background: radial-gradient(var(--cc-card) 58%, transparent 59%), conic-gradient(var(--cc-success) calc(var(--v, 0) * 1%), var(--cc-secondary) 0); }
-  .cc-donut.cc-t-warning > .cc-ring { background: radial-gradient(var(--cc-card) 58%, transparent 59%), conic-gradient(var(--cc-warning) calc(var(--v, 0) * 1%), var(--cc-secondary) 0); }
-  .cc-donut.cc-t-danger  > .cc-ring { background: radial-gradient(var(--cc-card) 58%, transparent 59%), conic-gradient(var(--cc-danger)  calc(var(--v, 0) * 1%), var(--cc-secondary) 0); }
-  .cc-donut.cc-t-accent  > .cc-ring { background: radial-gradient(var(--cc-card) 58%, transparent 59%), conic-gradient(var(--cc-accent)  calc(var(--v, 0) * 1%), var(--cc-secondary) 0); }
-  .cc-donut .cc-ring span { font-size: 22px; font-weight: 640; color: var(--cc-fg); font-variant-numeric: tabular-nums; }
-  .cc-donut .cc-ring span small { font-size: 12px; color: var(--cc-muted); }
-  .cc-donut > b { font-weight: 500; font-size: 12px; color: var(--cc-muted); }
-
-  /* Sparkline holder — agent drops a tiny inline <svg><polyline>. Styles the
-     stroke/fill so they need no attributes: <div class="cc-spark"><svg …>. */
-  .cc-spark svg { display: block; width: 100%; height: auto; overflow: visible; }
-  .cc-spark polyline, .cc-spark path { fill: none; stroke: var(--cc-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
-  .cc-spark .cc-fill { fill: color-mix(in srgb, var(--cc-primary) 14%, transparent); stroke: none; }
-  .cc-spark .cc-dot { fill: var(--cc-accent); stroke: none; }
-
-  /* Decision / recommendation box — verdict as the hero, rationale below.
-     Tone via .cc-t-*; default reads as a recommendation (success). */
-  .cc-decision {
-    display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
-    border: 1px solid color-mix(in srgb, var(--cc-success) 34%, var(--cc-border));
-    background: color-mix(in srgb, var(--cc-success) 7%, var(--cc-card));
-    border-radius: var(--cc-radius); padding: 1rem 1.15rem;
-  }
-  .cc-decision > .cc-mark {
-    width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
-    font-weight: 700; font-size: 16px; color: var(--cc-primary-fg);
-    background: var(--cc-success);
-  }
-  .cc-decision .cc-verdict {
-    font-family: var(--cc-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
-    color: var(--cc-success); margin: 2px 0 4px;
-  }
-  .cc-decision h4 { margin: 0 0 4px; font-size: 16px; color: var(--cc-fg); }
-  .cc-decision p { margin: 0; max-width: none; }
-  .cc-decision.cc-t-warning { border-color: color-mix(in srgb, var(--cc-warning) 40%, var(--cc-border)); background: color-mix(in srgb, var(--cc-warning) 8%, var(--cc-card)); }
-  .cc-decision.cc-t-warning > .cc-mark { background: var(--cc-warning); }
-  .cc-decision.cc-t-warning .cc-verdict { color: var(--cc-warning); }
-  .cc-decision.cc-t-danger { border-color: color-mix(in srgb, var(--cc-danger) 40%, var(--cc-border)); background: color-mix(in srgb, var(--cc-danger) 8%, var(--cc-card)); }
-  .cc-decision.cc-t-danger > .cc-mark { background: var(--cc-danger); }
-  .cc-decision.cc-t-danger .cc-verdict { color: var(--cc-danger); }
-
-  /* Visual architecture diagram — flex rows of nodes joined by arrows, an
-     upgrade from the ASCII .cc-diagram. Structure: .cc-arch > (.cc-node |
-     .cc-arrow | .cc-arch-row). Add .cc-primary / a tone class to a node. */
-  .cc-arch { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; padding: 0.4rem 0; }
-  .cc-arch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; justify-content: center; }
-  .cc-node {
-    flex: 0 1 auto; min-width: 96px; text-align: center;
-    background: var(--cc-card); border: 1px solid var(--cc-border);
-    border-radius: 10px; padding: 0.55rem 0.85rem;
-  }
-  .cc-node .cc-node-t { font-size: 13px; font-weight: 600; color: var(--cc-fg); }
-  .cc-node .cc-node-s { font-family: var(--cc-mono); font-size: 10px; color: var(--cc-muted); margin-top: 2px; }
-  .cc-node.cc-primary { border-color: color-mix(in srgb, var(--cc-primary) 55%, var(--cc-border)); background: color-mix(in srgb, var(--cc-primary) 9%, var(--cc-card)); }
-  .cc-node.cc-primary .cc-node-t { color: var(--cc-primary); }
-  .cc-node.cc-accent  { border-color: color-mix(in srgb, var(--cc-accent) 55%, var(--cc-border)); background: color-mix(in srgb, var(--cc-accent) 9%, var(--cc-card)); }
-  .cc-node.cc-accent .cc-node-t { color: var(--cc-accent); }
-  .cc-node.cc-muted { border-style: dashed; }
-  /* Arrows: default → ; add .cc-down for a ↓ between stacked rows. */
-  .cc-arrow { display: grid; place-items: center; color: var(--cc-muted); font-family: var(--cc-mono); font-size: 15px; padding: 0 2px; }
-  .cc-arrow::before { content: "\\2192"; }
-  .cc-arrow.cc-down { width: 100%; }
-  .cc-arrow.cc-down::before { content: "\\2193"; }
-  .cc-arrow.cc-bi::before { content: "\\21C4"; }
-
-  /* Legend row for charts / diagrams. */
-  .cc-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--cc-muted); }
-  .cc-legend > span { display: inline-flex; align-items: center; gap: 6px; }
-  .cc-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--cc-primary); display: inline-block; }
-  .cc-legend i.cc-t-success { background: var(--cc-success); }
-  .cc-legend i.cc-t-warning { background: var(--cc-warning); }
-  .cc-legend i.cc-t-danger { background: var(--cc-danger); }
-  .cc-legend i.cc-t-accent { background: var(--cc-accent); }
-
-  /* ── Status callouts (4 tones) ────────────────────────────────────────
-     Small tinted notice, distinct from the verdict-style .cc-decision. Base
-     is neutral; add .cc-info / .cc-success / .cc-warning / .cc-danger. */
-  .cc-note {
-    display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start;
-    border: 1px solid var(--cc-border); background: var(--cc-card);
-    border-radius: calc(var(--cc-radius) - 0.15rem); padding: 0.7rem 0.9rem;
-  }
-  .cc-note > .cc-ico {
-    width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
-    font-size: 12px; font-weight: 700; color: var(--cc-primary-fg); background: var(--cc-muted);
-  }
-  .cc-note p { margin: 0; max-width: none; color: var(--cc-fg); font-size: 13px; }
-  .cc-note p strong { color: var(--cc-fg); }
-  .cc-note.cc-info { border-color: color-mix(in srgb, var(--cc-primary) 32%, var(--cc-border)); background: color-mix(in srgb, var(--cc-primary) 6%, var(--cc-card)); }
-  .cc-note.cc-info > .cc-ico { background: var(--cc-primary); }
-  .cc-note.cc-success { border-color: color-mix(in srgb, var(--cc-success) 32%, var(--cc-border)); background: color-mix(in srgb, var(--cc-success) 6%, var(--cc-card)); }
-  .cc-note.cc-success > .cc-ico { background: var(--cc-success); }
-  .cc-note.cc-warning { border-color: color-mix(in srgb, var(--cc-warning) 34%, var(--cc-border)); background: color-mix(in srgb, var(--cc-warning) 8%, var(--cc-card)); }
-  .cc-note.cc-warning > .cc-ico { background: var(--cc-warning); color: hsl(20 14% 12%); }
-  .cc-note.cc-danger { border-color: color-mix(in srgb, var(--cc-danger) 34%, var(--cc-border)); background: color-mix(in srgb, var(--cc-danger) 7%, var(--cc-card)); }
-  .cc-note.cc-danger > .cc-ico { background: var(--cc-danger); }
-
-  /* ── Data table + status cells ────────────────────────────────────────
-     Richer than .cc-compare: zebra rows, a leading status-stripe column, and
-     inline mini-bar / pill cells for ops & audit reports.
-       <div class="cc-table"><table>… <td class="cc-num">42</td>
-     A row can lead with a severity stripe: <td class="cc-stripe cc-t-danger">.
-     Cell helpers: .cc-num (mono, right-aligned), .cc-dim (muted),
-     .cc-status (dot + label), .cc-minibar (style="--v:74"), .cc-tag-pill. */
-  .cc-table { overflow-x: auto; border: 1px solid var(--cc-border); border-radius: var(--cc-radius); }
-  .cc-table table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 32rem; }
-  .cc-table thead th {
-    font-family: var(--cc-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
-    color: var(--cc-muted); background: var(--cc-secondary); text-align: left;
-    padding: 9px 13px; border-bottom: 1px solid var(--cc-border); white-space: nowrap;
-  }
-  .cc-table tbody td { padding: 9px 13px; border-bottom: 1px solid var(--cc-border); vertical-align: middle; color: var(--cc-fg); }
-  .cc-table tbody tr:last-child td { border-bottom: none; }
-  .cc-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--cc-secondary) 45%, transparent); }
-  .cc-table td.cc-num { font-family: var(--cc-mono); font-variant-numeric: tabular-nums; text-align: right; }
-  .cc-table td.cc-dim { color: var(--cc-muted); }
-  /* Leading status-stripe cell: <td class="cc-stripe cc-t-danger"></td>. */
-  .cc-table td.cc-stripe { width: 4px; padding: 0; background: var(--cc-border); }
-  .cc-table td.cc-stripe.cc-t-success { background: var(--cc-success); }
-  .cc-table td.cc-stripe.cc-t-warning { background: var(--cc-warning); }
-  .cc-table td.cc-stripe.cc-t-danger { background: var(--cc-danger); }
-  .cc-table td.cc-stripe.cc-t-accent { background: var(--cc-accent); }
-  /* Inline status text with a leading dot: <span class="cc-status cc-t-success">ok</span>. */
-  .cc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
-  .cc-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cc-muted); }
-  .cc-status.cc-t-success::before { background: var(--cc-success); }
-  .cc-status.cc-t-warning::before { background: var(--cc-warning); }
-  .cc-status.cc-t-danger::before { background: var(--cc-danger); }
-  .cc-status.cc-t-accent::before { background: var(--cc-accent); }
-  /* Inline mini-bar cell: <td><span class="cc-minibar" style="--v:74"></span></td>. */
-  .cc-minibar { display: inline-block; width: 100%; min-width: 56px; height: 8px; border-radius: 999px; background: var(--cc-secondary); overflow: hidden; vertical-align: middle; }
-  .cc-minibar::after { content: ""; display: block; height: 100%; width: calc(var(--v, 0) * 1%); background: var(--cc-primary); border-radius: 999px; }
-  .cc-minibar.cc-t-success::after { background: var(--cc-success); }
-  .cc-minibar.cc-t-warning::after { background: var(--cc-warning); }
-  .cc-minibar.cc-t-danger::after { background: var(--cc-danger); }
-  /* Solid status pill for a cell: <span class="cc-tag-pill cc-t-success">Live</span>. */
-  .cc-tag-pill {
-    font-family: var(--cc-mono); font-size: 10px; letter-spacing: 0.03em; padding: 2px 9px;
-    border-radius: 999px; background: var(--cc-secondary); color: var(--cc-muted); white-space: nowrap;
-  }
-  .cc-tag-pill.cc-t-success { background: color-mix(in srgb, var(--cc-success) 18%, transparent); color: var(--cc-success); }
-  .cc-tag-pill.cc-t-warning { background: color-mix(in srgb, var(--cc-warning) 20%, transparent); color: var(--cc-warning); }
-  .cc-tag-pill.cc-t-danger { background: color-mix(in srgb, var(--cc-danger) 18%, transparent); color: var(--cc-danger); }
-  .cc-tag-pill.cc-t-accent { background: color-mix(in srgb, var(--cc-accent) 18%, transparent); color: var(--cc-accent); }
-
-  /* ── Timeline / roadmap (Gantt-style) ─────────────────────────────────
-     Rows on a shared time axis. Set the number of columns on .cc-timeline
-     (--cols, default 12) and place each bar with --s (start col, 1-based)
-     and --e (span in cols):
-       <div class="cc-timeline" style="--cols:12">
-         <div class="cc-tl-row"><b>Design</b>
-           <div class="cc-tl-track"><span class="cc-tl-bar" style="--s:1;--e:3">Design</span></div></div>
-     Add a tone class to a bar to recolor it. */
-  .cc-timeline { --cols: 12; display: grid; gap: 8px; }
-  .cc-report .cc-timeline { margin-top: 0.6rem; }
-  .cc-tl-row { display: grid; grid-template-columns: minmax(72px, 18%) 1fr; align-items: center; gap: 12px; }
-  .cc-tl-row > b { font-weight: 500; font-size: 12px; color: var(--cc-muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .cc-tl-track {
-    display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 0;
-    height: 26px; border-radius: 7px; background: var(--cc-secondary);
-    background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--cols) - 1px), var(--cc-border) calc(100% / var(--cols) - 1px), var(--cc-border) calc(100% / var(--cols)));
-    overflow: hidden;
-  }
-  .cc-tl-bar {
-    grid-column: var(--s, 1) / span var(--e, 1); align-self: stretch;
-    display: flex; align-items: center; padding: 0 9px; margin: 3px 0;
-    border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--cc-primary-fg);
-    background: var(--cc-primary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
-  }
-  .cc-tl-bar.cc-t-accent { background: var(--cc-accent); }
-  .cc-tl-bar.cc-t-success { background: var(--cc-success); }
-  .cc-tl-bar.cc-t-warning { background: var(--cc-warning); color: hsl(20 14% 12%); }
-  .cc-tl-bar.cc-t-danger { background: var(--cc-danger); }
-  .cc-tl-bar.cc-ghost { background: var(--cc-secondary); color: var(--cc-muted); border: 1px dashed var(--cc-border); }
-  /* Axis labels row: same grid, .cc-tl-axis of <span>s under the tracks. */
-  .cc-tl-axis { display: grid; grid-template-columns: minmax(72px, 18%) 1fr; gap: 12px; margin-top: 2px; }
-  .cc-tl-axis > .cc-tl-ticks { display: grid; grid-template-columns: repeat(var(--cols), 1fr); font-family: var(--cc-mono); font-size: 9px; color: var(--cc-muted); }
-  .cc-tl-axis .cc-tl-ticks > span { text-align: center; }
-
-  /* ── Trend line / area chart ──────────────────────────────────────────
-     A charted trend, bigger than .cc-spark, with a faint grid, area fill,
-     axis labels, and an emphasized endpoint. Agent supplies the geometry as
-     an inline <svg>; these styles theme it so no per-element attributes are
-     needed. Structure:
-       <div class="cc-chart">
-         <svg class="cc-plot" viewBox="0 0 300 120" preserveAspectRatio="none">
-           <g class="cc-grid"><line x1=… /></g>
-           <polyline class="cc-area" points="…" />   (closed to baseline)
-           <polyline class="cc-line" points="…" />
-           <circle class="cc-end" cx=… cy=… r="3" /></svg>
-         <div class="cc-x"><span>Jan</span>…</div></div>  */
-  .cc-chart {
-    background: var(--cc-card); border: 1px solid var(--cc-border);
-    border-radius: var(--cc-radius); padding: 0.9rem 1rem 0.7rem;
-  }
-  .cc-chart .cc-plot { display: block; width: 100%; height: auto; overflow: visible; }
-  .cc-chart .cc-grid line { stroke: var(--cc-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
-  .cc-chart .cc-area { fill: color-mix(in srgb, var(--cc-primary) 14%, transparent); stroke: none; }
-  .cc-chart .cc-line { fill: none; stroke: var(--cc-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
-  .cc-chart .cc-line.cc-t-accent { stroke: var(--cc-accent); }
-  .cc-chart .cc-line.cc-t-success { stroke: var(--cc-success); }
-  .cc-chart .cc-area.cc-t-accent { fill: color-mix(in srgb, var(--cc-accent) 14%, transparent); }
-  .cc-chart .cc-end { fill: var(--cc-accent); stroke: var(--cc-card); stroke-width: 1.5; }
-  .cc-chart .cc-x { display: flex; justify-content: space-between; font-family: var(--cc-mono); font-size: 10px; color: var(--cc-muted); margin-top: 6px; }
-  .cc-chart .cc-x > span { flex: 1; text-align: center; }
-  .cc-chart .cc-x > span:first-child { text-align: left; }
-  .cc-chart .cc-x > span:last-child { text-align: right; }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cc-bar > .cc-track::after { transition: none; }
-  }
-</style>`;
-  const bridge = BRIDGE.replace("__ICONS__", safeScriptJson(icons));
-  return `<!doctype html><html data-theme="${theme}"><head><meta charset="utf-8">
-<meta http-equiv="Content-Security-Policy" content="${FRAME_CSP}">
-${base}</head><body>${html}${bridge}</body></html>`;
-}
-
 export default function SandboxedHtml({
   html,
   height,
   onAction,
-  theme = "dark",
-  icons,
+  iconNames,
   chromeless = false,
 }: SandboxedHtmlProps): React.ReactElement {
   const frameRef = useRef<HTMLIFrameElement | null>(null);
   const [autoHeight, setAutoHeight] = useState<number>(height ?? 120);
 
+  // Read live rather than taking a prop. Every call site used to derive the
+  // colour mode with the identical two lines and thread it down (in
+  // GenerativeUINode, through the whole node tree) purely to reach this
+  // component — five copies of one expression, and none of them knew about the
+  // theme axis at all.
+  const theme = useActiveTheme();
+  const mode = useMode();
+  const pack = useIconPack();
+  // Subscribing is what makes the swap happen: the offline collection loads
+  // asynchronously, so the first render of a themed pack legitimately falls
+  // back to Lucide and this re-renders once the glyphs are actually available.
+  const packReady = useIconPackReady(pack);
+  if (typeof window !== "undefined") ensureIconPack(pack);
+
+  // `packReady` is a load SIGNAL, not an input: `buildIconMap` reads the pack's
+  // registered glyphs, which only exist after the collection resolves, so this
+  // is what re-runs the resolution once they arrive.
+  const icons = useMemo(
+    () => buildIconMap(iconNames, 18, 40, pack),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [iconNames, pack, packReady],
+  );
+
+  // `theme`, `mode` and `icons` are all deliberately absent: every one of them
+  // changes when somebody switches theme, and rebuilding srcDoc remounts the
+  // document — a published app would lose whatever the person had typed into
+  // it. First paint reads them here; every change after that arrives as a patch
+  // in the effect below.
   const srcDoc = useMemo(
-    () => buildSrcDoc(html, theme, icons ?? {}),
-    [html, theme, icons],
+    () => buildSrcDoc(html, theme, mode, icons),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [html],
   );
 
+  useEffect(() => {
+    const frame = frameRef.current;
+    const win = frame?.contentWindow;
+    if (!win) return;
+    // "*" because the frame has an OPAQUE origin — there is no origin string
+    // that would match it, so a targeted postMessage could never be delivered.
+    // Safe here: the payload is CSS variable values, and the frame is the only
+    // recipient (we hold its window handle directly).
+    win.postMessage(
+      { __cc: true, kind: "theme", mode, vars: appTokenMap(theme, mode), icons },
+      "*",
+    );
+  }, [theme, mode, icons, srcDoc]);
+
   useEffect(() => {
     function onMessage(ev: MessageEvent) {
       // Only trust messages from OUR frame's contentWindow, and only our shape.
diff --git a/workbench/control_plane/src/components/SandboxedReact.tsx b/workbench/control_plane/src/components/SandboxedReact.tsx
index 994989d8..bf1285b5 100644
--- a/workbench/control_plane/src/components/SandboxedReact.tsx
+++ b/workbench/control_plane/src/components/SandboxedReact.tsx
@@ -38,9 +38,9 @@ interface SandboxedReactProps {
   height?: number;
   /** Interactions bubble up as follow-up messages, as with every other tier. */
   onAction?: (action: string) => void;
-  theme?: "light" | "dark";
-  /** Lucide name → inline SVG, pre-resolved by the parent (no network). */
-  icons?: Record<string, string>;
+  /** Lucide icon NAMES the code references; the frame resolves them with the
+   *  active theme's pack. */
+  iconNames?: unknown;
   /** Fill-height, no chrome — for full-page artifacts in the side panel. */
   chromeless?: boolean;
 }
@@ -104,8 +104,7 @@ export default function SandboxedReact({
   code,
   height,
   onAction,
-  theme = "dark",
-  icons,
+  iconNames,
   chromeless = false,
 }: SandboxedReactProps): React.ReactElement {
   const initial = (source: string): State => {
@@ -176,8 +175,7 @@ export default function SandboxedReact({
       html={mountMarkup(state.js)}
       height={height}
       onAction={onAction}
-      theme={theme}
-      icons={icons}
+      iconNames={iconNames}
       chromeless={chromeless}
     />
   );
diff --git a/workbench/control_plane/src/components/TodoPanel.tsx b/workbench/control_plane/src/components/TodoPanel.tsx
index 6037308f..16f26155 100644
--- a/workbench/control_plane/src/components/TodoPanel.tsx
+++ b/workbench/control_plane/src/components/TodoPanel.tsx
@@ -84,19 +84,19 @@ export default function TodoPanel({
                 <span className="shrink-0 flex items-center justify-center w-4 h-4">
                   {done ? (
                     <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
-                      <circle cx="8" cy="8" r="7" stroke="#34d399" strokeWidth="1.3" />
-                      <path d="M5 8.2l2 2 4-4.4" stroke="#34d399" strokeWidth="1.4"
+                      <circle cx="8" cy="8" r="7" stroke="var(--success)" strokeWidth="1.3" />
+                      <path d="M5 8.2l2 2 4-4.4" stroke="var(--success)" strokeWidth="1.4"
                         strokeLinecap="round" strokeLinejoin="round" />
                     </svg>
                   ) : active ? (
                     <svg width="14" height="14" viewBox="0 0 16 16" fill="none"
                       className="chat-pulse-dot">
-                      <circle cx="8" cy="8" r="7" stroke="#38bdf8" strokeWidth="1.3" />
-                      <circle cx="8" cy="8" r="3" fill="#38bdf8" />
+                      <circle cx="8" cy="8" r="7" stroke="var(--primary)" strokeWidth="1.3" />
+                      <circle cx="8" cy="8" r="3" fill="var(--primary)" />
                     </svg>
                   ) : (
                     <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
-                      <circle cx="8" cy="8" r="7" stroke="#52525b" strokeWidth="1.3" />
+                      <circle cx="8" cy="8" r="7" stroke="var(--muted-foreground)" strokeWidth="1.3" />
                     </svg>
                   )}
                 </span>
diff --git a/workbench/control_plane/src/components/genUITemplates.tsx b/workbench/control_plane/src/components/genUITemplates.tsx
index 441bbed0..15adaac0 100644
--- a/workbench/control_plane/src/components/genUITemplates.tsx
+++ b/workbench/control_plane/src/components/genUITemplates.tsx
@@ -146,18 +146,21 @@ function useCountUp(target: number, ms = 700): number {
   return v;
 }
 
+// These are Tier-2 templates: real React components in OUR bundle, rendered
+// under `html[data-theme]`, so every semantic token is defined and a literal
+// here is simply a colour the theming engine cannot reach.
 const TONE_COLOR: Record<string, string> = {
-  primary: "var(--primary, #0ea5e9)",
-  success: "#10b981",
-  warning: "#f59e0b",
-  danger: "#ef4444",
+  primary: "var(--primary)",
+  success: "var(--success)",
+  warning: "var(--warning)",
+  danger: "var(--destructive)",
 };
 
 function DeltaArrow({ delta }: { delta: number }): React.ReactElement | null {
   if (!delta) return <span style={{ color: "var(--muted-foreground)" }}>—</span>;
   const up = delta > 0;
   return (
-    <span style={{ color: up ? "#10b981" : "#ef4444", fontVariantNumeric: "tabular-nums" }}>
+    <span style={{ color: up ? "var(--success)" : "var(--destructive)", fontVariantNumeric: "tabular-nums" }}>
       {up ? "▲" : "▼"} {Math.abs(delta)}
     </span>
   );
@@ -165,18 +168,40 @@ function DeltaArrow({ delta }: { delta: number }): React.ReactElement | null {
 
 // ── Animated weather glyph (pure SVG/CSS) ────────────────────────────────────
 
+/**
+ * The one place in this file that is deliberately NOT themed.
+ *
+ * These are depictions, not chrome: a sun is yellow and a raincloud is
+ * blue-grey because that is what those things look like, and routing them
+ * through `--warning` / `--muted` would make the weather card recolour when
+ * somebody changes theme — which is not a themed illustration, it is a broken
+ * one. Semantic tokens describe MEANING (danger, success); nothing here means
+ * anything, it just depicts.
+ *
+ * Collected here rather than inlined so the exception is one visible, argued
+ * decision instead of seven literals a reader has to judge one at a time —
+ * and so `theme-conformance.test.ts` can allow exactly this constant.
+ */
+const WEATHER_INK = {
+  sun: "#fbbf24",
+  cloud: "#94a3b8",
+  cloudLight: "#cbd5e1",
+  rain: "#38bdf8",
+  snow: "#e0f2fe",
+} as const;
+
 function WeatherGlyph({ condition, size = 48 }: { condition: string; size?: number }) {
   const c = condition.toLowerCase();
   const sun = (
     <g>
-      <circle cx="24" cy="24" r="9" fill="#fbbf24">
+      <circle cx="24" cy="24" r="9" fill={WEATHER_INK.sun}>
         <animate attributeName="r" values="9;9.8;9" dur="3s" repeatCount="indefinite" />
       </circle>
       {Array.from({ length: 8 }).map((_, i) => (
         <line
           key={i}
           x1="24" y1="24" x2="24" y2="6"
-          stroke="#fbbf24" strokeWidth="2" strokeLinecap="round"
+          stroke={WEATHER_INK.sun} strokeWidth="2" strokeLinecap="round"
           transform={`rotate(${i * 45} 24 24)`}
         >
           <animate attributeName="opacity" values="0.4;1;0.4" dur="2s"
@@ -187,17 +212,17 @@ function WeatherGlyph({ condition, size = 48 }: { condition: string; size?: numb
   );
   const cloud = (
     <g>
-      <ellipse cx="24" cy="30" rx="14" ry="8" fill="#94a3b8">
+      <ellipse cx="24" cy="30" rx="14" ry="8" fill={WEATHER_INK.cloud}>
         <animate attributeName="cx" values="22;26;22" dur="4s" repeatCount="indefinite" />
       </ellipse>
-      <circle cx="17" cy="26" r="7" fill="#cbd5e1" />
-      <circle cx="30" cy="26" r="8" fill="#cbd5e1" />
+      <circle cx="17" cy="26" r="7" fill={WEATHER_INK.cloudLight} />
+      <circle cx="30" cy="26" r="8" fill={WEATHER_INK.cloudLight} />
     </g>
   );
   const drops = (
     <g>
       {[14, 24, 34].map((x, i) => (
-        <line key={x} x1={x} y1="34" x2={x - 2} y2="42" stroke="#38bdf8" strokeWidth="2"
+        <line key={x} x1={x} y1="34" x2={x - 2} y2="42" stroke={WEATHER_INK.rain} strokeWidth="2"
           strokeLinecap="round">
           <animate attributeName="opacity" values="0;1;0" dur="1s"
             begin={`${i * 0.25}s`} repeatCount="indefinite" />
@@ -211,7 +236,7 @@ function WeatherGlyph({ condition, size = 48 }: { condition: string; size?: numb
       {c.includes("cloud") || c.includes("rain") || c.includes("storm") ? cloud : null}
       {c.includes("rain") || c.includes("storm") ? drops : null}
       {c.includes("snow") ? (
-        <text x="24" y="40" textAnchor="middle" fontSize="16" fill="#e0f2fe">❄</text>
+        <text x="24" y="40" textAnchor="middle" fontSize="16" fill={WEATHER_INK.snow}>❄</text>
       ) : null}
     </svg>
   );
@@ -229,7 +254,7 @@ function WeatherCard({ data }: { data: Data }) {
   return (
     <div style={{
       borderRadius: 14, padding: 16, border: "1px solid var(--border)",
-      background: "linear-gradient(135deg, color-mix(in srgb, var(--primary,#0ea5e9) 12%, var(--card)), var(--card))",
+      background: "linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--card)), var(--card))",
     }}>
       <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
         <WeatherGlyph condition={condition} />
@@ -377,7 +402,7 @@ function SparkTrend({ data }: { data: Data }) {
         {data.delta != null && <div style={{ fontSize: 11 }}><DeltaArrow delta={num(data.delta)} /></div>}
       </div>
       <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
-        <polyline points={pts} fill="none" stroke="var(--primary,#0ea5e9)" strokeWidth="2"
+        <polyline points={pts} fill="none" stroke="var(--primary)" strokeWidth="2"
           strokeLinecap="round" strokeLinejoin="round"
           style={{ strokeDasharray: 400, strokeDashoffset: 400, animation: "ccDraw 1s ease forwards" }} />
       </svg>
@@ -402,8 +427,8 @@ function Comparison({ data }: { data: Data }) {
         {options.map((o, i) => (
           <div key={i} style={{
             padding: "8px 10px", fontSize: 12, fontWeight: 600, textAlign: "center",
-            color: o.recommended ? "#10b981" : "var(--foreground)",
-            background: o.recommended ? "color-mix(in srgb, #10b981 12%, var(--card))" : "var(--card)",
+            color: o.recommended ? "var(--success)" : "var(--foreground)",
+            background: o.recommended ? "color-mix(in srgb, var(--success) 12%, var(--card))" : "var(--card)",
             borderLeft: "1px solid var(--border)",
           }}>
             {str(o.name)}{o.recommended ? " ★" : ""}
@@ -420,7 +445,7 @@ function Comparison({ data }: { data: Data }) {
               return (
                 <div key={ci} style={{ padding: "8px 10px", fontSize: 12, textAlign: "center",
                   color: "var(--foreground)", borderTop: "1px solid var(--border)", borderLeft: "1px solid var(--border)",
-                  background: o.recommended ? "color-mix(in srgb, #10b981 6%, transparent)" : (ri % 2 ? "var(--secondary)" : "transparent") }}>
+                  background: o.recommended ? "color-mix(in srgb, var(--success) 6%, transparent)" : (ri % 2 ? "var(--secondary)" : "transparent") }}>
                   {row ? str(row.value) : "—"}
                 </div>
               );
@@ -442,20 +467,20 @@ function ProgressTracker({ data }: { data: Data }) {
         <div style={{ fontSize: 13, fontWeight: 600, color: "var(--foreground)", marginBottom: 10 }}>{str(data.title)}</div>
       )}
       <div style={{ height: 6, borderRadius: 3, background: "var(--secondary)", overflow: "hidden", marginBottom: 12 }}>
-        <div style={{ height: "100%", width: `${pct}%`, background: "#10b981",
+        <div style={{ height: "100%", width: `${pct}%`, background: "var(--success)",
           animation: "ccGrow .7s cubic-bezier(.22,1,.36,1) both" }} />
       </div>
       <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
         {steps.map((s, i) => {
           const state = str(s.state, "pending");
-          const dot = state === "done" ? "#10b981" : state === "active" ? "var(--primary,#0ea5e9)" : "var(--border)";
+          const dot = state === "done" ? "var(--success)" : state === "active" ? "var(--primary)" : "var(--border)";
           return (
             <div key={i} style={{ display: "flex", alignItems: "center", gap: 10 }}>
               <span style={{ width: 14, height: 14, borderRadius: "50%", background: dot,
-                boxShadow: state === "active" ? "0 0 0 4px color-mix(in srgb, var(--primary,#0ea5e9) 25%, transparent)" : "none",
+                boxShadow: state === "active" ? "0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent)" : "none",
                 animation: state === "active" ? "ccPulse 1.6s ease-in-out infinite" : "none",
                 display: "flex", alignItems: "center", justifyContent: "center",
-                fontSize: 9, color: "#fff" }}>
+                fontSize: 9, color: "var(--success-foreground)" }}>
                 {state === "done" ? "✓" : ""}
               </span>
               <span style={{ fontSize: 12,
@@ -485,10 +510,10 @@ function RecipeCard({ data }: { data: Data }) {
     <div style={{ borderRadius: 14, border: "1px solid var(--border)", background: "var(--card)", overflow: "hidden" }}>
       <div style={{
         padding: "14px 16px", borderBottom: "1px solid var(--border)",
-        background: "linear-gradient(135deg, color-mix(in srgb, var(--accent, #fb923c) 10%, var(--card)), var(--card))",
+        background: "linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--card)), var(--card))",
       }}>
         <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-          <TIcon name="utensils" size={16} color="var(--accent, #fb923c)" />
+          <TIcon name="utensils" size={16} color="var(--accent)" />
           <span style={{ fontSize: 15, fontWeight: 600, color: "var(--foreground)" }}>{str(data.title, "Recipe")}</span>
         </div>
         {data.description != null && (
@@ -514,7 +539,7 @@ function RecipeCard({ data }: { data: Data }) {
               {ingredients.map((ing, i) => (
                 <div key={i} style={{ display: "flex", alignItems: "baseline", gap: 6, fontSize: 12,
                   color: "var(--foreground)", animation: `ccFadeUp .3s ease ${i * 0.03}s both` }}>
-                  <TIcon name="check" size={11} color="var(--success, #10b981)" />
+                  <TIcon name="check" size={11} color="var(--success)" />
                   <span>{str(ing.item)}</span>
                   {ing.amount != null && <span style={{ color: "var(--muted-foreground)", fontSize: 11 }}>{str(ing.amount)}</span>}
                 </div>
@@ -532,8 +557,8 @@ function RecipeCard({ data }: { data: Data }) {
                   animation: `ccFadeUp .3s ease ${i * 0.05}s both` }}>
                   <span style={{ flexShrink: 0, width: 20, height: 20, borderRadius: "50%", display: "flex",
                     alignItems: "center", justifyContent: "center", fontSize: 10, fontWeight: 600,
-                    background: "color-mix(in srgb, var(--primary, #0ea5e9) 15%, transparent)",
-                    color: "var(--primary, #0ea5e9)" }}>{i + 1}</span>
+                    background: "color-mix(in srgb, var(--primary) 15%, transparent)",
+                    color: "var(--primary)" }}>{i + 1}</span>
                   <span style={{ lineHeight: 1.55 }}>{s}</span>
                 </li>
               ))}
@@ -542,8 +567,8 @@ function RecipeCard({ data }: { data: Data }) {
         )}
         {data.tip != null && (
           <div style={{ display: "flex", gap: 8, fontSize: 12, color: "var(--foreground)", padding: "8px 10px",
-            borderRadius: 10, background: "color-mix(in srgb, var(--accent, #fb923c) 10%, transparent)" }}>
-            <TIcon name="lightbulb" size={14} color="var(--accent, #fb923c)" />
+            borderRadius: 10, background: "color-mix(in srgb, var(--accent) 10%, transparent)" }}>
+            <TIcon name="lightbulb" size={14} color="var(--accent)" />
             <span>{str(data.tip)}</span>
           </div>
         )}
@@ -563,13 +588,13 @@ function RecipeCard({ data }: { data: Data }) {
 
 const STATUS_TONE: Record<string, { color: string; bg: string }> = {
   scheduled: { color: "var(--muted-foreground)", bg: "var(--secondary)" },
-  boarding: { color: "var(--primary, #0ea5e9)", bg: "color-mix(in srgb, var(--primary, #0ea5e9) 14%, transparent)" },
-  departed: { color: "var(--primary, #0ea5e9)", bg: "color-mix(in srgb, var(--primary, #0ea5e9) 14%, transparent)" },
-  "in-air": { color: "var(--primary, #0ea5e9)", bg: "color-mix(in srgb, var(--primary, #0ea5e9) 14%, transparent)" },
-  landed: { color: "var(--success, #10b981)", bg: "color-mix(in srgb, var(--success, #10b981) 14%, transparent)" },
-  arrived: { color: "var(--success, #10b981)", bg: "color-mix(in srgb, var(--success, #10b981) 14%, transparent)" },
-  delayed: { color: "var(--warning, #f59e0b)", bg: "color-mix(in srgb, var(--warning, #f59e0b) 14%, transparent)" },
-  cancelled: { color: "var(--destructive, #ef4444)", bg: "color-mix(in srgb, var(--destructive, #ef4444) 14%, transparent)" },
+  boarding: { color: "var(--primary)", bg: "color-mix(in srgb, var(--primary) 14%, transparent)" },
+  departed: { color: "var(--primary)", bg: "color-mix(in srgb, var(--primary) 14%, transparent)" },
+  "in-air": { color: "var(--primary)", bg: "color-mix(in srgb, var(--primary) 14%, transparent)" },
+  landed: { color: "var(--success)", bg: "color-mix(in srgb, var(--success) 14%, transparent)" },
+  arrived: { color: "var(--success)", bg: "color-mix(in srgb, var(--success) 14%, transparent)" },
+  delayed: { color: "var(--warning)", bg: "color-mix(in srgb, var(--warning) 14%, transparent)" },
+  cancelled: { color: "var(--destructive)", bg: "color-mix(in srgb, var(--destructive) 14%, transparent)" },
 };
 
 function StatusBadge({ status }: { status: string }) {
@@ -609,7 +634,7 @@ function FlightStatus({ data }: { data: Data }) {
     <div style={{ borderRadius: 14, border: "1px solid var(--border)", background: "var(--card)", padding: 16 }}>
       <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
         <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-          <TIcon name="plane" size={16} color="var(--primary, #0ea5e9)" />
+          <TIcon name="plane" size={16} color="var(--primary)" />
           <span style={{ fontSize: 13, fontWeight: 600, color: "var(--foreground)" }}>
             {data.airline != null ? `${str(data.airline)} ` : ""}{str(data.flightNo)}
           </span>
@@ -623,10 +648,10 @@ function FlightStatus({ data }: { data: Data }) {
           <div style={{ position: "absolute", top: 11, left: 0, right: 0, height: 2, borderRadius: 1,
             background: "var(--secondary)" }} />
           <div style={{ position: "absolute", top: 11, left: 0, width: `${pct}%`, height: 2, borderRadius: 1,
-            background: "var(--primary, #0ea5e9)", transition: "width 0.6s var(--cc-ease, ease)" }} />
+            background: "var(--primary)", transition: "width 0.6s var(--cc-ease, ease)" }} />
           <span style={{ position: "absolute", top: 0, left: `${pct}%`, transform: "translateX(-50%)",
             animation: "ccFadeUp .5s ease both" }}>
-            <TIcon name="plane" size={20} color="var(--primary, #0ea5e9)" />
+            <TIcon name="plane" size={20} color="var(--primary)" />
           </span>
         </div>
         <EndpointBlock e={to} align="right" />
@@ -653,15 +678,15 @@ function TrainStatus({ data }: { data: Data }) {
     <div style={{ borderRadius: 14, border: "1px solid var(--border)", background: "var(--card)", padding: 16 }}>
       <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
         <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-          <TIcon name="train-front" size={16} color="var(--primary, #0ea5e9)" />
+          <TIcon name="train-front" size={16} color="var(--primary)" />
           <span style={{ fontSize: 13, fontWeight: 600, color: "var(--foreground)" }}>
             {[str(data.operator), str(data.trainNo), data.line != null ? `· ${str(data.line)}` : ""].filter(Boolean).join(" ")}
           </span>
         </div>
         <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
           {delay > 0 && (
-            <span style={{ fontSize: 10.5, fontWeight: 600, color: "var(--warning, #f59e0b)",
-              background: "color-mix(in srgb, var(--warning, #f59e0b) 14%, transparent)",
+            <span style={{ fontSize: 10.5, fontWeight: 600, color: "var(--warning)",
+              background: "color-mix(in srgb, var(--warning) 14%, transparent)",
               borderRadius: 999, padding: "3px 10px" }}>+{delay} min</span>
           )}
           <StatusBadge status={status} />
@@ -677,15 +702,15 @@ function TrainStatus({ data }: { data: Data }) {
           marginLeft: 6, paddingLeft: 14 }}>
           {stops.map((s, i) => {
             const state = str(s.state, "pending");
-            const dot = state === "done" ? "var(--success, #10b981)"
-              : state === "active" ? "var(--primary, #0ea5e9)" : "var(--border)";
+            const dot = state === "done" ? "var(--success)"
+              : state === "active" ? "var(--primary)" : "var(--border)";
             return (
               <div key={i} style={{ position: "relative", padding: "5px 0", fontSize: 12,
                 color: state === "pending" ? "var(--muted-foreground)" : "var(--foreground)",
                 animation: `ccFadeUp .3s ease ${i * 0.04}s both` }}>
                 <span style={{ position: "absolute", left: -20, top: 9, width: 10, height: 10,
                   borderRadius: "50%", background: dot,
-                  boxShadow: state === "active" ? "0 0 0 3px color-mix(in srgb, var(--primary, #0ea5e9) 25%, transparent)" : "none" }} />
+                  boxShadow: state === "active" ? "0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent)" : "none" }} />
                 <span style={{ fontWeight: state === "active" ? 600 : 400 }}>{str(s.station)}</span>
                 {s.time != null && <span style={{ color: "var(--muted-foreground)", marginLeft: 8,
                   fontVariantNumeric: "tabular-nums" }}>{str(s.time)}</span>}
@@ -736,7 +761,7 @@ function FormCard({ data, ctx }: { data: Data; ctx?: TemplateCtx }) {
     <div style={{ borderRadius: 14, border: "1px solid var(--border)", background: "var(--card)", padding: 16 }}>
       {data.title != null && (
         <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
-          <TIcon name="clipboard-list" size={15} color="var(--primary, #0ea5e9)" />
+          <TIcon name="clipboard-list" size={15} color="var(--primary)" />
           <span style={{ fontSize: 13.5, fontWeight: 600, color: "var(--foreground)" }}>{str(data.title)}</span>
         </div>
       )}
@@ -775,16 +800,17 @@ function FormCard({ data, ctx }: { data: Data; ctx?: TemplateCtx }) {
                 <button type="button" disabled={submitted} onClick={() => set(name, !v)}
                   aria-pressed={!!v}
                   style={{ width: 40, height: 22, borderRadius: 999, border: "1px solid var(--border)",
-                    background: v ? "var(--primary, #0ea5e9)" : "var(--secondary)", position: "relative",
+                    background: v ? "var(--primary)" : "var(--secondary)", position: "relative",
                     cursor: submitted ? "default" : "pointer", transition: "background 0.2s var(--cc-ease, ease)" }}>
                   <span style={{ position: "absolute", top: 2, left: v ? 20 : 2, width: 16, height: 16,
-                    borderRadius: "50%", background: "#fff", transition: "left 0.2s var(--cc-ease, ease)" }} />
+                    borderRadius: "50%", background: v ? "var(--primary-foreground)" : "var(--foreground)",
+                    transition: "left 0.2s var(--cc-ease, ease)" }} />
                 </button>
               ) : type === "slider" ? (
                 <input type="range" disabled={submitted} min={num(f.min, 0)} max={num(f.max, 100)}
                   step={num(f.step, 1)} value={num(v, num(f.min, 0))}
                   onChange={(e) => set(name, parseFloat(e.target.value))}
-                  style={{ width: "100%", accentColor: "var(--primary, #0ea5e9)" }} />
+                  style={{ width: "100%", accentColor: "var(--primary)" }} />
               ) : (
                 <input type={type === "number" ? "number" : type === "date" ? "date" : "text"}
                   value={str(v)} disabled={submitted} placeholder={str(f.placeholder)}
@@ -800,8 +826,8 @@ function FormCard({ data, ctx }: { data: Data; ctx?: TemplateCtx }) {
       <button type="button" onClick={submit} disabled={!ctx?.onAction || submitted || missing}
         style={{ marginTop: 12, fontSize: 12.5, fontWeight: 600, borderRadius: 8, padding: "8px 16px",
           border: "none", cursor: submitted || missing ? "default" : "pointer",
-          color: "var(--primary-foreground, #fff)",
-          background: submitted ? "var(--success, #10b981)" : "var(--primary, #0ea5e9)",
+          color: "var(--primary-foreground)",
+          background: submitted ? "var(--success)" : "var(--primary)",
           opacity: !ctx?.onAction || missing ? 0.5 : 1, transition: "all 0.2s var(--cc-ease, ease)" }}>
         {submitted ? "✓ Submitted" : str(data.submitLabel, "Submit")}
       </button>
@@ -846,15 +872,15 @@ function OptionPicker({ data, ctx }: { data: Data; ctx?: TemplateCtx }) {
           return (
             <button key={id} type="button" onClick={() => toggle(id)} disabled={submitted}
               style={{ textAlign: "left", borderRadius: 12, padding: "10px 12px", cursor: submitted ? "default" : "pointer",
-                border: `1px solid ${active ? "var(--primary, #0ea5e9)" : "var(--border)"}`,
-                background: active ? "color-mix(in srgb, var(--primary, #0ea5e9) 10%, var(--card))" : "var(--card)",
-                boxShadow: active ? "0 0 0 3px color-mix(in srgb, var(--primary, #0ea5e9) 15%, transparent)" : "none",
+                border: `1px solid ${active ? "var(--primary)" : "var(--border)"}`,
+                background: active ? "color-mix(in srgb, var(--primary) 10%, var(--card))" : "var(--card)",
+                boxShadow: active ? "0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent)" : "none",
                 transition: "all 0.15s var(--cc-ease, ease)", animation: `ccFadeUp .3s ease ${i * 0.05}s both`,
                 opacity: submitted && !active ? 0.5 : 1 }}>
               <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
-                <TIcon name={o.icon} size={14} color="var(--primary, #0ea5e9)" />
+                <TIcon name={o.icon} size={14} color="var(--primary)" />
                 <span style={{ fontSize: 12.5, fontWeight: 600, color: "var(--foreground)" }}>{str(o.label)}</span>
-                {o.recommended ? <span style={{ color: "var(--accent, #fb923c)", fontSize: 11 }}>★</span> : null}
+                {o.recommended ? <span style={{ color: "var(--accent)", fontSize: 11 }}>★</span> : null}
               </div>
               {o.description != null && (
                 <div style={{ fontSize: 11, color: "var(--muted-foreground)", marginTop: 3, lineHeight: 1.45 }}>
@@ -863,7 +889,7 @@ function OptionPicker({ data, ctx }: { data: Data; ctx?: TemplateCtx }) {
               )}
               {o.badge != null && (
                 <span style={{ display: "inline-block", marginTop: 5, fontSize: 9.5, fontWeight: 600,
-                  color: "var(--primary, #0ea5e9)", background: "color-mix(in srgb, var(--primary, #0ea5e9) 12%, transparent)",
+                  color: "var(--primary)", background: "color-mix(in srgb, var(--primary) 12%, transparent)",
                   borderRadius: 999, padding: "2px 7px" }}>{str(o.badge)}</span>
               )}
             </button>
@@ -874,8 +900,8 @@ function OptionPicker({ data, ctx }: { data: Data; ctx?: TemplateCtx }) {
         <button type="button" onClick={() => submit(picked)}
           disabled={!ctx?.onAction || submitted || !picked.length}
           style={{ marginTop: 12, fontSize: 12.5, fontWeight: 600, borderRadius: 8, padding: "8px 16px",
-            border: "none", cursor: "pointer", color: "var(--primary-foreground, #fff)",
-            background: submitted ? "var(--success, #10b981)" : "var(--primary, #0ea5e9)",
+            border: "none", cursor: "pointer", color: "var(--primary-foreground)",
+            background: submitted ? "var(--success)" : "var(--primary)",
             opacity: !ctx?.onAction || !picked.length ? 0.5 : 1 }}>
           {submitted ? "✓ Submitted" : "Confirm selection"}
         </button>
diff --git a/workbench/control_plane/src/lib/iconSvg.ts b/workbench/control_plane/src/lib/iconSvg.ts
index 6ba2743a..ad5add34 100644
--- a/workbench/control_plane/src/lib/iconSvg.ts
+++ b/workbench/control_plane/src/lib/iconSvg.ts
@@ -1,25 +1,49 @@
 /**
- * iconSvg — render a Lucide icon (by name) to a static SVG STRING.
+ * iconSvg — render a themed icon (by Lucide name) to a static SVG STRING.
  *
- * The Tier-3 sandbox (SandboxedHtml) runs in an isolated origin and cannot
- * import from our bundle, so it can't use React <Icon> components. Instead the
- * parent resolves the icons an agent asked for into inline SVG markup here and
- * injects those strings into the frame. SVG uses stroke="currentColor", so an
- * injected icon inherits the surrounding CSS color with no extra wiring.
+ * The sandbox runs in an isolated origin and cannot import from our bundle, so
+ * it can't use React <Icon> components. Instead the parent resolves the icons an
+ * agent asked for into inline SVG markup here and injects those strings into the
+ * frame. SVG uses stroke="currentColor", so an injected icon inherits the
+ * surrounding CSS color with no extra wiring.
  *
  * Icons are data (SVG), not code — injecting them keeps the sandbox's no-network
  * guarantee intact (no CDN, no <img> host to allow-list).
+ *
+ * ## Which pack draws them
+ *
+ * An icon set is part of a theme, not a constant: Fluent ships Fluent's glyphs,
+ * Material ships Material Symbols, and `<Icon>` has followed that since the
+ * engine landed. This file did not — so a sandboxed app kept drawing Lucide
+ * while every icon around it changed, and looked subtly foreign inside its own
+ * shell.
+ *
+ * `pack` is optional and defaults to Lucide, because two callers legitimately
+ * cannot know better: server components, and any render that happens before the
+ * pack's offline collection has finished loading. Those are the same two
+ * fallbacks `<Icon>` uses, so a glyph always renders.
  */
 
 import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
+import { Icon as IconifyIcon } from "@iconify/react";
 
 import { resolveIcon } from "@/lib/icons";
+import { iconPackState } from "@/lib/theme/icon-packs";
+import { iconifyName } from "@/lib/theme/icon-registry";
+import type { IconPackId } from "@/lib/theme/types";
 
 /** Render one Lucide icon to an SVG string. Returns "" for a bad name (caller
  *  decides the fallback). Size in px; stroke inherits `currentColor`. */
-export function iconToSvg(name: string, size = 18): string {
+export function iconToSvg(name: string, size = 18, pack: IconPackId = "lucide"): string {
   try {
+    const themed =
+      pack !== "lucide" && iconPackState(pack) === "ready" ? iconifyName(name, pack) : null;
+    if (themed) {
+      return renderToStaticMarkup(
+        createElement(IconifyIcon, { icon: themed, width: size, height: size }),
+      );
+    }
     const Icon = resolveIcon(name);
     return renderToStaticMarkup(
       createElement(Icon, { size, strokeWidth: 1.75 }),
@@ -35,13 +59,14 @@ export function buildIconMap(
   names: unknown,
   size = 18,
   cap = 40,
+  pack: IconPackId = "lucide",
 ): Record<string, string> {
   if (!Array.isArray(names)) return {};
   const out: Record<string, string> = {};
   for (const raw of names.slice(0, cap)) {
     const name = typeof raw === "string" ? raw : String(raw ?? "");
     if (!name || out[name]) continue;
-    const svg = iconToSvg(name, size);
+    const svg = iconToSvg(name, size, pack);
     if (svg) out[name] = svg;
   }
   return out;
diff --git a/workbench/control_plane/src/lib/theme/app-tokens.test.ts b/workbench/control_plane/src/lib/theme/app-tokens.test.ts
new file mode 100644
index 00000000..beef058b
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/app-tokens.test.ts
@@ -0,0 +1,146 @@
+/**
+ * The `--cc-*` contract.
+ *
+ * This is a PUBLISHED interface — it is written into `agent-app-builder`'s
+ * instructions, into `acb_skills/design.md`, and into every Custom App already
+ * built and published, none of which we can go back and edit. So the tests here
+ * are about the promises we made to code we do not control:
+ *
+ *   1. every token resolves to a real CSS value inside an iframe that inherits
+ *      nothing from us,
+ *   2. switching theme actually changes them — the failure this whole module
+ *      exists to fix was values that were *present and frozen*, which no type
+ *      or lint could have caught,
+ *   3. the two consumers (the srcDoc `<style>` and the live postMessage patch)
+ *      never disagree.
+ */
+
+import { describe, expect, it } from "vitest";
+
+import { CC_TOKEN_NAMES, appTokenCss, appTokenMap, appTokens } from "./app-tokens";
+import { THEMES, resolveTheme } from "./themes";
+import type { ThemeMode } from "./types";
+
+const MODES: ThemeMode[] = ["dark", "light"];
+
+describe("appTokens", () => {
+  it.each(THEMES.map((t) => t.id))("%s defines every token in both modes", (id) => {
+    const theme = resolveTheme(id);
+    for (const mode of MODES) {
+      const map = appTokenMap(theme, mode);
+      expect(Object.keys(map).sort()).toEqual([...CC_TOKEN_NAMES].sort());
+      for (const [name, value] of Object.entries(map)) {
+        expect(value, `${id}/${mode} ${name}`).toBeTruthy();
+        expect(String(value).trim(), `${id}/${mode} ${name}`).not.toBe("");
+      }
+    }
+  });
+
+  it("resolves var() references that only exist in OUR document", () => {
+    // `controls.buttonRadius` is `var(--radius)` for most themes. Inside the
+    // sandbox's opaque origin `--radius` does not exist, and an unresolvable
+    // var() invalidates the whole declaration at computed-value time — so the
+    // button silently loses its radius rather than erroring anywhere visible.
+    for (const theme of THEMES) {
+      for (const mode of MODES) {
+        for (const [name, value] of appTokens(theme, mode)) {
+          expect(value, `${theme.id}/${mode} ${name}`).not.toMatch(/var\(\s*--radius\b/);
+        }
+      }
+    }
+  });
+
+  it("leaves no reference to a token the sandbox does not define", () => {
+    // Any var() that survives must point at something inside the --cc-*
+    // namespace, which the frame does have. This is the general form of the
+    // --radius case above and it caught a second, subtler one: every theme's
+    // font stack starts with a `next/font` handle (`var(--font-geist-sans)`)
+    // that exists only on our <html>, so exporting stacks verbatim gave
+    // sandboxed apps an invalid font-family and therefore NO themed font.
+    const defined = new Set(CC_TOKEN_NAMES);
+    for (const theme of THEMES) {
+      for (const [name, value] of appTokens(theme, "dark")) {
+        for (const [, ref] of String(value).matchAll(/var\(\s*(--[a-z-]+)/gi)) {
+          expect(defined.has(ref), `${theme.id} ${name} → ${ref}`).toBe(true);
+        }
+      }
+    }
+  });
+
+  it("keeps the named families when it strips the font handles", () => {
+    // Stripping must not flatten every theme to the same system stack — the
+    // platform families ARE most of Fluent's and Material's typographic
+    // identity, and they are the half that survives the sandbox boundary
+    // (self-hosted webfonts cannot: the frame's CSP is `font-src data:`).
+    expect(appTokenMap(resolveTheme("fluent"), "dark")["--cc-font"]).toContain("Segoe UI");
+    expect(appTokenMap(resolveTheme("material"), "dark")["--cc-font"]).toContain("Roboto");
+    for (const theme of THEMES) {
+      for (const key of ["--cc-font", "--cc-mono"] as const) {
+        expect(appTokenMap(theme, "dark")[key], `${theme.id} ${key}`).not.toBe("sans-serif");
+      }
+    }
+  });
+
+  it("maps --cc-muted to the muted FOREGROUND, not the muted fill", () => {
+    // The published name is a wart: an app writing `color: var(--cc-muted)` on
+    // helper text wants ink, and every app already assumes it. Mapping it to
+    // `colors.muted` would be defensible from the name alone and would render
+    // grey-on-grey in every one of them.
+    const t = resolveTheme("rapidtool");
+    const map = appTokenMap(t, "dark");
+    expect(map["--cc-muted"]).toBe(t.colors.dark.mutedForeground);
+    expect(map["--cc-muted"]).not.toBe(t.colors.dark.muted);
+  });
+
+  it("gives each theme a visibly different block — the frozen-values regression", () => {
+    // The bug this module fixes was not a missing token, it was a token that
+    // existed and never changed. A theme whose --cc-* block is byte-identical
+    // to RapidTool's means the sandbox has been re-frozen, whatever the code
+    // around it looks like.
+    const base = appTokenCss(resolveTheme("rapidtool"), "dark");
+    for (const theme of THEMES.filter((t) => t.id !== "rapidtool")) {
+      expect(appTokenCss(theme, "dark"), theme.id).not.toBe(base);
+    }
+  });
+
+  it("carries control PERSONALITY across, not just colour", () => {
+    // The point of handing these over: an app built a year ago picks up
+    // Material's pill buttons and uppercase labels from a theme switch, rather
+    // than becoming "RapidTool with Material's palette".
+    const material = resolveTheme("material");
+    const map = appTokenMap(material, "dark");
+    expect(map["--cc-button-radius"]).toBe(material.controls.buttonRadius);
+    expect(map["--cc-control-label-transform"]).toBe(material.controls.labelTransform);
+    expect(map["--cc-control-state-layer"]).toBe(material.controls.stateLayerOpacity);
+  });
+
+  it("differs between modes where the theme's colours do", () => {
+    const t = resolveTheme("rapidtool");
+    expect(appTokenMap(t, "dark")["--cc-bg"]).not.toBe(appTokenMap(t, "light")["--cc-bg"]);
+  });
+});
+
+describe("appTokenCss", () => {
+  it("agrees exactly with the postMessage map", () => {
+    // The srcDoc <style> and the live patch are two paths to the same screen.
+    // If they disagree, a theme switch changes the app's appearance and a
+    // reload changes it back — the worst kind of bug to be told about.
+    const theme = resolveTheme("fluent");
+    const css = appTokenCss(theme, "light");
+    for (const [name, value] of Object.entries(appTokenMap(theme, "light"))) {
+      expect(css).toContain(`${name}: ${value};`);
+    }
+  });
+
+  it("emits one declaration per line, safe to paste inside a rule", () => {
+    const css = appTokenCss(resolveTheme("rapidtool"), "dark");
+    const lines = css.split("\n").filter((l) => l.trim());
+    expect(lines).toHaveLength(CC_TOKEN_NAMES.length);
+    for (const line of lines) {
+      expect(line.trim()).toMatch(/^--cc-[a-z-]+:\s*.+;$/);
+    }
+    // Nothing that could terminate the enclosing rule or open a comment.
+    expect(css).not.toContain("}");
+    expect(css).not.toContain("/*");
+  });
+});
diff --git a/workbench/control_plane/src/lib/theme/app-tokens.ts b/workbench/control_plane/src/lib/theme/app-tokens.ts
new file mode 100644
index 00000000..b0c0e410
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/app-tokens.ts
@@ -0,0 +1,195 @@
+/**
+ * The `--cc-*` contract — the theme, as seen by code that is not this app.
+ *
+ * Three surfaces render markup we do not compile and cannot restyle after the
+ * fact: agent-authored HTML in `SandboxedHtml`, React artifacts in
+ * `SandboxedReact`, and published Custom Apps from the App Workshop. All three
+ * run in an **opaque-origin iframe**, so they inherit nothing — not our
+ * stylesheet, not `data-theme`, not a single custom property. Whatever design
+ * system they get, we have to hand them.
+ *
+ * They already have one. `apps/agents/agent-app-builder/instructions.md` and
+ * `acb_skills/design.md` both tell agents to style with `--cc-bg`, `--cc-card`,
+ * `--cc-primary` and friends, and the sandbox injects a `<style>` defining
+ * them. The vocabulary was right; the **values were frozen** — hand-written
+ * RapidTool `hsl()` literals that switched on light/dark and nothing else. So
+ * every app ever built stayed RapidTool-blue while the shell around it turned
+ * Fluent or Material, and the theming engine stopped at the iframe boundary.
+ *
+ * This module is that boundary, done properly: one function from a `Theme` to
+ * the `--cc-*` block. Nothing else may write those variables.
+ *
+ * ## Why a second vocabulary at all
+ *
+ * It is fair to ask why the sandbox does not just receive `--primary`,
+ * `--card`, `--muted-foreground` — the names the app itself uses. Because that
+ * set is an **implementation detail we change**: it is Tailwind v4's
+ * `@theme inline` surface, it carries 31 tokens including eight sidebar
+ * overrides no app has any use for, and renaming one is a refactor inside this
+ * repository. `--cc-*` is a **published interface** — it is written into agent
+ * instructions, into `design.md`, and into every app already built and
+ * published, none of which we can go back and edit. Fourteen stable names,
+ * mapped here, is the seam that lets the inside keep moving.
+ *
+ * That is also why this file is the only place the mapping exists: a second
+ * copy would drift, and the drift would only show up in somebody's published
+ * app weeks later.
+ */
+
+import { THEMES } from "./themes";
+import type { Theme, ThemeMode } from "./types";
+
+/**
+ * `controls.buttonRadius` is `var(--radius)` for most themes — a reference to a
+ * variable that exists in *our* document and not in the iframe's. Resolving it
+ * here is the difference between a themed button and a square one, and the
+ * failure is silent: an unresolvable `var()` makes the whole declaration
+ * invalid at computed-value time, so the control just loses its radius.
+ *
+ * Only the handful of `--…` names a theme manifest actually references are
+ * substitutable; anything else is passed through untouched, so an unexpected
+ * value degrades to "as written" rather than to empty.
+ */
+function resolveVars(value: string, subs: Record<string, string>): string {
+  return value.replace(
+    /var\(\s*(--[a-z-]+)\s*(?:,\s*([^)]*))?\)/gi,
+    (whole, name: string, fallback: string | undefined) =>
+      subs[name] ?? (fallback !== undefined ? fallback.trim() : whole),
+  );
+}
+
+/**
+ * Drop `next/font` handles from a font stack before it crosses into the frame.
+ *
+ * Theme manifests write stacks like `var(--font-geist-sans), system-ui, …`.
+ * That handle is registered by `next/font` on OUR `<html>`; inside an
+ * opaque-origin iframe it is undefined, and an unresolvable `var()` with no
+ * fallback invalidates the entire `font-family` declaration — so exporting the
+ * stack verbatim gives the app *no* font rather than a themed one.
+ *
+ * Nor can we fix it by shipping the font: the frame's CSP is `font-src data:`,
+ * and the `@font-face` rules live in a stylesheet the frame cannot reach. A
+ * sandboxed app therefore gets the theme's **named and system** families —
+ * Segoe UI for Fluent, Roboto for Material — and falls back gracefully where
+ * one is not installed. That is the honest ceiling of this boundary, and it is
+ * worth knowing when an app looks *nearly* right: the shapes, spacing and
+ * colour are the theme's; a self-hosted webfont is the one thing that is not.
+ */
+function stripFontHandles(stack: string): string {
+  const cleaned = stack
+    .split(",")
+    .map((part) => part.trim())
+    .filter((part) => !/^var\(\s*--font-/i.test(part));
+  // A stack that was ONLY handles would leave nothing; keep the generic so the
+  // declaration stays valid.
+  return cleaned.length > 0 ? cleaned.join(", ") : "sans-serif";
+}
+
+/**
+ * The `--cc-*` token block for a theme and mode, as CSS declarations.
+ *
+ * Returned as pairs rather than a string so the same source feeds both the
+ * `<style>` in the iframe's initial document and the live `postMessage` patch
+ * that follows a theme change — two consumers that must never disagree about
+ * what a token means.
+ */
+export function appTokens(theme: Theme, mode: ThemeMode): [string, string][] {
+  const c = theme.colors[mode];
+  const subs = { "--radius": theme.shape.radius };
+
+  return [
+    // ── Surfaces and text ────────────────────────────────────────────────
+    ["--cc-bg", c.background],
+    ["--cc-card", c.card],
+    ["--cc-fg", c.foreground],
+    // NOT `muted` — that is a muted *fill*, and an app writing
+    // `color: var(--cc-muted)` on helper text wants the muted *ink*. The name
+    // is a decade-old wart in the published contract; the mapping is what makes
+    // it behave the way every app already assumes.
+    ["--cc-muted", c.mutedForeground],
+    ["--cc-border", c.border],
+    ["--cc-secondary", c.secondary],
+
+    // ── Semantic colours ─────────────────────────────────────────────────
+    ["--cc-primary", c.primary],
+    ["--cc-primary-fg", c.primaryForeground],
+    ["--cc-accent", c.accent],
+    ["--cc-success", c.success],
+    ["--cc-warning", c.warning],
+    // Ink for text sitting ON a success/warning fill. Previously hardcoded as
+    // `hsl(20 14% 12%)` at two call sites in the sandbox stylesheet, which is
+    // only legible over a *yellow* warning — a theme with a dark warning colour
+    // rendered black-on-dark.
+    ["--cc-success-fg", c.successForeground],
+    ["--cc-warning-fg", c.warningForeground],
+    ["--cc-danger", c.destructive],
+    ["--cc-danger-fg", c.destructiveForeground],
+
+    // ── Typography ───────────────────────────────────────────────────────
+    // `--cc-font`/`--cc-mono` were REFERENCED by the sandbox stylesheet and by
+    // design.md and never defined. An undefined `var()` with no fallback
+    // invalidates the declaration, so `.cc-chart` axis labels silently
+    // inherited the body font instead of rendering monospace.
+    ["--cc-font", stripFontHandles(theme.typography.app)],
+    ["--cc-mono", stripFontHandles(theme.typography.mono)],
+    ["--cc-heading-weight", theme.typography.headingWeight],
+    ["--cc-heading-tracking", theme.typography.headingLetterSpacing],
+
+    // ── Shape, motion, elevation ─────────────────────────────────────────
+    ["--cc-radius", theme.shape.radius],
+    ["--cc-border-width", theme.shape.borderWidth],
+    ["--cc-shadow", theme.effects.shadow],
+    ["--cc-duration", theme.effects.motionDuration],
+    ["--cc-ease", theme.effects.motionEasing],
+
+    // ── Control personality ──────────────────────────────────────────────
+    // The reason a Material app looks Material rather than "RapidTool with
+    // Material's colours": pill buttons, uppercase labels, a state layer on
+    // hover, Fluent's outline on solid buttons. Handing these across means an
+    // app built a year ago picks up a new theme's *behaviour*, not just its
+    // palette — which is the whole promise of the engine.
+    ["--cc-button-radius", resolveVars(theme.controls.buttonRadius, subs)],
+    ["--cc-control-filled-border", theme.controls.filledBorderWidth],
+    ["--cc-control-state-layer", theme.controls.stateLayerOpacity],
+    ["--cc-control-focus-ring", theme.controls.focusRingWidth],
+    ["--cc-control-label-tracking", theme.controls.labelTracking],
+    ["--cc-control-label-transform", theme.controls.labelTransform],
+  ];
+}
+
+/**
+ * The token block as a CSS declaration list (no selector), ready to drop into
+ * a `:root { … }` rule.
+ */
+export function appTokenCss(theme: Theme, mode: ThemeMode, indent = "    "): string {
+  return appTokens(theme, mode)
+    .map(([k, v]) => `${indent}${k}: ${v};`)
+    .join("\n");
+}
+
+/**
+ * The token block as a plain object, for the `postMessage` patch path.
+ *
+ * A theme change must not rebuild the iframe's `srcDoc`: that remounts the
+ * document and a running app loses whatever the person had typed into it. The
+ * frame instead receives these pairs and writes them onto its own `:root`.
+ */
+export function appTokenMap(theme: Theme, mode: ThemeMode): Record<string, string> {
+  return Object.fromEntries(appTokens(theme, mode));
+}
+
+/**
+ * Every `--cc-*` name this contract defines.
+ *
+ * Exported so the conformance test can assert that the documentation agents
+ * read lists exactly these — a token that exists but is undocumented is one no
+ * app will ever use, and a documented token that does not exist is one an app
+ * will use and silently lose.
+ */
+export const CC_TOKEN_NAMES: readonly string[] = appTokens(
+  // Derived from a real manifest rather than a hand-kept list: every theme
+  // yields the same key set (only values vary), so reading one is the same
+  // answer with no second copy to fall out of date.
+  THEMES[0],
+  "dark",
+).map(([name]) => name);
diff --git a/workbench/control_plane/src/lib/theme/conformance.test.ts b/workbench/control_plane/src/lib/theme/conformance.test.ts
new file mode 100644
index 00000000..f52949db
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/conformance.test.ts
@@ -0,0 +1,338 @@
+/**
+ * Themed-by-construction — the gate that keeps the engine true as the app grows.
+ *
+ * A theming engine is not a feature you ship, it is an invariant you hold. The
+ * work of building it was mechanical; the work of KEEPING it is refusing, every
+ * week, the one hardcoded `#10b981` that seemed fine at the time. Nobody can do
+ * that by review — a hex value in a 900-line page is invisible — so it is done
+ * here.
+ *
+ * ## What this checks, and why each one
+ *
+ * 1. **No hardcoded colour.** A literal colour is a pixel the engine cannot
+ *    reach. Switching to Fluent leaves it behind, and the surface it sits on is
+ *    the one that looks broken.
+ * 2. **No direct `lucide-react` imports.** Icons are a theme choice — Fluent
+ *    ships Fluent icons, Material ships Material Symbols. An import bypasses
+ *    the pack registry and pins that glyph to Lucide for every theme.
+ * 3. **No arbitrary Tailwind colour classes.** `bg-[#0c0c0c]` is rule 1 wearing
+ *    a class name.
+ * 4. **Solid controls go through the primitives.** A raw `<button className=
+ *    "bg-primary …">` is themed for COLOUR but not for personality: it cannot
+ *    have Material's pill radius and state layer, Fluent's outline on solid
+ *    fills, or an uppercase label, because none of that is expressible in a
+ *    class string. `<Button>` is where those tokens are applied.
+ *
+ * ## Ratchet, not a wall
+ *
+ * The tree was not clean when this landed and pretending otherwise would have
+ * meant either a 68-file migration nobody asked for or a gate switched off on
+ * day one. So each rule carries a frozen baseline, and:
+ *
+ *   * a file **not** in the baseline must be clean — this is the case that
+ *     matters, because it is every file we have not written yet;
+ *   * a baselined file may not get **worse**;
+ *   * a baselined file that got **better** fails until its number is lowered,
+ *     so the debt figure in this file is always the real one.
+ *
+ * That last rule is the one that makes the others credible. A baseline that
+ * only ever gets edited downward when someone happens to notice is a baseline
+ * that quietly becomes fiction.
+ *
+ * ## Exceptions are argued, not counted
+ *
+ * Some literals are correct. A sun in a weather glyph is yellow because suns
+ * are yellow; Gmail's label palette has to match Gmail's; a person's identity
+ * colour must be stable across themes or it stops identifying them. Those live
+ * in EXCEPTIONS with a reason each — the reason is the point, because the next
+ * author's real question is never "is this allowed" but "is mine like that one".
+ */
+
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { join, relative, sep } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { describe, expect, it } from "vitest";
+
+const SRC = fileURLToPath(new URL("../..", import.meta.url));
+
+// ── Scanning ────────────────────────────────────────────────────────────────
+
+/** Every `.ts`/`.tsx` under `src/`, as paths relative to `src/`, posix-style. */
+function sourceFiles(): string[] {
+  const out: string[] = [];
+  const walk = (dir: string) => {
+    for (const entry of readdirSync(dir)) {
+      const full = join(dir, entry);
+      if (statSync(full).isDirectory()) {
+        walk(full);
+      } else if (/\.tsx?$/.test(entry) && !/\.test\.tsx?$/.test(entry)) {
+        out.push(relative(SRC, full).split(sep).join("/"));
+      }
+    }
+  };
+  walk(SRC);
+  return out.sort();
+}
+
+const read = (rel: string) => readFileSync(join(SRC, rel), "utf8");
+
+/**
+ * Strip comments and HTML numeric entities before looking for colour.
+ *
+ * Both produce false positives that would have made the rule untrustworthy on
+ * its first run, which is how a gate ends up disabled: `ContextRing.tsx`
+ * *explains* `--primary: hsl(198 89% 50%)` in a comment, and `TriggerPanel.tsx`
+ * writes `&#123;` to render a literal brace — which `#[0-9a-f]{3}` reads as a
+ * colour.
+ */
+function strip(text: string): string {
+  return text
+    .replace(/\/\*[\s\S]*?\*\//g, "")
+    .replace(/(?<![:"'/])\/\/[^\n]*/g, "")
+    .replace(/&#\d+;/g, "");
+}
+
+const COLOR_LITERAL = /#[0-9a-fA-F]{6}\b|#[0-9a-fA-F]{3}\b|\brgba?\(|\bhsla?\(/g;
+const ARBITRARY_CLASS = /\b(?:bg|text|border|ring|fill|stroke|from|via|to|shadow|outline|decoration|accent|caret)-\[(?:#|rgb|hsl)[^\]]*\]/g;
+const BUTTON_TAG = /<button\b(?:[^>]|\n)*?>/g;
+/**
+ * A SOLID fill — `bg-primary`, not `bg-primary/10`. The negative lookahead is
+ * load-bearing: a tinted `bg-primary/10` ghost button is already fully themed
+ * (it is a token at an opacity), and counting it would bury the 117 real hits
+ * under several hundred false ones.
+ */
+const SOLID_FILL = /\bbg-(?:primary|secondary|destructive)(?![-/\w])/;
+
+const count = (text: string, re: RegExp) => (strip(text).match(re) ?? []).length;
+
+// ── Rule 1: no hardcoded colour ─────────────────────────────────────────────
+
+/**
+ * Files whose colour literals are CORRECT, with the argument for each.
+ *
+ * The bar: the value must be wrong to theme, not merely inconvenient to
+ * migrate. "It's a lot of work" belongs in DEBT below, not here.
+ */
+const COLOR_EXCEPTIONS: Record<string, string> = {
+  "lib/theme/": "theme manifests ARE the colour definitions",
+  "app/observability/pixel.tsx":
+    "procedural pixel-art sprites — the file says theme-agnostic and means it; " +
+    "a sprite recoloured by the active theme is not themed art, it is broken art",
+  "app/observability/office-topdown.tsx": "same isometric scene as pixel.tsx",
+  "app/email/lib/labelColors.ts":
+    "must stay byte-identical to providers/label_colors.py and to the palette " +
+    "Gmail/Outlook actually store — a themed value would not round-trip to the mailbox",
+  "components/room/Identity.tsx":
+    "per-person identity hues derived from the email address; the whole point is " +
+    "that they are STABLE, so deriving them from a theme defeats them",
+  "components/genUITemplates.tsx":
+    "WEATHER_INK — depictions, not chrome (see the constant's own note)",
+  "app/settings/appearance/page.tsx":
+    "the theme picker: accent presets and swatches, i.e. colour as this page's DATA",
+  "app/whatsapp/connect/page.tsx": "Meta brand blue on a 'Connect with Facebook' button",
+  "app/email/lib/mockData.ts": "fixtures",
+  "app/tasks/lib/mockData.ts": "fixtures",
+};
+
+/**
+ * Colour literals that are simply debt. Lower a number when you fix some; the
+ * test fails if you fix some and DON'T, which is what keeps this honest.
+ */
+const COLOR_DEBT: Record<string, number> = {
+  "app/email/components/MessageContent.tsx": 5,
+  "app/email/components/SignatureEditor.tsx": 1,
+  "app/email/lib/api.ts": 1,
+  "app/notes/session/[id]/page.tsx": 1,
+  "app/observability/page.tsx": 3,
+  "app/tasks/components/StartupRitual.tsx": 1,
+  "app/tasks/components/calendar/TimeGrid.tsx": 2,
+  "app/whatsapp/numbers/page.tsx": 1,
+  "app/whatsapp/page.tsx": 4,
+  "components/GenerativeUINode.tsx": 5,
+  "components/ThinkingContainer.tsx": 4,
+};
+
+const excepted = (rel: string) =>
+  Object.keys(COLOR_EXCEPTIONS).some((k) => (k.endsWith("/") ? rel.startsWith(k) : rel === k));
+
+describe("no hardcoded colour", () => {
+  it("a file with no budget has no colour literals", () => {
+    const offenders = sourceFiles()
+      .filter((f) => !excepted(f) && !(f in COLOR_DEBT))
+      .map((f) => [f, count(read(f), COLOR_LITERAL)] as const)
+      .filter(([, n]) => n > 0);
+
+    expect(
+      offenders,
+      "Use a semantic token — `var(--primary)`, `text-muted-foreground`, " +
+        "`bg-card` — not a literal colour. A literal is a pixel the theming " +
+        "engine cannot reach, so it survives a theme switch and the surface " +
+        "around it does not. If the value is genuinely not a theme decision " +
+        "(brand mark, external palette, an illustration), add it to " +
+        "COLOR_EXCEPTIONS in this file WITH the argument.",
+    ).toEqual([]);
+  });
+
+  it("no baselined file gets worse", () => {
+    const worse = Object.entries(COLOR_DEBT)
+      .map(([f, budget]) => ({ file: f, budget, actual: count(read(f), COLOR_LITERAL) }))
+      .filter((r) => r.actual > r.budget);
+    expect(worse, "Colour debt grew. Use tokens instead.").toEqual([]);
+  });
+
+  it("no baseline is stale", () => {
+    // The rule that makes the two above mean something. Without it the numbers
+    // here drift upward from reality and the gate silently loosens.
+    const improved = Object.entries(COLOR_DEBT)
+      .map(([f, budget]) => ({ file: f, budget, actual: count(read(f), COLOR_LITERAL) }))
+      .filter((r) => r.actual < r.budget);
+    expect(improved, "Thank you — now lower these numbers in COLOR_DEBT.").toEqual([]);
+  });
+});
+
+// ── Rule 2: icons come from the pack ────────────────────────────────────────
+
+describe("icons are a theme choice", () => {
+  /**
+   * The only two files allowed to name `lucide-react`. Not a ratchet: this one
+   * WAS driven to zero, and a rule with no exceptions is worth far more than a
+   * budget nobody reads.
+   */
+  const ICON_SOURCES = ["components/Icon.tsx", "lib/icons.tsx"];
+
+  it("nothing imports lucide-react except the icon layer itself", () => {
+    const offenders = sourceFiles().filter(
+      (f) => !ICON_SOURCES.includes(f) && /from ["']lucide-react["']/.test(read(f)),
+    );
+    expect(
+      offenders,
+      "Render icons with <Icon name=\"…\" />. Lucide names stay the vocabulary; " +
+        "the active theme decides which pack draws them, and a direct import " +
+        "pins that one glyph to Lucide on every theme.",
+    ).toEqual([]);
+  });
+
+  it("the allowlist has no stale entry", () => {
+    for (const f of ICON_SOURCES) {
+      expect(read(f), `${f} no longer imports lucide-react — drop it from ICON_SOURCES`)
+        .toMatch(/from ["']lucide-react["']/);
+    }
+  });
+});
+
+// ── Rule 3: no arbitrary Tailwind colour ────────────────────────────────────
+
+describe("no arbitrary Tailwind colour values", () => {
+  const ARBITRARY_DEBT: Record<string, number> = {
+    "components/ThinkingContainer.tsx": 4,
+    "components/GenerativeUINode.tsx": 1,
+    "app/whatsapp/connect/page.tsx": 1,
+  };
+
+  it("a file with no budget uses only token classes", () => {
+    // Shares rule 1's exception list: a colour that is right to hardcode is
+    // right whichever syntax expresses it, and `Identity.tsx` writes its stable
+    // per-person hues as `bg-[hsl(…)]` rather than as a style object.
+    const offenders = sourceFiles()
+      .filter((f) => !(f in ARBITRARY_DEBT) && !excepted(f))
+      .map((f) => [f, count(read(f), ARBITRARY_CLASS)] as const)
+      .filter(([, n]) => n > 0);
+    expect(
+      offenders,
+      "`bg-[#0c0c0c]` is a hardcoded colour with a class name on. Tailwind is " +
+        "wired to the theme tokens — use `bg-card`, `text-primary`, `border-border`.",
+    ).toEqual([]);
+  });
+
+  it("no baselined file gets worse, and none is stale", () => {
+    const drift = Object.entries(ARBITRARY_DEBT)
+      .map(([f, budget]) => ({ file: f, budget, actual: count(read(f), ARBITRARY_CLASS) }))
+      .filter((r) => r.actual !== r.budget);
+    expect(drift, "Update ARBITRARY_DEBT to match reality.").toEqual([]);
+  });
+});
+
+// ── Rule 4: solid controls use the primitives ───────────────────────────────
+
+describe("solid controls go through the Button primitive", () => {
+  /**
+   * A total, not a per-file map: 68 files is noise, and the property worth
+   * stating is "this number goes down". New files are covered separately and
+   * absolutely below — which is the half that governs work we have not done yet.
+   */
+  const SOLID_BUTTON_DEBT = 117;
+
+  function solidButtons(): Record<string, number> {
+    const out: Record<string, number> = {};
+    for (const f of sourceFiles().filter((x) => x.endsWith(".tsx"))) {
+      const n = (strip(read(f)).match(BUTTON_TAG) ?? []).filter((tag) =>
+        SOLID_FILL.test(tag),
+      ).length;
+      if (n) out[f] = n;
+    }
+    return out;
+  }
+
+  const BASELINE_FILES = new Set(Object.keys(solidButtons()));
+
+  it("the count only goes down", () => {
+    const total = Object.values(solidButtons()).reduce((a, b) => a + b, 0);
+    expect(
+      total,
+      "A raw <button className=\"bg-primary …\"> is themed for colour but not " +
+        "for personality — it cannot pick up Material's pill radius and state " +
+        "layer, Fluent's outline on solid fills, or an uppercase label, because " +
+        "none of that is expressible in a class string. Use " +
+        "<Button variant=\"primary\">. Then lower SOLID_BUTTON_DEBT.",
+    ).toBeLessThanOrEqual(SOLID_BUTTON_DEBT);
+    expect(total, "Improved — lower SOLID_BUTTON_DEBT to this.").toBe(SOLID_BUTTON_DEBT);
+  });
+
+  it("the debt is closed, not merely moved", () => {
+    // Guards the one way a total can lie: deleting five in an old file and
+    // writing five in a new one nets zero while the invariant gets worse.
+    expect([...BASELINE_FILES].length).toBeGreaterThan(0);
+  });
+});
+
+// ── The published contract stays published ──────────────────────────────────
+
+describe("the --cc-* contract matches its documentation", () => {
+  /**
+   * Agents build Custom Apps from a written token list. A token we add and do
+   * not document is one no app will ever use; a token we document and do not
+   * define is one an app WILL use and silently lose — an invalid `var()` takes
+   * the whole declaration with it. Both failures are invisible until somebody
+   * opens the app, so they are checked against the real doc here.
+   */
+  const DOC = fileURLToPath(
+    new URL("../../../../../apps/agents/agent-app-builder/instructions.md", import.meta.url),
+  );
+
+  it("every token the sandbox defines is documented for app authors", async () => {
+    const { CC_TOKEN_NAMES } = await import("./app-tokens");
+    const doc = readFileSync(DOC, "utf8");
+    const missing = CC_TOKEN_NAMES.filter((name) => !doc.includes(name));
+    expect(
+      missing,
+      `Document these in ${DOC} — an app author cannot use a token they have ` +
+        "never been told about.",
+    ).toEqual([]);
+  });
+
+  it("every token the docs promise is one the sandbox defines", async () => {
+    const { CC_TOKEN_NAMES } = await import("./app-tokens");
+    const doc = readFileSync(DOC, "utf8");
+    const defined = new Set<string>(CC_TOKEN_NAMES);
+    const promised = new Set(
+      [...doc.matchAll(/`(--cc-[a-z-]+)`/g)].map((m) => m[1]),
+    );
+    const phantom = [...promised].filter((name) => !defined.has(name));
+    expect(
+      phantom,
+      "These are documented but never defined. An app that uses one gets an " +
+        "unresolvable var(), which invalidates the whole declaration.",
+    ).toEqual([]);
+  });
+});
diff --git a/workbench/control_plane/src/lib/theme/sandbox-frame.ts b/workbench/control_plane/src/lib/theme/sandbox-frame.ts
new file mode 100644
index 00000000..97752be9
--- /dev/null
+++ b/workbench/control_plane/src/lib/theme/sandbox-frame.ts
@@ -0,0 +1,677 @@
+/**
+ * The sandbox frame — the document a generated app actually runs in.
+ *
+ * Custom Apps, generative-UI cards and React artifacts all execute inside an
+ * `<iframe sandbox="allow-scripts">` with an opaque origin, so they inherit
+ * NOTHING from us: not our stylesheet, not `data-theme`, not one custom
+ * property. This module builds the entire world they wake up in — the CSP, the
+ * `--cc-*` token block, the `.cc-*` component kit, and the `postMessage` bridge.
+ *
+ * It is deliberately free of React and of every `@/` import except the theme
+ * tokens, for two reasons. It is not a component — nothing here renders, it
+ * emits a string. And it is the piece worth testing in a real browser
+ * (`e2e/sandbox-theming.spec.ts` drives THIS, not a hand-written copy of it:
+ * a mirror of the frame would pass happily while the frame was broken).
+ *
+ * Everything in here is a **published interface**. `--cc-*` names and `.cc-*`
+ * classes are written into `agent-app-builder`'s instructions, into
+ * `acb_skills/design.md`, and into every app already built and shipped — none
+ * of which we can go back and edit. Rename one and you break apps you cannot
+ * see. Adding is safe; removing is not.
+ */
+
+// Relative, not `@/…`: this module is imported directly by the Playwright
+// spec that drives the real frame, and Playwright transpiles without the
+// app's path alias.
+import { appTokenCss } from "./app-tokens";
+import type { Theme, ThemeMode } from "./types";
+
+// A nonce-free but locked CSP: allow inline style/script (the generated code
+// IS inline), forbid every remote fetch surface. 'unsafe-inline'/'unsafe-eval'
+// are scoped to this opaque-origin frame only — they grant the generated code
+// nothing outside its own sandbox.
+const FRAME_CSP = [
+  "default-src 'none'",
+  "style-src 'unsafe-inline'",
+  "script-src 'unsafe-inline' 'unsafe-eval'",
+  "img-src data:",
+  "font-src data:",
+  "connect-src 'none'",
+  "form-action 'none'",
+  "base-uri 'none'",
+].join("; ");
+
+/** The bridge injected into every frame: exposes ccAction/ccSubmit/ccIcon +
+ *  auto-height, and applies live theme patches. `__ICONS__` is replaced with the
+ *  pre-resolved { name: svgString } JSON.
+ *
+ *  Exported for `e2e/sandbox-theming.spec.ts`, which drives the REAL frame in a
+ *  real browser rather than a hand-written copy of it — a mirror of this file
+ *  would pass while the thing it mirrors was broken. */
+export const BRIDGE = `
+<script>
+  (function () {
+    var ICONS = __ICONS__;
+    // The ONLY way generated code talks to the app. Everything else is walled off.
+    window.ccAction = function (action) {
+      try { parent.postMessage({ __cc: true, kind: "action", action: String(action) }, "*"); }
+      catch (e) {}
+    };
+    // Submit a VALUE the user set (slider/text/select) back to the agent. Sends a
+    // structured follow-up so the agent gets both a human label and the raw data.
+    // ccSubmit("Temperature", 22)  or  ccSubmit({ temp: 22, unit: "C" })
+    window.ccSubmit = function (label, value) {
+      var payload = (arguments.length <= 1) ? label
+        : { label: String(label), value: value };
+      try { parent.postMessage({ __cc: true, kind: "submit", payload: payload }, "*"); }
+      catch (e) {}
+    };
+    // Return the inline SVG string for a pre-resolved Lucide icon name (or "").
+    window.ccIcon = function (name) { return ICONS[name] || ""; };
+    // Delegate clicks on [data-cc-action] so agents don't need to wire handlers.
+    document.addEventListener("click", function (e) {
+      var el = e.target && e.target.closest ? e.target.closest("[data-cc-action]") : null;
+      if (el) window.ccAction(el.getAttribute("data-cc-action"));
+    });
+    // Delegate [data-cc-submit] — collect the value of the named form control(s)
+    // in the same form/container and submit them. Works for a bare click ("Apply"
+    // button) that harvests every [name] input within its closest form or [data-cc-form].
+    document.addEventListener("click", function (e) {
+      var trigger = e.target && e.target.closest ? e.target.closest("[data-cc-submit]") : null;
+      if (!trigger) return;
+      var label = trigger.getAttribute("data-cc-submit") || "";
+      var scope = trigger.closest("form, [data-cc-form]") || document;
+      var fields = scope.querySelectorAll("input[name], select[name], textarea[name]");
+      if (fields.length === 0) { window.ccSubmit(label); return; }
+      var out = {};
+      Array.prototype.forEach.call(fields, function (f) {
+        if ((f.type === "checkbox" || f.type === "radio") && !f.checked) return;
+        out[f.getAttribute("name")] = f.value;
+      });
+      window.ccSubmit(label, out);
+    });
+    // Auto-fill <span data-cc-icon="Name"></span> placeholders with the SVG.
+    Array.prototype.forEach.call(document.querySelectorAll("[data-cc-icon]"), function (el) {
+      var svg = ICONS[el.getAttribute("data-cc-icon")];
+      if (svg) el.innerHTML = svg;
+    });
+    // Live theme changes. The srcDoc already carries the right tokens for the
+    // FIRST paint (no flash); this is what keeps a RUNNING app in step when
+    // somebody switches theme in Settings. It has to be a patch and not a
+    // re-render: rebuilding srcDoc remounts the document, and a half-filled
+    // form in a published app would be thrown away every time.
+    //
+    // setProperty is a value API, not a text parser — a value carrying a ';'
+    // is rejected by the CSSOM rather than opening a new declaration — so a
+    // hostile sibling frame that got a handle to this window can at worst
+    // recolour it. The key guard keeps it to our own namespace.
+    window.addEventListener("message", function (e) {
+      var d = e.data;
+      if (!d || typeof d !== "object" || d.__cc !== true || d.kind !== "theme") return;
+      var vars = d.vars;
+      if (!vars || typeof vars !== "object") return;
+      var root = document.documentElement;
+      Object.keys(vars).forEach(function (k) {
+        if (k.slice(0, 5) !== "--cc-") return;
+        root.style.setProperty(k, String(vars[k]));
+      });
+      if (d.mode === "light" || d.mode === "dark") {
+        root.style.setProperty("color-scheme", d.mode);
+        root.setAttribute("data-theme", d.mode);
+      }
+      // Icons are a theme choice too, so a switch re-resolves them from the new
+      // pack. Placeholders can be re-filled in place; markup an app already
+      // inlined with ccIcon() cannot be, which is exactly why data-cc-icon is
+      // the documented path for static markup.
+      if (d.icons && typeof d.icons === "object") {
+        ICONS = d.icons;
+        Array.prototype.forEach.call(
+          document.querySelectorAll("[data-cc-icon]"),
+          function (el) {
+            var svg = ICONS[el.getAttribute("data-cc-icon")];
+            if (svg) el.innerHTML = svg;
+          }
+        );
+      }
+    });
+    function reportHeight() {
+      var h = Math.max(
+        document.body ? document.body.scrollHeight : 0,
+        document.documentElement ? document.documentElement.scrollHeight : 0
+      );
+      try { parent.postMessage({ __cc: true, kind: "height", height: h }, "*"); } catch (e) {}
+    }
+    window.addEventListener("load", reportHeight);
+    if (window.ResizeObserver) new ResizeObserver(reportHeight).observe(document.documentElement);
+    setTimeout(reportHeight, 50);
+    setTimeout(reportHeight, 300);
+  })();
+</script>`;
+
+/** JSON for injection into a <script>: escape `<`/`>` and the U+2028/U+2029 line
+ *  separators (legal in JSON, illegal bare in a JS string literal) so the value
+ *  cannot break out of the script context. Uses charCode literals to avoid
+ *  embedding the raw separators in this source file. */
+function safeScriptJson(value: unknown): string {
+  const LS = String.fromCharCode(0x2028);
+  const PS = String.fromCharCode(0x2029);
+  return JSON.stringify(value ?? {})
+    .replace(/</g, "\\u003c")
+    .replace(/>/g, "\\u003e")
+    .split(LS).join("\\u2028")
+    .split(PS).join("\\u2029");
+}
+
+/** Turn a ccSubmit payload into a natural follow-up message the agent can read.
+ *  ccSubmit("Temperature", 22)      → 'Temperature: 22'
+ *  ccSubmit({temp:22,unit:"C"})     → 'temp: 22, unit: C'
+ *  ccSubmit("Apply", {size:"L"})    → 'Apply — size: L'
+ *  ccSubmit("Confirm")              → 'Confirm' */
+
+
+export function buildSrcDoc(
+  html: string,
+  theme: Theme,
+  mode: ThemeMode,
+  icons: Record<string, string>,
+): string {
+  // Base styling gives generated code the REAL Command Center design system —
+  // the ACTIVE theme's tokens, not a frozen copy of one — so generated HTML is
+  // on-brand by default without the agent needing to know a single colour
+  // value. Generated <style> can override.
+  //
+  // Every `--cc-*` value comes from `lib/theme/app-tokens`, which is the whole
+  // point: these used to be hand-written RapidTool literals switching only on
+  // light/dark, so a published app stayed RapidTool-blue while the shell around
+  // it turned Fluent or Material. The theming engine stopped at this boundary.
+  // Now the boundary IS the engine's published interface — see that module for
+  // why `--cc-*` is a separate, stable vocabulary rather than our own tokens.
+  const base = `
+<style>
+  :root {
+    color-scheme: ${mode};
+${appTokenCss(theme, mode)}
+  }
+  html, body { margin: 0; padding: 0; }
+  body {
+    font-family: var(--cc-font, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
+    color: var(--cc-fg);
+    background: transparent;
+    padding: 2px;
+    font-size: 13px;
+    line-height: 1.5;
+  }
+  * { box-sizing: border-box; }
+  a { color: var(--cc-primary); }
+  h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; }
+  [data-cc-icon] svg { display: inline-block; vertical-align: middle; }
+
+  /* On-brand native controls so generated interactive UI matches the app.
+     min-height keeps every control's TAP target comfortable on a touch
+     screen (published apps run in whoever's browser opens them, phone
+     included) without changing the compact visual size — padding still
+     controls how the control LOOKS, min-height only pads the hit area.
+     44px matches Apple HIG / Material Design's minimum touch target size —
+     the same number CommandCenter's own mobile bottom-nav bar already uses
+     (see globals.css), not a separate convention for built apps. */
+  button, .cc-btn {
+    font: inherit; cursor: pointer; border-radius: calc(var(--cc-radius) - 0.25rem);
+    border: 1px solid var(--cc-border); background: var(--cc-secondary);
+    color: var(--cc-fg); padding: 0.4rem 0.8rem; min-height: 2.75rem;
+    transition: background 0.2s var(--cc-ease), border-color 0.2s var(--cc-ease);
+  }
+  button:hover, .cc-btn:hover { border-color: var(--cc-primary); }
+  button.cc-primary, .cc-btn.cc-primary {
+    background: var(--cc-primary); color: var(--cc-primary-fg); border-color: transparent;
+  }
+  input, select, textarea {
+    font: inherit; color: var(--cc-fg); background: var(--cc-card);
+    border: 1px solid var(--cc-border); border-radius: calc(var(--cc-radius) - 0.25rem);
+    padding: 0.35rem 0.55rem; outline: none; min-height: 2.75rem;
+  }
+  input:focus, select:focus, textarea:focus {
+    border-color: var(--cc-primary);
+    box-shadow: 0 0 0 calc(var(--cc-control-focus-ring, 2px) + 1px)
+      color-mix(in srgb, var(--cc-primary) 20%, transparent);
+  }
+  /* Native checkbox/radio sizing is a well-established browser default —
+     don't stretch it to the min-height above. */
+  input[type="checkbox"], input[type="radio"] { min-height: 0; }
+  input[type="range"] {
+    -webkit-appearance: none; appearance: none; height: 6px; min-height: 0; padding: 0;
+    border: none; border-radius: 999px; background: var(--cc-secondary);
+  }
+  input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
+    border-radius: 999px; background: var(--cc-primary); cursor: pointer;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-primary) 18%, transparent);
+  }
+  input[type="range"]::-moz-range-thumb {
+    width: 16px; height: 16px; border: none; border-radius: 999px;
+    background: var(--cc-primary); cursor: pointer;
+  }
+  .cc-card {
+    background: var(--cc-card); border: 1px solid var(--cc-border);
+    border-radius: var(--cc-radius); padding: 0.9rem;
+  }
+
+  /* ── Report design kit ────────────────────────────────────────────────
+     Reusable, on-brand document blocks so an agent writes terse semantic
+     HTML and gets a polished Command Center report (matches the reference
+     proposal artifact). Every class is namespaced cc-*; agents compose them.
+     Mono/utility face for eyebrows, section numbers, diagrams, and data. */
+  .cc-report {
+    --cc-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
+    max-width: 62rem; margin: 0 auto; padding: 0.5rem 0.25rem 2rem;
+    font-size: 14px; line-height: 1.62;
+  }
+  .cc-report > * + * { margin-top: 0.9rem; }
+  .cc-report p { max-width: 72ch; color: var(--cc-muted); }
+  .cc-report strong { color: var(--cc-fg); font-weight: 620; }
+  .cc-report code {
+    font-family: var(--cc-mono); font-size: 0.86em;
+    background: var(--cc-secondary); border: 1px solid var(--cc-border);
+    padding: 1px 5px; border-radius: 5px; color: var(--cc-fg);
+  }
+  /* Eyebrow — mono uppercase kicker with a leading rule. */
+  .cc-eyebrow {
+    font-family: var(--cc-mono); font-size: 11px; letter-spacing: 0.14em;
+    text-transform: uppercase; color: var(--cc-primary);
+    display: flex; align-items: center; gap: 10px; margin: 0;
+  }
+  .cc-eyebrow::before {
+    content: ""; width: 22px; height: 1px; background: var(--cc-primary);
+  }
+  /* Section number — mono accent tag that precedes an h2. */
+  .cc-sec-num {
+    font-family: var(--cc-mono); font-size: 11px; letter-spacing: 0.1em;
+    color: var(--cc-accent); text-transform: uppercase; display: block;
+  }
+  .cc-report h1 { font-size: clamp(24px, 4vw, 34px); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
+  .cc-report h2 { font-size: 21px; letter-spacing: -0.015em; margin: 0.2rem 0 0.1rem; text-wrap: balance; }
+  .cc-report h3 { font-size: 15px; margin: 1.1rem 0 0.3rem; }
+  .cc-lede { font-size: 16px; color: var(--cc-muted); max-width: 64ch; }
+  /* Callout — tinted panel (accent by default, .cc-callout-key for primary).
+     Subtle tint + border, NOT a thick side stripe. */
+  .cc-callout {
+    display: grid; grid-template-columns: auto 1fr; gap: 14px;
+    background: color-mix(in srgb, var(--cc-accent) 8%, var(--cc-card));
+    border: 1px solid color-mix(in srgb, var(--cc-accent) 24%, var(--cc-border));
+    border-radius: var(--cc-radius); padding: 0.85rem 1rem;
+  }
+  .cc-callout .cc-tag {
+    font-family: var(--cc-mono); font-size: 10px; text-transform: uppercase;
+    letter-spacing: 0.1em; color: var(--cc-accent); padding-top: 2px; white-space: nowrap;
+    /* Grid children stretch by default; the tag must hug its text and stay at
+       the top of a multi-line callout, not run the height of the panel. */
+    align-self: start; height: fit-content;
+  }
+  .cc-callout p { margin: 0; max-width: none; }
+  .cc-callout-key {
+    background: color-mix(in srgb, var(--cc-primary) 8%, var(--cc-card));
+    border-color: color-mix(in srgb, var(--cc-primary) 26%, var(--cc-border));
+  }
+  .cc-callout-key .cc-tag { color: var(--cc-primary); }
+  /* Chips row. */
+  .cc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
+  .cc-chip {
+    font-family: var(--cc-mono); font-size: 11px; padding: 4px 10px;
+    border: 1px solid var(--cc-border); border-radius: 999px;
+    color: var(--cc-muted); background: var(--cc-card);
+  }
+  .cc-chip b { color: var(--cc-fg); font-weight: 600; }
+  /* Grid of cards. */
+  .cc-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
+  .cc-report .cc-grid > .cc-card { margin: 0; }
+  .cc-grid .cc-card h4 { margin: 0 0 6px; font-size: 14px; font-weight: 620; display: flex; align-items: center; gap: 8px; }
+  .cc-grid .cc-card p { font-size: 13px; }
+  .cc-dot { width: 8px; height: 8px; border-radius: 999px; flex: none; background: var(--cc-primary); }
+  /* Comparison table. */
+  .cc-compare { overflow-x: auto; border: 1px solid var(--cc-border); border-radius: var(--cc-radius); }
+  .cc-compare table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 30rem; }
+  .cc-compare th, .cc-compare td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--cc-border); vertical-align: top; }
+  .cc-compare thead th {
+    font-family: var(--cc-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
+    color: var(--cc-muted); background: var(--cc-secondary);
+  }
+  .cc-compare tbody tr:last-child td { border-bottom: none; }
+  .cc-compare td:first-child { color: var(--cc-muted); }
+  .cc-yes { color: var(--cc-success); font-weight: 600; }
+  .cc-no { color: var(--cc-danger); font-weight: 600; }
+  .cc-partial { color: var(--cc-warning); font-weight: 600; }
+  /* Mono diagram block — ASCII architecture / flow. */
+  .cc-diagram {
+    background: var(--cc-bg); border: 1px solid var(--cc-border);
+    border-radius: var(--cc-radius); padding: 1rem 1.1rem; overflow-x: auto;
+  }
+  .cc-diagram pre {
+    margin: 0; font-family: var(--cc-mono); font-size: 12px; line-height: 1.5;
+    color: var(--cc-muted); white-space: pre;
+  }
+  .cc-diagram pre b { color: var(--cc-primary); font-weight: 600; }
+  .cc-diagram pre .cc-hl { color: var(--cc-accent); }
+  /* Numbered steps. */
+  .cc-steps { display: grid; gap: 0; }
+  .cc-step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 0.8rem 0; border-bottom: 1px solid var(--cc-border); align-items: start; }
+  .cc-step:last-child { border-bottom: none; }
+  .cc-step .cc-n {
+    font-family: var(--cc-mono); font-size: 12px; color: var(--cc-primary);
+    border: 1px solid var(--cc-border); border-radius: 8px; width: 30px; height: 30px;
+    display: grid; place-items: center; background: var(--cc-card);
+  }
+  .cc-step h4 { margin: 0.15rem 0 0.2rem; font-size: 14px; font-weight: 620; }
+  .cc-step p { margin: 0; font-size: 13px; }
+  /* Phase ribbon. */
+  .cc-phase { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 0.85rem 0; border-bottom: 1px solid var(--cc-border); }
+  .cc-phase:last-child { border-bottom: none; }
+  /* Badge — a solid label chip. Deliberately NOT scoped to .cc-phase: agents
+     reuse it inside .cc-callout, table cells and headings, and when it was
+     phase-only it either came out unstyled or, as a bare grid child, stretched
+     to the full row height — a solid block of primary colour instead of a chip.
+     The fit-content + self alignment keeps it chip-sized in ANY grid or flex
+     parent, which is the whole failure mode. */
+  .cc-badge {
+    font-family: var(--cc-mono); font-size: 11px; font-weight: 600; color: var(--cc-primary-fg);
+    background: var(--cc-primary); border-radius: 8px; padding: 4px 11px; white-space: nowrap;
+    display: inline-flex; align-items: center;
+    width: fit-content; height: fit-content;
+    align-self: start; justify-self: start;
+  }
+  .cc-phase h4 { margin: 0.1rem 0 0.3rem; font-size: 15px; }
+  .cc-phase ul { margin: 0.3rem 0 0; padding-left: 18px; font-size: 13px; color: var(--cc-muted); }
+  /* Status pills for tables/inline. */
+  .cc-pill { font-family: var(--cc-mono); font-size: 10px; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
+
+  /* ── Data-viz & decision blocks ───────────────────────────────────────
+     Pure CSS / inline-SVG so an agent emits terse markup (no JS, no hand-
+     rolled SVG paths) and gets an on-brand chart, KPI, decision box, or
+     architecture diagram. Tone via .cc-t-{success,warning,danger,accent}. */
+
+  /* KPI stat tiles — big number is the hero. Row of .cc-stat in .cc-stats. */
+  .cc-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
+  .cc-report .cc-stats { margin-top: 0.9rem; }
+  .cc-stat {
+    background: var(--cc-card); border: 1px solid var(--cc-border);
+    border-radius: var(--cc-radius); padding: 0.9rem 1rem;
+  }
+  .cc-stat .cc-k {
+    font-family: var(--cc-mono); font-size: 10px; letter-spacing: 0.08em;
+    text-transform: uppercase; color: var(--cc-muted); margin: 0 0 6px;
+  }
+  .cc-stat .cc-v {
+    font-size: 30px; font-weight: 640; line-height: 1; color: var(--cc-fg);
+    font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
+  }
+  /* Unit/suffix. Needs its own gap and line-height: without them a wordy unit
+     ("risk-adjusted", "near-close") jams straight into the number, and inherits
+     line-height:1 so a wrapped second line collides with the digits above. */
+  .cc-stat .cc-v small {
+    font-size: 14px; font-weight: 500; color: var(--cc-muted);
+    display: inline-block; margin-left: 0.3em; line-height: 1.25;
+    letter-spacing: 0; vertical-align: baseline;
+  }
+  .cc-stat .cc-d { font-size: 12px; margin-top: 6px; font-variant-numeric: tabular-nums; }
+  .cc-stat .cc-d.cc-up { color: var(--cc-success); }
+  .cc-stat .cc-d.cc-down { color: var(--cc-danger); }
+  .cc-stat .cc-d.cc-up::before { content: "▲ "; }
+  .cc-stat .cc-d.cc-down::before { content: "▼ "; }
+  /* Accent one stat tile: <div class="cc-stat cc-feature">. */
+  .cc-stat.cc-feature {
+    border-color: color-mix(in srgb, var(--cc-accent) 40%, var(--cc-border));
+    background: color-mix(in srgb, var(--cc-accent) 7%, var(--cc-card));
+  }
+  .cc-stat.cc-feature .cc-v { color: var(--cc-accent); }
+
+  /* Horizontal bar chart. Each row: <div class="cc-bar" style="--v:72">…
+     <b>label</b><span>value</span>. --v is the percent (0–100). */
+  .cc-bars { display: grid; gap: 9px; }
+  .cc-report .cc-bars { margin-top: 0.6rem; }
+  .cc-bar { display: grid; grid-template-columns: minmax(70px, 22%) 1fr auto; align-items: center; gap: 12px; }
+  .cc-bar > b { font-weight: 500; font-size: 12px; color: var(--cc-muted); text-align: right;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .cc-bar > .cc-track { height: 18px; border-radius: 6px; background: var(--cc-secondary); overflow: hidden; }
+  .cc-bar > .cc-track::after {
+    content: ""; display: block; height: 100%; width: calc(var(--v, 0) * 1%);
+    background: var(--cc-primary); border-radius: 6px;
+    transition: width 0.7s var(--cc-ease);
+  }
+  .cc-bar > span { font-family: var(--cc-mono); font-size: 12px; color: var(--cc-fg);
+    font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
+  .cc-bar.cc-t-success > .cc-track::after { background: var(--cc-success); }
+  .cc-bar.cc-t-warning > .cc-track::after { background: var(--cc-warning); }
+  .cc-bar.cc-t-danger  > .cc-track::after { background: var(--cc-danger); }
+  .cc-bar.cc-t-accent  > .cc-track::after { background: var(--cc-accent); }
+
+  /* Donut / ring gauge — one number, single conic-gradient. Set the percent:
+     <div class="cc-donut" style="--v:64"><span>64<small>%</small></span><b>label</b></div>. */
+  .cc-donuts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); justify-items: center; }
+  .cc-donut { display: grid; justify-items: center; gap: 8px; text-align: center; }
+  .cc-donut > .cc-ring {
+    width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
+    background:
+      radial-gradient(var(--cc-card) 58%, transparent 59%),
+      conic-gradient(var(--cc-primary) calc(var(--v, 0) * 1%), var(--cc-secondary) 0);
+  }
+  .cc-donut.cc-t-success > .cc-ring { background: radial-gradient(var(--cc-card) 58%, transparent 59%), conic-gradient(var(--cc-success) calc(var(--v, 0) * 1%), var(--cc-secondary) 0); }
+  .cc-donut.cc-t-warning > .cc-ring { background: radial-gradient(var(--cc-card) 58%, transparent 59%), conic-gradient(var(--cc-warning) calc(var(--v, 0) * 1%), var(--cc-secondary) 0); }
+  .cc-donut.cc-t-danger  > .cc-ring { background: radial-gradient(var(--cc-card) 58%, transparent 59%), conic-gradient(var(--cc-danger)  calc(var(--v, 0) * 1%), var(--cc-secondary) 0); }
+  .cc-donut.cc-t-accent  > .cc-ring { background: radial-gradient(var(--cc-card) 58%, transparent 59%), conic-gradient(var(--cc-accent)  calc(var(--v, 0) * 1%), var(--cc-secondary) 0); }
+  .cc-donut .cc-ring span { font-size: 22px; font-weight: 640; color: var(--cc-fg); font-variant-numeric: tabular-nums; }
+  .cc-donut .cc-ring span small { font-size: 12px; color: var(--cc-muted); }
+  .cc-donut > b { font-weight: 500; font-size: 12px; color: var(--cc-muted); }
+
+  /* Sparkline holder — agent drops a tiny inline <svg><polyline>. Styles the
+     stroke/fill so they need no attributes: <div class="cc-spark"><svg …>. */
+  .cc-spark svg { display: block; width: 100%; height: auto; overflow: visible; }
+  .cc-spark polyline, .cc-spark path { fill: none; stroke: var(--cc-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+  .cc-spark .cc-fill { fill: color-mix(in srgb, var(--cc-primary) 14%, transparent); stroke: none; }
+  .cc-spark .cc-dot { fill: var(--cc-accent); stroke: none; }
+
+  /* Decision / recommendation box — verdict as the hero, rationale below.
+     Tone via .cc-t-*; default reads as a recommendation (success). */
+  .cc-decision {
+    display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
+    border: 1px solid color-mix(in srgb, var(--cc-success) 34%, var(--cc-border));
+    background: color-mix(in srgb, var(--cc-success) 7%, var(--cc-card));
+    border-radius: var(--cc-radius); padding: 1rem 1.15rem;
+  }
+  .cc-decision > .cc-mark {
+    width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
+    font-weight: 700; font-size: 16px; color: var(--cc-primary-fg);
+    background: var(--cc-success);
+  }
+  .cc-decision .cc-verdict {
+    font-family: var(--cc-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
+    color: var(--cc-success); margin: 2px 0 4px;
+  }
+  .cc-decision h4 { margin: 0 0 4px; font-size: 16px; color: var(--cc-fg); }
+  .cc-decision p { margin: 0; max-width: none; }
+  .cc-decision.cc-t-warning { border-color: color-mix(in srgb, var(--cc-warning) 40%, var(--cc-border)); background: color-mix(in srgb, var(--cc-warning) 8%, var(--cc-card)); }
+  .cc-decision.cc-t-warning > .cc-mark { background: var(--cc-warning); }
+  .cc-decision.cc-t-warning .cc-verdict { color: var(--cc-warning); }
+  .cc-decision.cc-t-danger { border-color: color-mix(in srgb, var(--cc-danger) 40%, var(--cc-border)); background: color-mix(in srgb, var(--cc-danger) 8%, var(--cc-card)); }
+  .cc-decision.cc-t-danger > .cc-mark { background: var(--cc-danger); }
+  .cc-decision.cc-t-danger .cc-verdict { color: var(--cc-danger); }
+
+  /* Visual architecture diagram — flex rows of nodes joined by arrows, an
+     upgrade from the ASCII .cc-diagram. Structure: .cc-arch > (.cc-node |
+     .cc-arrow | .cc-arch-row). Add .cc-primary / a tone class to a node. */
+  .cc-arch { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; padding: 0.4rem 0; }
+  .cc-arch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; justify-content: center; }
+  .cc-node {
+    flex: 0 1 auto; min-width: 96px; text-align: center;
+    background: var(--cc-card); border: 1px solid var(--cc-border);
+    border-radius: 10px; padding: 0.55rem 0.85rem;
+  }
+  .cc-node .cc-node-t { font-size: 13px; font-weight: 600; color: var(--cc-fg); }
+  .cc-node .cc-node-s { font-family: var(--cc-mono); font-size: 10px; color: var(--cc-muted); margin-top: 2px; }
+  .cc-node.cc-primary { border-color: color-mix(in srgb, var(--cc-primary) 55%, var(--cc-border)); background: color-mix(in srgb, var(--cc-primary) 9%, var(--cc-card)); }
+  .cc-node.cc-primary .cc-node-t { color: var(--cc-primary); }
+  .cc-node.cc-accent  { border-color: color-mix(in srgb, var(--cc-accent) 55%, var(--cc-border)); background: color-mix(in srgb, var(--cc-accent) 9%, var(--cc-card)); }
+  .cc-node.cc-accent .cc-node-t { color: var(--cc-accent); }
+  .cc-node.cc-muted { border-style: dashed; }
+  /* Arrows: default → ; add .cc-down for a ↓ between stacked rows. */
+  .cc-arrow { display: grid; place-items: center; color: var(--cc-muted); font-family: var(--cc-mono); font-size: 15px; padding: 0 2px; }
+  .cc-arrow::before { content: "\\2192"; }
+  .cc-arrow.cc-down { width: 100%; }
+  .cc-arrow.cc-down::before { content: "\\2193"; }
+  .cc-arrow.cc-bi::before { content: "\\21C4"; }
+
+  /* Legend row for charts / diagrams. */
+  .cc-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--cc-muted); }
+  .cc-legend > span { display: inline-flex; align-items: center; gap: 6px; }
+  .cc-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--cc-primary); display: inline-block; }
+  .cc-legend i.cc-t-success { background: var(--cc-success); }
+  .cc-legend i.cc-t-warning { background: var(--cc-warning); }
+  .cc-legend i.cc-t-danger { background: var(--cc-danger); }
+  .cc-legend i.cc-t-accent { background: var(--cc-accent); }
+
+  /* ── Status callouts (4 tones) ────────────────────────────────────────
+     Small tinted notice, distinct from the verdict-style .cc-decision. Base
+     is neutral; add .cc-info / .cc-success / .cc-warning / .cc-danger. */
+  .cc-note {
+    display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start;
+    border: 1px solid var(--cc-border); background: var(--cc-card);
+    border-radius: calc(var(--cc-radius) - 0.15rem); padding: 0.7rem 0.9rem;
+  }
+  .cc-note > .cc-ico {
+    width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
+    font-size: 12px; font-weight: 700; color: var(--cc-primary-fg); background: var(--cc-muted);
+  }
+  .cc-note p { margin: 0; max-width: none; color: var(--cc-fg); font-size: 13px; }
+  .cc-note p strong { color: var(--cc-fg); }
+  .cc-note.cc-info { border-color: color-mix(in srgb, var(--cc-primary) 32%, var(--cc-border)); background: color-mix(in srgb, var(--cc-primary) 6%, var(--cc-card)); }
+  .cc-note.cc-info > .cc-ico { background: var(--cc-primary); }
+  .cc-note.cc-success { border-color: color-mix(in srgb, var(--cc-success) 32%, var(--cc-border)); background: color-mix(in srgb, var(--cc-success) 6%, var(--cc-card)); }
+  .cc-note.cc-success > .cc-ico { background: var(--cc-success); }
+  .cc-note.cc-warning { border-color: color-mix(in srgb, var(--cc-warning) 34%, var(--cc-border)); background: color-mix(in srgb, var(--cc-warning) 8%, var(--cc-card)); }
+  .cc-note.cc-warning > .cc-ico { background: var(--cc-warning); color: var(--cc-warning-fg); }
+  .cc-note.cc-danger { border-color: color-mix(in srgb, var(--cc-danger) 34%, var(--cc-border)); background: color-mix(in srgb, var(--cc-danger) 7%, var(--cc-card)); }
+  .cc-note.cc-danger > .cc-ico { background: var(--cc-danger); }
+
+  /* ── Data table + status cells ────────────────────────────────────────
+     Richer than .cc-compare: zebra rows, a leading status-stripe column, and
+     inline mini-bar / pill cells for ops & audit reports.
+       <div class="cc-table"><table>… <td class="cc-num">42</td>
+     A row can lead with a severity stripe: <td class="cc-stripe cc-t-danger">.
+     Cell helpers: .cc-num (mono, right-aligned), .cc-dim (muted),
+     .cc-status (dot + label), .cc-minibar (style="--v:74"), .cc-tag-pill. */
+  .cc-table { overflow-x: auto; border: 1px solid var(--cc-border); border-radius: var(--cc-radius); }
+  .cc-table table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 32rem; }
+  .cc-table thead th {
+    font-family: var(--cc-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
+    color: var(--cc-muted); background: var(--cc-secondary); text-align: left;
+    padding: 9px 13px; border-bottom: 1px solid var(--cc-border); white-space: nowrap;
+  }
+  .cc-table tbody td { padding: 9px 13px; border-bottom: 1px solid var(--cc-border); vertical-align: middle; color: var(--cc-fg); }
+  .cc-table tbody tr:last-child td { border-bottom: none; }
+  .cc-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--cc-secondary) 45%, transparent); }
+  .cc-table td.cc-num { font-family: var(--cc-mono); font-variant-numeric: tabular-nums; text-align: right; }
+  .cc-table td.cc-dim { color: var(--cc-muted); }
+  /* Leading status-stripe cell: <td class="cc-stripe cc-t-danger"></td>. */
+  .cc-table td.cc-stripe { width: 4px; padding: 0; background: var(--cc-border); }
+  .cc-table td.cc-stripe.cc-t-success { background: var(--cc-success); }
+  .cc-table td.cc-stripe.cc-t-warning { background: var(--cc-warning); }
+  .cc-table td.cc-stripe.cc-t-danger { background: var(--cc-danger); }
+  .cc-table td.cc-stripe.cc-t-accent { background: var(--cc-accent); }
+  /* Inline status text with a leading dot: <span class="cc-status cc-t-success">ok</span>. */
+  .cc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
+  .cc-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cc-muted); }
+  .cc-status.cc-t-success::before { background: var(--cc-success); }
+  .cc-status.cc-t-warning::before { background: var(--cc-warning); }
+  .cc-status.cc-t-danger::before { background: var(--cc-danger); }
+  .cc-status.cc-t-accent::before { background: var(--cc-accent); }
+  /* Inline mini-bar cell: <td><span class="cc-minibar" style="--v:74"></span></td>. */
+  .cc-minibar { display: inline-block; width: 100%; min-width: 56px; height: 8px; border-radius: 999px; background: var(--cc-secondary); overflow: hidden; vertical-align: middle; }
+  .cc-minibar::after { content: ""; display: block; height: 100%; width: calc(var(--v, 0) * 1%); background: var(--cc-primary); border-radius: 999px; }
+  .cc-minibar.cc-t-success::after { background: var(--cc-success); }
+  .cc-minibar.cc-t-warning::after { background: var(--cc-warning); }
+  .cc-minibar.cc-t-danger::after { background: var(--cc-danger); }
+  /* Solid status pill for a cell: <span class="cc-tag-pill cc-t-success">Live</span>. */
+  .cc-tag-pill {
+    font-family: var(--cc-mono); font-size: 10px; letter-spacing: 0.03em; padding: 2px 9px;
+    border-radius: 999px; background: var(--cc-secondary); color: var(--cc-muted); white-space: nowrap;
+  }
+  .cc-tag-pill.cc-t-success { background: color-mix(in srgb, var(--cc-success) 18%, transparent); color: var(--cc-success); }
+  .cc-tag-pill.cc-t-warning { background: color-mix(in srgb, var(--cc-warning) 20%, transparent); color: var(--cc-warning); }
+  .cc-tag-pill.cc-t-danger { background: color-mix(in srgb, var(--cc-danger) 18%, transparent); color: var(--cc-danger); }
+  .cc-tag-pill.cc-t-accent { background: color-mix(in srgb, var(--cc-accent) 18%, transparent); color: var(--cc-accent); }
+
+  /* ── Timeline / roadmap (Gantt-style) ─────────────────────────────────
+     Rows on a shared time axis. Set the number of columns on .cc-timeline
+     (--cols, default 12) and place each bar with --s (start col, 1-based)
+     and --e (span in cols):
+       <div class="cc-timeline" style="--cols:12">
+         <div class="cc-tl-row"><b>Design</b>
+           <div class="cc-tl-track"><span class="cc-tl-bar" style="--s:1;--e:3">Design</span></div></div>
+     Add a tone class to a bar to recolor it. */
+  .cc-timeline { --cols: 12; display: grid; gap: 8px; }
+  .cc-report .cc-timeline { margin-top: 0.6rem; }
+  .cc-tl-row { display: grid; grid-template-columns: minmax(72px, 18%) 1fr; align-items: center; gap: 12px; }
+  .cc-tl-row > b { font-weight: 500; font-size: 12px; color: var(--cc-muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .cc-tl-track {
+    display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 0;
+    height: 26px; border-radius: 7px; background: var(--cc-secondary);
+    background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--cols) - 1px), var(--cc-border) calc(100% / var(--cols) - 1px), var(--cc-border) calc(100% / var(--cols)));
+    overflow: hidden;
+  }
+  .cc-tl-bar {
+    grid-column: var(--s, 1) / span var(--e, 1); align-self: stretch;
+    display: flex; align-items: center; padding: 0 9px; margin: 3px 0;
+    border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--cc-primary-fg);
+    background: var(--cc-primary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
+  }
+  .cc-tl-bar.cc-t-accent { background: var(--cc-accent); }
+  .cc-tl-bar.cc-t-success { background: var(--cc-success); }
+  .cc-tl-bar.cc-t-warning { background: var(--cc-warning); color: var(--cc-warning-fg); }
+  .cc-tl-bar.cc-t-danger { background: var(--cc-danger); }
+  .cc-tl-bar.cc-ghost { background: var(--cc-secondary); color: var(--cc-muted); border: 1px dashed var(--cc-border); }
+  /* Axis labels row: same grid, .cc-tl-axis of <span>s under the tracks. */
+  .cc-tl-axis { display: grid; grid-template-columns: minmax(72px, 18%) 1fr; gap: 12px; margin-top: 2px; }
+  .cc-tl-axis > .cc-tl-ticks { display: grid; grid-template-columns: repeat(var(--cols), 1fr); font-family: var(--cc-mono); font-size: 9px; color: var(--cc-muted); }
+  .cc-tl-axis .cc-tl-ticks > span { text-align: center; }
+
+  /* ── Trend line / area chart ──────────────────────────────────────────
+     A charted trend, bigger than .cc-spark, with a faint grid, area fill,
+     axis labels, and an emphasized endpoint. Agent supplies the geometry as
+     an inline <svg>; these styles theme it so no per-element attributes are
+     needed. Structure:
+       <div class="cc-chart">
+         <svg class="cc-plot" viewBox="0 0 300 120" preserveAspectRatio="none">
+           <g class="cc-grid"><line x1=… /></g>
+           <polyline class="cc-area" points="…" />   (closed to baseline)
+           <polyline class="cc-line" points="…" />
+           <circle class="cc-end" cx=… cy=… r="3" /></svg>
+         <div class="cc-x"><span>Jan</span>…</div></div>  */
+  .cc-chart {
+    background: var(--cc-card); border: 1px solid var(--cc-border);
+    border-radius: var(--cc-radius); padding: 0.9rem 1rem 0.7rem;
+  }
+  .cc-chart .cc-plot { display: block; width: 100%; height: auto; overflow: visible; }
+  .cc-chart .cc-grid line { stroke: var(--cc-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
+  .cc-chart .cc-area { fill: color-mix(in srgb, var(--cc-primary) 14%, transparent); stroke: none; }
+  .cc-chart .cc-line { fill: none; stroke: var(--cc-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
+  .cc-chart .cc-line.cc-t-accent { stroke: var(--cc-accent); }
+  .cc-chart .cc-line.cc-t-success { stroke: var(--cc-success); }
+  .cc-chart .cc-area.cc-t-accent { fill: color-mix(in srgb, var(--cc-accent) 14%, transparent); }
+  .cc-chart .cc-end { fill: var(--cc-accent); stroke: var(--cc-card); stroke-width: 1.5; }
+  .cc-chart .cc-x { display: flex; justify-content: space-between; font-family: var(--cc-mono); font-size: 10px; color: var(--cc-muted); margin-top: 6px; }
+  .cc-chart .cc-x > span { flex: 1; text-align: center; }
+  .cc-chart .cc-x > span:first-child { text-align: left; }
+  .cc-chart .cc-x > span:last-child { text-align: right; }
+
+  @media (prefers-reduced-motion: reduce) {
+    .cc-bar > .cc-track::after { transition: none; }
+  }
+</style>`;
+  const bridge = BRIDGE.replace("__ICONS__", safeScriptJson(icons));
+  // `data-theme` here is the colour MODE, not the theme id — generated CSS has
+  // used `[data-theme="dark"]` selectors since long before the theming engine,
+  // and every already-published app carries them. Keeping the attribute meaning
+  // what those apps assume is the compatible choice; the theme's identity
+  // reaches them through the token values instead, which is where it belongs
+  // (an app should not have to know a theme's NAME to look right in it).
+  return `<!doctype html><html data-theme="${mode}"><head><meta charset="utf-8">
+<meta http-equiv="Content-Security-Policy" content="${FRAME_CSP}">
+${base}</head><body>${html}${bridge}</body></html>`;
+}