Skip to main content
Animations without animation complexity. Motion Icons React is the easiest way to animate icons in React. No framer-motion boilerplate. No variants. Just props.

​
The Problem

Animating icons in React today is annoyingly repetitive: 
// With framer-motion - too much boilerplate
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0, rotate: 360 }}
  transition={{ duration: 1 }}
>
  <Bell />
</motion.div>
You need to:
  • Import framer-motion and wrap every icon
  • Remember animation curves and timing functions
  • Juggle initial/animate/transition props
  • Handle hover/press states manually
  • Write custom variants for each animation

​
The Solution

Motion Icons React collapses all of that into one line: 
<MotionIcon name="Bell" animation="spin" entrance="fadeInUp" />
That’s it. No wrappers. No variants. No complexity.

​
Why Motion Icons React?

  • 3500+ icons through Lucide React
  • 15+ preset animations ready to use
  • Declarative API - just props, no complexity
  • Interactive states built-in (hover, click, focus)
  • TypeScript support with full autocomplete
  • Accessibility first - respects prefers-reduced-motion
  • Production-ready defaults - subtle, professional animations

​
Key Features

Easy to Use

Drop-in replacement for Lucide React icons with zero configuration

Rich Animations

10+ built-in animations including spin, bounce, wiggle, and more

Entrance Effects

Eye-catching entrance animations to grab user attention

Accessible

Automatically respects prefers-reduced-motion settings

Lightweight

Minimal bundle size impact on your application

TypeScript Ready

Full type safety and IntelliSense support included

​
Quick Example

​
Minimal Usage (1 prop)

<MotionIcon name="Heart" animation="pulse" />

​
With Entrance Effect

<MotionIcon name="Bell" entrance="fadeInUp" />

​
Interactive Hover

<MotionIcon name="ThumbsUp" animation="bounce" trigger="hover" interactive />

​
Full Customization (only when needed)

<MotionIcon
  name="Star"
  size={48}
  color="#FFD700"
  animation="spin"
  entrance="zoomIn"
  animationDuration={1500}
  trigger="hover"
  interactive
/>
All animation props are optional. Defaults are subtle and production-friendly.

​
Get Started

Ready to animate your icons? Follow our step-by-step guide:

Quick Start Guide

Install and set up Motion Icons React in under 2 minutes

​
Explore the Documentation

Installation

Install the package and set up your first animated icon

Animation Types

Explore all available animations and entrance effects

Props & API

Complete reference for all component props and options

Examples

Real-world examples and common use cases
<MotionIcon
  name="Loader2"
  animation="spin"
  size={20}
  className="text-gray-500"
/>

<MotionIcon
  name="Heart"
  animation="heartbeat"
  trigger="hover"
  interactive
  size={24}
  onClick={() => console.log('Liked!')}
/>

<MotionIcon
  name="Bell"
  animation="shake"
  trigger="click"
  entrance="fadeInUp"
  interactive
  size={24}
  onClick={() => console.log('Notification clicked')}
/>

​
Community & Support

GitHub Issues

Report bugs or request new features

Discussions

Ask questions and share ideas with the community