u/Intelligent_Bench532

Rebuilding the sidebar for our Next.js SaaS dashboard. Static icons looked flat against the gradient, so I added hover states. First tried rolling my own CSS animations—ended up duplicating classes and breaking the design system’s timing. Then copied SVG paths into framer-motion components, but the motion curves never matched. Finally used ItsHover, swapped the color prop, and it just worked. No extra CSS, no extra bundles.

But now I’m stuck: should hover states for icons be part of the design system, or is it okay to pull in a library for motion? I’m torn between keeping the stack minimal and not reinventing the wheel for every edge case. Plus, I’m worried the motion curves won’t hold up across browsers.

How do you handle icon hover states in your stack?

Quick context: I was working on a few design projects and kept running into the same friction - icons that just sit there with no feedback. Most options either feel too decorative or require a ton of manual tweaking to get any motion out of them. So I tried a different approach: motion-first SVG icons as editable React components. What I ended up with: open-source, community-owned icons designed to move with intent, not decoration. They’re built for modern design systems like shadcn and Next.js, and every motion is intentional. Still early, but it’s been a for the projects I’m working on. Anyone else dealing with the same problem?

Open to feedback on the approach or ideas for new icons

Quick context: I’ve been building React apps where even small interactions feel clunky without the right visual feedback. So I created a set of motion-first icons where the animation serves a purpose - like a ‘trash’ icon that ‘opens’ when hovered to signal deletion, or a ‘play’ button that ‘unfolds’ to show it’s ready. Every icon is an editable React component with motion baked in, and they’re fully open-source. Curious if this feels like a useful addition to the React ecosystem or if there’s a better way to handle intent-driven animations.