> ## Documentation Index
> Fetch the complete documentation index at: https://none-9e5c6865.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Motion Icons React

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

<style>
  {`
    /* Hide Mintlify branding */
    [class*="powered"],
    [class*="mintlify"],
    .footer-branding,
    .powered-by,
    a[href*="mintlify.com"],
    a[href*="mintlify"] {
    display: none !important;
    visibility: hidden !important;
    }

    /* Light theme - dark text on white background */
    body, p, span, div, h1, h2, h3, h4, h5, h6 {
    color: #1E293B !important;
    background-color: white !important;
    }

    /* Dark theme - white text on black background */
    .dark body, .dark p, .dark span, .dark div, 
    .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
    color: white !important;
    background-color: #000000 !important;
    }

    /* Blue hover states for both themes */
    a:hover {
    color: #2563EB !important;
    }

    /* Links - dark in light mode, white in dark mode */
    a {
    color: #475569 !important;
    }

    .dark a {
    color: white !important;
    }
    `}
</style>

**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:

```tsx theme={null}
// 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:

```tsx theme={null}
<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

<CardGroup cols={2}>
  <Card title="Easy to Use" icon="zap">
    Drop-in replacement for Lucide React icons with zero configuration
  </Card>

  <Card title="Rich Animations" icon="sparkles">
    10+ built-in animations including spin, bounce, wiggle, and more
  </Card>

  <Card title="Entrance Effects" icon="eye">
    Eye-catching entrance animations to grab user attention
  </Card>

  <Card title="Accessible" icon="universal-access">
    Automatically respects `prefers-reduced-motion` settings
  </Card>

  <Card title="Lightweight" icon="feather">
    Minimal bundle size impact on your application
  </Card>

  <Card title="TypeScript Ready" icon="code">
    Full type safety and IntelliSense support included
  </Card>
</CardGroup>

## Quick Example

### Minimal Usage (1 prop)

```tsx theme={null}
<MotionIcon name="Heart" animation="pulse" />
```

### With Entrance Effect

```tsx theme={null}
<MotionIcon name="Bell" entrance="fadeInUp" />
```

### Interactive Hover

```tsx theme={null}
<MotionIcon name="ThumbsUp" animation="bounce" trigger="hover" interactive />
```

### Full Customization (only when needed)

```tsx theme={null}
<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:

<Card title="Quick Start Guide" icon="rocket" href="/quickstart" horizontal>
  Install and set up Motion Icons React in under 2 minutes
</Card>

## Explore the Documentation

<CardGroup cols={2}>
  <Card title="Installation" icon="download" href="/essentials/installation">
    Install the package and set up your first animated icon
  </Card>

  <Card title="Animation Types" icon="play" href="/essentials/animations">
    Explore all available animations and entrance effects
  </Card>

  <Card title="Props & API" icon="settings" href="/api-reference/props">
    Complete reference for all component props and options
  </Card>

  <Card title="Examples" icon="code" href="/essentials/examples">
    Real-world examples and common use cases
  </Card>
</CardGroup>

## Popular Use Cases

<Accordion title="Loading Spinners">
  ```tsx theme={null}
  <MotionIcon
    name="Loader2"
    animation="spin"
    size={20}
    className="text-gray-500"
  />
  ```
</Accordion>

<Accordion title="Interactive Buttons">
  ```tsx theme={null}
  <MotionIcon
    name="Heart"
    animation="heartbeat"
    trigger="hover"
    interactive
    size={24}
    onClick={() => console.log('Liked!')}
  />
  ```
</Accordion>

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

## Community & Support

<CardGroup cols={2}>
  <Card title="GitHub Issues" icon="github" href="https://github.com/Garvit1000/motion-icons/issues">
    Report bugs or request new features
  </Card>

  <Card title="Discussions" icon="comments" href="https://github.com/Garvit1000/motion-icons/discussions">
    Ask questions and share ideas with the community
  </Card>
</CardGroup>