---
title: "IconMarker"
description: "Renders a clickable icon marker (a dot [IconMarkerDefaults.DotIcon] by default) for anchoring to real-world objects."
type: "component"
lastmod: "2026-09-24"
---
## API Reference

### IconMarker

> Source set: Android

```kotlin
@Composable
public fun IconMarker(
    onClick: () -> Unit,
    contentDescription: String,
    modifier: Modifier = Modifier,
    size: IconMarkerSize = IconMarkerSize.Medium,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = IconMarkerDefaults.contentColor(color),
    contentPadding: PaddingValues = IconMarkerDefaults.contentPadding(size),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit = { IconMarkerDefaults.DotIcon() },
)
```

#### Parameters

| | |
| --- | --- |
| onClick | called when this marker is clicked. |
| contentDescription | text used by accessibility services to describe a real-world object this marker is anchored to. This text should be localized. It will be merged with content description of the `content` so the latter one should be omitted. |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this layout |
| size | the [IconMarkerSize](/jetpack-compose/androidx.xr.glimmer/glimmer/classes/IconMarkerSize) variant of the marker |
| color | background [Color](/jetpack-compose/androidx.compose.ui/ui-graphics/classes/Color) of the interactive surface |
| contentColor | [Color](/jetpack-compose/androidx.compose.ui/ui-graphics/classes/Color) applied to `content` |
| contentPadding | internal padding between the surface and `content` |
| interactionSource | an optional hoisted [MutableInteractionSource](/jetpack-compose/androidx.compose.foundation/foundation/interfaces/MutableInteractionSource) for observing and emitting interactions for this marker. Note that if `null` is provided, interactions will still happen internally |
| content | the marker content to display inside the surface. By default, this is a dot `IconMarkerDefaults.DotIcon`, but can be customized with an [Icon](/jetpack-compose/androidx.xr.glimmer/glimmer/components/Icon). Size of the icon depends on the provided [size](/jetpack-compose/androidx.xr.compose/compose/functions/size). |

### IconMarker

> Source set: Android

```kotlin
@Composable
public fun IconMarker(
    contentDescription: String,
    modifier: Modifier = Modifier,
    size: IconMarkerSize = IconMarkerSize.Medium,
    contentColor: Color = IconMarkerDefaults.contentColor(),
    contentPadding: PaddingValues = IconMarkerDefaults.contentPadding(size),
    content: @Composable () -> Unit = { IconMarkerDefaults.DotIcon() },
)
```

#### Parameters

| | |
| --- | --- |
| contentDescription | text used by accessibility services to describe a real-world object this marker is anchored to. This text should be localized. It will be merged with content description of the `content` so the latter one should be omitted. |
| modifier | the [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to this layout |
| size | the [IconMarkerSize](/jetpack-compose/androidx.xr.glimmer/glimmer/classes/IconMarkerSize) variant of the marker |
| contentColor | [Color](/jetpack-compose/androidx.compose.ui/ui-graphics/classes/Color) applied to `content` |
| contentPadding | internal padding applied around `content` |
| content | the marker content to display inside the surface. By default, this is a dot `IconMarkerDefaults.DotIcon`, but can be customized with an [Icon](/jetpack-compose/androidx.xr.glimmer/glimmer/components/Icon). Size of the icon depends on the provided [size](/jetpack-compose/androidx.xr.compose/compose/functions/size). |

## Code Examples

### IconMarkerSample

```kotlin
@Sampled
@Composable
fun IconMarkerSample() {
    IconMarker(
        onClick = {},
        // Provide a description of the real-world object that the marker tracks.
        contentDescription = "Northern Cardinal",
    )
}
```

### IconMarkerWithCustomIconSample

```kotlin
@Sampled
@Composable
fun IconMarkerWithCustomIconSample() {
    IconMarker(
        onClick = {},
        contentDescription = "Favourite meal",
        // The content description for the icon is redundant, as the marker merges the semantics.
        content = { Icon(FavoriteIcon, contentDescription = null) },
    )
}
```