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 →

Learn about XR device types →

In Jetpack Compose Glimmer, the Icon component is specifically designed for rendering single-color icons. Icon can accept ImageVector, ImageBitmap, or Painter as its source. Icon, similar to Text, can intelligently apply a tint based on the surrounding UI theme. While it defaults to a size provided by the LocalIconSize, you can also set custom icon sizes.

Example: Create a box with a large star icon

@Composable
fun GlimmerIconSample() {
    GlimmerTheme {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_star),
                    contentDescription = "A star icon from Google Symbols",
                    modifier = Modifier.size(GlimmerTheme.iconSizes.large),
                    tint = GlimmerTheme.colors.primary
                )
            }
        }
    }
}

Key points about the code

• The icon's source loads a local XML vector drawable (R.drawable.ic_star) using painterResource, demonstrating the recommended approach for integrating icons into a Jetpack Compose Glimmer UI without external library overhead.
• The icon's size is customized by setting GlimmerTheme.iconSizes.large with a modifier, demonstrating how to override Jetpack Compose Glimmer's predefined sizing.
• The icon's tint color is customized by setting GlimmerTheme.colors.primary using the tint parameter, applying single-color icon tinting for visual consistency.