# Icons
> Material Symbols, outlined by default. Axes and style are CSS variables.
## Usage
Icons are Material Symbols. The default class is `material-symbols`; it uses the outlined family. Ligature names come from the [Material Symbols catalog](https://fonts.google.com/icons?icon.set=Material+Symbols).
The compiled stylesheet ships the outlined, rounded, and sharp variable fonts. Browsers download a family only after markup uses it, so the default outlined class does not fetch rounded or sharp. Keep `dist/fonts/` next to `dist/css/` so the sheet's `url(../fonts/...)` paths resolve. Override `$expressive-include-fonts` when compiling Sass if the page already loads these families.
Put `material-symbols` on an element and use the ligature as the text. `.material-icons` is kept as an alias so older markup still renders with Symbols.
Default
Outlined
Rounded
Sharp
```
add
add
add
```
Icons inherit the current text color, so token utilities such as `primary-text` work. For icons inside buttons, see [Buttons](/buttons.html.md).
## Style
Outlined, rounded, and sharp are font families, not variation axes. Set the `icon-style` attribute — the same idea as `theme` — or set `--md-icon-font` directly. Either one inherits, so a subtree can use a different style.
```
…
…
```
Values are `outlined` (default), `rounded`, and `sharp`. A single icon can still opt out with `material-symbols-rounded` or `material-symbols-sharp`.
`outlined`
`rounded`
`sharp`
## Fill, weight, grade, optical size
These four are variable-font axes. They inherit, so set them on `:root` or on a wrapper. A missing range in the Google Fonts URL (a link without `opsz,wght,FILL,GRAD@…`) serves a static instance and the axes will not move.
| Token | Default | Range |
| --- | --- | --- |
| `--md-icon-fill` | 0 | 0 or 1 |
| `--md-icon-weight` | 400 | 100–700 |
| `--md-icon-grade` | 0 | −50–200 |
| `--md-icon-optical-size` | 24 | 20–48 (unitless) |
```
:root {
--md-icon-fill: 0;
--md-icon-weight: 400;
--md-icon-grade: 0;
--md-icon-optical-size: 24;
}
favorite
```
`icon-filled` is a shortcut for `--md-icon-fill: 1`.
Empty
Filled
Weight 200
Weight 700
## Sizes
Size an icon with `font-size`, or use the preset classes on the icon: `tiny` (1rem), `small` (2rem), `medium` (4rem), and `large` (6rem). Those classes also nudge `--md-icon-optical-size` so the glyph is cut for that size.
Tiny
Small
Medium
Large
```
insert_chart
```