Icons
Material Symbols from the variable icon font, with fill, weight, grade and optical size as props.
Playground
Search the full Material Symbols set, set the axes, and copy the Icon for it.
favorite
In a sentence the symbol follows the text.
Style
Size (optical size, dp)
Grade
Fill 0
Weight 400
<Icon name="favorite" size="xl" />
<!-- Icon names outside baseIcons must be loaded: -->
<App iconProviderProps={{ extraIcons: ['favorite'] }}> Loading icons
App loads the font through MaterialSymbolsProvider, subset to the
icons it knows about: baseIcons plus your extraIcons. An icon
outside that list shows its name as text, so add every name you use. Load only the style you
use with families.
<App iconProviderProps={{ extraIcons: ['shopping_cart', 'receipt_long'], families: ['rounded'] }}> A page that picks icons at runtime, like the playground above, can pass subset={false} to load the whole set. That is several MB per style, so keep it to that page.
Styles
| Style | Use with |
|---|---|
outlined | Dense UIs and light typography; stroke weight can mirror the text |
rounded | Rounded shapes and buttons, heavier type, curved logos (the default) |
sharp | Rectangular, 0dp-corner designs; stays crisp at small sizes |
Use one style across a product.
Axes
| Prop | Range | Guidance |
|---|---|---|
fill | 0 to 1 | State: 1 for selected, such as navigation items. Changes animate on the effects spring. |
wght | 100 to 700 | Match adjacent text and keep it consistent. At 24dp, no lighter than 200 and not much heavier than 400. |
grad | -50 to 200 | auto (default) is 0 on light schemes and -25 on dark ones, which offsets the glow of light-on-dark icons. Use a positive grade for an active state, or match a text font's grade. |
opsz | 20 to 48 | Follows size, so larger icons keep a thin stroke. Use 20dp for dense desktop layouts and 40–48dp to highlight primary actions. |
Icons with text
Match the icon's size and weight to the text. size="inline" takes the text's size and
drops the baseline by about 11.5% of it, so the symbol sits on the line like a letter .
<Body>Saved to favorites <Icon name="favorite" size="inline" /></Body>
Accessibility
Icon is hidden from assistive technology by default, since the ligature name would
otherwise be read out. When an icon carries meaning with no visible text beside it, give it an aria-label. It then gets role="img". Icon buttons take the label on
the button, not the icon.
Label abstract icons, and always label navigation items. Below 20dp, give complex or key-action icons a text label. A 24dp icon needs a 48dp target; with a mouse and keyboard, a 20dp icon can use a 40dp one.
Localizing
Icons read differently across cultures: a checkout can be a cart, a bag or a basket, and red
doesn't mean warning everywhere. Test icons with the people who will use them, and label the
abstract ones. Icon marks its glyph translate="no", so page
translation doesn't turn the ligature into another word.