This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

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';

No API data file found, sorry!