---
modificationDate: May 06, 2026
title: IconButton
description: Jetpack Compose IconButton components for displaying native Material3 icon buttons.
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/iconbutton/","feedback":"🤖 Agent feedback: <specific, actionable description>"}'

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

</AgentInstructions>

# IconButton

Jetpack Compose IconButton components for displaying native Material3 icon buttons.
Android, Included in Expo Go

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

Expo UI provides four icon button components that match the official Jetpack Compose [IconButton API](https://developer.android.com/develop/ui/compose/components/icon-button): `IconButton`, `FilledIconButton`, `FilledTonalIconButton`, and `OutlinedIconButton`. All variants share the same props and accept composable children for content.

## 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 button

A standard icon button with no background, typically used for toolbar actions.

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

export default function BasicIconButtonExample() {
  return (
    <Host matchContents>
      <IconButton onClick={() => alert('Pressed!')}>
        <Icon source={require('./assets/settings.xml')} size={24} />
      </IconButton>
    </Host>
  );
}
```

### Icon button variants

Use different icon button components to convey varying levels of emphasis.

```tsx
import {
  Host,
  IconButton,
  FilledIconButton,
  FilledTonalIconButton,
  OutlinedIconButton,
  Icon,
  Row,
} from '@expo/ui/jetpack-compose';

export default function IconButtonVariantsExample() {
  return (
    <Host matchContents>
      <Row horizontalArrangement={{ spacedBy: 8 }}>
        <IconButton onClick={() => {}}>
          <Icon source={require('./assets/star.xml')} size={24} />
        </IconButton>
        <FilledIconButton onClick={() => {}}>
          <Icon source={require('./assets/star.xml')} size={24} />
        </FilledIconButton>
        <FilledTonalIconButton onClick={() => {}}>
          <Icon source={require('./assets/star.xml')} size={24} />
        </FilledTonalIconButton>
        <OutlinedIconButton onClick={() => {}}>
          <Icon source={require('./assets/star.xml')} size={24} />
        </OutlinedIconButton>
      </Row>
    </Host>
  );
}
```

## API

```tsx
import {
  IconButton,
  FilledIconButton,
  FilledTonalIconButton,
  OutlinedIconButton,
} from '@expo/ui/jetpack-compose';
```

## Components

### `FilledIconButton`

Supported platforms: Android.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[IconButtonProps](#iconbuttonprops)\>

A filled icon button with a solid background.

### `FilledTonalIconButton`

Supported platforms: Android.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[IconButtonProps](#iconbuttonprops)\>

A filled tonal icon button with a muted background.

### `IconButton`

Supported platforms: Android.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[IconButtonProps](#iconbuttonprops)\>

A standard icon button with no background.

IconButtonProps

### `children`

Supported platforms: Android.

Type: `React.ReactNode`

Content to display inside the icon button.

### `colors`

Supported platforms: Android.

Optional • Type: [IconButtonColors](#iconbuttoncolors)

Colors for icon button elements.

### `enabled`

Supported platforms: Android.

Optional • Type: `boolean` • Default: `true`

Whether the icon button is enabled for user interaction.

### `modifiers`

Supported platforms: Android.

Optional • Type: `ModifierConfig[]`

Modifiers for the component.

### `onClick`

Supported platforms: Android.

Optional • Type: `() => void`

Callback that is called when the icon button is clicked.

### `shape`

Supported platforms: Android.

Optional • Type: [ShapeJSXElement](/versions/unversioned/sdk/ui/jetpack-compose/shape#shapejsxelement)

The shape of the icon button.

### `OutlinedIconButton`

Supported platforms: Android.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[IconButtonProps](#iconbuttonprops)\>

An outlined icon button with a border and no fill.

## Types

### `IconButtonColors`

Supported platforms: Android.

Colors for icon button elements.

| Property | Type | Description |
| --- | --- | --- |
| containerColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | - |
| contentColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | - |
| disabledContainerColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | - |
| disabledContentColor(optional) | [ColorValue](https://reactnative.dev/docs/colors) | - |