I built an open source library of animated icons for React, all using motion and Phosphor icons

Muhammad Ammar — Fri, 07 Aug 2026 11:30:53 +0000

I kept running into the same small annoyance. I'd need one animated icon, so I'd hand-roll it in Motion, and the result never quite matched the rest of my icon set. Stroke weight slightly off, optical size a bit different, timing eyeballed differently every time. One icon is fine. Ten icons and you've lost a day to something that should have taken five minutes.

So I built Iconimate.

What it is

A curated set of animated SVG icons that drop in as React components. Hover animations, state transitions, that kind of thing. You import the component and use it:

import { Bell } from 'iconimate'

<Bell size={24} />

That's the whole API surface for basic use. Motion runs underneath but you never write animation code.

Why the Phosphor 256 grid matters

This is the part I actually care about, and it's the reason the project exists.

Most animated icon sets are drawn on their own grid. That's fine in isolation, but the moment you put one next to your existing icons it looks almost right, which is worse than looking clearly different. Stroke weights don't match. Optical centers drift. Your eye catches it even if you can't name what's wrong.

Every Iconimate icon is drawn on the Phosphor 256 grid, the same one Phosphor Icons uses. So if you're already on Phosphor, these sit in the same interface without any adjustment. Same stroke weight, same optical alignment, same visual density.

As far as I've found, no other animated icon set does this.

What it isn't

It's a fixed curated collection, not a tool for animating arbitrary icons. You can't feed it your own SVG and get an animation out. That's a deliberate scope choice: getting an animation to feel right takes hand-tuning, and a generic animator would produce results that feel generic.

Stack

React, Motion for animation, Phosphor Icons for base geometry, Next.js for the site.

Where it's at

Live, open source, and I'm adding new icons weekly. The list is mostly driven by what people request.

Site: iconimate.app
GitHub: [https://github.com/smammar100/Iconimate]

The thing I'm still second-guessing is animation timing. A few feel a touch slow to me but I've stared at them too long to judge. If you scrub through some and any stand out as off, I'd like to hear it. Icon requests welcome too.