---

Quick start

pnpm add @animateicons/react

import { 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.

Props

Hover, click or both

[!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.

Documentation

Read the documentation for the CLI, shadcn, MCP, styling and the full API.

Contributing

PRs adding icons are welcome. See CONTRIBUTING.md.

License

MIT. Icon shapes are based on Lucide and Hugeicons, see the third-party notices.