Android Jetpack compose IconButton padding


How to remove padding in an IconButton ? I want items in my column have the same start padding

preview image

    modifier = Modifier
        .padding(horizontal = 16.dp)
) {
    IconButton(onClick = { }) {
        Icon(asset = Icons.Filled.Search)
    Text("Some text")


The space is due to accessibility touch targets and a default size of 48.dp.

Starting with 1.2.0 the best best way to change the default behaviour and remove the extra space is disabling the LocalMinimumTouchTargetEnforcement and applying a size modifier:

CompositionLocalProvider(LocalMinimumTouchTargetEnforcement provides false) {
        modifier = Modifier.size(24.dp),
        onClick = { }
    ) {

Pay attention because in this way it is possible that if the component is placed near the edge of a layout / near to another component without any padding, there will not be enough space for an accessible touch target.

With 1.0.0 the IconButton applies a default size with the internal modifier: IconButtonSizeModifier = Modifier.size(48.dp).

You can modify it using something like:

IconButton(modifier = Modifier.
    onClick = { }) {
        tint = Color.White)

It is important the use of .then to apply the size in the right sequence.

enter image description here

Answered By – Gabriele Mariotti

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published