AnimateIcons

Free and open-source animated SVG icons for React, built for smooth micro-interactions, easy customization, and lightweight performance.

---

Installation

You can install any icon directly into your project using the shadcn CLI:

npm example

npx shadcn@latest add "https://animateicons.in/icons/bell.json"

bun example

bunx shadcn@latest add "https://animateicons.in/icons/bell.json"

Replace bell.json with any icon name from our gallery. View all icons → animateicons.in

---

Usage

After installing an icon, import it into your component:

"use client";
import { AtomIcon } from "./components/AtomIcon";

export default function Page() {
	return <AtomIcon size={28} duration={1} isAnimated={true} />;
}

Bell Icon Example

"use client";
import { useRef } from "react";
import { BellRingIcon, BellRingIconHandle } from "./components/BellRingIcon";

export default function Page() {
	const bellRef = useRef<BellRingIconHandle>(null);

	return (
		<>
			{/* Default hover animation */}
			<BellRingIcon size={28} duration={1} />

			{/* Programmatic control */}
			<button onClick={() => bellRef.current?.startAnimation()}>Start</button>
			<button onClick={() => bellRef.current?.stopAnimation()}>Stop</button>
			<BellRingIcon ref={bellRef} size={28} duration={1} isAnimated={true} />
		</>
	);
}

---

Features

• Smooth, purposeful animations out-of-the-box
• Lightweight & built with motion/react
• 200+ customizable SVG icons
• Works with React & Next.js
• Optimized for performance

---

Notes

Note: This project is a work in progress — new animated icons are added regularly. We’d love your feedback and contributions as the project evolves!