---
title: "IconToggleButton"
description: "A Jetpack Compose Glimmer icon toggle button that changes its appearance depending on the checked value, and offers a single slot for an icon or image."
type: "component"
lastmod: "2026-05-08T01:17:00.888416Z"
---
## API Reference

### IconToggleButton

> Source set: Android

```kotlin
@Composable
public fun IconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = IconToggleButtonDefaults.animateShape(checked),
    colors: IconToggleButtonColors = IconToggleButtonDefaults.colors(),
    border: BorderStroke? = SurfaceDefaults.border(),
    enabled: Boolean = true,
    contentPadding: PaddingValues = IconToggleButtonDefaults.contentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
)
```

#### Parameters

| | |
| --- | --- |
| checked | a boolean flag indicating whether this icon toggle button is currently checked. |
| onCheckedChange | a callback to be invoked when this button is clicked, receiving the inverted [checked](/jetpack-compose/androidx.compose.foundation/foundation/functions/checked) value. |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this icon toggle button. |
| shape | the [Shape](/jetpack-compose/androidx.compose.ui/ui-graphics/interfaces/Shape) of this icon toggle button. It is recommended to change the shape depending on the [checked](/jetpack-compose/androidx.compose.foundation/foundation/functions/checked) state. [IconToggleButtonDefaults](/jetpack-compose/androidx.xr.glimmer/glimmer/objects/IconToggleButtonDefaults) provides both animated and non-animated versions, see [IconToggleButtonDefaults.animateShape](/jetpack-compose/androidx.xr.glimmer/glimmer/objects/IconToggleButtonDefaults) and [IconToggleButtonDefaults.shape](/jetpack-compose/androidx.xr.glimmer/glimmer/objects/IconToggleButtonDefaults) for more details. |
| colors | the [IconToggleButtonColors](/jetpack-compose/androidx.xr.glimmer/glimmer/classes/IconToggleButtonColors) providing color variants for all icon toggle button states. |
| border | the border to draw around this icon toggle button. |
| enabled | controls the enabled state of this icon toggle button. When `false`, this button will not respond to user input. |
| contentPadding | the spacing values to apply internally between the container and the content. |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting Interactions for this button. You can use this to change the icon toggle button's appearance or preview it in different states. Note that if `null` is provided, interactions will still happen internally. |
| content | the content of this icon toggle button, typically an [Icon](/jetpack-compose/androidx.xr.glimmer/glimmer/components/Icon). |

## Code Examples
### IconToggleButtonSample
```kotlin
@Composable
fun IconToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    IconToggleButton(checked = checked, onCheckedChange = { checked = it }) {
        Icon(
            imageVector = if (checked) FavoriteIcon else OutlinedFavoriteIcon,
            contentDescription = "Localized description",
        )
    }
}
```