---
title: Icon
description: An icon component for tinted painter, bitmap, and vector assets.
---



```kotlin expandable title="IconDemo.kt" githubUrl="https://github.com/composablehorizons/compose-unstyled/blob/main/demo/src/commonMain/kotlin/com/composeunstyled/demo/icon/IconDemo.kt"
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.composables.icons.lucide.Heart
import com.composables.icons.lucide.Lucide
import com.composeunstyled.UnstyledIcon
import com.composeunstyled.demo.colors
import com.composeunstyled.demo.contentToken
import com.composeunstyled.theme.Theme

@Preview
@Composable
fun IconDemo() {
  Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center,
  ) {
    UnstyledIcon(
      imageVector = Lucide.Heart,
      contentDescription = "Favorite",
      tint = Theme[colors][contentToken],
      modifier = Modifier.size(90.dp),
    )
  }
}
```



## Installation

```kotlin
implementation("com.composables:composeunstyled-icon:2.10.0")
```

## Anatomy

```kotlin
UnstyledIcon(
  imageVector = icon,
  contentDescription = "Favorite",
)
```

## Concepts

- `UnstyledIcon` renders an icon from an `ImageVector`, `Painter`, or `ImageBitmap`.

## Accessibility

Pass a short `contentDescription` for icons that communicate meaning. Use `null` for decorative icons.

## Code Examples

### Tinting an icon

Use the `tint` parameter to apply one color to the icon:

```kotlin expandable
UnstyledIcon(
  imageVector = favoriteIcon,
  contentDescription = "Favorite",
  tint = Color.Red,
)
```

## API Reference

### UnstyledIcon

| Parameter | Type | Description |
|-----------|------|-------------|
| `painter` | `Painter` | a `Painter`  to draw inside this icon. |
| `contentDescription` | `String?` | text used by accessibility services to describe what this icon represents. This value can be ommited if the icon is used for stylistic purposes only. |
| `modifier` | `Modifier` | the `Modifier` to be used to this icon. |
| `tint` | `Color` | a `Color` that will be used to tint the `painter`. If `Color.Unspecified` is passed, then no tinting will be used. |
| `imageBitmap` | `ImageBitmap` |  |
| `imageVector` | `ImageVector` |  |