@motiqicons/react

Animated SVG icon library for React. Every icon ships with built-in animations — no wrappers, no extra dependencies beyond Framer Motion.

Install

npm install @motiqicons/react

pnpm add @motiqicons/react

bun add @motiqicons/react

Peer dependencies

npm install framer-motion

Usage

import { BellIcon } from "@motiqicons/react"

export function Notification() {
  return <BellIcon size={24} trigger="hover" />
}

Available icons

ArrowRightIcon · BellIcon · CheckIcon · DownloadIcon · HeartIcon · HomeIcon · MailIcon · PlayIcon · RefreshIcon · SearchIcon · SettingsIcon · ShareIcon · StarIcon · TrashIcon

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | 24 | Width and height in px | | color | string | "currentColor" | Stroke color | | strokeWidth | number | 2 | SVG stroke width | | duration | number | 0.5 | Animation duration in seconds | | trigger | AnimationType | "hover" | When to play the animation | | className | string | — | Additional CSS classes |

Trigger modes

hover · loop · mount · click · scroll · draw

License

MIT