import { IconBrand } from '@uhg-abyss/mobile';<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
| Prop Name | Type | Default | Description |
|---|---|---|---|
| brand | uhc | optum | uhg | - | Indicates which brand you want your icon from. This changes the colors of the icon to match the brand you select |
| disableScaling | boolean | - | Specifies whether the icon should scale to respect Text Size accessibility settings |
| fallback | JSX.Element | - | Fallback element to render when the icon fails to load |
| icon | string | - | Name of the brand icon |
| isScreenReadable | boolean | - | Indicate whether the icon is screen readable or not. If the icon is Screen Readable, then provide a title |
| maxFontSizeMultiplier | boolean | - | Specifies the largest possible scale the icon can reach when disableScaling is false |
| onError | function | - | Callback function when the icon fails to load |
| onLoad | function | - | Callback function when the icon is loaded |
| size | number | string | $icon-brand.sizing.md | Set the size of the brand icon |
| title | string | - | Set the title of the icon |
| variant | twotonedarkcircle | twotonelightcircle | twotone | onetonedarkcircle | onetone | 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 |