Iconography

Sundial has two icon systems, used side by side:

AshIcons — custom SVGs

21 brand-specific icons (personas, activities, third-party brand marks) rendered by the AshIcon widget from assets/icons/*.svg.

Symbols — Material Symbols Rounded

The full Material Symbols Rounded set as icon fonts, in outlined and filled variants, exposed as IconData constants.

AshIcons (custom SVG)

Defined in components/ash_icon.dart. Each enum value maps to assets/icons/{value}.svg:

Group	Icons
Brand mark	`ashFlower`
Activities	`activitiesFiveWhys`, `activitiesPies`, `activitiesValuesSort`, `activitiesRelationshipMapper`
Personas	`personaAsh`, `personaCircle`, `personaDiamond`, `personaHeart`, `personaTriangle`
Third-party brands	`brandApple`, `brandGoogle`, `brandOpenAI`, `brandReddit`, `brandSpotify`, `brandSteam`, `brandXTwitter`, `brandYouTube`
Features	`conversation`, `insights`, `weeklyInsights`

// Local asset icon, tinted with the current icon color
AshIcon(AshIcons.conversation, size: 24)

// Keep the SVG's own colors (brand logos)
AshIcon(AshIcons.brandGoogle, useOriginalColor: true)

// Remote SVG
AshIcon.network('https://…/icon.svg', size: 32)

Color and size resolve in this order: explicit parameter → surrounding IconTheme → context.colorTheme.contrastStrong. Unless useOriginalColor: true, the SVG is tinted via ColorFilter.mode(color, BlendMode.srcIn).

Adding an icon: drop the SVG into assets/icons/ and register it in the AshIcons enum — unregistered files can’t be used. See Contributing.

Accessibility convention

semanticLabel defaults to null, which hides the icon from screen readers (decorative). Icon-only buttons should label at the button layer (e.g. IconButton.tooltip) instead of the icon, to avoid double announcements.

Symbols (Material Symbols Rounded)

symbols.dart is a generated glyph map (~600 KB — don’t edit by hand) exposing the complete Material Symbols Rounded set as IconData:

// Outlined (default)
Icon(Symbols.settings)

// Filled variant — same name with a _filled suffix
Icon(Symbols.settings_filled)

Two icon fonts back it, declared in pubspec.yaml: MaterialSymbolsRounded (outlined) and MaterialSymbolsRoundedFilled (filled). Use Symbols.* for general UI iconography; reserve AshIcons for brand-specific artwork that doesn’t exist in Material Symbols.

AshIcon — the SVG icon widget
AshLogo — the Ash wordmark/logo (assets/icons/AshLogo.svg), separate from the icon enum

Getting Started

Craft and Foundations

Brand

Design System

For Agents

AshIcons — custom SVGs

Symbols — Material Symbols Rounded

AshIcons (custom SVG)

Accessibility convention

Symbols (Material Symbols Rounded)

AshIcons — custom SVGs

Symbols — Material Symbols Rounded

AshIcons (custom SVG)

Accessibility convention

Symbols (Material Symbols Rounded)

Related widgets