Material Design system icons as seen on Google Fonts.

Iconography image

There are five distinct icon themes: Filled, Outlined, Rounded, TwoTone, and Sharp. Each theme contains the same icons, but with a distinct visual style. You should typically choose one theme and use it across your application for consistency. For example, you may want to use a property or a typealias to refer to a specific theme, so it can be accessed in a semantically meaningful way from inside other composables.

import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.Menu
import androidx.compose.runtime.Composable

val MyAppIcons = Icons.Rounded
SomeComposable(icon = MyAppIcons.Menu)

Icons maintain the same names defined by Material, but with their snake_case name converted to PascalCase. For example: add_alarm becomes AddAlarm.

Note: Icons that start with a number, such as 360, are prefixed with a '_', becoming '_360'.

To draw an icon, you can use an androidx.compose.material.Icon. This component applies tint and provides layout size matching the icon.

import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.Menu

Icon(Icons.Rounded.Menu, contentDescription = "Localized description")

Note that only the most commonly used icons are provided by default. You can add a dependency on androidx.compose.material:material-icons-extended to access every icon, but note that due to the very large size of this dependency you should make sure to use R8 / ProGuard to remove unused icons from your application.

Summary

Nested types

Material Design system icons as seen on Google Fonts.

Filled iconsare the default icon theme.

Outlined icons make use of a thin stroke and empty space inside for a lighter appearance.

Rounded icons use a corner radius that pairs well with brands that use heavier typography, curved logos, or circular elements to express their style.

Sharp icons display corners with straight edges, for a crisp style that remains legible even at smaller scales.

Two-Tone icons display corners with straight edges, for a crisp style that remains legible even at smaller scales.

Filled icons (previously the only available theme, also known as the baseline theme) are the default icon theme.

Outlined icons make use of a thin stroke and empty space inside for a lighter appearance.

Rounded icons use a corner radius that pairs well with brands that use heavier typography, curved logos, or circular elements to express their style.

Sharp icons display corners with straight edges, for a crisp style that remains legible even at smaller scales.

Two-Tone icons display corners with straight edges, for a crisp style that remains legible even at smaller scales.

Public properties

Icons.Filled

Alias for Filled, the baseline icon theme.

Cmn

Public properties

Default

val DefaultIcons.Filled

Alias for Filled, the baseline icon theme.