Skip to main content

IllustratedIconBrand

Used to implement UHC brand illustrated icons and adapt their properties.

figma
View design
import { IllustratedIconBrand } from '@uhg-abyss/web/ui/IllustratedIconBrand';
    // 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.

    Tip

    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%".

    Tip

    By default, the image will scale its size based on the width of its container. If you need it to remain a fixed width regardless of available space, you can add a style override as shown below. Try shrinking the screen and compare how the example above behaves compared to the one below.

    Color​

    Use the color property to select available illustrated icon colors. The available colors are "gold", "orange", and "multicolor".

    Important

    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
    		DefaultRequiredA11yDescription
    altText
    string | undefined
    The alt text for the illustrated icon.
    className
    string | undefined
    CSS class name to apply to each element within the component
    color
    "gold" | "orange" | "multicolor" | undefined
    The color of the illustrated icon. Applicable only to certain assets.
    css
    CSSProperties | Partial<Record<"abyss-illustrated-icon-brand-root", CSSProperties>> | undefined
    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 | undefined
    Suffix used to create a unique ID used for automated testing
    See Component Testing for more information
    disableDefaultProviderProps
    boolean | undefined
    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.
    hiddenFrom
    Breakpoint | undefined
    When defined, the component is hidden once the screen width reaches the specified breakpoint.
    icon
    "balance" | "ai" | "dollars_processed" | "clipboard" | "access-gol" | "access-ora" | "access_rewards-gol" | "access_rewards" | "advocate-gol" | "advocate-ora" | "balance_unbalanced" | ... 113 more ... | "view_partial-ora"
    The name of the illustration.
    size
    string | number | undefined
    '100%'
    The width of the illustration.
    slotProps
    Partial<Record<string, SlotPropsValue<string>>> | undefined
    Props to pass to individual internal slots of the component, keyed by the slot name
    (e.g. 'button-root'). Supports className, css, style, aria-*, data-*,
    data-testid, and nested slotProps for child Abyss components.
    See slotProps for more information
    visibleFrom
    Breakpoint | undefined
    When defined, the component is hidden until the screen width reaches the specified breakpoint.

    IllustratedIconBrand Classes​

    Class NameDescription
    .abyss-illustrated-icon-brand-rootIllustratedIconBrand root element

    Screen Reader Support​

    Illustrated icons are intended to be used as decorative imagesopens in a new window 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 Libraryopens in a new window



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

    Table of Contents