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

size

variant

icon

brand

() => {
  return (
    <IconBrand
      icon="home"
      size="$web.semantic.sizing.icon.illustrative.sm"
      variant="twotonedarkcircle"
    />
  );
};

Usage

Use Icon to implement custom SVG icons.
Use IconSymbol to implement Google's Material Symbols icons.
Use IconBrand to implement UHC brand icons and adapt their properties.

An icon is a graphical representation of an object, place, or idea. IconBrand is used to clearly communicate a brand's personality and identity.

Icons

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

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 ValidIconBrandName type:

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

let iconName: ValidIconBrandName;

Size

Use the size property to adjust the size of an icon by setting it to a specific number. The default size is set to 24.

Brand icon variants

Use the variant property to change the style of Brand icons. Available variants are twotonedarkcircle, twotonelightcircle, twotone, onetonedarkcircle, onetonelightcircle, and onetone. The default variant is twotonedarkcircle.

IconBrand Props

Name	Type	Default	Required	A11y	Description
brand	"optum" | "uhc" | "optum-refresh" | "uhg" | "surest" | undefined				The brand of the icon If not specified here, the brand will be determined by the theme set in the application's ThemeProvider or AbyssProvider.
className	string | undefined				CSS class name to apply to each element within the component
css	CSSProperties | Partial<Record<"abyss-icon-brand" | "abyss-icon-brand-wrapper", 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	ValidIconBrandName				The icon name
size	string | number | undefined	24			The size of the icon
slotProps	Partial<Record<ToSlotKey<{ root: LeafSlotDef<"svg", "icon-brand">; wrapper: LeafSlotDef<"div", undefined>; }, "icon-brand">, SlotPropsLeafValue>> | undefined				Props to pass to individual internal slots of the component. See slotProps for more information
title	string | undefined				The icon's accessible name. When provided, the icon is exposed to screen readers as a meaningful image; otherwise it's hidden as decorative.
variant	"default" | "twotonedarkcircle" | "twotonelightcircle" | "twotone" | "onetonedarkcircle" | "onetonelightcircle" | "onetone" | "whitecircle" | "warmwhitecircle" | undefined	'twotonedarkcircle' for `uhc`/`uhg`/`surest`, 'default' for `optum-refresh`			The variant of the icon. Accepts variants from any brand — a variant that doesn't apply to the active brand falls back to that brand's default variant.
visibleFrom	Breakpoint | undefined				When defined, the component is hidden until the screen width reaches the specified breakpoint.

IconBrand Classes

Class Name	Description
.abyss-icon-brand	IconBrand root element
.abyss-icon-brand-wrapper	IconBrand wrapper element when variant requires a circle background

Meaningful or Control Icons

If the icon is being used in a setting where it is the only element providing meaning, then that same meaning should be conveyed to screen reader users. The below implementation provides examples of situations in which the title property is required and should describe the purpose of the image.

Example 1: An alert icon is used to convey a sense of urgency; there is adjacent text ("There is a data outage") but the text doesn't include any words that convey urgency. So, in this case, the icon should have a text alternative such as "Alert" or "Warning".

Example 2: An "X" material icon is used as a close button on a modal dialog. There is no adjacent text, so the icon should have a text alternative of "close" or "close window".

Decorative Icons

If the icon is being used in a setting in which it is just a decorative element (which is the default case for icons), then the icon should be ignored by screen readers. The below implementation provides examples of which situations would be classified as decorative.

Example 1: An alert icon is used next to an urgent message, and the word "Alert" is included in the adjacent text. In this case, the icon becomes decorative in nature and should be ignored by screen readers.

Example 2: An "X" material icon is used as a close button on a modal dialog; the word "Close" appears to the right of the button. In this case, the icon should be considered decorative and ignored by screen readers.

Useful Resources for Image Accessibility

• Image accessibilityopens in a new window

Icon, IconBrand, and IconSymbol examples

Samples of all three icon components with and without titles (alt text):

Brand Icons

Abyss uses Brand's branded iconography that is designed to aid wayfinding, draw attention, and support messaging.

The source for these design icons can be found in the Brand Icons Libraryopens in a new window.

Search