---
title: "IconToggleButton"
description: "An `IconButton` with two states, for icons that can be toggled 'on' and 'off', such as a bookmark
icon, or a navigation icon that opens a drawer."
type: "component"
---

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



An `IconButton` with two states, for icons that can be toggled 'on' and 'off', such as a bookmark
icon, or a navigation icon that opens a drawer.

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

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


```kotlin
@Composable
fun IconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| checked | whether this IconToggleButton is currently checked |
| onCheckedChange | callback to be invoked when this icon is selected |
| modifier | optional `Modifier` for this IconToggleButton |
| enabled | enabled whether or not this `IconToggleButton` will handle input events and appear enabled for semantics purposes |
| interactionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this IconButton. You can use this to change the IconButton's appearance or preview the IconButton in different states. Note that if `null` is provided, interactions will still happen internally. |
| content | the content (icon) to be drawn inside the IconToggleButton. This is typically an `Icon`. |






## Code Examples
### IconToggleButtonSample
```kotlin
@Composable
fun IconToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    IconToggleButton(checked = checked, onCheckedChange = { checked = it }) {
        val tint by animateColorAsState(if (checked) Color(0xFFEC407A) else Color(0xFFB0BEC5))
        Icon(Icons.Filled.Favorite, contentDescription = "Localized description", tint = tint)
    }
}
```