Mercurial
diff design_system/ICONS.md @ 254:2b6e732087ff
[ui] Add complete native component catalog
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Tue, 04 Aug 2026 15:12:09 -0700 |
| parents | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/design_system/ICONS.md Tue Aug 04 15:12:09 2026 -0700 @@ -0,0 +1,40 @@ +# Zenbu UI icons + +`zen-icon` is the only icon renderer used by Zenbu UI. It renders first-party +SVG geometry in light DOM, inherits the current text color, and has no font, +emoji, package, or network dependency. + +```html +<zen-icon name="search"></zen-icon> +<zen-icon name="archive" label="Archive repository" size="1.25rem"></zen-icon> +``` + +Icons without `label` are decorative and receive `aria-hidden="true"`. An icon +with a label receives `role="img"` and the matching accessible name. Buttons +that already have an accessible name should use an unlabeled icon. + +## Names + +The initial set contains: + +```text +add alert archive arrow-down arrow-left arrow-right arrow-up +branch calendar check chevron-down chevron-left chevron-right chevron-up +close code copy download error external file folder history info +menu moon more pause play repository retry search settings sun +trash upload user +``` + +Unknown names render the `alert` fallback rather than inserting authored HTML. +The catalog at `/icons` renders the authoritative runtime list. + +## Hard requirements + +- Do not use emoji or text glyphs as interface icons. +- Do not add inline SVG outside `components/icon.js`. +- Do not import an external icon package or icon font. +- Use `currentColor` through `zen-icon`; the owning component must obtain that + color from a `--zen-color-*` token. +- Add new geometry to the first-party icon registry and include a catalog test. + +`//design_system/test:design_system_policy_test` enforces these requirements.