---
title: "IconButton"
description: "Icon buttons help people take supplementary actions with a single tap. They’re used when a
compact button is required, such as in a toolbar or image list."
type: "component"
social_image: "/static/images/material3/standard-icon-button.png"
---

<div class='type'>Composable Component</div>



Icon buttons help people take supplementary actions with a single tap. They’re used when a
compact button is required, such as in a toolbar or image list.

<img loading='lazy' class='hero-img' alt='Standard icon button image' src='/static/images/material3/standard-icon-button.png'>

<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


> **Deprecated** Use overload with `shape`

```kotlin
@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| onClick | called when this icon button is clicked |
| modifier | the `Modifier` to be applied to this icon button |
| enabled | controls the enabled state of this icon button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| colors | `IconButtonColors` that will be used to resolve the colors used for this icon button in different states. See `IconButtonDefaults.iconButtonVibrantColors`. |
| interactionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this icon button. You can use this to change the icon button's appearance or preview the icon button in different states. Note that if `null` is provided, interactions will still happen internally. |
| content | the content of this icon button, typically an `Icon` |




<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
    interactionSource: MutableInteractionSource? = null,
    shape: Shape = IconButtonDefaults.standardShape,
    content: @Composable () -> Unit,
) =
    IconButtonImpl(
        onClick = onClick,
        modifier = modifier,
        enabled = enabled,
        colors = colors,
        interactionSource = interactionSource,
        shape = shape,
        content = content,
    )
```


#### Parameters

| | |
| --- | --- |
| onClick | called when this icon button is clicked |
| modifier | the `Modifier` to be applied to this icon button |
| enabled | controls the enabled state of this icon button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| colors | `IconButtonColors` that will be used to resolve the colors used for this icon button in different states. See `IconButtonDefaults.iconButtonVibrantColors` and `IconButtonDefaults.iconButtonColors` . |
| interactionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this icon button. You can use this to change the icon button's appearance or preview the icon button in different states. Note that if `null` is provided, interactions will still happen internally. |
| shape | the `Shape` of this icon button. |
| content | the content of this icon button, typically an `Icon` |




<div class='sourceset sourceset-common'>Common</div>


```kotlin
@ExperimentalMaterial3ExpressiveApi
@Composable
fun IconButton(
    onClick: () -> Unit,
    shapes: IconButtonShapes,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| onClick | called when this icon button is clicked |
| shapes | the `IconButtonShapes` that the icon button will morph between depending on the user's interaction with the icon button. |
| modifier | the `Modifier` to be applied to this icon button |
| enabled | controls the enabled state of this icon button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. |
| colors | `IconButtonColors` that will be used to resolve the colors used for this icon button in different states. See `IconButtonDefaults.iconButtonVibrantColors` and `IconButtonDefaults.iconButtonColors` . |
| interactionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this icon button. You can use this to change the icon button's appearance or preview the icon button in different states. Note that if `null` is provided, interactions will still happen internally. |
| content | the content of this icon button, typically an `Icon` |






## Code Examples
### ExtraSmallNarrowSquareIconButtonsSample
```kotlin
@OptIn(ExperimentalMaterial3ExpressiveApi::class, ExperimentalMaterial3Api::class)
@Preview
@Composable
fun ExtraSmallNarrowSquareIconButtonsSample() {
    val description = "Localized description"
    // Icon button should have a tooltip associated with it for a11y.
    TooltipBox(
        positionProvider =
            TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
        tooltip = { PlainTooltip { Text(description) } },
        state = rememberTooltipState(),
    ) {
        // Small narrow round icon button
        FilledIconButton(
            onClick = { /* doSomething() */ },
            modifier =
                Modifier.minimumInteractiveComponentSize()
                    .size(
                        IconButtonDefaults.extraSmallContainerSize(
                            IconButtonDefaults.IconButtonWidthOption.Narrow
                        )
                    ),
            shape = IconButtonDefaults.extraSmallSquareShape,
        ) {
            Icon(
                Icons.Filled.Lock,
                contentDescription = description,
                modifier = Modifier.size(IconButtonDefaults.extraSmallIconSize),
            )
        }
    }
}
```
### IconButtonSample
```kotlin
@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun IconButtonSample() {
    val description = "Localized description"
    // Icon button should have a tooltip associated with it for a11y.
    TooltipBox(
        positionProvider =
            TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
        tooltip = { PlainTooltip { Text(description) } },
        state = rememberTooltipState(),
    ) {
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Lock, contentDescription = description)
        }
    }
}
```
### IconButtonWithAnimatedShapeSample
```kotlin
@OptIn(ExperimentalMaterial3ExpressiveApi::class, ExperimentalMaterial3Api::class)
@Preview
@Composable
fun IconButtonWithAnimatedShapeSample() {
    val description = "Localized description"
    // Icon button should have a tooltip associated with it for a11y.
    TooltipBox(
        positionProvider =
            TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
        tooltip = { PlainTooltip { Text(description) } },
        state = rememberTooltipState(),
    ) {
        IconButton(onClick = { /* doSomething() */ }, shapes = IconButtonDefaults.shapes()) {
            Icon(Icons.Filled.Lock, contentDescription = description)
        }
    }
}
```
### MediumRoundWideIconButtonSample
```kotlin
@OptIn(ExperimentalMaterial3ExpressiveApi::class, ExperimentalMaterial3Api::class)
@Preview
@Composable
fun MediumRoundWideIconButtonSample() {
    val description = "Localized description"
    // Icon button should have a tooltip associated with it for a11y.
    TooltipBox(
        positionProvider =
            TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
        tooltip = { PlainTooltip { Text(description) } },
        state = rememberTooltipState(),
    ) {
        IconButton(
            onClick = { /* doSomething() */ },
            modifier =
                Modifier.size(
                    IconButtonDefaults.mediumContainerSize(
                        IconButtonDefaults.IconButtonWidthOption.Wide
                    )
                ),
            shape = IconButtonDefaults.mediumRoundShape,
        ) {
            Icon(
                Icons.Filled.Lock,
                contentDescription = description,
                modifier = Modifier.size(IconButtonDefaults.mediumIconSize),
            )
        }
    }
}
```
### TintedIconButtonSample
```kotlin
@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun TintedIconButtonSample() {
    val description = "Localized description"
    // Icon button should have a tooltip associated with it for a11y.
    TooltipBox(
        positionProvider =
            TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
        tooltip = { PlainTooltip { Text(description) } },
        state = rememberTooltipState(),
    ) {
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(
                rememberVectorPainter(image = Icons.Filled.Lock),
                contentDescription = description,
                tint = Color.Red,
            )
        }
    }
}
```