animateicons

Browse icons   ·   Docs   ·   MCP   ·   Sponsor

1,500 animated SVG icons with hover and imperative triggers, and configurable size, color and duration. Built on motion.

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.

Other frameworks

The same icons and the same motion ship for more than React:

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

Start with the introduction for everything else.

Contributing

PRs adding icons are welcome. See CONTRIBUTING.md.

License

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