Iconography

Our icons and the way things move.

Icons

Every icon is a Lucide outline. Standalone icons sit in a round chip. Hover one.

Icons have no color of their own. The chip holds the color; the glyph follows it.

1.6

Default

3.4

One family Heavier when small.

Chips Standalone icons sit in a round chip.

Color from the chip The glyph takes its container’s ink.

Things spring in, settle in, glide across and loop smoothly. Colors simply fade.

Spring Things that arrive or respond.

Settle Things that come to rest.

Glide Slides and turns.

Loop Idle motion that repeats.

Each motion answers a touch. These are the real components, each on its real curve.

Button The chevron glides, the chip springs. Glide + spring

Card The arrow chip fills and settles. Settle

Open me

It turns back as this closes.

Toggle The chevron turns. Glide

Glass Pops on hover, sinks on press. Spring

When a visitor asks for less motion, movement stops and color stays.

Don’t fill icons Keep Lucide’s outlines.

Don’t color the glyph It takes its chip’s ink.

Don’t move on a linear ease Taps and hovers spring, settle or glide.

Don’t animate without a reduced-motion path Keep the color, drop the movement.