Description
Icon and Brand System gives Dots one semantic glyph language across modules, settings, views, providers, and product identity. The Icon wrapper maps a closed set of meaningful names to deep Tabler imports, while dedicated registries cover Dots module marks, view glyphs, property types, connectors, agents, source modes, and selected vendor brands. DotsLogo, DotsWordmark, ConstellationDie, and related marks provide the product’s recognizable identity.
The closed registry prevents individual components from choosing arbitrary icon libraries or inventing one-off SVGs. Deep imports avoid loading the entire icon package, brand resolvers normalize provider identifiers, and accessible titles or surrounding labels establish meaning. The system also separates assignment-time emoji from application chrome so user expression does not blur product semantics.
Selling Points
- Makes actions and entities recognizable across modules through a stable semantic vocabulary.
- Preserves Dots identity with distinctive module and constellation marks rather than generic application graphics.
- Keeps bundle cost controlled by mapping each semantic name to a direct icon import.
- Gives connector and provider surfaces consistent brand treatment, including safe fallback behavior.
- Prevents inaccessible or misleading one-off glyph choices from proliferating across feature teams.
User Story
A developer adds an Archive action and uses the semantic archive name through the shared Icon component. It matches the same action everywhere else, carries the expected sizing and accessibility behavior, and does not pull thousands of unused icons into the bundle. A connector row uses the curated brand resolver without embedding its own SVG.
Extension Surface
This is fixed core by design. packages/ui/src/icons/map.ts is the closed semantic registry and packages/ui/src/components/shell/icons/DotsModuleIcons.tsx owns the approved module marks. Developers may use the catalog, and users may choose emoji only through the sanctioned assignment picker, but arbitrary runtime icon registration is not supported.
Capabilities & Limits
- Maps semantic names to efficient icon imports and shared rendering behavior.
- Supplies Dots identity marks plus curated module, view, property, source, agent, and connector glyphs.
- Supports branded fallbacks and assignment-time emoji without using emoji as application chrome.
- Limit: the registry is intentionally closed; new semantic names or brand defaults require source review rather than user configuration.
Implementation Map
packages/ui/src/icons/Icon.tsxpackages/ui/src/icons/map.tspackages/ui/src/components/DotsLogo.tsxpackages/ui/src/components/ConstellationDie.tsxpackages/ui/src/components/shell/icons/DotsModuleIcons.tsx