Foundations
Iconography
A governed Tabler Icons foundation with consistent geometry, semantic sizing, efficient delivery, and accessible naming.
1. Component Overview
Definition
The iconography system uses the Tabler Icons library as the singular source of truth for visual glyphs. Every icon uses a 24 × 24 internal grid, a 2px stroke, round line caps and joins, and scalable SVG geometry for crisp rendering across display densities.
Purpose
Icons are visual metaphors that reduce cognitive load, guide navigation, and clarify actions. A governed source, geometry, naming model, and optical scale create a cohesive enterprise interface across Web and Flutter.
Full Tabler library 5,112 outline symbols are available through the searchable manifest. Use tabler-icons.js for names and health-eye-icons-full.svg for symbol delivery; tree-shake to the icons an application uses.
Full icon library
Search the complete Tabler outline manifest. Results are rendered from the governed SVG sprite and remain keyboard reachable.
2. Usage Guidelines (Dos and Don'ts)
Do
- Standardize on the Tabler outline style for the primary interface.
- Pair icons with visible text whenever an action or concept is complex, abstract, uncommon, critical, or destructive.
- Preserve the canonical 2px internal stroke and round caps and joins.
- Use exact Tabler icon identifiers and choose the icon by meaning.
- Resolve size and color through canonical semantic tokens.
Don't
- Do not mix filled and outline icons within one navigation level or component set.
- Do not use an icon as the only communication of critical status, error, or destructive intent.
- Do not scale icons to arbitrary dimensions or hardcode colors.
- Do not distort, rotate, crop, combine, or redraw Tabler geometry.
- Do not load an icon font when a bundled SVG is available.
3. Architectural Integration (Web & Flutter)
Token Architecture & Library Integration
Web implementations use @tabler/icons SVG sources through the governed ds-icon Web Component. Only used SVG assets are bundled; the complete icon font is not loaded. Flutter uses tabler_icons through the governed DsIcon wrapper.
Component API / Props Architecture
The API accepts name, size, and color. Names use exact Tabler kebab-case identifiers; sizes and colors resolve through canonical tokens.
<ds-icon name="settings" size="md" color="text-secondary"></ds-icon>DsIcon(
TablerIcons.settings,
size: DsIconSize.md,
color: DsIconColor.textSecondary,
)Visual Examples
The specimens use registered Tabler names, canonical semantic color, and the governed scale.
4. Specifications & Anatomy
- Internal grid:
24 × 24 - View box:
0 0 24 24 - Default stroke:
2 - Fill:
none - Line cap and join:
round - Format: optimized SVG or a tree-shakeable Flutter glyph
| Token | Web | Flutter | Use |
|---|---|---|---|
size-icon-xs | 0.75rem / 12px | 12 dp | Compact metadata and inline badges |
size-icon-sm | 1rem / 16px | 16 dp | Small controls and dense tables |
size-icon-md | 1.25rem / 20px | 20 dp | Default controls and standard buttons |
size-icon-lg | 1.5rem / 24px | 24 dp | Prominent navigation and primary actions |
size-icon-xl | 2rem / 32px | 32 dp | Display sections and empty states |
Icon size and target size are independent. Place an icon inside a target of at least 44 × 44 CSS pixels on Web or 48 × 48 dp in Flutter.
5. Accessibility (WCAG 2.2 AA)
Decorative vs. Semantic
Hide a decorative icon or an icon paired with visible text using aria-hidden="true" on Web or excludeFromSemantics: true in Flutter. An icon-only control requires a stable programmatic name on its parent control; do not rely on an SVG title.
Essential icons meet at least 3:1 contrast against adjacent colors. Critical meaning also uses text, shape, or position. Icon-only controls retain the canonical minimum target and a visible focus indicator.
6. MCP Server Context
Agent Instructions
Specify exact Tabler icon names in kebab-case and use the outline style unless a documented component contract explicitly requires another style. Map every icon to size-icon-xs through size-icon-xl and to a semantic color role; never hardcode dimensions or colors. Hide decorative icons from assistive technology and provide a stable accessible name for every icon-only interactive control.