--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/design_system/src/components/icon.js	Tue Aug 04 15:12:09 2026 -0700
@@ -0,0 +1,109 @@
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+
+const paths = {
+  add: ["M12 5v14", "M5 12h14"],
+  alert: ["M12 3 2.8 20h18.4L12 3Z", "M12 9v5", "M12 17h.01"],
+  archive: ["M4 7h16v13H4Z", "M3 3h18v4H3Z", "M9 11h6"],
+  "arrow-down": ["M12 4v16", "m6 14-6 6-6-6"],
+  "arrow-left": ["M20 12H4", "m10 6-6-6 6-6"],
+  "arrow-right": ["M4 12h16", "m-6-6 6 6-6 6"],
+  "arrow-up": ["M12 20V4", "m-6 6 6-6 6 6"],
+  check: ["m5 12 4 4L19 6"],
+  "chevron-down": ["m5 9 7 7 7-7"],
+  "chevron-left": ["m15 5-7 7 7 7"],
+  "chevron-right": ["m9 5 7 7-7 7"],
+  "chevron-up": ["m5 15 7-7 7 7"],
+  close: ["M6 6l12 12", "M18 6 6 18"],
+  code: ["m9 6-6 6 6 6", "m6-12 6 6-6 6"],
+  copy: ["M8 8h12v12H8Z", "M4 16V4h12"],
+  download: ["M12 3v12", "m7-7 5 5 5-5", "M5 21h14"],
+  error: ["M5 5l14 14", "M19 5 5 19"],
+  external: ["M14 5h5v5", "m19 5-8 8", "M19 13v6H5V5h6"],
+  file: ["M6 3h8l4 4v14H6Z", "M14 3v5h4"],
+  folder: ["M3 6h7l2 2h9v12H3Z"],
+  branch: ["M7 5v10a4 4 0 0 0 4 4h6", "M7 9h7a3 3 0 0 0 3-3V5"],
+  calendar: ["M5 4h14v17H5Z", "M8 2v4", "M16 2v4", "M5 9h14"],
+  history: ["M4 5v5h5", "M5 9a8 8 0 1 0 2-4", "M12 7v5l3 2"],
+  info: ["M12 11v6", "M12 7h.01", "M3 12a9 9 0 1 0 18 0 9 9 0 1 0-18 0"],
+  menu: ["M4 6h16", "M4 12h16", "M4 18h16"],
+  moon: ["M20 15a8 8 0 0 1-11-11 9 9 0 1 0 11 11Z"],
+  more: ["M5 12h.01", "M12 12h.01", "M19 12h.01"],
+  pause: ["M8 5v14", "M16 5v14"],
+  play: ["m8 5 11 7-11 7Z"],
+  repository: ["M4 4h13a3 3 0 0 1 3 3v13H7a3 3 0 0 1-3-3Z", "M8 4v16"],
+  retry: ["M4 4v6h6", "M5 9a8 8 0 1 1 2 8"],
+  search: ["M4 11a7 7 0 1 0 14 0 7 7 0 1 0-14 0", "m16 16 4 4"],
+  settings: [
+    "M9.5 4.2 10 2h4l.5 2.2 2 .8 2-1.2 2.8 2.8-1.2 2 .8 2L22 10v4l-2.2.5-.8 2 1.2 2-2.8 2.8-2-1.2-2 .8-.5 2.2h-4L9.5 20l-2-.8-2 1.2-2.8-2.8 1.2-2-.8-2L2 14v-4l2.2-.5.8-2-1.2-2 2.8-2.8 2 1.2Z",
+    "M9 12a3 3 0 1 0 6 0 3 3 0 1 0-6 0",
+  ],
+  sun: ["M12 2v3", "M12 19v3", "M2 12h3", "M19 12h3", "m5 5 2 2", "m17 17 2 2", "m19 5-2 2", "M7 17l-2 2", "M8 12a4 4 0 1 0 8 0 4 4 0 1 0-8 0"],
+  trash: ["M4 7h16", "M9 3h6l1 4H8Z", "m6 7 1 14h10l1-14", "M10 11v6", "M14 11v6"],
+  upload: ["M12 21V9", "m5 14 5-5 5 5", "M5 3h14"],
+  user: ["M8 8a4 4 0 1 0 8 0 4 4 0 1 0-8 0", "M4 21a8 8 0 0 1 16 0"],
+};
+
+/** @const {!ReadonlyArray<string>} Names in the first-party icon registry. */
+export const ICON_NAMES = Object.freeze(Object.keys(paths).sort());
+
+function safeSize(value) {
+  if (/^\d+(?:\.\d+)?(?:px|rem|em)?$/.test(value || "")) return value;
+  return "1em";
+}
+
+/**
+ * Renders validated first-party SVG geometry with inherited color.
+ *
+ * @extends {HTMLElement}
+ */
+export class ZenIcon extends HTMLElement {
+  static get observedAttributes() {
+    return ["label", "name", "size"];
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    if (this.isConnected) this.render();
+  }
+
+  render() {
+    const requested = this.getAttribute("name") || "info";
+    const known = Object.hasOwn(paths, requested);
+    const definition = known ? paths[requested] : paths.alert;
+    const svg = document.createElementNS(SVG_NAMESPACE, "svg");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("stroke-linecap", "round");
+    svg.setAttribute("stroke-linejoin", "round");
+    svg.setAttribute("focusable", "false");
+
+    for (const data of definition) {
+      const path = document.createElementNS(SVG_NAMESPACE, "path");
+      path.setAttribute("d", data);
+      svg.append(path);
+    }
+
+    const label = this.getAttribute("label");
+    if (label) {
+      this.setAttribute("role", "img");
+      this.setAttribute("aria-label", label);
+      this.removeAttribute("aria-hidden");
+    } else {
+      this.removeAttribute("role");
+      this.removeAttribute("aria-label");
+      this.setAttribute("aria-hidden", "true");
+    }
+    this.dataset.zenIcon = known ? requested : "alert";
+    this.style.setProperty("--zen-icon-size", safeSize(this.getAttribute("size")));
+    this.replaceChildren(svg);
+  }
+}
+
+if (!customElements.get("zen-icon")) {
+  customElements.define("zen-icon", ZenIcon);
+}