Icons in Jetpack Compose Glimmer

Applicable XR devices
This guidance helps you build experiences for these types of XR devices.
Learn about XR device types →
Display Glasses
Learn about XR device types →

In Jetpack Compose Glimmer, the Icon component is a UI element for rendering single-color icons. Icons intelligently handle tinting and scaling so that they remain legible and visually consistent with the GlimmerTheme.

Sizes

While icons default to the size provided by LocalIconSize, you can also use the three icon sizes provided to set an specific size. These sizes are also used by default for the following contexts:

Size token Default usage

small

For standard list items or small chips.

medium

For standalone icons and title chips.

large

For high-emphasis components like cards.

Icon sources

Icons can accept ImageVector, ImageBitmap, or Painter as their source. When defining your own icons, use ImageVector where possible to promote sharp rendering at any scale on display glasses.

Color and Tinting

  • Automatic tint: The icon resolves its color based on the LocalContentColor provided by the parent surface LocalContentColor provided by the parent surface, such as a surface or Button.
  • Manual Tinting: Use the tint parameter to apply a specific color.
  • Multicolored Assets: For icons that should not be tinted (like multicolored brand logos), set tint = Color.Unspecified.
  • Generic Images: For photographs or generic images that don't follow icon sizing and tinting rules, use the standard androidx.compose.foundation.Image instead.

Example: Basic icon

The following code creates a basic icon:

@Composable
fun IconSample() {
    Icon(FavoriteIcon, contentDescription = "Localized description")
}

Example: Icons with color

The following code creates a colored icon using the theme's primary color:

@Composable
fun ColoredIconSample() {
    Icon(
        FavoriteIcon,
        tint = GlimmerTheme.colors.primary,
        contentDescription = "Localized description",
    )
}

Example: Icons with different sizes

The following code creates a icon that is modified to be a specific size:

@Composable
fun SizedIconSample() {
    Icon(
        FavoriteIcon,
        contentDescription = "Localized description",
        modifier = Modifier.size(GlimmerTheme.iconSizes.large),
    )
}

Key points about the code

  • The icon's size is customized using GlimmerTheme.iconSizes with a modifier. For icons, the default value is GlimmerTheme.iconSizes.medium. Use these sizes instead of hard-coding values to maintain consistency across your UI.
  • Provides a localized contentDescription for the icon. Always provide these descriptions unless the icon is purely decorative.