Documentation

Installation

anicons is a free collection of animated icons. Instead of installing a package, you simply copy the code for the icons you want directly into your project.

Prerequisites

Make sure you have Motion for React installed in your project:

npm install motion

That's it! Motion is the only dependency you need.

Usage

Using anicons is simple - just copy and paste!

Step 1: Find Your Icon

Browse our icon collection on the homepage and use the search bar to find the perfect icon for your project.

Step 2: Copy the Code

Click the "Copy Code" button on any icon card. This copies the complete component code including all imports.

Step 3: Paste Into Your Project

Create a new file in your components folder (e.g., EllipsisIcon.js) and paste the code.

// components/EllipsisIcon.js
import { motion, useReducedMotion } from 'motion/react';

export function EllipsisIconSimple({
  size = 28,
  className,
  style,
}) {
  // ... rest of the code
}

Step 4: Use in Your Components

Import and use the icon anywhere in your app:

import { EllipsisIconSimple } from './components/EllipsisIcon';

function MyComponent() {
  return (
    <div>
      <EllipsisIconSimple size={32} />
    </div>
  );
}

Customization

Since you have the full source code, you can customize any icon to fit your needs:

<EllipsisIconSimple
  size={40}
  className="my-custom-class"
  style={{ color: '#0070f3' }}
  duration={1.2} // Slow down the animation
/>

Animation Speed Control

All icons accept a duration prop to control animation speed. Lower values make animations faster, higher values make them slower:

// Fast animation (0.3 seconds)
<ArrowRightIcon duration={0.3} />

// Default speed (varies by icon, typically 0.6-1.4s)
<ArrowRightIcon />

// Slow animation (2 seconds)
<ArrowRightIcon duration={2} />

// Very slow, gentle animation
<LoadingIcon looping duration={3} />

Continuous Animation (Looping)

By default, icons animate only on hover. Use the looping prop to make an icon animate continuously without requiring hover - perfect for loading indicators:

<LoadingIconSimple looping={true} />

// Great for loading states
{isLoading && <EllipsisIconSimple looping />}

Disabling Animations

Need a static icon? Use the disabled prop to completely disable animations. This is useful for print layouts, screenshots, or when you just want a static icon:

<ArrowRightIcon disabled />

// Conditional disabling
<ChevronDownIcon disabled={isPrinting} />

Parent Hover Control

When using an icon inside a button with text, you typically want the icon to animate when hovering the entire button, not just the icon itself. Use the isHovered prop with React state to control animations from a parent:

import { useState } from 'react';
import { ArrowRightIcon } from './components/ArrowRightIcon';

function MyButton() {
  const [isHovered, setIsHovered] = useState(false);
  
  return (
    <button
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      className="my-button"
    >
      Continue
      <ArrowRightIcon isHovered={isHovered} size={20} />
    </button>
  );
}

// Or with inline styles
function SubmitButton() {
  const [isHovered, setIsHovered] = useState(false);
  
  return (
    <button
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
        padding: '12px 24px',
      }}
    >
      <LoadingIcon isHovered={isHovered} size={18} />
      Submit Form
    </button>
  );
}

Props

All icons accept the following props:

Accessibility

All anicons respect the user's motion preferences. If a user has enabled reduced motion in their system settings, the animations will be disabled automatically. This is handled by Motion's useReducedMotion hook.

// This is handled automatically by Motion's useReducedMotion hook
// No additional configuration needed!

// The disabled prop also completely disables animations
<ArrowRightIcon disabled /> // Always static, regardless of settings

Common Patterns

Button with Icon and Text

One of the most common use cases is adding an animated icon to a button. Here's how to make the icon animate when hovering the button:

import { useState } from 'react';
import { ArrowRightIcon } from './components/ArrowRightIcon';

function CallToActionButton() {
  const [isHovered, setIsHovered] = useState(false);
  
  return (
    <button
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
        padding: '12px 24px',
        fontSize: '16px',
        border: 'none',
        borderRadius: '8px',
        background: '#0070f3',
        color: 'white',
        cursor: 'pointer',
      }}
    >
      Get Started
      <ArrowRightIcon isHovered={isHovered} size={20} />
    </button>
  );
}

Loading Button

Show a loading icon inside a button while an async operation is in progress:

import { LoadingIcon } from './components/LoadingIcon';

function SubmitButton({ isLoading }) {
  return (
    <button disabled={isLoading}>
      {isLoading ? (
        <>
          <LoadingIcon looping size={18} />
          Submitting...
        </>
      ) : (
        'Submit'
      )}
    </button>
  );
}

Navigation Links

Add animated chevrons or arrows to navigation links:

import { useState } from 'react';
import { ChevronRightIcon } from './components/ChevronRightIcon';

function NavLink({ href, children }) {
  const [isHovered, setIsHovered] = useState(false);
  
  return (
    <a
      href={href}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
        textDecoration: 'none',
      }}
    >
      {children}
      <ChevronRightIcon isHovered={isHovered} size={16} />
    </a>
  );
}

Why Copy & Paste?

We believe in giving you full control. By copying the source code directly:

• No dependencies: Just Motion - no extra packages to manage
• Full customization: Modify animations, colors, and behavior to match your design system
• No breaking changes: Your code stays stable even if we update icons
• Tree-shaking friendly: Only include what you actually use
• Learn by example: See how Motion animations work and create your own

Available Icons

Currently available icons:

• ArrowDownIcon - Downward arrow that bounces vertically on hover
• ArrowLeftIcon - Left arrow that moves horizontally on hover
• ArrowRightIcon - Right arrow that moves horizontally on hover
• ArrowUpIcon - Upward arrow that bounces vertically on hover
• ChevronDownIcon - Downward chevron with smooth animation on hover
• ChevronLeftIcon - Left chevron with smooth animation on hover
• ChevronRightIcon - Right chevron with smooth animation on hover
• ChevronUpIcon - Upward chevron with smooth animation on hover
• EllipsisIcon - Animated ellipsis with bouncing dots on hover
• LoadingIcon - Rotating loader, perfect for loading states
• MoonIcon - Moon icon that rotates and scales on hover
• SunIcon - Sun icon that rotates and scales on hover
• ZoomInIcon - Magnifying glass with plus that scales up on hover
• ZoomOutIcon - Magnifying glass with minus that scales down on hover
• SearchIcon - Search magnifying glass with wiggle and scale animation
• EyeIcon - Eye with blinking animation and moving pupil
• EyeClosedIcon - Closed eye with subtle bounce animation
• BitcoinIcon - Bitcoin logo with wiggle animation
• GoogleIcon - Google Chrome logo with continuous spin
• FacebookIcon - Facebook logo with wiggle animation
• FigmaIcon - Figma logo with wiggle animation
• FramerIcon - Framer logo with wiggle animation
• GithubIcon - Github Octocat with wiggle animation
• InstagramIcon - Instagram camera with wiggle animation
• LinkedinIcon - LinkedIn logo with wiggle animation
• SlackIcon - Slack hashtag with wiggle animation
• YoutubeIcon - YouTube play button with wiggle animation
• TwitchIcon - Twitch logo with wiggle animation
• XIcon - X (Twitter) logo with wiggle animation
• BarChartIcon - Bar chart with bars growing and shrinking
• BarChartDecreasingIcon - Decreasing bar chart with animated bars
• BarChartIncreasingIcon - Increasing bar chart with animated bars
• ChartCandlestickIcon - Candlestick chart with up/down movement
• ChartColumnIcon - Column chart with growing columns
• ChartColumnDecreasingIcon - Decreasing column chart
• ChartColumnIncreasingIcon - Increasing column chart
• TrendingDownIcon - Trending down arrow with movement
• TrendingUpIcon - Trending up arrow with movement
• TrendingUpDownIcon - Up and down trends with alternating movement
• ChartNoAxesColumnIncreasingIcon - Simple increasing columns
• ChartNoAxesColumnDecreasingIcon - Simple decreasing columns
• ChartPieIcon - Pie chart with rotation animation
• KanbanIcon - Kanban board columns with pulse animation
• SparklesIcon - Magical sparkles with rotating and scaling stars
• WandSparklesIcon - Magic wand with wiggling wand and twinkling sparkles
• HeartbeatIcon - Activity/heartbeat monitor with pulsing animation
• BadgeCheckIcon - Verified badge with scale and wiggle animation
• BotIcon - Bot/robot icon with antenna wiggle and body bounce
• ExternalLinkIcon - External link with diagonal arrow movement
• FlameIcon - Flame icon with flickering animation
• IncognitoIcon - Incognito/privacy icon with hat and glasses bounce
• HeartIcon - Heart with pulsing scale animation
• MessageCircleIcon - Message bubble with bounce and rotation
• MessageSquareIcon - Message square with shake animation
• RepeatIcon - Repeat/refresh icon with 360° rotation
• ScanIcon - Scan frame corners with pulsing animation
• StarIcon - Star with scale and rotation animation
• ThumbsDownIcon - Thumbs down with downward movement
• ThumbsUpIcon - Thumbs up with upward movement
• ShareIcon - Share icon with pulsing nodes

More icons coming soon! Check back regularly for updates.

Contributing

Coming soon!

License

anicons is open source and available under the MIT License.