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

size

variant

icon

brand

() => {
  return <IconBrand icon="home" size={48} variant="twotonedarkcircle" />;
};

Icons

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

Size

Use the size property to adjust the size of an icon by setting it to a specific number, or using a token. The default is $md. Token sizes: $icon-brand.sizing.xs: 40 $icon-brand.sizing.sm: 64 $icon-brand.sizing.md: 96 $icon-brand.sizing.lg: 112 $icon-brand.sizing.xl: 136

Brand Icon Variants

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

IconBrand Props

Name	Type	Default	Required	A11y	Description
brand	"uhc" | "optum" | "uhg" | "surest" | "optum-refresh" | 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.
delayLongPress	number | undefined				Delay in milliseconds before the onLongPress callback is triggered.
delayPressIn	number | undefined				Delay in milliseconds before the onPressIn callback is triggered.
delayPressOut	number | undefined				Delay in milliseconds before the onPressOut callback is triggered.
disabled	boolean | undefined				Disables press interactions for the icon.
disableScaling	boolean | undefined	false			Specifies whether the icon should scale to respect Text Size accessibility settings
fallback	Element | undefined				Element to render if the icon fails to load
icon	ValidIconBrandName				Name of the brand icon
isScreenReadable	boolean | undefined				Indicate whether the icon is screen readable or not. If the icon is screen readable, then provide a title
maxFontSizeMultiplier	number | undefined				Specifies the largest possible scale the icon can reach when disableScaling is false
onError	(() => void) | undefined				Callback function to be called when the icon fails to load
onLoad	(() => void) | undefined				Callback function to be called when the icon is loaded
onLongPress	((event: GestureResponderEvent) => void) | undefined				Callback fired after a long press gesture is detected.
onPress	((event: GestureResponderEvent) => void) | undefined				Callback fired when the icon is pressed.
onPressIn	((event: GestureResponderEvent) => void) | undefined				Callback fired when a press-in gesture starts.
onPressOut	((event: GestureResponderEvent) => void) | undefined				Callback fired when a press-in gesture ends.
size	Size | undefined	'$icon-brand.sizing.md'			Set the size of the icon
sizes	Record<string, number> | undefined				Pre programmed sizes for the icons
title	string | undefined				Set the title of the icon
variant	"default" | "onetone" | "onetonedarkcircle" | "twotone" | "twotonelightcircle" | "twotonedarkcircle" | "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.

IconBrand Classes

Class Name	Description
abyss-icon-brand-root	Icon brand root element.

Abyss uses 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

Dynamic Type

Brand icons do not scale. When using IconBrand, the disabledScaling prop should be set to true.

IconBrand Tokens

Search tokens

Token Name	Value
icon-brand.sizing.xs	40
icon-brand.sizing.sm	64
icon-brand.sizing.md	96
icon-brand.sizing.lg	112
icon-brand.sizing.xl	136