velements

Icon Animations

Animated icons: small motion that explains a lot

Updated September 18, 20263 min read

How do you make an animated icon?

Choose an icon preset, pick an icon from the built-in library, set its color, size and stroke, then adjust how it draws, pops or pulses. Export a transparent WebM and the icon animates over any slide, app screen or footage without a matte.

An icon that draws itself holds attention far better than a static glyph. These presets animate stroke, scale and badge shapes so a checkmark, bell or rocket becomes a beat in your edit.

Five icon animations presets to start from

Hover any card to play it. Opening one loads it in the editor with every control unlocked.

  • The icon springs out of nowhere with a playful twist and settles with a satisfying bounce.

  • Every line of the icon draws itself on like a pen sketch, then lands with a subtle settle.

  • A bold badge bursts open with a shockwave ring and the icon pops on top. Great for success states.

  • A living double-beat pulse that makes hearts, likes and health icons feel alive.

  • The icon drops in with a bounce and rattles for attention, ideal for notifications and warnings.

All icon animations

How to make one in the browser

  1. 01Open a icon animations presetBrowse the Icon Animations category and open the preset closest to what you need. It loads in the editor with every control unlocked.
  2. 02Make it yoursRewrite the text, set your brand colors and font, adjust easing and duration, and switch the aspect ratio for the platform you are posting to.
  3. 03Export the clipChoose MP4 for a normal track or transparent WebM for an overlay, pick a resolution up to 8K, and the file renders on your own machine.

Which format should you export?

Use MP4 when the clip sits on its own track or fills the frame. Use transparent WebM whenever it has to float over your own footage: the alpha channel is real, so no keying or blend mode is needed.

Format
MP4 H.264 · WebM VP9
Alpha
Transparent WebM
Resolution
720p to 8K
Aspect
16:9 · 9:16 · 1:1 · 4:5
License
Commercial use included

Three tips that make it look intentional

  • Stick to one icon style across a video so the set reads as a system.
  • Draw-on animations suit explainers; pops and pulses suit social and UI moments.
  • Scale the icon up rather than the export: the renderer is vector-clean at any resolution.

Frequently asked

Are the icons free to use commercially?
Yes. The icon set is ISC licensed and no third-party trademarks are included, so exports are safe for client work.
Can I use my own icon?
Presets that take an image accept a PNG, JPEG or WebP upload, which stays on your machine during rendering.
  • Logo Reveals

    Logo reveal: a brand intro without After Effects

    Open a logo reveal preset in the browser, upload your logo as a PNG, set the background and accent colors, choose a duration and export. The clip renders on your own machine as MP4 or transparent WebM, so no plugin, template file or render queue is involved.

    Read the guide
  • Lower Thirds

    Lower thirds: name tags that look like a broadcast

    Pick a lower third preset, type the name and role, set your brand colors and font, then export a transparent WebM. Drop it on the track above your interview footage, position it in the lower left, and trim it to the seconds where the speaker is introduced.

    Read the guide
  • Title Animations

    Title cards: openers and chapter headings that set the tone

    A good title card holds one idea, sets it in a readable weight, and clears the frame before the viewer loses patience. Two to three seconds is usually enough. Animate the headline and subtitle on separate beats so the eye lands on the main line first.

    Read the guide