Use an icon as an image and it loops on its own. Paste it inline and it can play on hover, take your brand's accent colour and switch to dark mode with one attribute.
A new drop of 8 icons lands every Tuesday. Each set comes out over three drops, and its download always holds every icon released so far.
Sets
Coming next
Coming next
Free Animated SaaS Icons
24 animated isometric SaaS icons for dashboards, billing, integrations and onboarding. Free SVG files, released 8 at a time.
Coming next
Free Animated AI Icons
24 animated isometric AI icons for models, assistants, language and vision, and data. Free SVG files, released 8 at a time.
Get the next drop
New icons in your inbox every Tuesday
Leave your email and we tell you when the next drop is out.
Building something?
Icons are the easy part. We build the rest.
DeveloperLook designs and builds websites, SaaS products and stores. Tell us about yours and we reply within 24 hours.
FAQ
Questions about these animated icons
Saimul IslamFounder & CEO, DeveloperLookStill have questions?
Send a message or book a call with the team.
Yes. The icons are free for personal and commercial work: websites, apps, products and client projects. Attribution is appreciated but not required. What you can't do is sell or share them as icons (in packs or on asset marketplaces), claim them as your own, or use one in a logo. The license page has the full terms.
Each icon is one SVG file with its animation written in CSS inside the file. The canvas is 400 by 320 (a 5:4 frame) and the 1.25 px line stays crisp at any size. The download also has a still PNG of every icon at 800 by 640 and a GIF for places that can't play SVG, such as email.
Paste the SVG markup into your page and add data-play="hover" to the svg tag. To start it when a whole card or button is hovered or focused, put data-cm-play="hover" on that wrapper instead. Used as a plain image, the icon simply loops.
Yes. Every icon has one accent colour, orange by default. Set --cm-accent to your brand colour on the svg or any parent element and the moving part follows it. For dark backgrounds, add data-theme="dark" to the svg or a parent and the surfaces and lines switch to a dark palette.
Every Tuesday at 9:00 New York time, 8 new icons. A set comes out over three drops, so about three weeks per industry, and its download grows with each drop. The schedule runs through 21 sets, from SaaS in November 2026 to legal in January 2028.
Yes. When a visitor's system has reduced motion turned on, every icon holds its rest pose and never animates. You don't need to add any code for it: the rule ships inside each SVG file.
Saimul IslamFounder & CEO, DeveloperLookStill have questions?
Send a message or book a call with the team.
Free 30-min callGoogle Meet
Book a call
Book a free 30-minute call
In 30 minutes on Google Meet we walk you through how we would build it, how long it takes and what it costs. Then you get a written estimate.
Calendar not showing? Book on cal.com or send a brief.