Icon

An icon component for tinted painter, bitmap, and vector assets.

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

implementation("com.composables:composeunstyled-icon:2.9.2")

Anatomy

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:

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`