Icon

A Jetpack Compose Icon component for displaying icons.

Android

Recommended version:

~55.0.17

An icon component for rendering icons in Jetpack Compose. We recommend downloading icons as XML vector drawables from Material Symbols, which is the standard approach for Android development.

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

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

Usage

Basic icon

Use require() to load an XML vector drawable downloaded from Material Symbols.

BasicIcon.tsx

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

export default function BasicIcon() {
  return (
    <Host matchContents>
      <Icon source={require('./assets/home.xml')} contentDescription="Home" />
    </Host>
  );
}

Icon with tint

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

TintedIcon.tsx

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

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

Icon with size

Specify a custom size in dp using the size prop.

SizedIcon.tsx

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

export default function SizedIcon() {
  return (
    <Host matchContents>
      <Icon source={require('./assets/settings.xml')} size={48} contentDescription="Settings" />
    </Host>
  );
}

API

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

No API data file found, sorry!