Animated Icons

Ten icons that redraw themselves on hover, pure CSS + SVG.

Every icon library gives you the same generic bounce or fade on hover — it feels like clip art. I needed icons for a product's empty states that felt hand-drawn and alive. The idea was simple: each icon should have its own gesture. A mail icon's flap opens, a bell swings, a search glass zooms. I used SVG pathLength so every stroke is normalized to 0–1, then a CSS keyframe draws it from a different origin per icon. No JavaScript, no animation library — just dasharray and dashoffset. Ten icons, ten distinct motions, zero runtime cost.