LivelyIcons for VS Code
Browse, preview, and insert animated icons directly in your editor. No context switching. Just beautiful, animated icons at your fingertips.
Everything you need, in your editor
Intelligent Search
Fuzzy search across 1,300+ icons. Find what you need instantly with keyword matching and synonyms.
Visual Browser
Browse icons in a beautiful grid view. Filter by 36 categories to find the perfect icon.
Live Customization
Adjust size, stroke width, and color in real-time. Preview exactly what you'll get.
Animation Preview
See animations in action before you insert. Choose from 9 motion types and 4 trigger modes.
Smart Code Generation
Generate React, Vue, or raw SVG code. Automatically includes all your customizations.
Favorites & History
Bookmark frequently used icons. Access your recent icons for faster workflow.
Pick the perfect motion
Preview any animation style directly in VS Code. Choose from 9 motion types and see exactly how your icons will animate.
Insert code in one click
The extension generates ready-to-use code with all your customizations applied. Insert directly into your editor or copy to clipboard. Supports React, Vue, and raw SVG.
- React/JSX component with props
- Vue template with bindings
- Raw SVG with custom attributes
- Automatic import statements
- All customizations included
import { Heart } from 'livelyicons'
<Heart
size={24}
strokeWidth={2}
lively="pulse"
trigger="hover"
className="text-rose-500"
/>Ready to supercharge your workflow?
Install the VS Code extension and start using animated icons in your projects today. It's free, open-source, and takes seconds to set up.