1170 animated SVG icons for React. Hover & imperative triggers, configurable size, color, and duration. Built on motion/react.
Browse icons · Docs · MCP · Sponsor
pnpm add @animateicons/reactimport { BellRingIcon } from "@animateicons/react/lucide";
export function Notifications() {
return <BellRingIcon size={24} color="#f45b48" />;
}Icons animate on hover by default, and motion is bundled. Import from @animateicons/react/lucide or @animateicons/react/huge.
Prefer to own the code? Copy one icon into your project with npx animateicons add bell-ring.
| Prop | Type | Default |
|---|---|---|
size |
number |
24 |
color |
string |
currentColor |
duration |
number |
1 |
isAnimated |
boolean |
true |
className |
string |
- |
Tip
Use useIconHover to play an icon when a user hovers or clicks the button, link or card around it.
"use client";
import { useIconHover } from "@animateicons/react";
import { BellRingIcon } from "@animateicons/react/lucide";
export default function Bell() {
const { ref, triggerProps } = useIconHover(); // hover (default)
return (
<button {...triggerProps}>
<BellRingIcon ref={ref} size={28} />
</button>
);
}See the full docs for click, both and multiple icons.
Read the documentation for the CLI, shadcn, MCP, styling and the full API.
PRs adding icons are welcome. See CONTRIBUTING.md.
MIT. Icon shapes are based on Lucide and Hugeicons, see the third-party notices.