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 | false | 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 | false | 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 that is designed to aid way-finding, 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 |