CyberAlien . dev software development blog

Published on 3 Mar 2026

Generating animated icons

I’ve spent most of 2025 creating a script that generates animated icons in different formats.

It can generate CSS animations, SVG animations, static icons and frame by frame rendered static icons.

All from the same source data.

It is fully automated:

  • It calculates timing for animations based on lengths of path and order of animations.
  • Icons can have multiple colors, generator will figure out which parts of icon need to be masked and will generate masks for them.
  • It optimises icons with animations, so they are as small as possible.

It can create different types of animations, such as:

  • Animating icons when they are drawn, which creates a “drawing” effect.
  • Looping animations, which are perfect for loading indicators.
  • Transitions between multiple states of the same icon, such as “play” and “pause” states of a media player icon.

Why?

Why did I decide to create a new icon generator?

Because I wanted to create a new premium icon set to finance Iconify development. Open source funding did not work out, it barely covers hosting costs, so I had to find another way to finance development.

Why create a complex icon generator instead of just creating a new icon set?

There are plenty of icon sets already, premium and open source. I’m not really good at designing icons, so a new icon set would not be very good, but if all icons were animated and customisable, it would be a unique product that is not available anywhere else.

Existing tools

Why not use existing tools for creating animated icons?

All tools that do exist are using JavaScript to animate icons and require third party libraries.

I wanted icons that use existing web technologies, such as CSS and SVG animations, which do not require any scripts and are better for performance and accessibility.

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 icon from Material Line Icons set:

Instead of embedding code samples for comparison, here are links to the source code of the icon in different formats:

Icon with CSS animations has much smaller file size, which is a huge advantage: 176 bytes vs 1.29 kb!

This comes at cost of increasing CSS file size (by 1.29 KB in this case), but CSS files are usually shared between pages and are cached in browser.

Class names generated for each element are unique, hashed from CSS content, so chances of collisions are very low, but if multiple icons have the same shape, they share the same class name, which reduces file size a bit.

You can try it yourself with SVG to SVG+CSS converter, though it handles only static SVGs and does not convert SVG animations.

Experimenting with Material Line Icons

To test new generator, I’ve decided to create not only a new icon set, but a new version of Material Line Icons.

Old version of Material Line Icons

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

Initially, all icons were coded by hand, which was a very time consuming process. Later, in 2024 I wrote a first script to automate the process, which made it much faster to create new icons and made animations more consistent.

Experimenting with 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.

New version of Material Line Icons

With the new icon generator, 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.

Ecosystem and tools for using icons

Users don’t like complicated tools, so animated icons need to be easy to use.

To solve that, in addition to creating new generator and icons, I needed to create other tools to make it easy for users to use icons in their projects.

Huge benefit of that is, same tools can be used to convert existing open source icon sets to SVG + CSS.

Open source tools I created:

All those tools have double purpose: render icons with CSS animations and in future support multi-state icons.

Future plans

It will take a while to release new icon set, the next hardest part is creating a website for it.

Icon set is already large, with around 5000 icons and will be growing further.

But what about other icon sets?

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.