Skip to main content

IconCustom

Used to implement custom icons and adapt their properties.

github
View source code
figma
View design
import { IconCustom } from '@uhg-abyss/mobile';
    () => {
      return <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 are 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​

    Name
    Type
    		DefaultRequiredA11yDescription
    brand
    "uhc" | "optum" | undefined
    Specifies the brand of the custom icon.
    Defaults to the theme's brand, then falls back to 'uhc'.
    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
    icon
    "menu" | "home" | "rx" | "benefits" | "find_care" | "my_plan" | "profile" | "medical_benefits" | "programs" | "my_health" | "messages"
    Name of the custom 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
    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
    Size | undefined
    '$icon.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
    "light" | "dark" | "darkactive" | "lightactive" | undefined
    'light'
    The style variation of the custom icon

    IconCustom Classes​

    Class NameDescription
    abyss-icon-custom-rootIcon custom root element.

    IconCustom Tokens​

    Token NameValue
    icon.color.default
    #196ECF
    icon.sizing.xs
    16
    icon.sizing.sm
    20
    icon.sizing.md
    24
    icon.sizing.lg
    40
    icon.sizing.xl
    48
    Table of Contents