Icon
Last Updated: September 2026Icons are pictographical representations of meaning that can be used in place or in combination with labels. They are a faster means with which to communicate meaning for returning and power users.
Source CodeAnatomy
link- 1Outlined
- 2Colored outline
- 3Solid
- 4Solid colored
Variants
linkOutlined (default)
Standard Material Symbol outline weight.
Filled
Sets the FILL axis for a solid glyph.
Colored
Applies a design-system Color token class.
Sized
size is rem (default 1). Optical size tracks size × 16.
Usage Guidelines
linkWhen to use
- •To reinforce meaning next to labels, buttons, and empty states.
- •When you need a Material Symbol or registered custom icon glyph.
- •For status and affordance cues that stay consistent with the type scale.
When not to use
- •As a primary action by itself — use IconButton with aria-label.
- •For brand logos or complex illustrations — use dedicated assets.
- •When the meaning is unclear without text — pair with a visible label.
Pair icons with visible text when the action or status is critical.
Don't rely on an unlabeled icon for primary meaning.
For icon-only actions, use IconButton (or wrap Icon) with aria-label.
Don't make a bare Icon the only click target without an accessible name.
Behaviors
linkMaterial Symbols
- •icon accepts Material Symbol names (plus auto_awesome and custom registry keys).
- •weight (100–900), grade, and filled map to font-variation-settings.
- •size sets fontSize in rem and opsz to size × 16.
Custom icons
- •Registered CustomIcon names render inline SVG instead of a font ligature.
- •Custom SVGs scale from size × 16 pixels.
Composition
- •Supports Base UI render prop to swap the host element.
- •color defaults to inheriting surrounding text color via currentColor.
Content Guidelines
linkChoosing glyphs
- •Prefer common Material Symbols already used in the product for consistency.
- •Match metaphor to the action (add, edit, delete) — avoid decorative noise.
Sizing
- •Align icon rem size with nearby type (≈1–1.25 beside labels, larger in empty states).
- •Keep icon and label optically aligned in the same row.
Accessibility
linkText & Labels
- •Decorative icons next to visible text can be aria-hidden.
- •Meaningful icon-only UI must expose a name via aria-label on a control.
ARIA attributes
- •Default host is a span with data-icon set to the symbol name.
- •Prefer IconButton for interactive icon-only buttons.
Keyboard Support
- •Icon alone is not focusable.
- •When rendered as a button via render or IconButton, Tab focuses; Space/Enter activates.
WCAG Compliance Standards
FAQs
linkWhat units does size use?
Rem. Default is 1 (16px optical size). Pass 1.5 for 24px-class icons.
How do I get a filled symbol?
Set filled={true}. That enables the FILL font variation axis.
Can I use any Material Symbol name?
Most Material Symbol names are typed. Some extras (e.g. auto_awesome) and customIcons keys are also allowed.