Icons That Actually Do Something When You Hover Over Them

You've probably shipped a UI where every icon is a static SVG that just sits there. Hover states change the color, maybe the background, and that's it. It works, but it's a little lifeless. Its Hover is a library of 186 animated React icons where the motion is the point—every icon animates on interaction, built with motion/react.

What It Does

Its Hover is an animated icon library built with React and Motion. Each icon is a drop-in React component rather than a static SVG file, so you import it, size it with classes, and it animates when someone hovers over it. The project describes its design philosophy plainly: icons "designed to move with intent, not decoration."

The collection covers a lot of ground—UI essentials like arrows, checks, and navigation; social icons for GitHub, Twitter, Discord, and LinkedIn; tech logos for Docker, Node.js, Python, and TypeScript; action icons like copy, send, cart, and settings; currency symbols including Bitcoin, Ethereum, Dollar, and Rupee; and status icons for alerts, notifications, and loading states. Under the hood it's built on Next.js 16, React 18+, motion/react for the animations, Tailwind CSS 4, and shadcn/ui components.

Why It's Cool

The copy-the-source model is the right call. You're not locked into a dependency that ships all 186 icons whether you use them or not. You copy the component you need into your own icons/ directory, and then it's yours—adjust the stroke width, change the colors, rewrite the animation timing. For a design detail this small, that kind of ownership matters.

It plays nicely with the shadcn ecosystem. If you're already using shadcn, you can pull icons straight from the registry with a single CLI command. That's a nice bit of alignment—no new tooling to learn, no separate install process to remember.

The animation pattern is consistent and predictable. Each icon follows the same structure: an SVG wrapped in a React component, animation triggered on hover via motion/react, and exported with ref forwarding so you can control it imperatively if you need to. That consistency means once you understand one icon, you understand all of them—which makes customizing or contributing straightforward.

Motion as interaction feedback, not decoration. The README's framing is deliberate. These aren't icons that wobble for the sake of wobbling. The animation reinforces that something is interactive, which is a small but real usability win in interfaces where hover affordances are otherwise subtle.

The MIT license (the README links to Apache 2.0 in the license section, so check the actual LICENSE file if that distinction matters to you) and community ownership mean you're not betting on a commercial vendor here.

How to Try It

The fastest path is the shadcn CLI:

npx shadcn@latest add https://itshover.com/r/[icon-name].json

Swap [icon-name] for whichever icon you want. If you'd rather do it manually, install the animation dependency first:

npm install motion

Then copy any icon component from the icons/ directory in the repo into your project and import it:

import GithubIcon from "@/icons/github-icon";

export default function Example() {
  return <GithubIcon className="h-6 w-6" />;
}

You can browse the full set at itshover.com/icons before committing to anything. The repo itself is at github.com/itshover/itshover, and if you want to run it locally, the standard npm install followed by npm run dev gets you a dev server.

Final Thoughts

Its Hover solves a narrow problem well: you want icons that feel alive without building and maintaining a custom animation system yourself. It's best suited to developers already in the React/Next.js/Tailwind world—especially shadcn users—who care about interaction detail but don't want another heavyweight dependency. If you're on a different stack, the copy-the-source approach still works, since each icon is just a React component with a motion animation you can adapt. The library is at 186 icons and accepting contributions, so it's a reasonable bet that the collection keeps growing.

Follow @githubprojects for more developer tools and open source projects.