Design systemDraft

Icons

One set of line icons on a 16 grid, drawn in the text colour they sit in. Every icon on every board comes from this list (docs/design/one-app/icons.txt); a new icon needs a design review. Drawn on "Vyre one app, the system" and used on every board.

Anatomy#

• <svg viewBox="0 0 16 16"> with fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round. The drawing is the path data below, unchanged.
• The colour is inherited (currentColor): an icon is never given its own colour. It takes the ink of its row, button or chip (--text, --text-2 or --label).
• Decorative by default (aria-hidden="true"). The control around it carries the name.

The set#

The Vyre mark (20 to 22): <svg viewBox="0 0 24 24"> with a wire <path d="M3.5 5.5L12 19.5L17.96 9.69" stroke-width="2.4"> in --mark-wire and a dot <circle cx="20.5" cy="5.5" r="2.3"> in --mark-dot. When anything needs you, the dot is --beacon-dot; when nothing does, it goes back to --mark-dot. The mark is not an icon and never sits in a control.

Sizes#

The stroke stays 1.5 at every size. No other sizes; never scale an icon with transform.

States#

An icon has no states of its own. It follows its control: --label idle in a rail or field, --text-2 in an icon button, --text on hover, selected or pressed, --primary-ink inside a primary button. Inside a busy button the spinner replaces the leading icon.

Keyboard and touch#

Not interactive. The 44 touch target belongs to the control (see icon-button).

Motion#

None, except chev-r, which rotates 90 degrees over --motion-tap when its row opens. Reduced motion: no rotation, the open state swaps the drawing to chev-d.

Copy#

Icons never replace a word where the meaning is not obvious. A control with an icon only has an aria-label in sentence case ("New session", "Dictate", "More"). Never an emoji as an icon.

Accessibility#

aria-hidden="true" on every decorative icon; on the web the name lives on the button. Native: accessibilityElementsHidden (React Native) or .accessibilityHidden(true) (SwiftUI). The failed glyph is the one exception when it stands alone: its label is "failed" (see status-mark).

Gaps#

• Deck: icons.js drawings differ from icons.txt for now, projects, memory, agents, vault, settings, search, plus, mic, send (points right, not up), file, copy, bell, clock, key.
• Deck: missing planner, devices, x (has close), failed, chev-d (has chevron), more, stop, faceid, eye, hand, qr, box, wifi-off, refresh, drive, link, download, share, globe, shield, pause, play, cable, alarm, todo, unlock.
• Deck: extra names not in the set (lock, watch, pin, mute, edit, lines, mail, branch, login, pass, ask): add to icons.txt through a design review or retire.
• Deck: mark() fills the dot with --signal, which the tokens no longer define; use --mark-dot and --beacon-dot.
• App: no icon component; build one Icon from this table with react-native-svg.
• Lumen: SF Symbols everywhere (xmark, chevron.down, sparkle.magnifyingglass, mic.fill); draw this set as SwiftUI Shapes from the same path data.
• System: add minus and unlock to icons.txt; the Vault board draws the faceid frame without its face, which is not in the set.