Icon

A Jetpack Compose Icon component for displaying icons.

Android

GitHub

npm

Changelog

Bundled version:

~55.0.0

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

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 color

Use the tintColor 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')}
        tintColor="#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';

Component

`Icon`

Android

Type: React.Element<IconProps>

Displays an icon from an XML vector drawable or other image source.

The Icon component renders vector graphics and images with support for tinting, sizing, and accessibility features. On Android, it natively supports XML vector drawables loaded via Metro bundler using require().

Example

Basic usage:

import { Icon } from 'expo-ui';

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

Example

With styling:

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

Example

With modifiers:

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

IconProps

`contentDescription`

Android

Optional • Type: string

Accessibility label for the icon. Used by screen readers to describe the icon to users.

Example

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

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component. Allows you to apply layout and styling modifiers to the icon.

Example

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

`size`

Android

Optional • Type: number

The size of the icon in density-independent pixels (dp). If not specified, the icon will use its intrinsic size.

Example

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

`source`

Android

Type: ImageSourcePropType

The source of the icon. Can be a URI string or the result of require(). On Android, supports XML vector drawables loaded via Metro bundler.

Example

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

`tintColor`

Android

Optional • Type: ColorValue

The tint color to apply to the icon. Accepts hex strings, named colors, or RGB arrays.

Example

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