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' | undefined | - | - | Indicates which brand you want your icon from. This changes the colors of the icon to match the brand you select |
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 | 'onetone' | 'onetonedarkcircle' | 'twotone' | 'twotonelightcircle' | 'twotonedarkcircle' | undefined | 'twotonedarkcircle' | - | The style/color variation of the brand icon |
IconBrand Classes
| Class Name | Description |
|---|---|
| abyss-icon-brand-root | Icon brand root element |
Abyss uses branded iconography 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.
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 |