<svg overflow="visible" xmlns="http://www.w3.org/2000/svg" width="76" height="76" viewBox="-6 -6 36 36" fill="none">
<style>
.chk { stroke-dasharray: 28; stroke-dashoffset: 28; animation: draw 0.50s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
</style>
<path class="chk" d="M4 13l5 5L20 7" stroke="#10b981" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>Related Tools
SVG Motion StudioTimeline SVG animator
SVG Animation GeneratorCSS, SMIL & GSAP
CSS Animation GeneratorKeyframe animation builder
Image to SVGVectorize PNG, JPG & WebP
CSS Loader GeneratorAnimated spinners
CSS Transform GeneratorTranslate, rotate, scale
CSS Clip-path GeneratorVisual polygon editor
Image to Base64Encode images to Data URIAnimated SVG Icons — 105+ Free CSS Animated Icon Generator
What's included
Features
About this tool
Browse 105+ Animated SVG Icons, Customize Color and Speed, Export SVG or React JSX
You want an animated checkmark for a success state, a draw-on loader that matches your brand color, or a pulsing bell for notifications — but pulling in Lottie for a 60+ KB runtime just for a few icons is overkill. Browse the library here, pick a color, and copy the self-contained SVG or React JSX with one click.
All 105+ icons use CSS @keyframes embedded directly inside a <style> block within the SVG markup — no JavaScript, no GSAP, no npm packages. A handful of animation techniques cover the whole set: outline icons like the checkmark, lock, and home use the classic stroke-dasharray/stroke-dashoffset draw-on trick, where the dash array is set to the path's approximate length so the dash offset can animate from that length down to zero, making the line appear to draw itself; filled icons like the heart and star instead animate transform: scale() keyframes for a heartbeat or pop-in bounce; looping icons like the loader and gear spin or pulse via animation: ... infinite; and multi-part icons like Close/X or Menu stagger two or three elements with different animation-delay values so the strokes draw in sequence rather than all at once. Each icon is a portable, dependency-free file: embed it as inline SVG, use it as an <img> src, or set it as a CSS background-image, and the animation plays in all three contexts in any modern browser. Icons span seven categories: Actions (checkmarks, crosses, trash), Navigation (arrows, chevrons, hamburger), Social (heart, share, thumbs), Media (play, pause, volume), UI (bell, lock, settings), Dev (code, terminal, bug), and Notification (alert, info, badge).
For each icon you can set the fill or stroke color, adjust stroke width, scale from 16px to 128px, and multiply animation speed from 0.25× (gentle) to 3× (urgent) — the speed multiplier works by dividing every base duration in the icon's keyframes by your chosen factor, so a 0.5s draw becomes 0.25s at 2× without needing separate keyframe rules. Export as raw SVG with settings baked in, a React JSX functional component with camelCase attributes (className, strokeWidth) and a named export, an HTML embed snippet, or CSS-only animation rules if you want to apply the motion to an SVG already in your codebase. Free for personal and commercial use, no attribution required.
Step by step
How to Use
- 1Browse the library and select an iconUse the category filter bar at the top to narrow the library to a specific group — Actions (checkmarks, close, edit, trash, copy, save, send), Navigation (arrows, home, menu, map pin), Social (heart, star, share, bookmark), Media (play, pause, volume, camera), UI (gear, lock, eye, loader, sun, moon, clock), Dev (code, terminal, database, bug, git-branch), or Notification (bell, alert, mail, wifi, zap). Select All to browse all 105+ icons at once. Click any icon tile to select it — the animated preview plays automatically in the enlarged panel on the right. Click Replay at any time to restart the animation from the beginning.
- 2Set the colorClick the color picker swatch below the preview to open a full color picker and choose any hex or HSL color. Or click any of the six preset swatches for a quick one-click choice — useful when you want to test a few brand colors quickly. The preview updates immediately as you change the color. The selected color is applied to both the fill and stroke of the icon in the exported code, so it matches the preview exactly.
- 3Adjust size, stroke, and speedDrag the Size slider to scale the icon from 16px (small inline icon) to 128px (large hero or loading indicator). SVG icons stay perfectly sharp at any size — no blurry upscaling. Use the Stroke slider to change line thickness for stroke-style icons: lower values (1–1.5px) suit minimal or small-size use, higher values (2.5–4px) suit bold or large-format designs. The Speed slider multiplies all animation durations: 0.25× for a very slow, calm effect, 1× for the default, 2× for snappy urgency, 3× for fast attention-grabbing motion. All sliders update the preview live.
- 4Switch the export formatIn the export panel below the preview, select the format that matches your use case. The SVG tab gives raw animated SVG markup — a self-contained file with CSS @keyframes embedded inside a <style> block. The React tab gives a complete named functional component with all SVG attributes in camelCase JSX syntax (className, strokeWidth) — ready to paste into your components folder and import. The HTML tab gives a ready-to-paste embed snippet. The CSS tab gives only the @keyframes animation rules if you want to manually apply them to an existing SVG in your codebase.
- 5Copy or downloadClick Copy to copy the selected export format to your clipboard — paste it directly into your code editor, a React component file, or an HTML document. Click Download to save the SVG file to your computer with your current color, size, stroke, and speed settings baked in. The downloaded file plays its animation when opened in any modern browser, and can be imported into Figma, Inkscape, or Adobe Illustrator. All icons are free for personal and commercial use with no attribution required.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
Yes. All exported SVG icon code is free to use in personal and commercial projects with no attribution required. The code you export is yours to use, modify, and redistribute as part of your product. There are no license fees, no restrictions on project type, and no requirement to link back to this tool.
No. Every icon uses only CSS @keyframes animations inside the SVG's <style> block — no JavaScript, no GSAP, no Lottie, no npm packages required. The SVG file is entirely self-contained. Paste the markup inline, link it as an img src, or use it as a CSS background-image and the animation works in any modern browser with zero configuration.
Switch to the React JSX export tab and click Copy. You get a complete named functional component with all SVG props in camelCase JSX syntax (className instead of class, strokeWidth instead of stroke-width). Paste the file into your components folder, import it like any other component, and render it anywhere in your app. You can customize color and size by modifying the inline style or passing props.
Yes. The Speed slider multiplies all animation durations in the exported code — values below 1× slow the animation, values above 1× speed it up. The CSS inside the SVG is updated live as you drag. You can also edit the exported code manually: find the animation-duration property in the embedded <style> block and adjust the seconds value. All duration values update proportionally based on the speed multiplier you chose.
For simple UI icons — checkmarks, loaders, arrows, notification bells — animated SVGs are better: zero runtime JavaScript, no library (Lottie is 60+ KB), one portable SVG file that works as an <img> src, inline SVG, or CSS background. Use Lottie when you need After Effects animations with masks, mattes, and complex layer blending that CSS @keyframes cannot replicate. For most app UI micro-animations, a CSS-animated SVG icon is the lighter and simpler choice.
Icons with draw or pop animations already use animation-fill-mode: forwards and animation-iteration-count: 1, so they play once and hold the final frame. For looping icons, find animation-iteration-count: infinite in the exported <style> block and change it to 1. You can also control playback via JavaScript by toggling animation-play-state: paused or by adding and removing a CSS class.
Available animations include path drawing (stroke-dashoffset draw-on), fade-in, bounce, swing, heartbeat, pop, shake, spin, flash, and fly-in effects. Different icons use different animation styles suited to their shape and context. The speed and color customization works across all animation types.
Yes. Click the Download button in the export panel to save an SVG file with your chosen color, size, stroke, and speed settings already baked in. The file is fully portable and can be opened in Figma, Adobe Illustrator, Inkscape, or any vector editor. Animations will play automatically when the file is opened in any modern browser.
SVG icons are resolution-independent — they render crisply on 4K displays and small mobile screens without multiple asset sizes. They carry semantic meaning through <title> and aria-label attributes that CSS divs cannot provide natively. A single SVG file is typically smaller than a raster icon sprite sheet. SVG stroke draw-on animations are only achievable with vector paths, making them exclusive to SVG icons.
The exported SVG markup is ready for accessibility additions. For screen reader support, add a <title> as the first child of the SVG element and reference it with aria-labelledby. For purely decorative icons, add aria-hidden="true" to tell screen readers to skip it. The React JSX export also accepts any standard aria props that you can pass to the root element.