Design Library

Animated icons

Icons that act out what they mean: a bell that rings, a bin whose lid lifts, a plane that flies off and comes back, a check that draws itself in. All 1,756 Lucide icons move: a hundred have an original motion built from their own strokes, the rest share eight generic ones plus a push in the direction an arrow points. One small player drives them with eight triggers — in, click, hover, loop, loop on hover, morph, boomerang and sequence — plus stroke weight, a second accent colour and speed. The trigger model follows Lordicon; the icons are Lucide and every motion is our own.

Animated icons · Library and editor

The whole Lucide set, 1,756 icons, searchable by name, tag and category. A hundred act out their meaning on hover — the bell rings, the bin opens, the scissors snip, the hourglass turns over — and every other icon gets eight generic motions and a draw-on reveal. Beside them is an editor: pick any of the icon's animations, any of eight triggers, the stroke weight, a primary and a second accent colour and the speed, and read back the one line of code that reproduces it.

Animated icons · Eight triggers

The same player, eight ways to start it, side by side: draw in when seen, play on click, play on hover, loop forever, loop while hovered, change shape while hovered, go there and straight back, and a sequence that draws in and then repeats. Each card uses the icon that shows its trigger best.

Animated icons · In a real interface

A small workspace where every icon has a job: the nav items animate when you hover the whole item, the unread bell keeps ringing until you open the inbox, subscribing flies the plane and draws a check, the download arrow drops and the bin lifts its lid before a file disappears, like and save answer the click, status rows draw themselves in and the speaker waves only move while music plays.

Full library — live sample, numbers, prompt and source — is for clients. I have the password

All categories