Icon

An icon shows a Material Symbols glyph chosen by name, drawn in the color of the text around it. Screen readers skip it unless you opt in, so a decorative icon adds no noise and a meaningful one carries a label you write. Below, icons vary in size, fill, and weight. One arrow mirrors for right-to-left reading.

home

favorite

flight_takeoff

settings

check_circle

search

star

mail

notifications

lock

bolt

arrow_forward

palette

arrow_forward

cloud

music_note

photo_camera

shopping_cart

rocket_launch

eco

translate

coffee

school

pets

key

Reference docs⁠

Blazor

React

Web

Overview

Examples

API

Styling

Accessibility

Built in⁠

Screen readers skip an icon by default; aria-hidden="false" with an aria-label announces it as an image.
flip-in-rtl mirrors a directional glyph, such as an arrow, in right-to-left layouts.
The content is a ligature name or an SVG, and an SVG paints in the color of the surrounding text.
Size, fill, weight, and grade come from --ct-icon-* tokens, so one rule restyles every icon.
An icon keeps its size in a flex row.

Using icons well⁠

Pair an icon with a text label wherever its meaning is not universal.
Put an icon that is the only content of a control in an icon button, and give that button an accessible name.
Show selected or active states with the filled variant, set by --ct-icon-fill, not with a different glyph.
Set flip-in-rtl on directional icons only: arrows, back, forward, and send. Leave clocks, checks, and brand marks unmirrored.
Keep the default 24-pixel size, use 20 pixels in dense layouts, and go larger only for emphasis.
Add shape, fill, or a label to any icon whose meaning depends on its color.

These rules follow Material 3 Expressive's guidance for icons, on material.io.

Icon names⁠

The content of an icon is a Material Symbols ligature name, such as home or flight_takeoff. The icon does not load the font, so load Material Symbols Outlined on your page; until it loads, no glyph appears.

Size and style⁠

Tokens set the look: --ct-icon-size defaults to 24px, --ct-icon-fill to 0, --ct-icon-weight to 400, and --ct-icon-grade to 0. Set size with the token rather than width or font-size, and set color on the icon or a parent, since the icon inherits it.

Custom SVG⁠

An SVG in place of a name fills the icon box and takes the surrounding text color. This suits a brand mark that no ligature draws.

Right to left⁠

flip-in-rtl mirrors the glyph when the icon's own direction is right to left, which it takes from a dir on the icon or an ancestor. Left to right, the attribute does nothing.

Announced icons⁠

An icon that carries meaning needs aria-hidden="false" and an aria-label. The label alone does nothing, because the icon hides itself unless the attribute says otherwise.

With a label⁠

An icon beside text is decoration: it keeps its size when the row is tight, and the text carries the meaning. Leave it hidden from assistive technology.

Properties⁠

Property	Attribute	Type	Description
`flipInRtl`	`flip-in-rtl`	`boolean`default `false`	Flips the icon horizontally in right-to-left layouts. Use it for directional icons, such as arrows, that should mirror. See Right to left.

flip-in-rtl takes effect only while the icon's own direction is right to left, and mirrors an SVG in the content the same way.

Slots⁠

Slot	Description
(default)	Icon name (e.g., "check", "settings") or SVG content. The icon is hidden from assistive technology unless `aria-hidden="false"` is set, which also gives it `role="img"`; name it with `aria-label` then.

Props⁠

Prop	Type	Description
`flipInRtl`	`boolean`default `false`	Flips the icon horizontally in right-to-left layouts. Use it for directional icons, such as arrows, that should mirror. See Right to left.

flip-in-rtl takes effect only while the icon's own direction is right to left, and mirrors an SVG in the content the same way.

Children⁠

Child	Description
`children`	Icon name (e.g., "check", "settings") or SVG content. The icon is hidden from assistive technology unless `aria-hidden="false"` is set, which also gives it `role="img"`; name it with `aria-label` then.

Parameters⁠

Parameter	Type	Description
`FlipInRtl`	`bool?`default `false`	Flips the icon horizontally in right-to-left layouts. Use it for directional icons, such as arrows, that should mirror. See Right to left.

flip-in-rtl takes effect only while the icon's own direction is right to left, and mirrors an SVG in the content the same way.

Render fragments⁠

Parameter	Type	Description
`ChildContent`	`RenderFragment?`	Icon name (e.g., "check", "settings") or SVG content. The icon is hidden from assistive technology unless `aria-hidden="false"` is set, which also gives it `role="img"`; name it with `aria-label` then.

Inputs⁠

Input	Type	Description
`flipInRtl`	`boolean`default `false`	Flips the icon horizontally in right-to-left layouts. Use it for directional icons, such as arrows, that should mirror. See Right to left.

flip-in-rtl takes effect only while the icon's own direction is right to left, and mirrors an SVG in the content the same way.

Content projection⁠

Content	Description
content with no `slot`	Icon name (e.g., "check", "settings") or SVG content. The icon is hidden from assistive technology unless `aria-hidden="false"` is set, which also gives it `role="img"`; name it with `aria-label` then.

Props⁠

Prop	Type	Description
`flipInRtl`	`boolean`default `false`	Flips the icon horizontally in right-to-left layouts. Use it for directional icons, such as arrows, that should mirror. See Right to left.

flip-in-rtl takes effect only while the icon's own direction is right to left, and mirrors an SVG in the content the same way.

Slots⁠

Slot	Description
`default`	Icon name (e.g., "check", "settings") or SVG content. The icon is hidden from assistive technology unless `aria-hidden="false"` is set, which also gives it `role="img"`; name it with `aria-label` then.

Props⁠

Prop	Type	Description
`flipInRtl`	`boolean`default `false`	Flips the icon horizontally in right-to-left layouts. Use it for directional icons, such as arrows, that should mirror. See Right to left.

flip-in-rtl takes effect only while the icon's own direction is right to left, and mirrors an SVG in the content the same way.

Snippets⁠

Snippet	Description
`children`	Icon name (e.g., "check", "settings") or SVG content. The icon is hidden from assistive technology unless `aria-hidden="false"` is set, which also gives it `role="img"`; name it with `aria-label` then.

A value is what the token defaults to; selecting it copies the token's name.

Tokens⁠

Token	Value
`--ct-icon-fill`	`0` `--ct-icon-fill`
`--ct-icon-font`	`Material Symbols Outlined` `--ct-icon-font`
`--ct-icon-grade`	`0` `--ct-icon-grade`
`--ct-icon-size`	`24px` `--ct-icon-size`
`--ct-icon-weight`	`400` `--ct-icon-weight`

Names and states⁠

An icon is a custom element that draws a glyph and has no native counterpart, so no WAI-ARIA Authoring Practices pattern applies; announced, it follows the WAI-ARIA 1.2: img role.

Hidden from assistive technology by default: any aria-hidden value other than "false" becomes aria-hidden="true", and removing the attribute restores that.
Set aria-hidden="false" to announce an icon. The icon then takes role="img" unless you set a role.
The accessible name comes from the icon's own aria-label, which you write. An aria-label without aria-hidden="false" is never read.
An icon that acts belongs in an icon button, which names and operates it.

Keyboard and focus⁠

Key	Action
None	An icon takes no keys and never receives focus.

An icon has no focus ring, because nothing about it is focusable.

Pointer and touch⁠

An icon is not a target: it has no pointer behavior and no touch target of its own. The control that holds it supplies the target size WCAG 2.5.8 sets at 24 by 24 pixels.

Display settings⁠

Forced colors: the glyph takes the inherited text color, so the system colors reach it as they reach the text around it. An SVG fills with that same color.
Reduced motion: an icon has no motion, so the preference changes nothing.
Right to left: flip-in-rtl mirrors the glyph horizontally when the icon's own direction is right to left. Set it on directional icons only.

Standards⁠

With its defaults, an icon meets one WCAG 2.2 success criterion:

1.1.1 Non-text Content (A)

One more depends on how you use it:

1.3.1 Info and Relationships (A): give an icon that conveys information an aria-label, and set aria-hidden="false".