Patrick Hill

When we animate icons, we pick the tool based on what the icon actually needs: - Simple SVG line icons → GSAP or Motion dev, animate inside the SVG. - Interactive, mix of vector and raster, visual effects → Rive. - 3D → Blender (or Spline). - Not 3D but visually complex → After Effects. - ASCII / pixel look → WebGL shader. For SVG animations or WebGL work, you can already successfully use AI. Gemini 3.1 Pro and Opus 4.6 are the best for these tasks. For Blender or After Effects, make a loop or a one-time animation and embed it as a video. Use ffmpeg to prepare assets in H.265, VP9, and AV1 codecs. Just Google my article and follow the steps - nothing complicated, but the output will be lightweight. Don't be afraid to use videos. They don't affect the performance of the site and will look super crisp at the size of the icons. If you choose Rive, try to use it for more animations on the site - otherwise, loading a runtime might feel heavy for "just a few icons." If you do animation with WebGL shaders, just pay attention to performance and turn it on or off when the animation is out of the viewport.

2025 was our biggest year yet. 3 major releases. Over 250 new features, improvements and fixes. Stack layout. Frames. Automatic concentric corners. Progressive blurs. Glass. A major redesign. MCP server. And so much more.