We just launched Compose Examples featuring over 150+ components! Check it out →

Icon

Common

Component in Material 3 Compose

A Material Design icon component that draws [imageVector] using [tint], with a default value of [LocalContentColor]. If [imageVector] has no intrinsic size, this component will use the recommended default size. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. For multicolored icons and icons that should not be tinted, use [Color.Unspecified] for [tint]. For generic images that should not be tinted, and do not follow the recommended icon size, use the generic [androidx.compose.foundation.Image] instead. For a clickable icon, see [IconButton].

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material3:material3:1.4.0-alpha02")
}

Overloads

@Composable
fun Icon(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current
)

Parameters

namedescription
imageVector[ImageVector] to draw inside this icon
contentDescriptiontext used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using [androidx.compose.ui.res.stringResource] or similar
modifierthe [Modifier] to be applied to this icon
tinttint to be applied to [imageVector]. If [Color.Unspecified] is provided, then no tint is applied.
@Composable
fun Icon(
    bitmap: ImageBitmap,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current
)

Parameters

namedescription
bitmap[ImageBitmap] to draw inside this icon
contentDescriptiontext used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using [androidx.compose.ui.res.stringResource] or similar
modifierthe [Modifier] to be applied to this icon
tinttint to be applied to [bitmap]. If [Color.Unspecified] is provided, then no tint is applied.
@Composable
fun Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current
)

Parameters

namedescription
painter[Painter] to draw inside this icon
contentDescriptiontext used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using [androidx.compose.ui.res.stringResource] or similar
modifierthe [Modifier] to be applied to this icon
tinttint to be applied to [painter]. If [Color.Unspecified] is provided, then no tint is applied.
@Composable
@ExperimentalMaterial3Api
fun Icon(
    painter: Painter,
    tint: ColorProducer?,
    contentDescription: String?,
    modifier: Modifier = Modifier
)

Parameters

namedescription
painter[Painter] to draw inside this icon
tinttint to be applied to [painter]. If null, then no tint is applied.
contentDescriptiontext used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using [androidx.compose.ui.res.stringResource] or similar
modifierthe [Modifier] to be applied to this icon
by @alexstyl