Skip to main content

IconBrand

Used to implement Brand icons and adapt their properties.

github
View source code
figma
View design
import { IconBrand } from '@uhg-abyss/mobile';
    () => {
      return <IconBrand icon="home" size={48} variant="default" />;
    };

    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 'default', 'whitecircle', and 'warmwhitecircle'. The default variant is 'default'.

    IconBrand Props​

    Name
    Type
    		DefaultRequiredA11yDescription
    brand
    "uhc" | "optum" | "uhg" | "surest" | "optum-refresh" | undefined
    The brand of the icon
    If not specified here, the brand will be determined by the theme set in the application's ThemeProvider or AbyssProvider.
    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
    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
    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
    "default" | "onetone" | "onetonedarkcircle" | "twotone" | "twotonelightcircle" | "twotonedarkcircle" | "whitecircle" | "warmwhitecircle" | undefined
    'twotonedarkcircle' for `uhc`/`uhg`/`surest`, 'default' for `optum-refresh`
    The variant of the icon. Accepts variants from any brand — a variant that doesn't apply to the active brand falls back to that brand's default variant.

    IconBrand Classes​

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

    Abyss uses branded 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 Libraryopens in a new window.

    IconBrand Tokens​

    Token NameValue
    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
    Table of Contents