animity

Tiny animations, huge impact. Free animated SVG icons built with Framer Motion.

A comprehensive collection of 380+ beautifully animated SVG icons built with React and Framer Motion. Perfect for modern web applications that need smooth, performant animations with minimal bundle impact.

✨ Features

• 🎨 380+ Animated Icons - Comprehensive collection covering all use cases
• ⚡ Framer Motion Powered - Smooth, performant animations with spring physics
• 📱 React Ready - Built for React 16.8+ with full TypeScript support
• 🎯 Tree Shakeable - Import only the icons you need, zero bundle bloat
• 🎨 Highly Customizable - Easy to customize size, color, stroke, and animation behavior
• 📦 Lightweight - Optimized bundle size with efficient SVG rendering
• 🔧 TypeScript First - Full TypeScript support with comprehensive type definitions
• ♿ Accessible - Built with accessibility in mind, includes ARIA labels and keyboard support
• 🎭 Animation Control - External animation control with hover disable options
• 🌈 Theme Ready - Works seamlessly with CSS variables and theme systems

📦 Installation

npm install animity
# or
yarn add animity
# or
pnpm add animity

Peer Dependencies

Make sure you have the required peer dependencies installed:

npm install react react-dom framer-motion

Minimum versions:

• React: >=16.8.0
• React DOM: >=16.8.0
• Framer Motion: >=6.0.0

🚀 Quick Start

import React from "react";
import { LoveIcon, StarIcon, RocketIcon, HoverWrapper } from "animity";

function App() {
  return (
    <div className="flex gap-4 items-center">
      <LoveIcon size={32} stroke="#ff6b6b" />
      <StarIcon size={24} className="text-yellow-500" />
      <RocketIcon size={48} stroke="#3b82f6" />

      {/* Group hover effect */}
      <HoverWrapper className="flex gap-2 p-2 rounded-lg bg-gray-100">
        <LoveIcon size={20} />
        <StarIcon size={20} />
        <RocketIcon size={20} />
      </HoverWrapper>
    </div>
  );
}

📖 Usage

Basic Usage

import { HomeIcon, UserIcon, SettingsIcon } from "animity";

function Navigation() {
  return (
    <nav className="flex gap-4">
      <HomeIcon size={20} />
      <UserIcon size={20} />
      <SettingsIcon size={20} />
    </nav>
  );
}

Customization

All icons accept standard SVG props and custom props:

import { LoveIcon } from "animity";

function CustomIcon() {
  return (
    <LoveIcon
      size={32} // Size in pixels
      stroke="#ff6b6b" // Color
      strokeWidth={2} // Stroke width
      className="my-custom-class" // CSS classes
      style={{ opacity: 0.8 }} // Inline styles
    />
  );
}

With Tailwind CSS

import { SearchIcon } from "animity";

function SearchButton() {
  return (
    <button className="flex items-center gap-2 p-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors">
      <SearchIcon size={20} />
      Search
    </button>
  );
}

Animation Control

import { motion } from "framer-motion";
import { LoveIcon } from "animity";

function AnimatedHeart() {
  return (
    <motion.div
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
      className="cursor-pointer"
    >
      <LoveIcon size={24} />
    </motion.div>
  );
}

External Animation Control

import { useState } from "react";
import { LoveIcon } from "animity";

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

  return (
    <button onClick={() => setIsLiked(!isLiked)}>
      <LoveIcon
        size={32}
        isAnimated={isLiked}
        disableHover={true}
        stroke={isLiked ? "#ff6b6b" : "#gray"}
      />
    </button>
  );
}

Group Hover Effects

Using HoverWrapper Component

The HoverWrapper component automatically handles group animations by detecting animated icon components and controlling their animation state:

import { HoverWrapper } from "animity";
import { LoveIcon, StarIcon, RocketIcon } from "animity";

function IconGroup() {
  return (
    <HoverWrapper className="flex gap-4 p-4 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors">
      <LoveIcon size={24} />
      <StarIcon size={24} />
      <RocketIcon size={24} />
    </HoverWrapper>
  );
}

Manual Group Control

import { useState } from "react";
import { LoveIcon, StarIcon, RocketIcon } from "animity";

function ManualIconGroup() {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className="flex gap-4 p-4 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <LoveIcon size={24} isAnimated={isHovered} disableHover={true} />
      <StarIcon size={24} isAnimated={isHovered} disableHover={true} />
      <RocketIcon size={24} isAnimated={isHovered} disableHover={true} />
    </div>
  );
}

CSS-Based Group Hover

import { LoveIcon, StarIcon, RocketIcon } from "animity";

function CSSIconGroup() {
  return (
    <div className="group flex gap-4 p-4 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors">
      <LoveIcon size={24} disableHover={true} />
      <StarIcon size={24} disableHover={true} />
      <RocketIcon size={24} disableHover={true} />

      <style jsx>{`
        .group:hover .group > * {
          animation-play-state: running;
        }
      `}</style>
    </div>
  );
}

Advanced Group Animations

import { motion } from "framer-motion";
import { HoverWrapper } from "animity";
import { LoveIcon, StarIcon, RocketIcon } from "animity";

function AdvancedIconGroup() {
  return (
    <motion.div whileHover={{ scale: 1.05 }} transition={{ duration: 0.2 }}>
      <HoverWrapper
        className="flex gap-4 p-6 rounded-xl bg-gradient-to-r from-purple-100 to-pink-100 hover:from-purple-200 hover:to-pink-200 transition-all duration-300"
        onClick={() => console.log("Group clicked!")}
      >
        <div className="flex flex-col items-center gap-2">
          <LoveIcon size={32} />
          <span className="text-sm font-medium">Love</span>
        </div>
        <div className="flex flex-col items-center gap-2">
          <StarIcon size={32} />
          <span className="text-sm font-medium">Star</span>
        </div>
        <div className="flex flex-col items-center gap-2">
          <RocketIcon size={32} />
          <span className="text-sm font-medium">Rocket</span>
        </div>
      </HoverWrapper>
    </motion.div>
  );
}

🎨 Available Icons

Categories

• 🎯 UI Icons: Buttons, inputs, navigation elements (HomeIcon, MenuIcon, SettingsIcon)
• 🎵 Media Icons: Play, pause, volume, camera (PlayIcon, PauseIcon, VolumeIcon, CameraIcon)
• 💬 Communication: Mail, phone, chat, notifications (MailIcon, PhoneIcon, MessageCircleIcon)
• 📊 Business: Charts, analytics, finance, productivity (ChartBarIcon, PieChartIcon, DollarSignIcon)
• 💻 Technology: Code, database, server, cloud (CodeIcon, DatabaseIcon, ServerIcon, CloudIcon)
• 🌤️ Weather: Sun, rain, snow, wind (SunIcon, CloudRainIcon, SnowflakeIcon, WindIcon)
• 🏥 Health: Medical, fitness, wellness (StethoscopeIcon, SyringeIcon, HeartIcon)
• 🎓 Education: School, book, graduation (SchoolIcon, BookIcon, AwardIcon)
• 🎮 Entertainment: Music, games, movies (MusicIcon, Gamepad2Icon, FilmIcon)
• 🚗 Transportation: Car, plane, train, bike (CarIcon, PlaneIcon, TrainFrontIcon)
• 🍽️ Food: Restaurant, coffee, utensils (CoffeeIcon, UtensilsIcon, RestaurantIcon)
• ⚽ Sports: Football, basketball, tennis (TrophyIcon, TargetIcon)
• 🔧 Misc: Various utility and decorative icons (WrenchIcon, PaletteIcon, SparklesIcon)

Popular Icons

// Essential UI
import {
  HomeIcon,
  SearchIcon,
  MenuIcon,
  SettingsIcon,
  UserIcon,
} from "animity";

// Social & Media
import { LoveIcon, StarIcon, ShareIcon, HeartIcon } from "animity";

// Actions & Navigation
import {
  ArrowUpIcon,
  ArrowDownIcon,
  ArrowLeftIcon,
  ArrowRightIcon,
} from "animity";

// Status & Feedback
import { CheckIcon, XIcon, AlertIcon, InfoIcon } from "animity";

// Technology
import { CodeIcon, DatabaseIcon, ServerIcon, CloudIcon } from "animity";

🔧 API Reference

HoverWrapper Component

The HoverWrapper component automatically detects and controls animated icon components within its children, providing seamless group hover effects.

HoverWrapper Props

| Prop | Type | Default | Description | | ----------- | --------------------- | ------- | ---------------------------------------------- | | children | React.ReactNode | - | Child components (icons will be auto-detected) | | className | string | "" | CSS class names | | style | React.CSSProperties | - | Inline styles | | onClick | () => void | - | Click handler | | disabled | boolean | false | Disable hover interactions |

Usage Examples

import { HoverWrapper } from "animity";
import { LoveIcon, StarIcon, RocketIcon } from "animity";

// Basic usage
function BasicGroup() {
  return (
    <HoverWrapper className="flex gap-4 p-4 rounded-lg bg-gray-100">
      <LoveIcon size={24} />
      <StarIcon size={24} />
      <RocketIcon size={24} />
    </HoverWrapper>
  );
}

// With click handler
function ClickableGroup() {
  return (
    <HoverWrapper
      className="flex gap-4 p-4 rounded-lg bg-blue-100 hover:bg-blue-200 transition-colors"
      onClick={() => console.log("Group clicked!")}
    >
      <LoveIcon size={24} />
      <StarIcon size={24} />
      <RocketIcon size={24} />
    </HoverWrapper>
  );
}

// Disabled state
function DisabledGroup() {
  return (
    <HoverWrapper
      className="flex gap-4 p-4 rounded-lg bg-gray-100 opacity-50"
      disabled={true}
    >
      <LoveIcon size={24} />
      <StarIcon size={24} />
      <RocketIcon size={24} />
    </HoverWrapper>
  );
}

How HoverWrapper Works

The HoverWrapper component:

1. Auto-detects animated icon components in its children tree
2. Injects isAnimated and disableHover props automatically
3. Controls animation state based on hover events
4. Supports nested components and complex layouts
5. Maintains all original props and functionality

// HoverWrapper automatically transforms this:
<HoverWrapper>
  <LoveIcon size={24} />
</HoverWrapper>

// Into this internally:
<LoveIcon size={24} isAnimated={isHovered} disableHover={true} />

Icon Props

All icons extend the standard SVG element props and include:

| Prop | Type | Default | Description | | -------------- | --------------------- | -------------- | ------------------------------------ | | size | number \| string | 24 | Icon size in pixels | | stroke | string | currentColor | Icon color (stroke) | | strokeWidth | number | 1.5 | Stroke width | | className | string | - | CSS class names | | style | React.CSSProperties | - | Inline styles | | isAnimated | boolean | false | External control for animation state | | disableHover | boolean | false | Disable internal hover behavior |

TypeScript Support

import { AnimatedIconProps } from "animity";

interface CustomIconProps extends AnimatedIconProps {
  variant?: "filled" | "outlined";
  glowColor?: string;
}

function CustomIcon({
  variant = "outlined",
  glowColor,
  ...props
}: CustomIconProps) {
  return (
    <div
      style={{
        filter: glowColor ? `drop-shadow(0 0 8px ${glowColor})` : undefined,
      }}
    >
      <LoveIcon {...props} />
    </div>
  );
}

Animation Variants

Each icon includes carefully crafted animation variants:

// Example animation structure
const iconVariants = {
  normal: {
    scale: 1,
    rotate: 0,
    opacity: 1,
    transition: { duration: 0.5, ease: "easeInOut" },
  },
  animate: {
    scale: [1, 1.2, 0.9, 1.1, 1],
    rotate: [0, 5, -3, 0],
    opacity: [1, 0.8, 1],
    transition: { duration: 0.7, times: [0, 0.3, 0.7, 1] },
  },
};

💡 Real-World Examples

Navigation Menu

import { HoverWrapper } from "animity";
import { HomeIcon, UserIcon, SettingsIcon, SearchIcon } from "animity";

function NavigationMenu() {
  const menuItems = [
    { icon: HomeIcon, label: "Home", href: "/" },
    { icon: UserIcon, label: "Profile", href: "/profile" },
    { icon: SettingsIcon, label: "Settings", href: "/settings" },
    { icon: SearchIcon, label: "Search", href: "/search" },
  ];

  return (
    <nav className="flex gap-2">
      {menuItems.map(({ icon: Icon, label, href }) => (
        <HoverWrapper key={href}>
          <a
            href={href}
            className="flex flex-col items-center gap-1 p-3 rounded-lg hover:bg-gray-100 transition-colors"
          >
            <Icon size={20} />
            <span className="text-xs font-medium">{label}</span>
          </a>
        </HoverWrapper>
      ))}
    </nav>
  );
}

Action Buttons

import { HoverWrapper } from "animity";
import { LoveIcon, ShareIcon, DownloadIcon } from "animity";

function ActionButtons() {
  return (
    <div className="flex gap-2">
      <HoverWrapper>
        <button className="flex items-center gap-2 px-4 py-2 rounded-lg bg-red-100 text-red-700 hover:bg-red-200 transition-colors">
          <LoveIcon size={16} />
          Like
        </button>
      </HoverWrapper>

      <HoverWrapper>
        <button className="flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-100 text-blue-700 hover:bg-blue-200 transition-colors">
          <ShareIcon size={16} />
          Share
        </button>
      </HoverWrapper>

      <HoverWrapper>
        <button className="flex items-center gap-2 px-4 py-2 rounded-lg bg-green-100 text-green-700 hover:bg-green-200 transition-colors">
          <DownloadIcon size={16} />
          Download
        </button>
      </HoverWrapper>
    </div>
  );
}

Card with Interactive Icons

import { HoverWrapper } from "animity";
import { LoveIcon, StarIcon, EyeIcon, ShareIcon } from "animity";

function InteractiveCard() {
  return (
    <div className="max-w-sm rounded-xl bg-white shadow-lg overflow-hidden">
      <div className="p-6">
        <h3 className="text-lg font-semibold mb-2">Beautiful Design</h3>
        <p className="text-gray-600 mb-4">
          A stunning example of modern UI design.
        </p>

        <HoverWrapper className="flex justify-between items-center">
          <div className="flex gap-3">
            <LoveIcon size={20} />
            <StarIcon size={20} />
            <EyeIcon size={20} />
          </div>
          <ShareIcon size={20} />
        </HoverWrapper>
      </div>
    </div>
  );
}

Status Indicators

import { useState } from "react";
import { CheckIcon, XIcon, AlertIcon, InfoIcon } from "animity";

function StatusIndicators() {
  const [status, setStatus] = useState<
    "success" | "error" | "warning" | "info"
  >("success");

  const statusConfig = {
    success: { icon: CheckIcon, color: "text-green-600", bg: "bg-green-100" },
    error: { icon: XIcon, color: "text-red-600", bg: "bg-red-100" },
    warning: { icon: AlertIcon, color: "text-yellow-600", bg: "bg-yellow-100" },
    info: { icon: InfoIcon, color: "text-blue-600", bg: "bg-blue-100" },
  };

  const { icon: Icon, color, bg } = statusConfig[status];

  return (
    <div className="flex gap-2">
      {Object.keys(statusConfig).map((key) => {
        const config = statusConfig[key as keyof typeof statusConfig];
        const StatusIcon = config.icon;

        return (
          <button
            key={key}
            onClick={() => setStatus(key as any)}
            className={`p-2 rounded-lg transition-colors ${
              status === key ? config.bg : "bg-gray-100"
            }`}
          >
            <StatusIcon
              size={20}
              className={status === key ? config.color : "text-gray-500"}
              isAnimated={status === key}
              disableHover={true}
            />
          </button>
        );
      })}
    </div>
  );
}

🎨 Styling & Theming

CSS Variables

:root {
  --icon-color: currentColor;
  --icon-size: 24px;
  --icon-stroke-width: 1.5;
}

.custom-icon {
  color: var(--icon-color);
  width: var(--icon-size);
  height: var(--icon-size);
}

Dark Mode Support

import { SunIcon, MoonIcon } from "animity";

function ThemeToggle() {
  const [isDark, setIsDark] = useState(false);

  return (
    <button onClick={() => setIsDark(!isDark)}>
      {isDark ? <SunIcon size={20} /> : <MoonIcon size={20} />}
    </button>
  );
}

Custom Animations

import { motion } from "framer-motion";
import { RocketIcon } from "animity";

function CustomRocket() {
  return (
    <motion.div
      animate={{
        y: [0, -10, 0],
        rotate: [0, 5, -5, 0],
      }}
      transition={{
        duration: 2,
        repeat: Infinity,
        ease: "easeInOut",
      }}
    >
      <RocketIcon size={32} />
    </motion.div>
  );
}

📱 Responsive Design

import { HomeIcon } from "animity";

function ResponsiveIcon() {
  return (
    <HomeIcon
      size="clamp(16px, 4vw, 32px)"
      className="w-6 h-6 md:w-8 md:h-8 lg:w-10 lg:h-10"
    />
  );
}

♿ Accessibility

All icons are built with accessibility in mind:

import { SearchIcon } from "animity";

function AccessibleSearch() {
  return (
    <button aria-label="Search">
      <SearchIcon size={20} role="img" aria-label="Search icon" />
    </button>
  );
}

🚀 Performance

Bundle Size Optimization

// ✅ Good - Tree shakeable imports
import { LoveIcon, StarIcon } from "animity";

// ❌ Avoid - Imports entire library
import * as Icons from "animity";

Lazy Loading

import { lazy, Suspense } from "react";

const LoveIcon = lazy(() =>
  import("animity").then((module) => ({ default: module.LoveIcon }))
);

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LoveIcon size={24} />
    </Suspense>
  );
}

🔄 Migration Guide

From Other Icon Libraries

// From Lucide React
import { Heart } from "lucide-react";
// To Animity
import { LoveIcon } from "animity";

// From Heroicons
import { HeartIcon } from "@heroicons/react/24/outline";
// To Animity
import { LoveIcon } from "animity";

🛠️ Development

Local Development

# Clone the repository
git clone https://github.com/racharya404/animity.git
cd animity

# Install dependencies
npm install

# Start development server
npm run dev

# Build package
npm run build:package

# Test package
npm run test:package

Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

MIT License - see LICENSE file for details.

Third-Party Licenses

This project includes portions derived from Lucide icons, which are licensed under the ISC License and MIT License (for portions derived from Feather). See THIRD_PARTY_LICENSES.md for complete license details.

📞 Support

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 🌐 Website: animity.rojanacharya.com
• 🐦 Twitter: @rojanacharya_

🙏 Acknowledgments

• Framer Motion for the amazing animation library
• Lucide React for icon inspiration and design patterns
• React for the component framework
• TypeScript for type safety

📊 Stats

• 380+ Icons - Comprehensive coverage
• 100% TypeScript - Full type coverage
• Zero Dependencies - Except peer dependencies
• Tree Shakeable - Import only what you need

Made with ❤️ by Rojan Acharya