Icons
Interface icons provided by Google Material Symbols, Outlined style.
One consistent outline set with semantic icon colors and accessible labels.
Common icons
Start with familiar, literal symbols. Keep the same icon for the same concept across the product. Click a tile to copy its name.
Sizes
sm 16 · md 20 · lg 24 · xl 32. Controls pick the size; do not set custom dimensions.
favoritesm
favoritemd
favoritelg
favoritexl
favoritefilled
Usage
One Icon component. Names are Material Symbols ligatures.
import { Icon } from "@/ui/Icon/Icon";
<Icon name="search" />
<Button iconOnly iconStart="settings">Settings</Button>Rules
- Use semantic icon colors: intent="neutral", "subtle", "brand" or a status intent. Default inherits text color.
- Let controls decide icon size. Do not pass custom pixel sizes.
- Decorative icons are hidden from assistive tech automatically. Pass label when the icon carries meaning.
- Icon-only Buttons still need children text. It becomes the accessible name.
- Do not use brand marks or emoji as interface icons.