Props Reference - Motion Icon Docs

This page documents every prop you can use with the MotionIcon component. Each prop includes its type, default value, and practical examples.

Quick Reference

Here’s a complete example showing all commonly used props:

<MotionIcon
  // Required
  name="Heart"
  
  // Appearance
  size={24}
  color="red"
  weight="regular"
  className="my-icon"
  
  // Animation
  animation="heartbeat"
  entrance="zoomIn"
  trigger="hover"
  animationDuration={1000}
  animationDelay={200}
  
  // Interaction
  interactive
  onClick={handleClick}
  onMouseEnter={handleHover}
  
  // Accessibility
  aria-label="Like button"
  role="button"
  tabIndex={0}
/>

Detailed Props Documentation

Required Props

name

string

required

The name of the Lucide icon to render. Must match exactly with a Lucide icon name.

<MotionIcon name="Heart" />
<MotionIcon name="Star" />
<MotionIcon name="Settings" />
<MotionIcon name="AlertTriangle" />

Important notes:

Icon names are case-sensitive (use “Heart”, not “heart”)
Must match exact Lucide icon names (use “CheckCircle”, not “CheckCircle2”)
Browse all available icons at lucide.dev/icons

Common mistakes:

// ❌ Wrong - lowercase
<MotionIcon name="heart" />

// ❌ Wrong - incorrect name
<MotionIcon name="check-circle" />

// ✅ Correct
<MotionIcon name="Heart" />
<MotionIcon name="CheckCircle" />

Appearance Props

size

number

default:"24"

The size of the icon in pixels. Applied to both width and height.

<MotionIcon name="Heart" size={16} />  {/* Small */}
<MotionIcon name="Heart" size={24} />  {/* Default */}
<MotionIcon name="Heart" size={32} />  {/* Large */}
<MotionIcon name="Heart" size={48} />  {/* Extra large */}

color

string

default:"currentColor"

The color of the icon. Accepts any valid CSS color value.

<MotionIcon name="Heart" color="red" />
<MotionIcon name="Heart" color="#ff0000" />
<MotionIcon name="Heart" color="rgb(255, 0, 0)" />
<MotionIcon name="Heart" color="hsl(0, 100%, 50%)" />

weight

'light' | 'regular' | 'bold'

default:"regular"

The stroke weight of the icon.

<MotionIcon name="Heart" weight="light" />
<MotionIcon name="Heart" weight="regular" />
<MotionIcon name="Heart" weight="bold" />

className

string

default:""

Additional CSS classes to apply to the icon element.

<MotionIcon 
  name="Heart" 
  className="text-red-500 hover:text-red-600" 
/>

Animation Props

animation

AnimationType

default:"none"

The main animation to apply to the icon.

Available animation types:

"none" - No animation
"pulse" - Gentle pulsing effect
"spin" - Continuous rotation
"bounce" - Bouncing motion
"ping" - Radar-like ping effect
"wiggle" - Side-to-side wiggle
"flip" - 3D flip animation
"heartbeat" - Heart-like beating
"shake" - Shake effect
"swing" - Pendulum swing
"tada" - Celebration animation
"rubber" - Rubber band effect

<MotionIcon name="Heart" animation="pulse" />
<MotionIcon name="Loader2" animation="spin" />
<MotionIcon name="Bell" animation="wiggle" />

entrance

EntranceAnimationType | null

default:"null"

The entrance animation to play when the component mounts.

Available entrance animations:

"fadeIn" - Fade in from transparent
"fadeInUp" - Fade in from bottom
"fadeInDown" - Fade in from top
"fadeInLeft" - Fade in from left
"fadeInRight" - Fade in from right
"scaleIn" - Scale up from center
"slideInUp" - Slide in from bottom
"slideInDown" - Slide in from top
"rotateIn" - Rotate while fading in
"zoomIn" - Zoom in with scale

<MotionIcon name="Star" entrance="zoomIn" />
<MotionIcon name="ArrowUp" entrance="fadeInUp" />
<MotionIcon name="Heart" entrance="scaleIn" animation="pulse" />

trigger

'always' | 'hover' | 'click' | 'focus'

default:"always"

When the main animation should be triggered.

<MotionIcon name="Heart" animation="pulse" trigger="always" />
<MotionIcon name="Heart" animation="heartbeat" trigger="hover" />
<MotionIcon name="Bell" animation="shake" trigger="click" />
<MotionIcon name="Search" animation="pulse" trigger="focus" />

animationDuration

number

default:"1000"

The duration of the animation in milliseconds.

<MotionIcon name="Heart" animation="pulse" animationDuration={500} />   {/* Fast */}
<MotionIcon name="Heart" animation="pulse" animationDuration={2000} />  {/* Slow */}

animationDelay

number

default:"0"

The delay before the animation starts in milliseconds.

<MotionIcon name="Star" animation="bounce" animationDelay={200} />
<MotionIcon name="Heart" entrance="fadeIn" animationDelay={500} />

Interaction Props

interactive

boolean

default:"false"

Whether the icon should be interactive (focusable and respond to keyboard events).

<MotionIcon 
  name="Heart" 
  interactive 
  animation="heartbeat" 
  trigger="hover" 
/>

onClick

(event: MouseEvent) => void

Click event handler for the icon.

<MotionIcon 
  name="Heart" 
  onClick={() => console.log('Icon clicked!')} 
/>

onMouseEnter

(event: MouseEvent) => void

Mouse enter event handler for the icon.

<MotionIcon 
  name="Heart" 
  onMouseEnter={() => console.log('Mouse entered!')} 
/>

onMouseLeave

(event: MouseEvent) => void

Mouse leave event handler for the icon.

<MotionIcon 
  name="Heart" 
  onMouseLeave={() => console.log('Mouse left!')} 
/>

Accessibility Props

aria-label

string

Accessible label for screen readers.

<MotionIcon 
  name="Heart" 
  aria-label="Add to favorites" 
/>

aria-hidden

boolean

Whether the icon should be hidden from screen readers.

<MotionIcon 
  name="Star" 
  aria-hidden={true}  // Decorative icon
/>

role

string

ARIA role for the icon element.

<MotionIcon 
  name="Loader2" 
  animation="spin" 
  role="status" 
  aria-label="Loading"
/>

tabIndex

number

Tab index for keyboard navigation.

<MotionIcon 
  name="Settings" 
  interactive 
  tabIndex={0} 
/>

Complete Example

Here’s an example using multiple props together:

<MotionIcon
  name="Heart"
  size={32}
  color="red"
  weight="bold"
  animation="heartbeat"
  entrance="zoomIn"
  trigger="hover"
  animationDuration={800}
  animationDelay={200}
  interactive
  className="cursor-pointer hover:scale-110 transition-transform"
  onClick={handleLike}
  onMouseEnter={handleMouseEnter}
  aria-label="Add to favorites"
  role="button"
  tabIndex={0}
/>

TypeScript Support

All props are fully typed for TypeScript users:

import { MotionIcon, type MotionIconProps } from 'motion-icons-react';

// Props are fully typed
const iconProps: MotionIconProps = {
  name: "Heart",           // ✅ Valid icon name
  animation: "pulse",      // ✅ Valid animation
  size: 24,               // ✅ Number
  color: "red",           // ✅ String
  // name: "InvalidIcon"   // ❌ TypeScript error
};

function MyIcon(props: MotionIconProps) {
  return <MotionIcon {...props} />;
}

Default Values Summary

Prop	Default Value
`size`	`24`
`color`	`"currentColor"`
`weight`	`"regular"`
`animation`	`"none"`
`entrance`	`null`
`trigger`	`"always"`
`interactive`	`false`
`animationDuration`	`1000`
`animationDelay`	`0`
`className`	`""`

Components

​Quick Reference

​Detailed Props Documentation

​Required Props

​name

​Appearance Props

​size

​color

​weight

​className

​Animation Props

​animation

​entrance

​trigger

​animationDuration

​animationDelay

​Interaction Props

​interactive

​onClick

​onMouseEnter

​onMouseLeave

​Accessibility Props

​aria-label

​aria-hidden

​role

​tabIndex

​Complete Example

​TypeScript Support

​Default Values Summary

Quick Reference

Detailed Props Documentation

Required Props

name

Appearance Props

size

color

weight

className

Animation Props

animation

entrance

trigger

animationDuration

animationDelay

Interaction Props

interactive

onClick

onMouseEnter

onMouseLeave

Accessibility Props

aria-label

aria-hidden

role

tabIndex

Complete Example

TypeScript Support

Default Values Summary