# MotionIcons
A comprehensive library of **350 animated SVG icons** powered by [Motion](https://motion.dev) for React. Beautiful, customizable icons with built-in animations that bring your UI to life.
[](https://www.npmjs.com/package/motionicon)
[](https://opensource.org/licenses/MIT)
## Features
- **350 Icons** — Comprehensive icon set covering UI, navigation, media, commerce, and more
- **9 Motion Types** — Scale, rotate, translate, shake, pulse, bounce, draw, spin, and none
- **4 Trigger Modes** — Hover, loop, mount, and inView animations
- **Fully Typed** — Complete TypeScript support with exported types
- **Tree Shakeable** — Import only what you need
- **Customizable** — Control size, stroke width, colors, and animation behavior
- **Context Support** — Global configuration via IconProvider
- **Accessible** — ARIA labels and reduced motion support
## Installation
```bash
npm install motionicon motion react react-dom
# or
pnpm add motionicon motion react react-dom
# or
yarn add motionicon motion react react-dom
```
## Quick Start
```tsx
import { Heart, Star, Bell } from 'motionicon'
function App() {
return (
{/* Scale animation on hover (default) */}
{/* Continuous rotation */}
{/* Draw animation on hover */}
)
}
```
## Motion Types
| Type | Description |
|------|-------------|
| `scale` | Grows larger on trigger (default) |
| `rotate` | Rotates 360 degrees |
| `translate` | Moves up slightly |
| `shake` | Shakes horizontally |
| `pulse` | Pulses in size |
| `bounce` | Bounces up and down |
| `draw` | SVG path drawing effect |
| `spin` | Continuous spinning |
| `none` | No animation |
## Trigger Modes
| Trigger | Description |
|---------|-------------|
| `hover` | Animates on mouse hover (default) |
| `loop` | Continuous animation |
| `mount` | Animates once when component mounts |
| `inView` | Animates when scrolled into viewport |
## Props
All icons accept the following props:
```typescript
interface IconProps {
size?: number // Icon size in pixels (default: 24)
strokeWidth?: number // Stroke width (default: 2)
className?: string // Additional CSS classes
motionType?: MotionType // Animation type
trigger?: TriggerType // When to trigger animation
animated?: boolean // Enable/disable animations
'aria-label'?: string // Accessibility label
}
```
## Global Configuration
Use `IconProvider` to set defaults for all icons in your app:
```tsx
import { IconProvider, Heart, Star } from 'motionicon'
function App() {
return (
{/* All icons inherit these defaults */}
)
}
```
## Accessibility
MotionIcons respects `prefers-reduced-motion` by default. You can also manually control animations:
```tsx
// Disable animations for this icon
// Add accessible label
```
## Available Icons
MotionIcons includes 350 icons across categories:
- **Navigation** — Arrows, chevrons, menu, home
- **Actions** — Check, close, edit, save, trash
- **Media** — Play, pause, volume, camera, video
- **Communication** — Mail, phone, message, send
- **Commerce** — Cart, credit card, package, receipt
- **Files** — File, folder, clipboard, archive
- **Weather** — Sun, cloud, rain, snow, wind
- **Health** — Heart, pill, stethoscope, brain
- **Devices** — Laptop, phone, monitor, keyboard
- **And many more...**
## Development
```bash
# Install dependencies
pnpm install
# Start dev server (showcase site)
pnpm dev
# Build library
pnpm run build:lib
# Type check
pnpm run type-check
```
## Tech Stack
- **React 18+** with Motion for animations
- **TypeScript** with strict mode
- **ESM and CJS** builds via tsup
- **Next.js 15** for the showcase site
## License
MIT License - see [LICENSE](LICENSE) for details.