import { IconBrand } from '@uhg-abyss/mobile';() => { 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 | 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 | React.JSX.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 | Abyss.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 | (typeof ICON_BRAND_VARIANTS)[number] | (typeof OPTUM_REFRESH_ICON_BRAND_VARIANTS)[number] | 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 Library.
Dynamic Type
Brand icons do not scale. When using IconBrand, the disabledScaling prop should be set to true.
IconBrand 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 |