---
modificationDate: May 06, 2026
title: Icon
description: A Jetpack Compose Icon component for displaying icons.
sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-56/packages/expo-ui'
packageName: '@expo/ui'
platforms: ['android', 'expo-go']
---

<AgentInstructions>

## Submitting Feedback

If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved:

curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/v56.0.0/sdk/ui/jetpack-compose/icon/","feedback":"🤖 Agent feedback: <specific, actionable description>"}'

Only submit when you have something specific and actionable to report.

</AgentInstructions>

# Icon

A Jetpack Compose Icon component for displaying icons.
Android, Included in Expo Go

> For the complete documentation index, see [llms.txt](/llms.txt). Use this file to discover all available pages.

An icon component for rendering icons in Jetpack Compose. We recommend downloading icons as XML vector drawables from [Material Symbols](https://fonts.google.com/icons), which is the standard approach for Android development.

## Installation

```sh
npx expo install @expo/ui
```

If you are installing this in an [existing React Native app](/bare/overview), make sure to [install `expo`](/bare/installing-expo-modules) in your project.

## Usage

### Basic icon

Use `require()` to load an XML vector drawable downloaded from [Material Symbols](https://fonts.google.com/icons).

```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 `tint` prop to apply a color overlay to the icon.

```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.

```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

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

## Component

### `Icon`

Supported platforms: Android.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[IconProps](#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:

```tsx
import { Icon } from 'expo-ui';

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

Example

With styling:

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

Example

With modifiers:

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

IconProps

### `contentDescription`

Supported platforms: Android.

Optional • Type: `string`

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

Example

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

### `modifiers`

Supported platforms: Android.

Optional • Type: `ModifierConfig[]`

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

Example

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

### `size`

Supported platforms: 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

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

### `source`

Supported platforms: Android.

Type: [ImageSourcePropType](https://reactnative.dev/docs/image#imagesource)

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

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

### `tint`

Supported platforms: Android.

Optional • Literal type: `union`

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

-   When omitted, the icon inherits the color from the surrounding `LocalContentColor` (e.g. the toolbar/FAB content color).
-   When set to `null`, no tint is applied — the icon is drawn with its original colors (`Color.Unspecified`). Use this for multicolored icons.

Example

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

Acceptable values are: [ColorValue](https://reactnative.dev/docs/colors) | `null`