Foundations
Icons and action cues
Use the source icon family and a visible action name to make navigation easier to scan.
On this page
Icon systems
| Area | Source |
|---|---|
| Public content and navigation | MaterialIcon with the source Material Symbols font and semantic names. |
| Admin | AdminIcon and existing navigation labels. |
| Theme choice | Lucide Sun, Monitor and Moon in ThemeModeToggle. |
| Portfolio documentation | Existing Material Symbols section and control cues; no underlined icon glyphs. |
Placement rules
- Pair category icons with text; local content types must remain understandable if fonts fail.
- Use an accessible button name for an icon-only action. Decorative icons should not repeat the spoken label.
- Keep a stable size and baseline beside labels. Do not enlarge a ligature to fill the control.
- Use theme tokens for icon color. Avoid adding a separate arbitrary palette.
Source references
| File | Responsibility |
|---|---|
| components/material-icon.tsx | Audited Townwell implementation; use this file when extending this interface. |
| components/admin/admin-icon.tsx | Audited Townwell implementation; use this file when extending this interface. |
| components/theme-mode-toggle.tsx | Audited Townwell implementation; use this file when extending this interface. |
| app/globals.css | Audited Townwell implementation; use this file when extending this interface. |
Examples from the app
Actual Boise Today and Townwell UI with synthetic editorial, business, review, media metadata and analytics. Existing Boise imagery; no live data changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision ce8bc72b96da · Documentation v0.1