What is the difference between an Icon and an Image in Android Jetpack Compose?

Viewed 3018

What is the difference between an Icon and an Image in Android Jetpack Compose? Is the Icon used for vector images, and the Image for bitmaps?

2 Answers

Icon is part of Material design. So it has default size of 24.dp, as defined by Material guidelines, and should be used for displaying icons of this size. It'll use LocalContentColor value for image tint, and you can change it manually with tint parameter.

Most common usage is using it with predefined material icons, like this:

Icon(
    Icons.Default.Hub,
    contentDescription = "...",
    tint = Color.Black
)

But you can create your own icons in code too, check out source code of any default icon for the reference. You can also use it for displaying a resource icon or drawable, they're gonna be scaled to fit.

Image is a Compose container for displaying images of any kind. It's much more flexible, like you can set contentScale, colorFilter, and alignment.

Icon and Images can both accept a Vector or BitMap as illustrated below.

Image

enter image description here

Icon

enter image description here

The only difference that I can point to is that Icons use tint to modify the content.

Related