Guides · · Maxwell Prehoda
12 Animated Icon Examples and Libraries, Sorted by What the Motion Means
An animated icon should say something a still icon cannot: that an action happened (a trash lid closes), that something needs attention (a bell wiggles), or that work is ongoing (a cog turns). Apple's SF Symbols guidelines name those jobs precisely, and they are the best test for any icon animation you are about to ship.
This list starts with the two platform systems that define the vocabulary, then the icon libraries worth installing, compared on format, license and how they trigger, then our own pure CSS icons. Every library entry was checked against its own site or README, and the demos under each entry play live.
1. Apple SF Symbols animations: Best for learning what each icon animation should mean
Platform: SF Symbols 7, Apple platforms (SwiftUI, UIKit, AppKit)
SF Symbols is Apple's set of over 7,000 symbols, and its Human Interface Guidelines define a vocabulary of animations, each with a meaning. Bounce plays once to say an action occurred. Wiggle highlights a change or a call to action people might overlook. Pulse and Variable Color vary opacity to signal ongoing activity. Breathe gives a living quality for status. Rotate confirms a task is working. Replace swaps one symbol for another, and SF Symbols 7 added Draw On and Draw Off, which trace a symbol along its path.
Even if you never build for Apple, this list is the clearest spec of icon motion there is. Before animating a web icon, ask which of these jobs it is doing.
Our Wiggle Icon below is a pure CSS take on the wiggle idea: a bell that rings only while hovered, so it never distracts at rest.
Watch out for: The symbols themselves are for Apple platform apps under Apple's terms. On the web, borrow the vocabulary and timing, not the glyphs.
2. Google Material Symbols variable font: Best for fill and weight changes on toggled icons
Platform: Variable icon font, Apache 2.0
Material Symbols ship as a variable font with axes you can animate: FILL from 0 to 1, weight (wght) from 100 to 700, grade (GRAD) from -50 to 200 and optical size (opsz) from 20 to 48. Google's guide notes that the FILL axis can convey a state transition through animation or interaction, and that the variable font is useful for animating icons with CSS.
That makes the classic toggle icons almost free: transition font-variation-settings from 'FILL' 0 to 'FILL' 1 when a bookmark, star or heart is selected, and the outline floods into a solid shape with no second icon and no SVG.
Our Bookmark Icon Fill Hover below shows the same idea with plain CSS shapes: color floods the ribbon from the top down.
Watch out for: Loading the full variable font is heavy. Use the Google Fonts API to request only the icons and axis ranges you use, or subset it yourself.
3. Lordicon: Best for marketing sites that want a big, consistent icon style
Platform: Lottie-based, web component, free and paid tiers
Lordicon is the largest library here: over 48,100 animated icons across its Wired, System and Doodle families, with more than 9,700 free and no login required to browse. Icons can play an intro, a hover, a loop or a morph state, and the editor lets you change colors, stroke, speed and size before exporting.
On the web you install @lordicon/element and use a lord-icon custom element, with integrations for React, Flutter, WordPress and Figma. Exports cover Lottie, GIF, MP4, SVG, WebP, APNG and After Effects files, which helps when the same icon has to appear in a product video.
Our Envelope Open Icon Hover below is a pure CSS example of the hover-state style these libraries sell: the flap folds open and a letter slides out.
Watch out for: Each animated icon is a Lottie file played by a runtime. A page with thirty of them pays for all thirty, so use static icons in dense UI and save animated ones for feature sections.
4. useAnimations: Best for React apps that need click-toggle icons like play and pause
Platform: React component, MIT
useAnimations is a set of 300 free animated icons with a React component, react-useanimations. The interaction prop is the reason to use it: loop, hover, hover-loop, hover-replay, click-replay or click-toggle, where an active prop sets which end state shows, so a menu, play or checkbox icon can reflect real state.
The icons are Lottie-format animations, but v3 dropped lottie-web as a dependency and renders them as SVG with a built-in player. Looping icons autoplay by default unless the user prefers reduced motion, and the license is MIT with attribution appreciated, not required.
Our Play Pause Button below is a pure CSS click-toggle: the triangle splits into the two pause bars and back, using clip-path polygons.
Watch out for: With click-toggle, keep the active prop tied to real app state. If the icon flips on click but the action fails, it now shows the wrong state.
5. lucide-animated by pqoqubbw: Best for shadcn/ui projects already using Lucide icons
Platform: React + Motion, MIT, shadcn CLI
lucide-animated takes the familiar Lucide icon set and gives hundreds of its icons hover animations, written as TypeScript React components with Motion. You add one icon at a time through the shadcn CLI (npx shadcn@latest add with the icon's URL), which drops in a single component file and installs motion if you do not have it.
Because each icon is plain code in your repo, you can tune the spring or change what moves. The GitHub project has over 8,000 stars and the README links community ports for Svelte, Vue, Angular and Flutter.
Our Spin Icon Button below is the CSS-only version of the most common Lucide-style hover: a settings cog that turns half a rotation and turns back.
Watch out for: Every icon pulls in the Motion runtime. If the rest of your app does not use Motion, a CSS transition on the SVG is lighter for simple hovers.
6. SVG Spinners by Utkarsh Verma: Best for tiny loading icons with no runtime
Platform: SVG with CSS or SMIL, MIT
A collection of 46 spinners drawn on a 24 by 24 grid so they sit next to any icon set: rings, dots, bars, blocks and pulses. Each comes in a CSS version and a SMIL version, and the files are small, from 301 bytes for the CSS pulse.
The SMIL versions animate inside the file, so they keep working when used as an img source or a CSS background. The CSS versions are easier to recolor with currentColor.
Our Circle Notch Spinner below is the same idea from our side: the circle-notch icon shape spinning fast, one SVG circle with a dash.
Watch out for: A spinner icon says "working" forever. Pair it with text or an aria-label for screen readers, and replace it with a result as soon as the work finishes.
7. Animated Icons by Pixel True: Best for free Lottie icons for landing pages and onboarding
Platform: Lottie JSON, SVG, PNG, free with paid all-access
Animated Icons offers over 4,000 animated icons that you can download as Lottie JSON, SVG or PNG, with colors, stroke width and playback speed adjustable before download and preset styles like Two Tone and Gray Tone.
The site states the free icons can be used in personal and commercial projects without attribution, with a paid all-access membership for the full set. That makes it a practical source for onboarding screens and feature lists where a handful of illustrated icons carry the page.
Our Download Icon Hover below shows the kind of action icon these packs include, in pure CSS.
Watch out for: Read the linked license page before shipping; the summary on the homepage is not the full terms. Also check the stroke style matches the rest of your icons.
8. LottieFiles free icon animations: Best for finding a one-off animated icon quickly
Platform: Lottie JSON, dotLottie, GIF, MP4
LottieFiles hosts a large community library, and its free icons category lists over 2,000 animations, downloadable as GIF, MP4, Lottie JSON or dotLottie. It is the place to look when you need one specific animated icon, such as a rocket launch or a confetti check, and do not want a whole library.
The dotLottie format bundles the animation into a smaller compressed file, which helps if you embed several.
Quality and style vary because many creators contribute, so treat it as a search engine rather than a consistent set.
Watch out for: Licenses are set per animation and the page does not name one for the category. Check each file's license and credit the creator where required.
9. Our Trash Can Icon Hover: Best for destructive actions that should feel deliberate
Platform: Motions directory, free, HTML + CSS Ours
A trash can whose lid lifts and tips open on a hinge at one end, with a spring overshoot, as the button turns solid. It previews what the click will do, which is exactly the job an animated icon on a delete button should have.
It is pure CSS with a prefers-reduced-motion guard and custom properties for colour and size. For the full click sequence, our Trash Can Delete Button drops a sheet in and slams the lid.
Watch out for: Do not make deleting fun. Keep the motion short and pair destructive actions with a confirm or undo, whatever the icon does.
10. Our Notification Badge Icon Hover: Best for unread counts on a bell or inbox icon
Platform: Motions directory, free, HTML + CSS Ours
A quiet dot on the bell grows into an unread count with a springy pop while the clapper swings. The dot and the count are one element, so the badge morphs instead of swapping.
It shows the difference between attention and noise: the bell only swings on interaction, and the count does the informing. Browse the whole icon hover collection for copy, eye, lock, search and send icons built the same way.
Watch out for: Never loop a bell animation to nag. Animate when the count changes or on hover, then let it rest.
11. Our Copy Icon Hover: Best for copy buttons in docs and code blocks
Platform: Motions directory, free, HTML + CSS Ours
The two sheets of a copy icon spread apart on hover and a third copy slides out between them, so the icon literally shows duplicates. It is one of the small icon moments people notice in docs sites without being able to say why.
After the click, swap to a check: our Copy to Clipboard Button flips to a check and "Copied" and resets. Want an icon animation for your own glyph? Paste the SVG into the creator and describe the motion.
Watch out for: Announce the result, not the animation. Use an aria-live region or a label change so screen reader users hear "Copied".
12. Our Plus Icon Rotate Hover: Best for add buttons that turn into close buttons
Platform: Motions directory, free, HTML + CSS, Tailwind version Ours
A round add button whose plus spins three eighths of a turn into an X with a springy overshoot, while the button swells and its shadow deepens. It is the icon morph behind floating action buttons and expandable menus.
The entry page includes a Tailwind version alongside the HTML and CSS, so it drops into a utility-class project as is.
Watch out for: If the plus turns into an X, the button's accessible label must change too, from "Add" or "Open" to "Close".
How to choose animated icons
Decide what the icon is saying, then how it should be delivered.
Match the motion to the meaning
Use Apple's vocabulary as a checklist. Confirmation: a single bounce or a draw-on check. Attention: a wiggle, once. Ongoing work: rotate, pulse or breathe until done. A state change: replace or fill, like Material Symbols' FILL axis. If the motion does not map to one of these, the icon should probably be still.
Match the format to your stack
Pure CSS on inline SVG costs nothing and themes with currentColor, so start there for hover and toggle icons. React apps using Motion can take lucide-animated. Illustrated or complex icons come as Lottie from Lordicon, useAnimations or Animated Icons, and need a player. Spinners can be SMIL files that work anywhere.
Match the amount to the screen
One animated icon in a toolbar draws the eye; ten make a slot machine. Animate on interaction, not on load, keep it under about 400 ms, and give every looping icon a reduced-motion state. Dense product UI should be mostly still; feature sections on marketing pages can carry more.
Animate the one icon that matters most
Find the icon tied to your most important action, usually save, send, delete or the notification bell, and give it one meaningful animation. Leave the rest still.
Copy a ready one from our icon hover effects, or paste your own SVG into the creator and describe what it should do.
Animate this inline SVG send icon (a paper plane) for a chat composer's send button. On click: the plane pulls back 2 px, flies off the top right corner in 250 ms with cubic-bezier(0.55, 0, 1, 0.45), and a fresh plane slides in from the bottom left in 200 ms. On hover: only nudge it 1 px up and right. Use transform and opacity only, stroke in currentColor. Under prefers-reduced-motion, skip the flight and do a quick 120 ms opacity blink.
Common questions
What format are animated icons usually in?
Three main ones: inline SVG animated with CSS (lightest, easy to recolor), Lottie JSON or dotLottie played by a runtime (used by Lordicon, useAnimations, LottieFiles and Animated Icons), and React components animated with a library like Motion (lucide-animated). GIF and MP4 exist for email and video but cannot be recolored.
Are there free animated icon libraries?
Yes. useAnimations (300 icons, MIT), lucide-animated (MIT), SVG Spinners (MIT), Lordicon's free tier of over 9,700 icons, Animated Icons' free downloads and the free icons on LottieFiles. Licenses differ, so check each one before commercial use.
How do you animate an SVG icon with CSS?
Inline the SVG, give the parts you want to move a class, and animate transform or opacity with a transition or keyframes. Set transform-box: fill-box and a transform-origin so rotations pivot on the shape. For line icons, set pathLength="1" and animate stroke-dashoffset to draw them in.
When should icons animate?
When the motion carries meaning: confirming an action, drawing attention to something new once, showing ongoing work, or reflecting a state change. Apple's SF Symbols guidelines map each animation type to one of these jobs. Decorative looping icons mostly distract.
Do animated icons hurt performance?
CSS-animated inline SVGs barely register. Lottie icons each need parsing and a player, so dozens on one page add up, and Motion-based icons add the library to your bundle. Animate on interaction, not continuously, and use static icons in dense lists.