Examples

Explore practical examples of how to use Motion Icons React in your applications.

Loading States

Basic Loading Spinner

import { MotionIcon } from 'motion-icons-react';

function LoadingSpinner() {
  return (
    <div className="flex items-center gap-2">
      <MotionIcon
        name="Loader2"
        animation="spin"
        size={20}
        className="text-blue-500"
      />
      <span>Loading...</span>
    </div>
  );
}

Button with Loading State

import { useState } from 'react';
import { MotionIcon } from 'motion-icons-react';

function SubmitButton() {
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async () => {
    setIsLoading(true);
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 2000));
    setIsLoading(false);
  };

  return (
    <button
      onClick={handleSubmit}
      disabled={isLoading}
      className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded"
    >
      {isLoading ? (
        <MotionIcon name="Loader2" animation="spin" size={16} />
      ) : (
        <MotionIcon name="Send" size={16} />
      )}
      {isLoading ? 'Submitting...' : 'Submit'}
    </button>
  );
}

Interactive Elements

Like Button with Animation

import { useState } from 'react';
import { MotionIcon } from 'motion-icons-react';

function LikeButton() {
  const [isLiked, setIsLiked] = useState(false);

  return (
    <button
      onClick={() => setIsLiked(!isLiked)}
      className={`p-2 rounded-full transition-colors ${
        isLiked ? 'text-red-500' : 'text-gray-400 hover:text-red-400'
      }`}
    >
      <MotionIcon
        name={isLiked ? "Heart" : "Heart"}
        animation={isLiked ? "heartbeat" : "none"}
        trigger="always"
        size={24}
        className={isLiked ? "fill-current" : ""}
      />
    </button>
  );
}

Hover Effects

function NavigationItem({ icon, label, href }) {
  return (
    <a
      href={href}
      className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-100 transition-colors"
    >
      <MotionIcon
        name={icon}
        animation="bounce"
        trigger="hover"
        size={20}
        className="text-blue-500"
      />
      <span>{label}</span>
    </a>
  );
}

// Usage
<NavigationItem icon="Home" label="Dashboard" href="/dashboard" />
<NavigationItem icon="Users" label="Users" href="/users" />
<NavigationItem icon="Settings" label="Settings" href="/settings" />

Notifications and Alerts

Notification Badge

function NotificationBell({ hasNotifications = false }) {
  return (
    <div className="relative">
      <MotionIcon
        name="Bell"
        animation={hasNotifications ? "wiggle" : "none"}
        trigger="always"
        interactive
        size={24}
        className="text-gray-600 cursor-pointer"
        onClick={() => console.log('Notifications clicked')}
      />
      {hasNotifications && (
        <div className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full">
          <MotionIcon
            name="Circle"
            animation="ping"
            size={12}
            className="text-red-500"
          />
        </div>
      )}
    </div>
  );
}

Success Message

function SuccessMessage({ message }) {
  return (
    <div className="flex items-center gap-3 p-4 bg-blue-50 border border-blue-200 rounded-lg">
      <MotionIcon
        name="CheckCircle"
        entrance="zoomIn"
        animation="tada"
        size={24}
        className="text-blue-500"
      />
      <span className="text-blue-800">{message}</span>
    </div>
  );
}

Error Alert

function ErrorAlert({ message }) {
  return (
    <div className="flex items-center gap-3 p-4 bg-red-50 border border-red-200 rounded-lg">
      <MotionIcon
        name="AlertTriangle"
        animation="shake"
        trigger="always"
        size={24}
        className="text-red-500"
      />
      <span className="text-red-800">{message}</span>
    </div>
  );
}

Form Elements

Search Input with Animation

import { useState } from 'react';

function SearchInput() {
  const [isSearching, setIsSearching] = useState(false);
  const [query, setQuery] = useState('');

  const handleSearch = async (value) => {
    setQuery(value);
    if (value.length > 2) {
      setIsSearching(true);
      // Simulate search
      await new Promise(resolve => setTimeout(resolve, 1000));
      setIsSearching(false);
    }
  };

  return (
    <div className="relative">
      <input
        type="text"
        placeholder="Search..."
        value={query}
        onChange={(e) => handleSearch(e.target.value)}
        className="pl-10 pr-4 py-2 border rounded-lg w-full"
      />
      <div className="absolute left-3 top-1/2 transform -translate-y-1/2">
        <MotionIcon
          name={isSearching ? "Loader2" : "Search"}
          animation={isSearching ? "spin" : "none"}
          size={16}
          className="text-gray-400"
        />
      </div>
    </div>
  );
}

Toggle Switch

import { useState } from 'react';

function ToggleSwitch({ label, defaultChecked = false }) {
  const [isChecked, setIsChecked] = useState(defaultChecked);

  return (
    <label className="flex items-center gap-3 cursor-pointer">
      <div className="relative">
        <input
          type="checkbox"
          checked={isChecked}
          onChange={(e) => setIsChecked(e.target.checked)}
          className="sr-only"
        />
        <div className={`w-12 h-6 rounded-full transition-colors ${
          isChecked ? 'bg-blue-500' : 'bg-gray-300'
        }`}>
          <div className={`w-5 h-5 bg-white rounded-full shadow transform transition-transform ${
            isChecked ? 'translate-x-6' : 'translate-x-0.5'
          } mt-0.5`}>
            <MotionIcon
              name={isChecked ? "Check" : "X"}
              animation="flip"
              trigger="always"
              size={12}
              className={`mt-0.5 ml-0.5 ${isChecked ? 'text-blue-500' : 'text-gray-400'}`}
            />
          </div>
        </div>
      </div>
      <span>{label}</span>
    </label>
  );
}

Status Indicators

Connection Status

function ConnectionStatus({ isConnected }) {
  return (
    <div className="flex items-center gap-2">
      <MotionIcon
        name="Wifi"
        animation={isConnected ? "ping" : "none"}
        size={16}
        className={isConnected ? "text-blue-500" : "text-red-500"}
      />
      <span className={isConnected ? "text-blue-700" : "text-red-700"}>
        {isConnected ? "Connected" : "Disconnected"}
      </span>
    </div>
  );
}

Live Indicator

function LiveIndicator() {
  return (
    <div className="flex items-center gap-2">
      <MotionIcon
        name="Circle"
        animation="pulse"
        size={8}
        className="text-red-500 fill-current"
      />
      <span className="text-sm font-medium text-red-600">LIVE</span>
    </div>
  );
}

import { useState } from 'react';

function MobileMenu() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="p-2 rounded-lg hover:bg-gray-100"
      >
        <MotionIcon
          name={isOpen ? "X" : "Menu"}
          animation="flip"
          trigger="always"
          size={24}
        />
      </button>
      
      {isOpen && (
        <div className="mt-2 p-4 bg-white border rounded-lg shadow-lg">
          <nav className="space-y-2">
            <a href="#" className="block p-2 hover:bg-gray-50 rounded">
              <MotionIcon name="Home" entrance="fadeInLeft" size={16} className="inline mr-2" />
              Home
            </a>
            <a href="#" className="block p-2 hover:bg-gray-50 rounded">
              <MotionIcon name="User" entrance="fadeInLeft" size={16} className="inline mr-2" />
              Profile
            </a>
            <a href="#" className="block p-2 hover:bg-gray-50 rounded">
              <MotionIcon name="Settings" entrance="fadeInLeft" size={16} className="inline mr-2" />
              Settings
            </a>
          </nav>
        </div>
      )}
    </div>
  );
}

Data Visualization

Progress Indicator

function ProgressStep({ step, currentStep, label }) {
  const isActive = step === currentStep;
  const isCompleted = step < currentStep;

  return (
    <div className="flex items-center gap-2">
      <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
        isCompleted ? 'bg-blue-500' : isActive ? 'bg-blue-600' : 'bg-gray-300'
      }`}>
        {isCompleted ? (
          <MotionIcon
            name="Check"
            entrance="zoomIn"
            size={16}
            className="text-white"
          />
        ) : (
          <MotionIcon
            name="Circle"
            animation={isActive ? "pulse" : "none"}
            size={16}
            className="text-white fill-current"
          />
        )}
      </div>
      <span className={isActive ? "font-medium" : ""}>{label}</span>
    </div>
  );
}

These examples demonstrate the versatility of Motion Icons React across different UI patterns. Each example can be customized further with different animations, colors, and styling to match your application’s design system.

Remember: Always consider the user experience when adding animations. Subtle animations often work better than dramatic ones for everyday interactions.

Getting Started

Essentials

Resources

Loading States

Basic Loading Spinner

Button with Loading State

Interactive Elements

Like Button with Animation

Hover Effects

Notifications and Alerts

Notification Badge

Success Message

Error Alert

Form Elements

Search Input with Animation

Toggle Switch

Status Indicators

Connection Status

Live Indicator

Navigation and Menus

Animated Menu Toggle

Data Visualization

Progress Indicator

​Loading States

​Basic Loading Spinner

​Button with Loading State

​Interactive Elements

​Like Button with Animation

​Hover Effects

​Notifications and Alerts

​Notification Badge

​Success Message

​Error Alert

​Form Elements

​Search Input with Animation

​Toggle Switch

​Status Indicators

​Connection Status

​Live Indicator

​Navigation and Menus

​Animated Menu Toggle

​Data Visualization

​Progress Indicator

Loading States

Basic Loading Spinner

Button with Loading State

Interactive Elements

Like Button with Animation

Hover Effects

Notifications and Alerts

Notification Badge

Success Message

Error Alert

Form Elements

Search Input with Animation

Toggle Switch

Status Indicators

Connection Status

Live Indicator

Navigation and Menus

Animated Menu Toggle

Data Visualization

Progress Indicator