Advanced
Animated Icons
32 animated Lucide icons with entrance/exit transitions built on lucie-animated.
Animated Icons
@mks2508/mks-ui ships 32 animated Lucide icons with entrance and exit transitions, built on the lucie-animated library.
Import
// Individual icon
import { Check } from '@mks2508/mks-ui/react/icons/lucide-animated';
// All icons
import * as AnimatedIcons from '@mks2508/mks-ui/react/icons/lucide-animated';Usage
<Check className="size-5 text-emerald-400" />Icons animate on mount (entrance) and can animate on unmount (exit) when used with AnimatePresence from motion.
Available Icons
The following 32 animated icons are available:
| Icon | Import Name |
|---|---|
| Arrow Down | ArrowDown |
| Arrow Left | ArrowLeft |
| Arrow Right | ArrowRight |
| Arrow Up | ArrowUp |
| Bell | Bell |
| Bell Off | BellOff |
| Check | Check |
| Check Circle | CheckCircle |
| Chevron Down | ChevronDown |
| Chevron Left | ChevronLeft |
| Chevron Right | ChevronRight |
| Chevron Up | ChevronUp |
| Circle | Circle |
| Copy | Copy |
| Eye | Eye |
| Eye Off | EyeOff |
| Heart | Heart |
| Home | Home |
| Loader | Loader |
Mail | |
| Menu | MenuIcon |
| Moon | Moon |
| MoreVertical | MoreVertical |
| Search | Search |
| Settings | Settings |
| Star | Star |
| Sun | Sun |
| Trash | Trash |
| TrendingDown | TrendingDown |
| TrendingUp | TrendingUp |
| X | X |
| Activity | Activity |
Sizing
Icons follow the standard Lucide sizing convention:
<Check className="size-4" /> {/* 16px — inline with text */}
<Check className="size-5" /> {/* 20px — default */}
<Check className="size-6" /> {/* 24px — larger contexts */}Color
Icons inherit the current text color, or apply a specific color class:
<Check className="text-emerald-400" />
<X className="text-destructive" />
<Activity className="text-cyan-400" />With Buttons
<Button>
<Settings className="size-4" />
Settings
</Button>
<Button size="icon" variant="outline">
<MoreVertical className="size-4" />
</Button>Adding New Icons
Install from the lucie-animated registry:
bunx --bun shadcn@latest add @lucie-animated/check-circleThen export from the icons barrel:
// src/react-ui/icons/lucide-animated/index.ts
export * from './check-circle';