Avijit07x/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:

Framework	Package	Docs
Plain JS, web components, Svelte, Solid, Astro	@animateicons/vanilla	Plain JS
Vue 3 and Nuxt	@animateicons/vue	Vue
Angular 20, 21 and 22	@animateicons/angular	Angular

Props

Prop	Type	Default
size	number	24
color	string	currentColor
duration	number	1
isAnimated	boolean	true
className	string	-

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

Topic	What it covers	Docs
React	Props, Next.js, Server Components and types	React
Examples	Hover helper, buttons, inputs, cards and menus	Examples
shadcn	Add icons with the shadcn CLI	shadcn
CLI	Copy icons into your project with npx animateicons	CLI
MCP	Let AI agents search and add icons	MCP

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.