CyberAlien . dev software development blog

Published on 3 Mar 2026

Generating animated icons

Animated icons are a great way to add some life to your website or web app.

They can be used for various purposes, such as:

  • Loading indicators
  • Changing user focus to a specific element by animating an icon next to it
  • Adding some fun to your UI

Creating animated icons is not an easy task, mostly because there are no good tools for it. All tools that do exist are using JavaScript to animate icons, which is not ideal for performance, accessibility and requires third party libraries.

Types of animated icons

There are 3 main ways to animate icons:

  • CSS animations
  • SVG animations
  • JavaScript solutions

There are some excellent tools for creating JavaScript animations, but I went the other way and started experimenting with CSS and SVG animations.

Benefits of CSS and SVG animations:

  • Does not require scripts, so it is better for performance and accessibility.
  • Can be easily implemented in any framework, without relying on third party libraries.

Code examples

This is an example of icon from Material Line Icons set:

Code of icon animated with SVG animations:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
    <path stroke-dasharray="4" d="M12 3v2">
      <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="4;0" />
      <animateTransform attributeName="transform" dur="6s" keyTimes="0;0.05;0.15;0.2;1" repeatCount="indefinite" type="rotate" values="0 12 3;3 12 3;-3 12 3;0 12 3;0 12 3" />
    </path>
    <path stroke-dasharray="30" stroke-dashoffset="30" d="M12 5c-3.31 0 -6 2.69 -6 6l0 6c-1 0 -2 1 -2 2h8M12 5c3.31 0 6 2.69 6 6l0 6c1 0 2 1 2 2h-8">
      <animateTransform attributeName="transform" dur="6s" keyTimes="0;0.05;0.15;0.2;1" repeatCount="indefinite" type="rotate" values="0 12 3;3 12 3;-3 12 3;0 12 3;0 12 3" />
      <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.2s" dur="0.4s" to="0" />
    </path>
    <path stroke-dasharray="10" stroke-dashoffset="10" d="M10 20c0 1.1 0.9 2 2 2c1.1 0 2 -0.9 2 -2">
      <animateTransform attributeName="transform" begin="0.2s" dur="6s" keyTimes="0;0.05;0.15;0.2;1" repeatCount="indefinite" type="rotate" values="0 12 8;6 12 8;-6 12 8;0 12 8;0 12 8" />
      <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.7s" dur="0.2s" to="0" />
    </path>
  </g>
</svg>

The same icon animated with CSS animations, which has two parts: SVG and CSS:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path class="a0m25c a9infz"/>
    <path class="a0m25c vfbpaz"/>
    <path class="a0m25c rmfyct"/>
</svg>
.a0m25c {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: currentColor;
  stroke-width: 2px;
  fill: none;
}


.a9infz {
  d: path('M12 3v2');
}


.rmfyct {
  d: path('M10 20c0 1.1 0.9 2 2 2c1.1 0 2 -0.9 2 -2');
}


.vfbpaz {
  d: path(
    'M12 5c-3.31 0 -6 2.69 -6 6l0 6c-1 0 -2 1 -2 2h8M12 5c3.31 0 6 2.69 6 6l0 6c1 0 2 1 2 2h-8'
  );
}


@media not (prefers-reduced-motion) {
  .a9infz {
    stroke-dasharray: 4;
    transform-origin: 12px 3px;
    animation:
      0.2s linear forwards so-from-4,
      6s linear infinite tr-6vhkny;
  }


  .rmfyct {
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
    transform-origin: 12px 8px;
    animation:
      6s linear 0.2s infinite tr--mk6os,
      0.2s linear 0.7s forwards so-to-0;
  }


  .vfbpaz {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    transform-origin: 12px 3px;
    animation:
      6s linear infinite tr-6vhkny,
      0.4s linear 0.2s forwards so-to-0;
  }
}


@keyframes so-from-4 {
  0% {
    stroke-dashoffset: 4;
  }
}


@keyframes tr-6vhkny {
  5% {
    transform: rotate(3deg);
  }
  15% {
    transform: rotate(-3deg);
  }
  20%,
  100% {
    transform: rotate(0deg);
  }
}


@keyframes so-to-0 {
  100% {
    stroke-dashoffset: 0;
  }
}


@keyframes tr--mk6os {
  5% {
    transform: rotate(6deg);
  }
  15% {
    transform: rotate(-6deg);
  }
  20%,
  100% {
    transform: rotate(0deg);
  }
}

Icon with CSS animations has much smaller file size, which is a huge advantage.

This comes at cost of increasing CSS file size, but CSS files are usually shared between pages and are cached in browser.

Experimenting with Material Line Icons

Several years ago, I created Material Line Icons, which are a set of animated icons based on Material Design.

Most icons are animated by animating stroke-dashoffset property of SVG paths, which creates a “drawing” effect.

I created them using SVG animations, which are supported in all modern browsers and do not require any scripts.

Initially, all icons were coded by hand, which was a very time consuming process.

Later, in 2024 I wrote a script to automate the process, which made it much faster to create new icons and made animations more consistent.

Switching to CSS animations

SVG animations have several limitations:

  • Accessibility: cannot disable animations for users who prefer reduced motion, but in CSS it is a simple media query.
  • Large file size: each animation requires a separate element, which increases file size, but in CSS icon size is much smaller than even static SVG.
  • Usability: SVG animations are not easy to control, but CSS animations provide more flexibility.

Therefore, in 2025 I started experimenting with CSS animations, which are more flexible and do not have these limitations.

However, I quickly ran into a problem: lack of support for d property in CSS in Safari browser. While this is a huge problem, Safari Technology Preview does support it, so there is hope it will be available in a future Safari update.

Tools for generating animated icons

Now, the problem is, generating CSS animations and SVG animations is not the same process, so tools I created for SVG animations must be rewritten.

That took several months of experimentation and rewriting, but I finally created a tool that can generate different types of animations from the same source:

  • CSS animations
  • SVG animations
  • Static icons
  • Frame by frame rendered static icons

Frame by frame rendered static icons are useful for animating icons frame by frame, such as generating animated GIFs or video creation. It might require additional converting to platform specific formats, but that is a separate problem.

New version of Material Line Icons

With the new tool, I was able to create a new version of Material Line Icons, which includes:

  • SVG animations
  • CSS animations
  • Static icons
  • Frame by frame rendered static icons at 120 frames per second

Additionally, because script is very flexible, I was able to add new variations of icons, such as fill/two-tone versions, without much effort.

All icons are available on GitHub repository: Material Line Icons.

Icon generating tool

While Material Line Icons is the first icon set to be generated using the new tool, it is not the only one.

I’m working on a new icon set, which will hopefully be released soon.

Ideally I’d love to make a visual editor for animated icons, so anyone would be able to create animations easily, but that would be a massive project, which I cannot undertake alone, so for now it will only be used for my own icon sets: some open source, some commercial.

Commercial icon sets will finance all future development, possibly including the visual editor.