This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

Icon

A platform-native icon — SF Symbol on iOS, Material Symbol on Android.

Android

iOS

Included in Expo Go

A platform-native icon. On Android, it renders a Material Symbol XML vector drawable supplied through @expo/material-symbols (other XML vector drawable assets aren't officially supported). On iOS, it renders an SF Symbol

Note: Icon does not render on web.

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Cross-platform icon with `Icon.select`

Icon.select picks the right asset for the current platform. Pair it with @expo/ui/babel-plugin (auto-loaded by babel-preset-expo) so Metro can tree-shake the unused side per platform.

IconSelectExample.tsx

import { Host, Icon } from '@expo/ui';

export default function IconSelectExample() {
  return (
    <Host matchContents>
      <Icon
        name={Icon.select({
          ios: 'star.fill',
          android: import('@expo/material-symbols/star.xml'),
        })}
        size={32}
        color="orange"
      />
    </Host>
  );
}

Hoisted `Icon.select`

Hoist the Icon.select call when reusing the same icon across multiple call sites.

HoistedIconExample.tsx

import { Host, Row, Icon } from '@expo/ui';

const STAR = Icon.select({
  ios: 'star.fill',
  android: import('@expo/material-symbols/star.xml'),
});

export default function HoistedIconExample() {
  return (
    <Host matchContents>
      <Row spacing={4}>
        <Icon name={STAR} size={20} color="gold" />
        <Icon name={STAR} size={20} color="gold" />
        <Icon name={STAR} size={20} color="gold" />
      </Row>
    </Host>
  );
}

Platform-specific files

Inside an .android.tsx file, import the XML asset directly. Inside an .ios.tsx file, pass the SF Symbol name as a string.

Icon.android.tsx

import StarIcon from '@expo/material-symbols/star.xml';
import { Host, Icon } from '@expo/ui';

export default function StarRow() {
  return (
    <Host matchContents>
      <Icon name={StarIcon} size={24} />
    </Host>
  );
}

Icon.ios.tsx

import { Host, Icon } from '@expo/ui';

export default function StarRow() {
  return (
    <Host matchContents>
      <Icon name="star.fill" size={24} />
    </Host>
  );
}

API

import { Icon } from '@expo/ui';

No API data file found, sorry!