From db675804f0aff8c38e55d07ad83f130ed168274c Mon Sep 17 00:00:00 2001 From: "Ricardo Q. Bazan" Date: Sat, 17 Oct 2026 15:21:51 -0500 Subject: [PATCH] docs: keep the rules for a UI icon and leave the icons to the site The Copy and Copied icons, with their geometry, belong to the site that uses them. The Iconography chapter keeps only the rules every UI icon follows and the check before one ships. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01An6o9bF4mjtTFxdLfPtsqa --- .changeset/ui-icon-rules.md | 5 +++++ skills/vlab-brand/iconography.md | 9 +++------ 2 files changed, 8 insertions(+), 6 deletions(-) create mode 100644 .changeset/ui-icon-rules.md diff --git a/.changeset/ui-icon-rules.md b/.changeset/ui-icon-rules.md new file mode 100644 index 0000000..8d8648c --- /dev/null +++ b/.changeset/ui-icon-rules.md @@ -0,0 +1,5 @@ +--- +"@variablelab/brand": patch +--- + +The Iconography chapter keeps the rules for drawing a UI icon and no longer lists icons: the Copy and Copied icons, with their geometry, move to the site that uses them. diff --git a/skills/vlab-brand/iconography.md b/skills/vlab-brand/iconography.md index d5fbed3..51c5464 100644 --- a/skills/vlab-brand/iconography.md +++ b/skills/vlab-brand/iconography.md @@ -4,17 +4,14 @@ Two families, and nothing else: filled shapes, which are the Signs and the Class ## UI icons +This guideline holds the rules for drawing a UI icon, not the icons: a site draws the icons it needs and keeps their geometry in its own specs. Every UI icon follows these rules: + - `viewBox 0 0 16 16`, shown at 14px. Stroke 1.5, no fill, `stroke-linecap: square`, `stroke-linejoin: miter`: square corners, like every other shape. - `currentColor`: `dim` at rest, `ink` on hover. - Decorative, so `aria-hidden="true"`. The control that holds the icon carries the accessible name. - Outlined, so a UI icon never reads as a Sign, which is filled. -| Icon | Use | Geometry | -| --- | --- | --- | -| Copy | Copies a command. | `` and `` | -| Copied | Replaces Copy for a moment after a copy. | `` | - -A new icon follows the stroke rules. Before it ships, set it at 14px beside every Project's `brand/sign.svg` and both Class stamps: it must not be mistaken for any of them. +Before an icon ships, set it at 14px beside every Project's `brand/sign.svg` and both Class stamps: it must not be mistaken for any of them. ## Shapes beside text