Material Icons in Jetpack Compose

Material Design Icons are a set of clean, visually appealing icons that follow Google’s Material Design guidelines. These icons come in sizes. Can be seamlessly incorporated into your Android app ensuring a cohesive and sophisticated appearance.

In this blog, we will learn how to use material icons in Jetpack Compose.


By default, Jetpack Compose provides a few sets of icons. There are two dependencies for extra icons in the Jetpack Compose. Add one of these dependencies in your dependencies block in build.gradle.kts (Module:app) file and press Sync Now

// This dependency contains most commonly used icons hence smaller in size.

// This dependency contains all the material icons hence larger in size.



  • If you have such a large dependency in your production application then use Proguard to shrink application size by removing unused code and resources.
  • It is recommended to not use a large dependency. Use the Google Fonts website that has the same material icons.

I hope you are using Material 3 in your project, if not then upgrade your project to Material 3.

Jetpack Compose by default provides three Icon APIs. And each one has one different parameter named bitmap, painter and imageVector. All take 4 parameters:

fun Icon(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current

Parameters Description:

  • imageVector – it takes the icon as input in the form of a vector
  • contentDescription – it is a string that describes the icon. And it helps the screen reader to better describe screen content.
  • modifier – This parameter helps in modifying the layout of the icon.
  • tint – The tint parameter sets the icon colour.

Simple Icon

 Icon(imageVector = Icons.Default.Backup, contentDescription = null)
backup material icons

Icon Size

We can change the size of the icon using the size method of the modifier object. ( Modifier.size() ). The default size of the icon is 24.dp.

       imageVector = Icons.Default.Backup,
       contentDescription = null,
       modifier = Modifier.size(100.dp)
large icon size

Icon Color

We can change the colour of the icon using the tint parameter of Icon API.

       imageVector = Icons.Default.Backup,
       contentDescription = null,
       modifier = Modifier.size(100.dp),
       tint = Color.Red
material icon with red color and 100 dp size

Icon Background Color

We can use the background method of the modifier object to set the background colour of the icon.

        imageVector = Icons.Default.Backup,
        contentDescription = null,
        modifier = Modifier.size(100.dp).background(Color.Cyan),
        tint = Color.Red
material icon with backroung color as cyan

Note: The material icons come in different styles. Instead of using Icons.Default, we can use these as well:

  • Icons.Outlined
  • Icons.Rounded
  • Icons.Filled
  • Icons.Sharp

Let’s take a quick example of these:

        Icon(imageVector = Icons.Default.Image, contentDescription = null)
        Text(text = "Default")
        Icon(imageVector = Icons.Filled.Image, contentDescription = null)
        Text(text = "Filled")
        Icon(imageVector = Icons.Outlined.Image, contentDescription = null)
        Text(text = "Outlined")
        Icon(imageVector = Icons.Rounded.Image, contentDescription = null)
        Text(text = "Rounded")
        Icon(imageVector = Icons.TwoTone.Image, contentDescription = null)
        Text(text = "TwoTone")
        Icon(imageVector = Icons.Sharp.Image, contentDescription = null)
        Text(text = "Sharp")
all styles of icons api

Painter Icon

This displays the icon from the drawable resource folder. It takes the same parameters instead of the painter.

fun Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current

First, download an icon and place it in the res / drawable folder or generate using Vector Asset

Related Article: How to convert SVG files to XML in Android Studio

 Icon(painter = painterResource(id = R.drawable.clock), contentDescription = null )
punch clock

In the same way, We can use Bitmap Icon API too. I hope you will explore this one yourself. And I hope the content is helpful too. If you have doubts then please comment.

Happy Composing 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *