Foundations
Iconography
Use Material Symbols Rounded for native Sonarist interfaces, with names and labels that explain actions.
On this page
Icon contract
| Input | Behavior |
|---|---|
| name | Material Symbols ligature string |
| filled | FILL 0 by default; 1 when selected/emphasized |
| Variation settings | wght 450, GRAD 0, opsz 24 |
| className | Size and theme-specific color supplied by the parent |
| Accessibility | Decorative span is aria-hidden; parent control supplies its name |
Usage rules
- Use inbox/group/groups/inventory_2 consistently for primary navigation.
- Support, Sales and General use support_agent, trending_up and forum.
- Combine status icons with text; never rely on a colored symbol alone.
- Give every icon-only button a meaningful label and title through IconButton.
- Load the packaged rounded font locally and verify that ligatures render as symbols before capture.
Documentation chrome
The shared design-system documentation uses the portfolio’s existing outlined material icons. Sonarist’s rounded symbol font remains inside source examples; no icon should acquire an underline from a surrounding link.
Source references
| File | Responsibility |
|---|---|
| components/ui/icon.tsx | Font, variation settings and hidden semantics |
| app/layout.tsx | Packaged rounded font import |
| components/ui/primitives.tsx | IconButton labeling |
Examples from the app
Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0