Icons
Find an icon by its name or purpose. Hover over a tile to learn its role, and use the shared Icon component to keep icons consistent across the app.
This page uses a saved copy of the design system, last changed on . It may differ from the current design source.
The icon system
One geometry, recolored by context
Every Tasty glyph is a 24×24 viewBox, 2px stroke, round cap/join, no fill, drawn in currentColor. An icon never carries its own color — it inherits from the control around it. Render one by name with <Icon name="…"/>; size it through the size prop, not by editing the path.
Geometry lives in the icons/*.svg files (exported to icons.json); <Icon/> embeds the same registry so it renders synchronously and recolors from the wrapping control. Pull a glyph by name — never paste a new <path>, never <img> an .svg (that loses currentColor). Each entry also carries a machine-readable fill boolean so codegen (and <Icon/>) can tell a filled glyph from a stroke one — today only starFill is fill:true (the solid ★ for an active favorite); its outline twin star stays stroke-only.
Don't bake a color into a glyph or mix stroke widths. Filled glyphs are the rare exception (flagged fill:true in icons.json, e.g. starFill) — for a filled state dot, reach for StatusDot / Badge instead, not a new icon.
Modifier symbols in use
Keycap chip · settings display style
Two places consume these glyphs. In a keycap chip (modifier-hint header, switch overlays) the glyph replaces the key's text inside the same Kbd cap — 14px, so its optical weight matches the 12px mono label it stands in for. In the Settings › modifier display style dropdown, the closed trigger shows the glyph alone (it is a preview of the keycap), while each open option row pairs glyph + text label so the choice is never ambiguous.
No new tokens — the glyphs drop into the existing Kbd cap and menu-row recipes untouched. The + joiner between caps stays text; only the key faces become vectors.
Don't type ⌘ / ⌥ / ⇧ as unicode text anywhere in the product — that is the bug these glyphs exist to fix. And don't reach for command when you mean the ⌘ keycap.
Actions
The verbs. These are what an IconButton wraps in a toolbar or row — close and refresh sit in every overlay header; edit / trash / copy in list rows. Draw them from here, never re-inline the path.
Surfaces & workspace
The nouns of the workspace — what a tab, tree row, or new-surface button shows. terminal and markdown are the two core surface kinds.
Visibility
The reveal toggle on secret values (passkeys, env). They swap in place on the same IconButton — eye when hidden, eyeOff when shown.
Status & alerts
Inline meaning markers, tinted by the line they sit in (warning amber, success green, danger red) via currentColor. Not for state dots — that's StatusDot; these carry a message.
Tools & system
The sidebar footer and global tools — each anchors a menu or window. tools opens the Tools menu, settings the Settings window, plug the Plugins window.
Modifier keys (macOS)
The three macOS modifier keycap glyphs, as vectors. They exist because the app renders with its own bundled font and the unicode characters (⌘ U+2318, ⌥ U+2325, ⇧ U+21E7) fall back to tofu — so a modifier symbol is drawn as an <Icon/>, never typed as text. Note cmdKey is the real ⌘ keycap glyph; the older command in Tools & system is the generic "a command" concept icon and is not a substitute.