Icon
Draws a vector or bitmap symbol that follows the content color.
- Category: Communication
- API status: Stable
- Compose APIs:
Icon,LocalContentColor,ImageVector - Interactive page: https://m3e.ljzapps.app/#components/icon
When to use
Use icons to support text or to label compact controls. Icons take their color from the surface they sit on, so they stay readable in every theme. Material Symbols are the recommended icon set.
Icons are 24 dp by default. Inside buttons use the size helpers from ButtonDefaults.
Playground
The interactive page has a playground with live property controls for this component and generated code.
Examples
Icons and tint
Icon(Icons.Rounded.Home, contentDescription = "Home")
Icon(Icons.Rounded.Settings, contentDescription = "Settings", tint = MaterialTheme.colorScheme.primary)
Icon(Icons.Rounded.Interests, contentDescription = null, modifier = Modifier.size(40.dp))
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
imageVector / painter / bitmap | ImageVector | Painter | ImageBitmap | The image to draw. | |
contentDescription | String? | Accessible name. Use null only for decorative icons. | |
tint | Color | LocalContentColor.current | Tint color. |
Guidelines
Do:
- Use one icon style across the app.
- Match the icon size to the text next to it.
Don't:
- Do not use an icon alone when its meaning is unclear.
- Do not tint with hardcoded colors.
Accessibility
- Informative icons need a contentDescription that describes the meaning, not the shape.
- Decorative icons next to text pass null so screen readers skip them.