A little motion tells people something is happening: a spinning refresh icon while data loads, a bell that shakes when there is news, a check mark that draws itself when a task is done. Icon Studio adds that motion to the icon itself, with no JavaScript and no animation library.
Pick a motion
With an icon open, find Motion in the Style tab. There are five:
| Motion | Use it for |
|---|---|
| Spin | Loading, refreshing, syncing, settings at work |
| Pulse | A live status, recording, something waiting for attention |
| Bounce | A download arrow, a new item, a gentle "look here" |
| Shake | A notification bell, an error, a wrong password |
| Draw | A check mark, a signature, a line chart, any outline drawn in |
The stage plays it at once. Choose None to stop it.
Draw traces the icon's lines, so it needs an outline style that is drawn with strokes, such as Lucide or Tabler outline. On a filled icon, Icon Studio tells you so.
How it works
The motion is a small block of CSS keyframes inside the SVG file. That has three good effects:
- It plays by itself wherever SVG plays: a web page, an
<img>tag, a GitHub README, Figma prototypes and many design tools. - It needs nothing else. No script, no library, no extra file.
- It respects your visitors. The CSS includes a
prefers-reduced-motionrule, so for people who ask their system for less motion, the icon stands still.
Take it away
Open the Export tab and press SVG, or copy the code under the SVG tab. The motion comes with it. The React and CSS outputs keep it too, since they are built from the same SVG.
A PNG is a single picture, so it shows the icon still. If you need a moving picture for a slide or a chat app, record the SVG as a GIF or a video; Motion Studio does that for longer motion graphics.
Keep motion meaningful
Motion pulls the eye, so use it for one thing at a time:
- One moving icon per screen. Two spinners and a pulsing bell compete, and nothing stands out.
- Stop it when it is done. A spinner should be replaced by the result, not keep spinning next to it.
- Match the meaning. Shake says "no" or "look"; it is wrong on a success message. Bounce says "here"; it is wrong on an error.
Next: getting the icon into your code, your docs and Power BI.