import { IllustratedIconBrand } from '@uhg-abyss/mobile';// Disclaimer: Not all icon/color combinations are applicable; inapplicable combinations will display as empty
<IllustratedIconBrand icon="gears_system" color="multicolor" size={400} />Size
Use the size property to adjust the width of the illustrated icon. The default value is 100. The height of the illustration will scale proportionally to the width.
Color
Use the color property to select available illustrated icon colors. The available colors are "gold", "orange", and "multicolor".
Not all illustrated icons have any color variants. In such cases, omit the color prop; otherwise, the icon will not display.
IllustratedIconBrand Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
color | 'gold' | 'multicolor' | 'orange' | undefined | - | - | The color of the illustrated icon. Applicable only to certain assets. |
icon | keyof typeof uhc.gold | keyof typeof uhc.multicolor | keyof typeof uhc.orange | keyof typeof uhc.none | - | Name of the illustrated icon asset. | |
size | number | undefined | 100 | - | The width of the icon. |
IllustratedIconBrand Classes
| Class Name | Description |
|---|---|
| abyss-illustrated-icon-brand-root | IllustratedIconBrand root element |
Screen Reader Support
Illustrated icons are intended to be used as decorative images and as such, are ignored by screen readers by default. However, should a case arise in which an illustrated icon needs to be accessible, use the accessibilityLabel prop to provide accessible text to the image. This text should be descriptive enough to convey the meaning of the illustrated icon.
The source for these illustrated icons can be found in the brand libraries.
You can use the search functionality to find the required illustrated icons. Icons can be searched using their title or colors.