import { IconCustom } from '@uhg-abyss/mobile';<IconCustom icon="rx" />Size
Use the size property to adjust the size of an icon by setting it to a specific number or token. The default size is set to 24.
Token sizes: $xs: 16 $sm: 20 $md: 24 $lg: 40 $xl: 48
Variants
Use the variant prop to change the style of the custom icons. The prop takes in a light and dark value, as well as
lightactive and darkactive counterparts. The default is light.
Brand
Use the brand property to adjust which brands icons are being selected. Note that some of the icons unique to certain brands.
The default is the theme brand, then falls back to uhc.
Active
When placing an icon inside of a clickable element, the icon should be toggled between its normal and active state.
Indicator
The indicator component can be used as a wrapper to add a notification badge.
IconCustom Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| brand | "uhc" | "optum" | - | The brand of the custom icon |
| disableScaling | boolean | - | Specifies whether the icon should scale to respect Text Size accessibility settings |
| icon | string | - | Name of the custom 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 |
| size | number | string | $icon.sizing.md | Set the size of the custom icon |
| title | string | - | Set the title of the icon |
| variant | "light" | "lightactive" | "dark" | "darkactive" | - | The style variation of the custom icon |
IconCustom Classes
| Class Name | Description |
|---|---|
| abyss-icon-custom-root | Icon custom root element |
IconCustom Tokens
| Token Name | Value | |
|---|---|---|
| icon.color.default | #196ECF | |
| icon.sizing.xs | 16 | |
| icon.sizing.sm | 20 | |
| icon.sizing.md | 24 | |
| icon.sizing.lg | 40 | |
| icon.sizing.xl | 48 |