# Icon

<flow-icon>

Stable

The icon component displays an icon from a set of built-in icons, an SVG file or an SVG data URI.

# Examples

# Built-in icons

The built-in icons include free icons from the Font Awesome (opens new window) and Ionicons (opens new window) icon sets.

To display a Font Awesome icon, prefix the icon name with far-, fas- or fab- for the 'regular', 'solid' and 'brand' sets, respectively:

To display an Ionicon icon, prefix the icon name with ion-:

# Custom icons

The icon component can also display an SVG file. Specify a relative or absolute URL using the icon attribute. If you use an absolute URL to serve SVG files from a different origin then CORS must be configured on the external server.

For maximum compatibility, your SVG should specify a width and height in pixels, and a viewBox. If you wish to modify the color of the icon using the color attribute then you must also remove any explicit fill or stroke attributes from your SVG.

To use a custom icon without hosting an SVG file you can also set the icon attribute to a data URI:

# Icon sizes

By default, the icon matches the font size of surrounding text. Use the size attribute to explicitly set the size:

# Icon Colors

By default, icons are colored using the current text color. Use the color attribute to set the icon's color from the application palette.

# Properties

Property	Description	Type	Default
`ariaLabel` `aria-label`	Specifies the label to use for accessibility. Defaults to the icon name.	`string`
`color`	The color of the gauge value. Colors are taken from the application palette. If unset, the current color will be used.	`"danger" \| "gray" \| "primary" \| "secondary" \| "success" \| "warning"`
`icon`	The name of a built-in icon or URL to an SVG file.	`any`
`lazy`	If enabled, the icon will be loaded lazily when it is visible in the viewport.	`boolean`	`false`
`size`	The size of the icon. If not specified, the current font-size will be used.	`"large" \| "regular" \| "small" \| "x-large" \| "x-small"`

# CSS Custom Properties

Name	Description
`--color`	Color of the icon (default: currentColor)

← Gauge Input →