A QUICK START

A little motion. Three simple steps.

01 / Find your icon

Browse the collection. Search by name or tag, and narrow it down by category, source, or motion. You can pause the collection previews at any time.

02 / Make it yours

Open an icon to change its color, size, stroke width, duration, delay, easing, repeat count, direction, and motion intensity. Use Play, Pause, Restart, or the scrubber to inspect the result. Your last settings stay in this browser. A share link includes your settings without requiring an account.

03 / Take it with you

Choose Copy SVG to paste the markup into your HTML, or Download .svg for a standalone file. The file includes animation styles and needs no JavaScript, libraries, or external resources.

<img src="/icons/bell-ring.svg"
     width="32" height="32"
     alt="Notifications" />

For decorative images beside a text label, use an empty alt="". For decorative inline SVG, remove role and aria-labelledby and add aria-hidden="true".

Motion with care

Every export respects prefers-reduced-motion. The editor starts paused if your system requests reduced motion; press Play to intentionally inspect the animation. Use a single iteration for completion feedback and finite loops for attention cues.

Using several copies inline

Different icons and settings get scoped styles. If you paste the exact same export several times into one document, give each SVG and its title unique IDs and update CSS selectors and aria-labelledby. Image elements isolate each file automatically.

Free to make something with

All 50 icons carry source and license information. Check the source collection for its creator and usage terms. Downloaded SVGs include the same information. Sources · Licenses