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

Question

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?

Answer 1

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 - if you're using material components, like Card, they'll provide it according to the current material theme or overridden component parameters. Or you can change it manually with the 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.