Website builders
Upload the animated SVG wherever you add an image: Webflow, Framer, Wix and Squarespace all accept SVG files. It plays in every modern browser.
Webflow guide →a 4-minute guide
How to animate an icon
Short answer
Open any icon, go to Customize › Motion and choose how it moves, or use Turn into to make it switch to another icon. Then download an Animated SVG for websites and Notion, a GIF for slides and email, or an MP4 for video. No code, no account.
First, which motion?
Pick the one that says what the icon means. Every icon already comes with its own, and all of them work in every one of the twenty styles.
- Ringfor notifications
- Heartbeatfor likes and love
- Spinfor loading
- Floatfor calm, dreamy things
- Twinklefor magic and new
- Bouncefor “look here”
- Nudgefor “go this way”
- Ta-dafor wins and rewards
That’s 8 of 32. See them all moving on the animations page.
Step by step
Open the icon you want
Find it in the library (search in your own words, like “notification”) and open its page.
Go to Customize, then Motion
On the icon’s page, open the Customize panel and its Motion tab. You’ll see a sentence describing how this icon likes to move.
Choose when it moves
Always keeps it moving gently, On hover plays when someone points at it, and Once plays a single time. For a file you upload as an image, pick Always or Once.
Pick how it moves
The icon’s own motion is already selected. Hover the others to preview them, then use the Speed and Intensity sliders until it feels right. Calm is usually better.
Check how its parts move
Icons move in parts. Under Moves in parts you can see what each piece does: a sun turns while its backdrop only breathes, sparkles twinkle on their own, and a shadow stays on the ground. If the extras are too busy, set Decorations to Keep still and only the icon itself moves, in the preview, the code and every download.
Download it
Choose your colour and style on the Look tab, then pick a moving file in the Download area: Animated SVG for a website or Notion (one small file, for example
bell-animated-ring.), GIF for slides and email, MP4 for Keynote, PowerPoint and video, Lottie for apps. Which one?svg
Turn one icon into another
Play becomes pause, an empty heart fills up red, the sun sets into a moon. On the Turn into tab, an icon switches to another one, and each side keeps its own style and colours. Try it:
How long the switch takes
Click or tap an icon to switch it.
Open the Turn into tab
It sits next to Look and Motion in the icon’s Customize panel.
Pick what it turns into
Choose a suggested partner (play and pause, eye and eye-off, menu and close) or search for any other icon.
Style the before and after
The first icon (before) uses the style and colours from the Look tab. The second (after) can wear the same colours, or its own style, colour and palette: a grey outline heart can turn into a solid red one.
Choose the effect and the timing
Pick how it switches (Fade, Scale, Rotate, Flip, Slide up, Slide down and more), how fast (Snappy, Smooth or Slow) and when: on Click or tap, on Hover, on Focus, or On its own, pausing on each icon.
Download or copy it
Moving files (Animated SVG, GIF, MP4, Lottie and the rest) can’t feel a click, so they switch back and forth on their own. Copied code keeps the trigger you chose.
Put it on your website or page
Plain HTML
Use it like any picture: <img src="bell-animated-ring.. Want it to react on hover? Paste the SVG code into the page instead of using <img>.
Notion
Add an image block (not the page icon) and upload the animated SVG. In the browser and the desktop app it keeps moving. If a mobile app shows it standing still, upload the GIF instead.
Notion guide →WordPress
WordPress blocks SVG uploads unless a plugin allows them. The simplest route: add a Custom HTML block and paste the SVG code.
WordPress guide →Make it feel good
One at a time
A single moving icon draws the eye. Ten moving icons fight for it. Animate the one thing you want people to notice.
Match the meaning
Bells ring, hearts beat, arrows point the way. When the motion fits the icon, people understand it faster.
Keep it calm
Slow and small beats fast and big. Downloads stop moving for anyone who has asked their device for less motion.
for developers
Animating in code?
Add the optional @withicons/motion stylesheet and two classes. It works with every package and every style, and respects reduced motion.
Animation docs<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@withicons/motion/dist/motion.css">
<span class="wm wm-loop wm-p-ring"><svg …bell…></svg></span>Something not working?
My animated SVG stands still in PowerPoint or Google Slides.
Slide apps show SVG files as still pictures. Download a GIF instead, or add the app’s own animation (see “In slides” above).
The GIF has a white rim or box around it.
GIFs can’t have soft see-through edges, so the edges are blended with a background colour. Before you download, choose your slide’s colour as the background and the rim disappears. See-through backgrounds, explained.
My MP4 sits in a coloured box.
Videos can’t be see-through. Pick your slide’s background colour before downloading, or use a GIF.
The Turn into switch doesn’t happen in my file.
Check that you downloaded a moving file (Animated SVG, GIF, MP4, Lottie): they play the switch back and forth by themselves. A plain SVG or PNG shows only the first icon.
The switch is too fast or too slow.
On the Turn into tab, try Slow for a calm change or Snappy for buttons. When it switches on its own, a longer pause on each icon makes it easier to follow.
It doesn’t move on my website.
Check the file name contains “animated” (the plain SVG doesn’t move). Some builders turn uploads into PNGs; if so, paste the SVG code into an HTML or embed block instead. Also check your device: if reduce motion is turned on, the icon politely stays still.
“On hover” never plays.
Hover only works when the SVG code is in the page itself. An uploaded image can’t see the mouse, so choose Always or Once for uploads.
The sparkles or the shape behind the icon don’t move with it.
That’s on purpose: decorations have their own gentle loop, so a backdrop never spins along with a turning sun. Prefer them still? On the Motion tab, set Decorations to Keep still.
It’s too fast or too much.
Go back to Motion and lower Speed and Intensity, or try a calmer move like Float, Breathe or Pulse.
WordPress says “Sorry, you are not allowed to upload this file type”.
That’s WordPress blocking SVG uploads. Paste the SVG code into a Custom HTML block, or install an SVG-upload plugin you trust.
a shortcut
Let your AI pick the motion
Click Claude, ChatGPT, Gemini, Perplexity or Grok. We copy a ready brief that points it to our skill file and open it for you. Tell it what you’re making (“a ringing bell for my newsletter signup”): it picks the icon, the style and a motion that fits, then explains each step.
Pick an icon and make it move.
500 icons, twenty styles, 32 ways to move. All free.
Browse icons