> ## Documentation Index
> Fetch the complete documentation index at: https://design.slingshotai.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> This site documents Sundial 2.0, the design system of the Ash mobile app (Flutter). For implementing UI: use the Design System pages — color/typography tokens (foundations/*), Flutter theming (theming/*), and component APIs (components/*) — as your reference; every value there mirrors the Dart source in lib/design_system/. The Philosophy pages (philosophy/*) are design rationale written for humans: consult them when making design decisions, not for API lookups. Golden rules: never hardcode colors or text styles — read tokens via context.colorTheme and context.textTheme; prefer the 2.0 semantic names (contentPrimary, surfaceComponent, accentSolid…) over legacy contrast*/surface* getters and over SundialRef primitives; the accent is a single pale lavender solid that takes dark content — never use accent fills as text, icons, or borders (use contentAccent / borderSelected); brand surfaces are mode-invariant and pair with the contentOnBrand* inks; check lib/design_system/components/ before building custom widgets.

# AshIcon

> SVG icon widget for the custom Ash icon set — local assets or network URLs

Renders the custom Ash SVG icons (see [Iconography](https://design.slingshotai.com/foundations/iconography.md) for the full set) with theme-aware tinting. Source: [`ash_icon.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/components/ash_icon.dart).

```dart theme={null}
// Local asset from the AshIcons enum
AshIcon(AshIcons.insights, size: 24)

// Brand mark keeping its own colors
AshIcon(AshIcons.brandSpotify, useOriginalColor: true)

// Remote SVG (server-driven UI)
AshIcon.network('https://…/icon.svg', size: 32)
```

## Constructors

| Constructor | Source |
| - | - |
| `AshIcon(AshIcons icon, …)` | `assets/icons/{icon.value}.svg` |
| `AshIcon.network(String iconUrl, …)` | Any SVG URL (via `SvgPicture.network`) |

## API

| Parameter | Type | Default | Notes |
| - | - | - | - |
| `size` | `double?` | surrounding `IconTheme.size` | Width & height (`FittedBox` contains the SVG) |
| `color` | `Color?` | `IconTheme.color` → `contrastStrong` | Tint color |
| `useOriginalColor` | `bool` | `false` | Skip tinting — for multi-color brand marks |
| `semanticLabel` | `String?` | `null` | `null` = decorative, excluded from semantics |

## Resolution rules

* **Color**: explicit `color` → `IconTheme.of(context).color` → `context.colorTheme.contrastStrong`. Tinting uses `ColorFilter.mode(color, BlendMode.srcIn)`.
* **Size**: explicit `size` → `IconTheme.of(context).size`. Because `IconTheme` is respected, `AshIcon` slots into `IconButton`, [`NavDestination`](https://design.slingshotai.com/components/styled-navigation-bar), and [`StyledFloatingActionButton`](https://design.slingshotai.com/components/styled-floating-action-button) and picks up their icon styling automatically.
* **Semantics**: with `semanticLabel: null` the SVG sets `excludeFromSemantics: true`. Label at the button layer (e.g. `IconButton.tooltip`) instead — avoids double announcements.

## Real usage

Sign-in provider buttons (`provider_sign_in_buttons.dart`, brand icons with `useOriginalColor`), activity heroes (`activity_hero_image.dart`), linked-account platform icons (`platform_icon_mapping.dart`, including `.network` for server-driven icons).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.