Jetpack Compose Animated Icons — Android Docs

com.citypulso:pulsoicon-compose — the PulsoIcon icons and motion for Jetpack Compose on Android.

The Android library runs in Jetpack Compose on the device. This website can’t run Compose; the icons you see here are the web packages playing the same motion.

Installation

Maven Central, Android 8.0 (API 26) or newer:

// build.gradle.kts of your app module
dependencies {
    implementation("com.citypulso:pulsoicon-compose:<version>")
}

Use the version shown on Maven Central. Every PulsoIcon package shares one version number.

Imports

import com.citypulso.pulsoicon.PulsoIcon
import com.citypulso.pulsoicon.PulsoIcons
import com.citypulso.pulsoicon.icons.Bell

Each icon is an extension property of PulsoIcons, named like the React component (PulsoIcons.Calendar, PulsoIcons.Trash2, PulsoIcons.BrandGithub), with the same other names and Icon suffixes.

Quick start

val interactions = remember { MutableInteractionSource() }
IconButton(onClick = { /* … */ }, interactionSource = interactions) {
    PulsoIcon(PulsoIcons.Bell, contentDescription = "Notifications", interactionSource = interactions)
}

InteractionSource

Compose has no “closest interactive ancestor” like the web packages. Pass the interactionSource of the button or row the icon sits in, and the icon plays when that control is pressed, hovered or focused.

Outline, solid and static

PulsoIcon(PulsoIcons.Heart, contentDescription = null)
PulsoIcon(PulsoIcons.Heart, contentDescription = null, solid = true)
PulsoIcon(PulsoIcons.Heart, contentDescription = null, animated = false)
PulsoIcon(PulsoIcons.Heart, contentDescription = null, solid = true, animated = false)

Programmatic animation

rememberPulsoIconHandle() gives a handle whose suspending startAnimation() and stopAnimation() return when the motion has finished:

val handle = rememberPulsoIconHandle()
val scope = rememberCoroutineScope()

IconButton(onClick = { scope.launch { handle.startAnimation() } }) {
    PulsoIcon(PulsoIcons.Check, contentDescription = "Save", autoAnimated = false, handle = handle)
}

Or drive it from state with play:

PulsoIcon(PulsoIcons.Bell, contentDescription = null, autoAnimated = false, play = hasNewMessage)

Icons by name

PulsoIcons.byKey("bell") looks an icon up by the kebab-case name stored on your data, and PulsoIcons.ICON_NAMES lists them all. Each icon is built only when first used, and R8 removes the icons your app never references.

Accessibility

contentDescription is read by TalkBack; pass null when the control around the icon already has a label. Nothing moves when the system turns animations off.

Parameters

Parameter	Default	What it does
`icon`		The icon, e.g. `PulsoIcons.Bell`
`contentDescription`		Read by TalkBack; `null` when the control already has a label
`modifier`	`Modifier`	Layout modifier
`size`	`24.dp`	Width and height
`color`	`LocalContentColor.current`	Stroke colour, and fill colour when `solid`
`strokeWidth`	`2f`	Stroke width on the 24-unit grid
`absoluteStrokeWidth`	`false`	Keep the stroke the same number of dp at any size
`solid`	`false`	Filled icon instead of outline
`animated`	`true`	`false` keeps the icon completely still
`autoAnimated`	`true`	Play when the control of `interactionSource` is pressed, hovered or focused
`play`	`null`	`true` plays the motion, `false` returns to rest
`handle`	`null`	`rememberPulsoIconHandle()`, to play it from code
`interactionSource`	`null`	The interaction source of the control the icon sits in