Skip to main content


The Icon component is a versatile tool for adding Expo Icons to your application. It offers customization options through the use of style props.


import { Icon } from "pearl-ui";


<Icon iconFamily="AntDesign" iconName="stepforward" />

Icon sizes#

The size prop allows you to adjust the size of the icon. You can use the keys available in theme.components.Icon["sizes"], which are "xs", "s", "m", and "l" in the default component configuration.

<Icon iconFamily="AntDesign" iconName="stepforward" size="xs" />
<Icon iconFamily="AntDesign" iconName="stepforward" size="s" />
<Icon iconFamily="AntDesign" iconName="stepforward" size="m" />
<Icon iconFamily="AntDesign" iconName="stepforward" size="l" />

For more precise control over the size of a single Icon instance, you can use the rawSize prop.

<Icon iconFamily="AntDesign" iconName="stepforward" rawSize={43} />

Overriding Styles#

The Icon component supports a variety of style props which can be used to override the pre-defined variant style in the theme. Manual style props passed into the component have a higher precedence than the default component configuration.

// passing style prop color="primary.500" overrides the default component config value of color="neutral.900"<Icon  iconFamily="AntDesign"  iconName="stepforward"  size="l"  color="primary.500"  margin="4"/>



  • Icon has the role of text.
  • Icon has the default label set as {iconName} Icon. A custom label can be specified using the accessibilityLabel prop.

Component Properties#

Supported Style Properties#

The Icon component supports the following style props:

Animation Properties#

The Icon component supports animation properties from the Moti library, enabling the creation of dynamic and interactive UI elements. The useMotiWithStyleProps hook from the Moti library is used to manage these animation properties.

fromobjectDefines the starting state of the animation.
toobjectDefines the ending state of the animation.
transitionobjectSpecifies the type of transition that the animation will use.
exitTransitionobjectDetermines the transition type that will be used when the component is unmounted. By default, exit uses transition to configure its animations, so this prop is not required. However, if you pass exitTransition, it will override transition for exit animations.
stateobjectManages the overall state of the animation, including the from and to states.
delaynumberManage the delay for the animate field. (Use the transition prop for more granular control)
onDidAnimate() => voidCallback function called after finishing an animation.
stylePriority"state" | "animate""animate"This is not a prop you will likely find yourself using. If set to "animate", then styles passed from the animate prop will take precedent. Otherwise, if set to "state", then the state prop will take precedent for matching styles.
animateInitialStatebooleanfalseIf true, the from prop will be set to animate. This will be noticeable for some spring animations, and might make them jumpy on mount.

Additional Properties#

The Icon component also supports the following additional properties:

sizeNoPearlTheme.components.Icon["sizes"]"m"Specifies the size of the icon
variantNoPearlTheme.components.Icon["variants"]Defines the variant of the icon
rawSizeNonumberSets the raw size of the icon
iconFamilyYes "AntDesign" | "Entypo" | "EvilIcons" | "Feather" | "FontAwesome" | "FontAwesome5" | "Fontisto" | "Foundation" | "Ionicons" | "MaterialCommunityIcons" | "MaterialIcons" | "Octicons" | "SimpleLineIcons" | "Zocial"Specifies the icon family that contains the desired icon
iconNameYesstringSpecifies the name of the icon within its icon family
accessibilityLabelNostringSets the accessibility label of the icon