Skip to main content

​
Welcome to Anicon

Anicon provides 572+ animated icon components, each crafted with smooth, purposeful animations that bring your UI to life. Every icon is built as a React component with consistent props and animation behavior powered by Framer Motion.

​
What Makes Anicon Special

Smooth Animations

Every icon features thoughtfully designed animations that respond to user interactions with hover, tap, and focus states.

Fully Accessible

Respects prefers-reduced-motion settings automatically, ensuring accessibility for all users.

Consistent API

All icons share the same props interface (size, strokeWidth, className) making them easy to use and customize.

Tree-Shakeable

Import only the icons you need. Each component is independently importable for optimal bundle size.

​
Quick Start

All Anicon components follow a simple, consistent pattern: 
import { IconHeart } from "@/components/icons/icon-heart";

export default function Example() {
  return (
    <IconHeart 
      size={32} 
      strokeWidth={2}
      className="text-rose-500"
    />
  );
}
Here are some of the most commonly used icons across different categories:

​
Actions & Navigation

IconHome

Home icon with playful roof lift and door bounce

IconSearch

Magnifying glass with zoom pulse animation

IconSettings

Gear rotating 45 degrees on hover

IconMenu

Menu icon with staggered line slides

IconArrowRight

Arrow with hover slide and tap animation

IconChevronDown

Chevron with collapse/expand animation

​
Essential Actions

IconCheck

Checkmark with stroke draw animation

IconX

X mark with 90-degree rotation

IconPlus

Plus sign with scale and rotate

IconMinus

Minus sign with contracting animation

IconEdit

Edit pencil with writing tilt motion

IconTrash

Trash can with lid lifting animation

​
Communication

IconBell

Bell with ringing shake animation

IconMail

Mail envelope with flap animation

IconSend

Send icon with flight motion

​
Files & Media

IconDownload

Download arrow with downward motion

IconUpload

Upload arrow with upward motion

IconFile

File icon with page flip animation

IconFolder

Folder with opening animation

IconPlay

Play button with scale animation

IconPause

Pause button with bar animation

​
UI Elements

IconHeart

Heart with hover and tap scale animation

IconStar

Star with sparkle and rotate animation

IconLoader

Loading spinner with continuous rotation

IconEye

Eye icon with blink animation

IconLock

Lock with secure locking animation

IconUnlock

Unlock with opening animation

​
Icon Categories

Browse all 572+ icons organized by category:
  • Actions - Common user actions like edit, delete, copy, share
  • Arrows & Directions - Navigation arrows, chevrons, and directional indicators
  • Communication - Mail, messages, notifications, and social icons
  • Files & Folders - Document and file management icons
  • Media - Play, pause, video, music, and camera controls
  • UI Elements - Hearts, stars, badges, and interface components
  • Charts & Analytics - Data visualization and dashboard icons
  • E-commerce - Shopping, payments, and retail icons
  • Tech & Development - Code, terminal, git, and developer tools
  • User & Profile - User management and profile icons
  • Alerts & Status - Warnings, errors, success, and status indicators
  • Time & Calendar - Clocks, calendars, and scheduling icons
  • Weather & Nature - Weather conditions, plants, and animals
  • Shapes & Geometry - Geometric shapes and mathematical symbols
  • Buildings & Places - Architecture and location icons

View All Categories

Explore the complete icon library organized by category with search and filtering

​
Component Architecture

Every Anicon component is built with:
  • Framer Motion - Smooth, physics-based animations
  • TypeScript - Full type safety and IntelliSense support
  • React Server Components - “use client” directive for Next.js 13+ compatibility
  • Accessibility First - Automatic prefers-reduced-motion support
  • Customizable - All standard SVG props supported

​
Performance

Anicon icons are optimized for performance:
  • Individual imports prevent bundle bloat
  • Animations use GPU-accelerated transforms
  • Reduced motion respected by default
  • Minimal runtime overhead
  • Tree-shakeable exports

​
Next Steps

Icon Categories

Browse all 572+ icons organized by category

Props Reference

Complete API documentation for icon component props

Animation Variants

Learn about animation configuration and customization

Installation

Get started with Anicon in your project

Build docs developers (and LLMs) love

Get started for freeTalk to us