> ## 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.

# Quick Start

> Get Motion Icons React up and running in under 2 minutes

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

## Installation

This guide will walk you through installing and using Motion Icons React in your project. The entire setup takes less than 2 minutes.

### Prerequisites

Before you begin, make sure you have:

* Node.js 14 or higher installed
* A React project (16.8+ for hooks support)
* Basic familiarity with React components

### Step 1: Install the Package

Install both Motion Icons React and Lucide React using your preferred package manager:

<CodeGroup>
  ```bash npm theme={null}
  npm install motion-icons-react lucide-react
  ```

  ```bash yarn theme={null}
  yarn add motion-icons-react lucide-react
  ```

  ```bash pnpm theme={null}
  pnpm add motion-icons-react lucide-react
  ```

  ```bash bun theme={null}
  bun add motion-icons-react lucide-react
  ```
</CodeGroup>

<Note>
  **Why lucide-react?** Motion Icons React is built on top of Lucide React icons, so you'll need both packages. Lucide provides the icon shapes, while Motion Icons adds the animation layer.
</Note>

### Step 2: Import the Styles

The animations require CSS to work. Import the stylesheet in your main application file:

**Where to add this:**

* Create React App: `src/index.tsx` or `src/App.tsx`
* Next.js: `pages/_app.tsx` or `app/layout.tsx`
* Vite: `src/main.tsx`

```tsx theme={null}
import 'motion-icons-react/style.css';
```

### Step 3: Use Your First Animated Icon

Now you're ready to use animated icons! Here's how to convert a regular Lucide icon to an animated one:

<CodeGroup>
  ```tsx Before (Lucide React) theme={null}
  import { Heart } from 'lucide-react';

  function LikeButton() {
    return <Heart size={24} color="red" />;
  }
  ```

  ```tsx After (Motion Icons React) theme={null}
  import { MotionIcon } from 'motion-icons-react';

  function LikeButton() {
    return (
      <MotionIcon
        name="Heart"
        animation="heartbeat"
        size={24}
        color="red"
      />
    );
  }
  ```
</CodeGroup>

**What changed?**

1. Import `MotionIcon` instead of individual icon components
2. Use the `name` prop to specify which icon (e.g., "Heart", "Star", "Bell")
3. Add the `animation` prop to choose an animation type

That's it! Your icon now has a smooth heartbeat animation.

## Good Defaults

**All animation props are optional.** Motion Icons React uses subtle, production-friendly defaults:

* **Size**: 24px (standard icon size)
* **Color**: `currentColor` (inherits from parent)
* **Animation**: `none` (static by default)
* **Duration**: 1000ms (1 second)
* **Trigger**: `always` (continuous animation)
* **Weight**: `regular` (balanced stroke)

You only specify what you want to change:

```tsx theme={null}
// Minimal - uses all defaults except animation
<MotionIcon name="Heart" animation="pulse" />

// Custom size and color
<MotionIcon name="Star" size={32} color="#FFD700" />

// Full control (only when needed)
<MotionIcon
  name="Bell"
  size={48}
  color="red"
  animation="shake"
  animationDuration={500}
  trigger="hover"
/>
```

## Try Different Animations

Motion Icons React includes 15+ built-in animations. Here are some popular ones:

<Tabs>
  <Tab title="Spin Animation">
    ```tsx theme={null}
    <MotionIcon
      name="Loader2"
      animation="spin"
      size={24}
    />
    ```

    Perfect for loading indicators.
  </Tab>

  <Tab title="Bounce Animation">
    ```tsx theme={null}
    <MotionIcon
      name="ArrowUp"
      animation="bounce"
      size={24}
    />
    ```

    Great for call-to-action buttons.
  </Tab>

  <Tab title="Pulse Animation">
    ```tsx theme={null}
    <MotionIcon
      name="Bell"
      animation="pulse"
      size={24}
    />
    ```

    Ideal for notifications.
  </Tab>
</Tabs>

## Add Entrance Effects

Entrance animations play once when the icon first appears on screen. You can combine them with regular animations:

```tsx theme={null}
<MotionIcon
  name="Star"
  entrance="zoomIn"      // Plays once on mount
  animation="pulse"      // Loops continuously
  size={32}
  color="#FFD700"
/>
```

**How it works:**

1. Icon zooms in when it first appears (entrance)
2. Then continues pulsing indefinitely (animation)

## Make Icons Interactive

Control when animations play using the `trigger` prop:

```tsx theme={null}
<MotionIcon
  name="Heart"
  animation="heartbeat"
  trigger="hover"        // Animation only plays on hover
  interactive           // Makes icon focusable and clickable
  size={24}
  onClick={() => console.log('Icon clicked!')}
/>
```

**Trigger options:**

* `"always"` (default): Animation plays continuously
* `"hover"`: Animation plays only when hovering
* `"click"`: Animation plays on each click
* `"focus"`: Animation plays when focused (keyboard navigation)

## Next Steps

Now that you have Motion Icons React working, explore more features:

<CardGroup cols={2}>
  <Card title="Animation Types" icon="play" href="/essentials/animations">
    Discover all 10+ available animations and entrance effects
  </Card>

  <Card title="Props Reference" icon="settings" href="/api-reference/props">
    Learn about all available props and customization options
  </Card>

  <Card title="Examples" icon="code" href="/essentials/examples">
    See real-world examples and common patterns
  </Card>

  <Card title="Accessibility" icon="universal-access" href="/essentials/accessibility">
    Learn about accessibility features and best practices
  </Card>
</CardGroup>

## Common Issues

<AccordionGroup>
  <Accordion icon="exclamation-triangle" title="Animations not working">
    Make sure you've imported the CSS file:

    ```tsx theme={null}
    import 'motion-icons-react/style.css';
    ```
  </Accordion>

  <Accordion icon="question-circle" title="Icon not found">
    Ensure you're using the correct Lucide icon name. Check the [Lucide icon library](https://lucide.dev/icons/) for available icons.
  </Accordion>

  <Accordion icon="info-circle" title="TypeScript errors">
    Make sure you have the latest version of TypeScript and that both packages are properly installed.
  </Accordion>
</AccordionGroup>

<Tip>
  **Pro tip:** Start with simple animations like `pulse` or `spin`, then experiment with more complex ones as you get comfortable with the library.
</Tip>