import { IconSymbol } from '@uhg-abyss/mobile';

icon

color

size

variant

() => {
  return (
    <IconSymbol
      icon="home"
      size={40}
      variant="filled"
      color="$semantic.color.icon.status.info"
    />
  );
};

Icons

Use the icon property to adjust which icon is being selected.

Colors

Use the color property to adjust the color of a material symbol icon. The default color is set to the theme 'interactive1'.

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

Material Symbol Variants

Use the variant property to change the style of Material symbol icons. The default variant is filled.

IconSymbol Props

Name	Type	Default	Required	A11y	Description
color	Color | ((colorScheme: ColorScheme) => Color) | undefined	'$icon.color.default'			Set the color of the material symbol icon
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	IconSymbolName				Name of the material symbol 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.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	"filled" | "outlined" | undefined	'filled'			The style variation of the material symbol icon.

IconSymbol Classes

Class Name	Description
abyss-icon-symbol-root	Material symbol icon root element

Search

Icon Tokens

Search 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