Icon system — today, Lucide, SF Symbols
docs/design-icon-system.md · 15 Oct 2026 · built by experiments/icon-system/build_mockup.py
Artefact — real pixels, product type and CSS
Commentary — not the product
1 · Ink: Lucide stroke against the text
Web · Inter 420 · 13 px
| today | CloseDoneNotesSearchHideEditSettingsExport |
|---|---|
| stem-matched 0.092 em = 1.20 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.17 px ·L | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.25 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.4 px ★ | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.5 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.75 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 2 px | CloseDoneNotesSearchHideEditSettingsExport |
Web · Inter 420 · 15 px
| today | CloseDoneNotesSearchHideEditSettingsExport |
|---|---|
| stem-matched 0.092 em = 1.38 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.17 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.25 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.4 px ★ | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.5 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.75 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 2 px | CloseDoneNotesSearchHideEditSettingsExport |
Web · Inter 490 · 13 px (emphasis)
| today | CloseDoneNotesSearchHideEditSettingsExport |
|---|---|
| stem-matched 0.106 em = 1.38 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.17 px ·L | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.25 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.4 px ★ | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.5 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.75 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 2 px | CloseDoneNotesSearchHideEditSettingsExport |
Web · Inter 700 · 13 px (strong)
| today | CloseDoneNotesSearchHideEditSettingsExport |
|---|---|
| stem-matched 0.146 em = 1.90 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.17 px ·L | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.25 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.4 px ★ | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.5 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.75 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 2 px | CloseDoneNotesSearchHideEditSettingsExport |
Mac web interior · SF Pro 420 · 13 px
| today | CloseDoneNotesSearchHideEditSettingsExport |
|---|---|
| stem-matched 0.092 em = 1.20 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.17 px ·L | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.25 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.4 px ★ | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.5 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.75 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 2 px | CloseDoneNotesSearchHideEditSettingsExport |
| SF Symbol light | |
| SF Symbol regular | |
| SF Symbol medium | |
| SF Symbol semibold |
Mac web interior · SF Pro 420 · 15 px
| today | CloseDoneNotesSearchHideEditSettingsExport |
|---|---|
| stem-matched 0.092 em = 1.38 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.17 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.25 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.4 px ★ | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.5 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 1.75 px | CloseDoneNotesSearchHideEditSettingsExport |
| Lucide 2 px | CloseDoneNotesSearchHideEditSettingsExport |
| SF Symbol light | |
| SF Symbol regular | |
| SF Symbol medium | |
| SF Symbol semibold |
2 · The icons, one row per concept
| concept | today (lifted) | Lucide | SF Symbol · 13 / 15 pt | in context | note |
|---|---|---|---|---|---|
| icon-close Close / dismiss / delete chip | components/SearchBox.tsx:594 components/InspectorPanel.tsx:132 components/SessionTapestry.tsx:658 components/Icon.tsx ×× ModalNav · Badge · ActivityChip · SidebarLayout (×18 incl. ✕ ✗) | x | xmark | web mac | |
| icon-check Accept / done / menu tick | components/Icon.tsx ✓✓ Badge · ProposalZoneList · ActivityChip · settings.css (×8) | check | checkmark | web mac | |
| icon-disclose Disclosure (rotates 90° when open) | islands/SessionsTable.tsx:949 components/TagSidebar.tsx:229 ▶▶ ModalNav · ProposalZoneList · coverage.css (0.65em) ▸▸ TranscriptionDiagnostics | chevron-right | chevron.forward — native: the system disclosure control | web mac | |
| icon-caret Caret on a menu button | components/ToolbarButton.tsx:47 components/SearchBox.tsx:474 ▾▾ Selector · Counter · SignalsPage · ActivityChipStack | chevron-down | chevron.down | web mac | |
| icon-collapse Collapse / previous segment | ▴▴ ActivityChipStack ⌃⌃ ExpandableTimecode (parked) | chevron-up | chevron.up | web mac | |
| icon-prev-next Previous / next | components/SessionTapestry.tsx:643 components/SessionTapestry.tsx:650 | chevron-left chevron-right | chevron.backward | web mac | |
| icon-show-hide Show / hide | components/EyeToggle.tsx:20 components/EyeToggle.tsx:30 islands/QuoteCard.tsx:43 components/TagInput.tsx:6 | eye eye-off | eye.slash | web mac | |
| icon-search Search | components/SearchBox.tsx:425 | search | magnifyingglass | web mac | |
| icon-zoom Zoom in / out | islands/SessionsTable.tsx:644 islands/SessionsTable.tsx:636 | zoom-in zoom-out | plus.magnifyingglass | web mac | |
| icon-edit Edit | islands/QuoteGroup.tsx:68 ✎✎ SessionsTable | pencil | pencil | web mac | |
| icon-revert Revert / restore | ↩↩ QuoteCard ×2 | undo-2 | arrow.uturn.backward | web mac | |
| icon-refresh Refresh / re-analyse | components/RefreshButton.tsx:27 | rotate-cw | arrow.clockwise | web mac | |
| icon-export Download / export pick | components/ExportDropdown.tsx:34 | square.and.arrow.up | web mac | ||
| icon-folder Folder | islands/SessionsTable.tsx:175 | folder | folder | web mac | |
| icon-tag Tag (rail) | components/SidebarLayout.tsx:70 | tag | tag | web mac | |
| icon-contents Contents (list rail) | components/SidebarLayout.tsx:56 | list | list.bullet | web mac | |
| icon-heatmap Heatmap grid | components/InspectorPanel.tsx:121 | layout-grid | square.grid.2x2 | web mac | |
| icon-quotes-lens Quotes lens | components/SearchBox.tsx:650 | text-quote | text.quote | web mac | |
| icon-focus Focus mode | islands/Toolbar.tsx:152 | moon | moon | web mac | |
| icon-settings Settings pick | components/NavTools.tsx:48 | gearshape | web mac | ||
| icon-help Help pick | components/NavTools.tsx:60 | questionmark.circle | web mac | ||
| icon-star Star (kept as ★ by decision) | ★★ QuoteCard star toggle | ★★ kept: ★ U+2605 star | star | web mac | |
| icon-play Play | ▶▶ Thumbnail .bn-play-icon | play | play | web mac | |
| icon-ai AI ornament pick | ✦✦ ThresholdReviewModal · AutoCodeReportModal | sparkles | web mac | ||
| icon-deny Deny a proposal pick | ⊘⊘ AutoCodeReportModal ✗✗ ProposalZoneList | xmark | web mac | ||
| icon-warning Warning | ⚠⚠ ActivityChip | triangle-alert | exclamationmark.triangle | web mac | |
| icon-failed Failed | ✗✗ ActivityChip | circle-x | xmark.circle | web mac | |
| icon-add Add | ++ CodebookAuthoring | plus | plus | web mac | |
| icon-external External link | ↗↗ CodebookV2Page | external-link arrow-up-right | arrow.up.forward.square | web mac | |
| icon-close-panel Close a side panel pick | ×× SidebarLayout ×2 | sidebar.left | web mac | ||
| icon-playground Dev playground (dev only) | components/TapestryPlaygroundToggle.tsx:10 | sliders-horizontal | slider.horizontal.3 | web mac |
.toolbar-btn. The sliders drive section 2 and the sheet's context buttons; section 1 rows carry fixed strokes. Choices and notes save in this browser; Copy my decisions gives Markdown to paste back. Judge at real size; for pixels use macOS zoom (⌃-scroll), not the 3× column, which redraws vectors. Labels in the buttons are illustrative, not locale keys. SF Symbol PNGs are rendered locally and gitignored — rerun the build if they are missing.