Motion Icons React

The easiest way to add smooth animations to Lucide icons in React

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

Popular Use Cases

Loading Spinners

<MotionIcon
  name="Loader2"
  animation="spin"
  size={20}
  className="text-gray-500"
/>

Interactive Buttons

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

Notification Icons

<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