Icon

Basic usage

<FuiIcon name="add" />
<FuiIcon name="settings" />
<FuiIcon name="arrow-left" />
<FuiIcon name="checkmark" />
<FuiIcon name="close" />
<FuiIcon name="search" />

Variant: regular vs filled

regular

filled

regular

filled

regular

filled

<FuiIcon name="star" variant="regular" />
<FuiIcon name="star" variant="filled" />

Sizes

16

20

24

28

32

48

<FuiIcon name="settings" :size="16" />
<FuiIcon name="settings" :size="24" />
<FuiIcon name="settings" :size="48" />

With other components

<FuiButton>
  <FuiIcon name="add" />
  New Item
</FuiButton>

Using other icon sets

<FuiIcon name="mdi:home" :size="24" />
<FuiIcon name="mdi:github" :size="24" />

Iconify provides 200,000+ icons from 150+ sets. Use any collection by prefixing with its ID.

Props

Prop	Type	Default	Description
name	string	—	Icon name (e.g. "add", "settings"). Prefix with collection: for other icon sets (e.g. "mdi:home").
variant	'regular' | 'filled'	'regular'	Icon style variant.
size	number	20	Icon width/height in pixels.

Theming

The icon inherits its color from --fui-color-neutral-foreground-1 by default and adapts to light/dark mode automatically. Override via CSS:

<FuiIcon name="add" style="color: var(--fui-color-brand-foreground-1)" />

Icon naming

Fluent UI System Icons follow the pattern {name}-{size}-{variant}. The component auto-resolves:

Shorthand	Resolves to
name="add"	fluent:add-20-regular
name="add" variant="filled"	fluent:add-20-filled
name="star" variant="filled" :size="24"	fluent:star-24-filled

Browse all available Fluent icons on Icônes or the Fluent UI System Icons list.

Accessibility

Icons are hidden from assistive technology by default (aria-hidden="true"). If the icon conveys meaningful information, provide an accessible label:

<FuiIcon name="settings" aria-label="Settings" aria-hidden="false" />