Icon – Once UI

The Icon component is used to display vector icons throughout your application. It provides consistent styling with various sizes and colors to enhance visual communication.

Icon

<Icon name="check" onBackground="info-medium"/>
<Icon name="danger" onBackground="danger-medium"/>
<Icon name="info" onBackground="brand-medium"/>
<Icon name="warning" onBackground="warning-medium"/>

Sizes

Icons come in different sizes to accommodate various use cases.

Sizes

<Icon name="check" size="xs"/>
<Icon name="check" size="s"/>
<Icon name="check" size="m"/>
<Icon name="check" size="l"/>
<Icon name="check" size="xl"/>

Colors

Icons can be styled with different colors using the onBackground or onSolid props.

Colors

<Icon name="rocket" onBackground="brand-weak"/>
<Icon name="pages" onBackground="accent-weak"/>
<Icon name="danger" onBackground="danger-weak"/>
<Icon name="check" onBackground="success-weak"/>

Icons can display tooltips on hover to provide additional context.

Tooltip

<Icon name="info" tooltip="Information" tooltipPosition="left"/>
<Icon name="warning" tooltip="Warning" tooltipPosition="top"/>
<Icon name="danger" tooltip="Error" tooltipPosition="bottom"/>
<Icon name="check" tooltip="Success" tooltipPosition="right"/>

Accessibility

By default, icons are considered decorative and hidden from screen readers. Use the decorative prop to make icons accessible to screen readers when they convey meaning.

Accessibility

// Hidden from screen readers (default)
<Icon name="check" decorative={true} />

// Accessible to screen readers
<Icon name="warning" decorative={false} />

Icon library

Once UI ships its own icons — the SVG data is inlined in the package, so no icon dependency is installed with it. 76 names are built in, covering everything the components themselves render. name is typed as IconName, a union of those names, so a typo is a build error rather than a blank space at runtime. To add your own icons — from react-icons, another set, or hand-written SVG — and to extend that union with them, see IconProvider.

Common icons

<Icon name="chevronDown" />
<Icon name="chevronRight" />
<Icon name="chevronLeft" />
<Icon name="check" />
<Icon name="danger" />
<Icon name="info" />
<Icon name="warning" />
<Icon name="close" />
<Icon name="plus" />
<Icon name="refresh" />

API reference

Prop	Type	Default
namerequired Which icon. A real union in 2.0, so an unregistered name is a type error.	IconName	—
onBackground Colour for an icon on a background surface.	`${ColorScheme}-${ColorWeight}`	—
onSolid Colour for an icon on a solid fill.	`${ColorScheme}-${ColorWeight}`	—
size Icon size.	xllmsxs	m
decorative Hide it from assistive tech. Turn it off when the icon is the only label.	boolean	true
tooltip Label shown on hover.	ReactNode	—
tooltipPosition Which side the tooltip appears on.	topbottomleftright	top
className	string	—
style	React.CSSProperties	—
…and every FlexProps prop	inherited	—