Brand Icons

Displays brand icons from the Skylab Asset Library

Demo

API

Tag

Name	Description
`<aui-icon>`	Custom Element

Attributes

Name	Value	Required	Description
`name`	string		Name of the brand icon in the Skylab Asset Library: `https://assets.avalara.com/skylab-images/icons`. In dark theme, allow-listed names with `color="gray-darker"` automatically load `{name}-dark.svg` or `{name}-dark.png` from `gray-darker/max/`, matching the published dark file. Blue-dark and orange-medium never swap; names without a dark file keep the base SVG.
`alt`	string		Alternate text for the image.
`size`	`min` \| `std` \| `max`		Size of the image. `min` is 60x60px. `std` is 84x84px. `max` is 108x108px. Defaults to `std`.
`color`	`blue-dark` \| `gray-darker` \| `orange-medium`		Color of the image. Defaults to `blue-dark`. Dark-theme `-dark` swap applies only when this is `gray-darker`.

Properties

Name	Value	Description
`name`	string	Name of the brand icon in the Skylab Asset Library: `https://assets.avalara.com/skylab-images/icons`. In dark theme, allow-listed names with `color="gray-darker"` automatically load `{name}-dark.svg` or `{name}-dark.png` from `gray-darker/max/`, matching the published dark file. Blue-dark and orange-medium never swap; names without a dark file keep the base SVG.
`alt`	string	Alternate text for the image.
`size`	`min` \| `std` \| `max`	Size of the image. `min` is 60x60px. `std` is 84x84px. `max` is 108x108px. Defaults to `std`.
`color`	`blue-dark` \| `gray-darker` \| `orange-medium`	Color of the image. Defaults to `blue-dark`. Dark-theme `-dark` swap applies only when this is `gray-darker`.

Demo

API

Tag

Name
`<AuiIcon>`

Props

Name	Value	Required	Description
`name`	string		Name of the brand icon in the Skylab Asset Library: `https://assets.avalara.com/skylab-images/icons`. In dark theme, allow-listed names with `color="gray-darker"` automatically load `{name}-dark.svg` or `{name}-dark.png` from `gray-darker/max/`, matching the published dark file. Blue-dark and orange-medium never swap; names without a dark file keep the base SVG.
`alt`	string		Alternate text for the image.
`size`	`min` \| `std` \| `max`		Size of the image. `min` is 60x60px. `std` is 84x84px. `max` is 108x108px. Defaults to `std`.
`color`	`blue-dark` \| `gray-darker` \| `orange-medium`		Color of the image. Defaults to `blue-dark`. Dark-theme `-dark` swap applies only when this is `gray-darker`.

Skylab React links

General information about using our React package

Illustration Names

Guidelines

Some gray-darker brand icons have a dedicated -dark SVG or PNG. In dark theme, aui-icon loads that file automatically when name is on the allow-list and color is gray-darker. Other colors and unlisted names keep the base SVG so missing assets are not requested.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com