Draw-on strokes, morphs, spins and shape reveals.
Icons are the one place a 200ms animation is nearly free: they are small, they are usually vector, and the motion reads as a response rather than as a transition. The stroke-drawing variants animate `stroke-dashoffset`, which works on any single-path SVG you already have, and the morph variants cross-fade two paths rather than interpolating them — which is what makes them reliable.
Three ocean bars that fold into an X on click — one checkbox, no JavaScript.
Four directional chevrons drawn from two borders, in blue, with a lift on hover.
Play, pause and stop glyphs cut from borders on ocean gradient discs.
Chat bubble with a border-drawn tail on an ocean gradient fill.
Card with a rotated ocean ribbon clipped to the top-right corner.
Two clipped ten-point stars offset into an ocean sale burst that twists on hover.
Floating ocean action button whose plus rotates into a close cross.
Folder drawn from one element and two pseudo-elements, the front flap hinged on its bottom edge so it opens in perspective on hover.
Teardrop made from three rounded corners and one square one, floating over a shadow that shrinks as it rises so the lift reads as height.
Magnifier whose ring flattens into a bar and whose handle counter-rotates, turning the glass into a cross without swapping any element.
Cloud built from a pill and two circles inheriting its gradient, with three drops falling on a stagger so the rain never syncs into a row.
Cup, stem and plinth as three elements with the handles as mirrored pseudo-elements, so the whole award is drawn without an image.
Shield outline made by clipping a filled shape and an inset dark copy to the same polygon, with a padlock drawn from two children.
Bell drawn from one rounded block plus a crown and a lip, pivoting at the mount while the clapper runs a second, later-peaking keyframe so the two do not move as one body.
Two gapped arcs cut from one conic gradient with border-drawn heads at each opening, the whole glyph spinning on an ease that speeds through the middle of each turn.
Gear teeth as alternating conic stops with the disc centre masked away, the hub ring masked the opposite way — two elements, no path data, twelve teeth.
Three nested rings showing only their top border and rotated 45 degrees, which turns a circle into the quarter-arc the signal glyph is actually made of.
A CSS envelope whose flap folds back and a lined letter slides up out of it on hover.
Battery outline with one cell lit that charges cell by cell on hover and turns its casing green.
A play triangle built from two clipped halves that separate and square off into a pause icon on hover.
An organic gradient blob whose border-radius keeps morphing between shapes, brightening on hover.
An almond-shaped eye with a cyan iris whose lid slides shut when hovered.
A dim CSS lightbulb that lights up amber with a soft glow halo on hover.
Download glyph whose arrow drops into the tray on hover while the tray itself lights up to catch it.
Showing 24 of 29. Search the rest →
Small confirmations: checks, likes, copies, ripples and nudges.
Solid, outline, ghost, gradient and glow — every state included.
Frosted panels with a blurred backdrop, in copy-paste CSS.
Layered shadows that read as light rather than as a border.
Spinners, bars, dots and skeletons — no JavaScript in any of them.
Rotating loaders built from borders, conic gradients and dots.