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
web · Inter
mac · SF Pro
How to read this. Section 1 judges ink: the same line of eight icons and words at every candidate stroke, beside Inter (browser) and SF Pro (the SPA inside the Mac app), with real SF Symbols at four weights as the Mac reference. The green row is the rule: stroke = the stem of the text beside it (Inter and SF Pro measure within 2%, so one table serves both). ★ marks today's house stroke (Icon.tsx, 1.4 px); ·L marks Lucide's default at 14 px (2 × 14/24 ≈ 1.17 px). Section 2 is one row per concept: today's drawings lifted from the source (real size, then 3×), the Lucide candidates, the SF Symbol the Mac uses, and each in a real .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.

1 · Ink: Lucide stroke against the text

Web · Inter 420 · 13 px
today
CloseDone Notes Search Hide Edit Settings Export
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
CloseDone Notes Search Hide Edit Settings Export
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
CloseDone Notes Search Hide Edit Settings Export
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
CloseDone Notes Search Hide Edit Settings Export
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
CloseDone Notes Search Hide Edit Settings Export
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
xmarkClosecheckmarkDonechevron.forwardNotesmagnifyingglassSearcheye.slashHidepencilEditgearshapeSettingssquare.and.arrow.upExport
SF Symbol regular
xmarkClosecheckmarkDonechevron.forwardNotesmagnifyingglassSearcheye.slashHidepencilEditgearshapeSettingssquare.and.arrow.upExport
SF Symbol medium
xmarkClosecheckmarkDonechevron.forwardNotesmagnifyingglassSearcheye.slashHidepencilEditgearshapeSettingssquare.and.arrow.upExport
SF Symbol semibold
xmarkClosecheckmarkDonechevron.forwardNotesmagnifyingglassSearcheye.slashHidepencilEditgearshapeSettingssquare.and.arrow.upExport
Mac web interior · SF Pro 420 · 15 px
today
CloseDone Notes Search Hide Edit Settings Export
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
xmarkClosecheckmarkDonechevron.forwardNotesmagnifyingglassSearcheye.slashHidepencilEditgearshapeSettingssquare.and.arrow.upExport
SF Symbol regular
xmarkClosecheckmarkDonechevron.forwardNotesmagnifyingglassSearcheye.slashHidepencilEditgearshapeSettingssquare.and.arrow.upExport
SF Symbol medium
xmarkClosecheckmarkDonechevron.forwardNotesmagnifyingglassSearcheye.slashHidepencilEditgearshapeSettingssquare.and.arrow.upExport
SF Symbol semibold
xmarkClosecheckmarkDonechevron.forwardNotesmagnifyingglassSearcheye.slashHidepencilEditgearshapeSettingssquare.and.arrow.upExport

2 · The icons, one row per concept

concepttoday (lifted)LucideSF Symbol · 13 / 15 ptin contextnote
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
xmarkxmark
xmark
web
mac
icon-check
Accept / done / menu tick
components/Icon.tsx
✓✓
Badge · ProposalZoneList · ActivityChip · settings.css (×8)
check
checkmarkcheckmark
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.forwardchevron.forward
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.downchevron.down
chevron.down
web
mac
icon-collapse
Collapse / previous segment
▴▴
ActivityChipStack
⌃⌃
ExpandableTimecode (parked)
chevron-up
chevron.upchevron.up
chevron.up
web
mac
icon-prev-next
Previous / next
components/SessionTapestry.tsx:643
components/SessionTapestry.tsx:650
chevron-left
chevron-right
chevron.backwardchevron.backward
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.slasheye.slash
eye.slash
web
mac
icon-zoom
Zoom in / out
islands/SessionsTable.tsx:644
islands/SessionsTable.tsx:636
zoom-in
zoom-out
plus.magnifyingglassplus.magnifyingglass
plus.magnifyingglass
web
mac
icon-edit
Edit
islands/QuoteGroup.tsx:68
✎✎
SessionsTable
pencil
pencilpencil
pencil
web
mac
icon-revert
Revert / restore
↩↩
QuoteCard ×2
undo-2
arrow.uturn.backwardarrow.uturn.backward
arrow.uturn.backward
web
mac
icon-refresh
Refresh / re-analyse
components/RefreshButton.tsx:27
rotate-cw
arrow.clockwisearrow.clockwise
arrow.clockwise
web
mac
icon-export
Download / export
pick
components/ExportDropdown.tsx:34
square.and.arrow.upsquare.and.arrow.up
square.and.arrow.up
web
mac
icon-folder
Folder
islands/SessionsTable.tsx:175
folder
folderfolder
folder
web
mac
icon-tag
Tag (rail)
components/SidebarLayout.tsx:70
tag
tagtag
tag
web
mac
icon-contents
Contents (list rail)
components/SidebarLayout.tsx:56
list
list.bulletlist.bullet
list.bullet
web
mac
icon-heatmap
Heatmap grid
components/InspectorPanel.tsx:121
layout-grid
square.grid.2x2square.grid.2x2
square.grid.2x2
web
mac
icon-quotes-lens
Quotes lens
components/SearchBox.tsx:650
text-quote
text.quotetext.quote
text.quote
web
mac
icon-focus
Focus mode
islands/Toolbar.tsx:152
moon
moonmoon
moon
web
mac
icon-settings
Settings
pick
components/NavTools.tsx:48
gearshapegearshape
gearshape
web
mac
icon-help
Help
pick
components/NavTools.tsx:60
questionmark.circlequestionmark.circle
questionmark.circle
web
mac
icon-star
Star (kept as ★ by decision)
★★
QuoteCard star toggle
★★
kept: ★ U+2605
star
starstar
star
web
mac
icon-play
Play
▶▶
Thumbnail .bn-play-icon
play
playplay
play
web
mac
icon-ai
AI ornament
pick
✦✦
ThresholdReviewModal · AutoCodeReportModal
sparklessparkles
sparkles
web
mac
icon-deny
Deny a proposal
pick
⊘⊘
AutoCodeReportModal
✗✗
ProposalZoneList
xmarkxmark
xmark
web
mac
icon-warning
Warning
⚠⚠
ActivityChip
triangle-alert
exclamationmark.triangleexclamationmark.triangle
exclamationmark.triangle
web
mac
icon-failed
Failed
✗✗
ActivityChip
circle-x
xmark.circlexmark.circle
xmark.circle
web
mac
icon-add
Add
++
CodebookAuthoring
plus
plusplus
plus
web
mac
icon-external
External link
↗↗
CodebookV2Page
external-link
arrow-up-right
arrow.up.forward.squarearrow.up.forward.square
arrow.up.forward.square
web
mac
icon-close-panel
Close a side panel
pick
××
SidebarLayout ×2
sidebar.leftsidebar.left
sidebar.left
web
mac
icon-playground
Dev playground (dev only)
components/TapestryPlaygroundToggle.tsx:10
sliders-horizontal
slider.horizontal.3slider.horizontal.3
slider.horizontal.3
web
mac

Paste this back into the conversation.