import { IllustrationBrand } from '@uhg-abyss/mobile';

size

illustration

variant

color

// Disclaimer: not all brand color combinations or variants are applicable, and inapplicable combinations will display as empty

  <IllustrationBrand
    brand="uhc"
    size={400}
    color="primary"
    illustration="heart"
  />

Brand

Use the brand property to adjust which brand is being selected.

Size

Use the size property to adjust the size of the illustration.

Color

Use the color property to select available illustration colors.

Variant

Some UHC illustrations have multiple variants of accent colors on the same background color. Use the variant prop to select the color combination.

IllustrationBrand Props

Prop Name	Type	Default	Description
brand	"uhc" | "optum"	-	Indicates which brand you want your illustration from
color	"white"| "primary" | "pacific"	white	Set color option of the illustration
illustration	string	-	The name of the illustration
size	number | string	100%	Set the size of the illustration
title	string	-	Set accessibilityLabel of the image
variant	1 | 2	1	For illustrations with variants on the same background color. Applicable only to UHC illustrations

IllustrationBrand Classes

Class Name	Description
abyss-illustration-brand-root	IllustrationBrand root element

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

UnitedHealthCare Library
Optum Library

You can use the search functionality to find the required illustration. Illustrations can be searched using their title, variants or colors.

Search