The Nexmoe theme is built with the MDUI framework, so naturally it uses the built-in Material icons.

"People always tire of the old and crave the new." — said some famous psychologist

Who the famous psychologist is doesn’t matter, and whether the quote was ever said matters even less. What matters is that after staring at Material icons for too long, aesthetic fatigue sets in. So, during some free time recently, I whipped up a few animated SVG icons, planning to gradually replace the current static ones.

Can't see clearly? No worries—both the GIF and the code are already on GitHub; just Ctrl+C, Ctrl+V.

If you want to drop these SVGs into your own site, set the width and height to at least 30; otherwise the stroke can look faint. You can also bump up stroke-width.

Some cool kids might ask: how do I make my own animated icon?

Draw an icon in Figma, export as SVG, then add an &ltanimate&gt to the element you want to animate.

If you really don’t want to draw, grab icons here.

Super simple—basically the same idea as CSS animations. To animate Transform, use:

For example, an easy stroked circle:

[!NOTE] One thing to watch: SVG’s transform-origin: center misbehaves on Apple systems. (It has no effect on transformations applied using the transform SVG attribute). No solid fix yet.

Now you’ll see the new animations in the top snack-bar, after CAPTCHA success, and when the comment box detects sensitive words (type “包单” and hit submit). Tweaked the CAPTCHA logic a bit so the animated SVG displays properly—definitely no BUGs this time! (shouting