Skip to main content
Hero Light

​
Welcome to Anicon

Anicon is a collection of 572+ animated icons built with Motion (formerly Framer Motion) that you can install just like shadcn/ui components. Each icon comes with smooth, delightful animations that respond to user interactions.

Installation

Get started by installing Anicon in your project

Quick Start

Add your first animated icon in under a minute

Browse Icons

Explore all 572+ animated icons in the gallery

Component API

Learn about customization options and props

​
Why Anicon?

Use the familiar shadcn CLI workflow. Icons are copied directly into your project, giving you full control and ownership of the code.
Powered by Motion (Framer Motion), the industry-standard animation library for React. Get smooth, performant animations out of the box.
Icons respect prefers-reduced-motion settings automatically, ensuring a great experience for all users.
Since icons are copied to your project, you can customize colors, sizes, animations, and behaviors however you like.
Comprehensive icon set covering common use cases, from UI elements to social media, with more added regularly.
Full TypeScript definitions with prop autocompletion and type safety.

​
Key Features

​
Delightful Animations

Every icon includes carefully crafted animations that activate on hover and tap. From subtle scale effects to playful rotations and bounces, each animation enhances the user experience without being overwhelming.

​
Motion Integration

All icons use Motion’s powerful animation primitives:
  • whileHover for hover interactions
  • whileTap for click/tap feedback
  • Custom animation variants for complex effects
  • Automatic reduced motion support

​
shadcn-style Installation

Install individual icons using the shadcn CLI: 
pnpm dlx shadcn@latest add https://anicon.dev/r/icon-heart.json
The CLI automatically:
  • Copies the icon component to your project
  • Installs the motion dependency if needed
  • Sets up the proper file structure

​
Full Control

Icons are installed directly in your codebase (typically in components/ui/), so you have complete control to:
  • Modify animation timings and effects
  • Change colors and styling
  • Add custom variants
  • Optimize for your specific use case

​
What’s Next?

Install Anicon

Set up Anicon in your project

Quick Start Guide

Add your first animated icon

Build docs developers (and LLMs) love

Get started for freeTalk to us