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

For the complete documentation index, see llms.txt. Use this file to discover all available pages.

For cross-platform usage, see the universal Icon — it renders the appropriate native component per platform.

An icon component for rendering Material Symbol XML vector drawables in Jetpack Compose. The recommended source is @expo/material-symbols — it ships Google's Material Symbols as individual asset subpaths, so Metro only bundles the icons you actually import. For other styles (rounded, sharp, filled) or custom axes, the package's CLI downloads any variant directly into your project.

Installation

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

Optionally, install @expo/material-symbols to use the bundled icons. For a different style or custom axes, see Custom styles — no install needed.

Usage

Basic icon

Import any icon directly from its own subpath of @expo/material-symbols — each icon resolves to a Metro asset that Icon can render natively. For local XML files you add to your project, use require() instead (see Custom styles below).

import { Host, Icon } from '@expo/ui/jetpack-compose';
import Home from '@expo/material-symbols/home.xml';

export default function BasicIcon() {
  return (
    <Host matchContents>
      <Icon source={Home} contentDescription="Home" />
    </Host>
  );
}

Icon with tint color

Use the tint prop to apply a color overlay to the icon.

import { Host, Icon } from '@expo/ui/jetpack-compose';
import Favorite from '@expo/material-symbols/favorite.xml';

export default function TintedIcon() {
  return (
    <Host matchContents>
      <Icon source={Favorite} tint="#6200ee" contentDescription="Favorite" />
    </Host>
  );
}

Icon with size

Specify a custom size in dp using the size prop.

import { Host, Icon } from '@expo/ui/jetpack-compose';
import Settings from '@expo/material-symbols/settings.xml';

export default function SizedIcon() {
  return (
    <Host matchContents>
      <Icon source={Settings} size={48} contentDescription="Settings" />
    </Host>
  );
}

Custom styles via @expo/material-symbols CLI

@expo/material-symbols ships the outlined style with default axes. When you need a different style (rounded, sharp), a filled variant, or custom weight, grade, or optical size, use its CLI to fetch specific drawables straight from Google Fonts into your project.

The CLI writes ready-to-use XML vector drawables into your project. Load them with require() and pass them to Icon.

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

export default function CustomIcon() {
  return (
    <Host matchContents>
      <Icon source={require('./assets/star-rounded.xml')} size={32} contentDescription="Star" />
    </Host>
  );
}

API

import { Icon } from '@expo/ui/jetpack-compose';

Component

import { Icon } from 'expo-ui';

<Icon source={require('./assets/home.xml')} />

<Icon
  source={require('./assets/settings.xml')}
  size={24}
  tint="#007AFF"
  contentDescription="Settings icon"
/>

<Icon
  source={require('./assets/star.xml')}
  size={32}
  modifiers={[
    padding(8),
    background('lightgray')
  ]}
/>

<Icon
  source={require('./assets/settings.xml')}
  contentDescription="Settings icon"
/>

<Icon
  source={require('./assets/icon.xml')}
  modifiers={[
    padding(8),
    background('lightgray')
  ]}
/>

<Icon source={require('./assets/settings.xml')} size={24} />

<Icon source={require('./assets/home.xml')} />
<Icon source={{ uri: 'file:///path/to/icon.xml' }} />

<Icon source={require('./assets/star.xml')} tint="#007AFF" />
<Icon source={require('./assets/star.xml')} tint="blue" />
<Icon source={require('./assets/multicolor.xml')} tint={null} />