https://github.com/avijit07x/animateicons
A sleek React library for animated SVG icons that move with purpose. Transform static designs into engaging user experiences with smooth, performant animations.
https://github.com/avijit07x/animateicons
animated-icons animation framer-motion icons motion nextjs svgicon
Last synced: 4 months ago
JSON representation
A sleek React library for animated SVG icons that move with purpose. Transform static designs into engaging user experiences with smooth, performant animations.
- Host: GitHub
- URL: https://github.com/avijit07x/animateicons
- Owner: Avijit07x
- License: mit
- Created: 2025-07-29T17:51:25.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-09-06T05:48:29.000Z (4 months ago)
- Last Synced: 2025-09-06T07:22:07.717Z (4 months ago)
- Topics: animated-icons, animation, framer-motion, icons, motion, nextjs, svgicon
- Language: TypeScript
- Homepage: https://animateicons.vercel.app
- Size: 3.85 MB
- Stars: 324
- Watchers: 1
- Forks: 16
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# AnimateIcons
A sleek React library for animated SVG icons that move with purpose. Transform static designs into engaging user experiences with smooth, performant animations.
---
## 📦 Installation
You can install any icon directly into your project using the **shadcn** CLI:
### npm example
```
npx shadcn@latest add "https://animateicons.vercel.app/icons/bell.json"
```
### bun example
```
bunx shadcn@latest add "https://animateicons.vercel.app/icons/bell.json"
```
Replace `bell.json` with any icon name from our gallery.
View all icons → **[animateicons.vercel.app](https://animateicons.vercel.app)**
---
## 🚀 Usage
After installing an icon, import it into your component:
```tsx
"use client";
import { AtomIcon } from "./components/ui/AtomIcon";
export default function Page() {
return ;
}
```
### Bell Icon Example
```tsx
"use client";
import { useRef } from "react";
import { BellRingIcon, BellRingIconHandle } from "./components/ui/BellRingIcon";
export default function Page() {
const bellRef = useRef(null);
return (
<>
{/* Default hover animation */}
{/* Programmatic control */}
bellRef.current?.startAnimation()}>Start
bellRef.current?.stopAnimation()}>Stop
>
);
}
```
---
## ✨ Features
- 🎯 Smooth, purposeful animations out-of-the-box
- âš¡ Lightweight & built with `motion/react`
- 🎨 100+ 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!