Components
Material symbols
Reuse the source rounded font with explicit action names on parent controls.
On this page
Purpose and composition
Reuse the source rounded font with explicit action names on parent controls.
Use source names from adjacent components to preserve the product vocabulary.
Anatomy
| Part | Responsibility |
|---|---|
| Glyph | Ligature name |
| Variation | Fill state and fixed weight/optical size |
Configuration and variants
| Input / variant | Contract |
|---|---|
| name | Required symbol name |
| filled | Defaults false |
| className | Parent controls size/color |
States and feedback
| State | Visible / behavioral result |
|---|---|
| Outline | FILL 0 |
| Selected | FILL 1 |
| Font unavailable | Ligature text may appear; reject capture |
Interaction and responsive behavior
- Decorative Icon spans are aria-hidden.
- Use IconButton for icon-only actions.
- Do not mix outlined portfolio icons into native app captures.
Accessibility contract
- Parent supplies accessible action label.
- Text accompanies operational status symbols.
Known implementation limits
Icons do not establish keyboard behavior or selection semantics by themselves.
Composition example
<Icon name="inbox" filled className="text-[24px]" />Source references
| File | Responsibility |
|---|---|
| components/ui/icon.tsx | Icon wrapper |
| app/layout.tsx | Font import |
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