How to Add Animated Icons to a Video

Step by step

1. 1

   Pick the motion by what the icon means

   Stroke Draw sketches the outline line by line, so it suits explainers where each point arrives in turn. Badge Reveal bursts open behind the icon and fits success moments. Heartbeat Pulse repeats a double beat, which is a natural choice for health topics, likes and anything meant to feel alive.

2. 2

   Choose the icon and style it

   Pick a symbol from the Icon control, then set Icon color, Icon size, Stroke width and Position. Badge Reveal adds Shape, Primary and Accent for the disc and ring behind it. Heartbeat Pulse adds Rotation and Intensity, which sets how hard the beat hits.

3. 3

   Size it for the frame it will sit in

   Defaults run from 1.5 to 4 seconds, and Icon size goes from 48 to 960 pixels. Use Position to place the icon when it belongs in a corner beside text. In 9:16, keep it clear of the top and bottom edges, where short-form apps overlay their own buttons.

4. 4

   Export with the background off

   Icon presets start on a dark solid background, so set Background to Transparent when the icon sits on footage or a slide. MP4 cannot hold that transparency. Use a PNG sequence for Premiere Pro or After Effects, and WebM with alpha for CapCut, OBS or a web page.

5. 5

   Build a row of icons

   In After Effects, choose File > Import, select the first frame and tick PNG Sequence. Each icon comes in as one footage item. Duplicate your layers, or import a second export with a different icon, and offset their start times so a row of points appears one by one.

Where it is used

• Bullet points in explainer videos

  A row of three or four icons draws on as the narrator names each benefit, which breaks up a talking head or a plain slide in a course or product overview.

• Status moments in app demos

  A tick, bell or crossed-out symbol appears beside a screen recording to show that a task finished, an alert arrived or a feature was switched off.

• Topic markers in health and finance content

  A beating heart or a turning coin icon sits next to a figure or heading in an educational video, telling viewers at a glance what the section covers.

Presets

25

Default duration

1.5 to 4 seconds

Icon size range

48 to 960 pixels

Best export

PNG sequence or WebM with alpha

Which format should you export?

Transparent WebM. An icon exists to sit on something else, and a matte around it defeats the point.

Format

MP4 · WebM · PNG sequence

Alpha

WebM or PNG sequence

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.

Three things people get wrong

• Sizing the icon in the editor rather than in the timeline. Export it large and scale it down where you can see the shot.
• Animating six icons on screen at once with the same timing. Stagger them or show them one at a time.
• Using a full-color icon on a busy background. A single-color icon with a subtle outline survives almost any shot.

Frequently asked