Icons

450 animated icons in 50 categories. They move when you hover them and switch state when you need them to, as static, animated or pixel icons. Click one to copy its SVG (or JSX).

All icons [450]

In buttons

Animated and stateful

Hover plays the icon's animation when anything around it is hovered, so put it inside a button and hover that. active switches icons with a second state and animates between the two. Use either, or both.

npx shadcn@latest add https://reactframe.com/r/heart-icon.json

const [liked, setLiked] = useState(false);

<motion.button whileHover="hover" initial="rest"
  onClick={() => setLiked(!liked)}>
  <HeartIcon active={liked} />
  Like
</motion.button>