import { IllustratedIconBrand } from '@uhg-abyss/web/ui/IllustratedIconBrand';

icon

size

color

altText

// Disclaimer: Not all icon/color combinations are applicable; inapplicable combinations will display as empty

<IllustratedIconBrand icon="gears_system" color="multicolor" size={400} />

Icon

Use the icon prop to select the illustration to display.

Note: When using TypeScript, the icon property only accepts valid icon names. If an invalid icon name is provided, an error will be thrown. To verify that a given value is a valid icon name, use the isValidAssetName tool or use the ValidIllustratedIconBrandName type:

import { ValidIllustratedIconBrandName } from '@uhg-abyss/web/ui/IllustratedIconBrand';

let iconName: ValidIllustratedIconBrandName;

Size

Use the size property to adjust the width of the illustrated icon. This can be either a number (i.e. a pixel value) or a string. 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".

Note: Not all illustrated icons have any color variants. In such cases, omit the color prop; otherwise, the icon will not display.

Alt text

Use the altText property to provide an accessible description of the illustrated icon. This text should be descriptive enough to convey the meaning of the icon. See the Accessibility tab for more information.

IllustratedIconBrand Props

Name	Type	Default	Required	Description
altText	string	-	-	The alt text for the illustrated icon.
className	string	-	-	CSS class name to apply to each element within the component
color	"gold" | "orange" | "multicolor"	-	-	The color of the illustrated icon. Applicable only to certain assets.
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
icon	"access-gol" | "access-ora" | "advocate-gol" | "advocate-ora" | "ai" | "balance" | "balance_unbalanced" | "chat_connection-gol" | "chat_connection-ora" | "clipboard" | "collaboration_3-gol" | ... 97 more ... | "view_partial-ora"	-		The name of the illustration.
size	string | number	'100%'	-	The width of the illustration.

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 altText prop to provide accessible alt text to the image. This text should be descriptive enough to convey the meaning of the illustrated icon.

Illustrated Icon Source

The source for these illustrated icons can be found in the brand libraries.

UnitedHealthCare Library

You can use the search functionality to find the required illustrated icons. Icons can be searched using their title or colors.

Search