Browse icons

free animated icons, no code needed

Free animated icons

Short answer

Every one of the 500 icons comes with its own animation (a bell rings, a heart beats, a loader spins) and works with 32 motion presets in all 20 styles. Hover an icon below to watch it move, then click it to download a GIF for your slides (PowerPoint, Google Slides, Keynote) or an animated SVG for websites and Notion. No code, no account. Developers add two CSS classes from @withicons/motion. Free and MIT licensed.

Pick an icon, click to get it

A starter set for animated icons. Search to find any of all 500.

Click an icon to download an animated GIF for your slides. The arrow opens its page.

See them move

Motion that says what the icon means

Animations here aren’t decoration: each icon moves the way the thing it shows would move. Bells ring from their hook, arrows nudge the way they point, hearts beat. They are plain CSS inside the SVG: no Lottie player, no JavaScript, tiny files. And they stop for anyone who has asked their device for less motion.

Quick facts
PriceFree. No account, no paid tier, no watermark.
LicenceMIT: personal and commercial use, no credit required (licence in plain words).
Icons500 icons × 20 styles (10,000 in all), every style on the same 24 × 24 grid.
Motions32 presets (spin, ring, beat, float, twinkle…) plus 12 swap transitions that turn one icon into another, like play into pause
FormatsGIF for slides and animated SVG (no code), CSS classes, React, Vue, Svelte, Angular and a <with-icon motion> element
AccessibilityRespects prefers-reduced-motion, in downloads and in code

Use them

Three ways to add an animated icon

  1. 1

    No code: a GIF or an animated SVG

    Click an icon above with GIF for slides selected and insert the GIF in PowerPoint, Google Slides or Keynote. Choose Animated SVG for Webflow, Framer, Wix, Squarespace or Notion. Want to tune the speed or pick another motion first? Open the icon and use Customize › Motion, which has the same two downloads. Step-by-step guide.

  2. 2

    A website: two CSS classes

    Add motion.css once, then wrap an icon: <span class="wm wm-loop wm-p-ring">. Use wm-hover to play on hover, inside any button with wm-trigger.

  3. 3

    An app: any framework

    The same classes work in React, Vue, Svelte and Angular, and a small JS API starts, stops and swaps icons from code. Animation docs.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@withicons/motion/dist/motion.css">

<button class="wm-trigger">
  <span class="wm wm-hover wm-p-ring"><svg …bell…></svg></span> Notifications
</button>

FAQ

Questions people ask

Are these animated icons free for commercial use?

Yes. The icons and their animations are MIT licensed: use them in client work, products and apps with no credit required. Licence in plain words.

Do I need Lottie or JavaScript?

No. The animations are CSS keyframes. An animated SVG carries its own little stylesheet, so it plays wherever SVG images play. The optional JavaScript only adds extras like scroll-triggered motion and swaps from code.

Can I use animated icons in PowerPoint or Google Slides?

Yes: choose GIF for slides above, click an icon and insert the GIF like a picture. It plays when you present in PowerPoint, Google Slides and Keynote. (Slide apps show SVG files as still images, so use the GIF there.) How to.

What about people who are sensitive to motion?

Every animation, in downloads and in code, switches off when the visitor has turned on “reduce motion” in their system settings.

Can an icon change into another icon?

Yes. Swap transitions turn play into pause, a heart outline into a filled heart, menu into close and more, with 12 effects to choose from. See them.

Find your icon in seconds

500 free icons, 20 styles, no account. Copy, download or drag them into your work.

Browse all icons