Components · Controls

Icon

Eighteen icons for learning apps. Each moves once, in its own way, when something happens.

Try itChange the motion setting at the top to feel each personality.

Use it

<Icon name="heart" play={likes} />
<Icon name="check" playOnMount />

How it moves

Icons move only when something happens: a press, a change of state, a finish. They never loop and never move on their own. Each icon has one motion, chosen for what it means, and that motion follows the personality like everything else: the timing and easing come from the role, and the size of the movement is scaled by --ss-motion-energy, measured in the icon's own 24 by 24 grid so it stays in proportion at any size.

Icon	Motion	Role	What moves
check, x	draw	state-change, sequence	Each stroke draws itself, one stagger apart
star, play, pause, trophy	pop	celebration	Grows past the celebration scale with a small turn, dips, and settles
heart	beat	celebration	Two beats, the second smaller
flame	flicker	celebration	Stretches up from its base and sways, like catching
lightbulb	glow	attention	The bulb lifts a little and three rays draw out, then fade
lock	shackle	state-change	The shackle drops and snaps shut
lock-open	unlock	state-change	The shackle springs up and swings open
bell	swing	attention	Rings from its top, swinging less each time, the clapper a beat behind
bookmark	drop	enter	Drops into place and squashes as it lands
volume-2	waves	enter, sequence	The sound waves draw outward, one after the other
arrow-right, chevron-down	nudge	navigation	Points the way twice
plus	turn	state-change	A quarter turn, landing where it started
menu	stagger	enter, sequence	The lines slide in one after another

Rules:

Play an icon by changing its play value when the event happens, or with playOnMount when it first appears. Never on a timer.
One playing icon at a time in any part of the screen. If several change together, play only the one the person caused.
An icon inside a button that already moves (a primary button press) does not also play, unless the icon is the point, like a heart on a like button.
Icons are drawn with currentColor, so they take the text color of whatever holds them.

Reduced motion: energy is 0, so nothing travels, turns, or grows. Strokes that draw appear complete, and the icon simply shows its new state.

Screen readers: icons are hidden by default, because the text next to them says what they mean. Give an icon a label only when it stands alone.

Shapes: Lucide 1.49.0, ISC License (see LICENSE-lucide.txt). The lightbulb rays are ours.

CSS variables used: --ss-motion-energy, --ss-motion-sequence-stagger, and the duration, easing, scale, and spring variables of the state-change, celebration, attention, enter, and navigation roles.