Props Reference

Complete reference for all MotionIcon component props

All props are optional except name. Defaults are subtle and production-friendly.

Props by Category

Props are organized into logical groups to reduce cognitive load:

• Core Props - Essential icon properties (name, size, color, weight)
• Animation Props - Control animations (animation, entrance, trigger)
• Timing Props - Fine-tune timing (animationDuration, animationDelay)
• Interaction Props - Handle user interaction (interactive, onClick, etc.)
• Accessibility Props - Screen reader support (aria-label, role, etc.)

Minimal Examples

Most use cases need only 1-2 props:

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

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

// Interactive hover
<MotionIcon name="ThumbsUp" interactive />

Complete Example

Here’s every prop in one place (you rarely need all of these):

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

---

Core Props

These control the basic appearance of your icon.

name

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

size

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

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

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

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

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

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

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

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

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

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

onClick · (event: MouseEvent) => void

Click event handler for the icon.

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

onMouseEnter

onMouseEnter · (event: MouseEvent) => void

Mouse enter event handler for the icon.

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

onMouseLeave

onMouseLeave · (event: MouseEvent) => void

Mouse leave event handler for the icon.

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

Accessibility Props

aria-label

aria-label · string

Accessible label for screen readers.

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

aria-hidden

aria-hidden · boolean

Whether the icon should be hidden from screen readers.

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

role

role · string

ARIA role for the icon element.

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

tabIndex

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