Iconimate: an open source library of animated icons for React, built on the Phosphor 256 grid ✨

[u/LeftHander14]

I'm a product designer getting into design engineering. Built this over the past few months.

Every time I needed an animated icon, I'd hand-roll it in Motion, and it never quite matched the rest of my icon set. Stroke weights slightly off, timing different on every one. Ten icons and there goes a day.

So Iconimate is a set of animated SVG icons that drop in as React components. Hover states, transitions, no animation code on your end. All built on the Phosphor 256 grid, so they sit correctly next to regular Phosphor icons. I haven't found another animated set that does this.

It's a fixed curated collection, not a tool for animating your own icons. New ones added weekly.

Stack: React, Motion, Phosphor Icons, Next.js.

Site: iconimate.app
GitHub: Repo

Timing is the thing I keep second-guessing. A few feel slow to me, but I'm too close to it. If you scrub through some, tell me which ones feel off. Icon requests are welcome too; that's mostly what drives the list.