Icons and UI Animation – HadCoffee Blog

Icons and UI Animation

I’ve done some work on an SVG icon system using symbols for reusable, editable icon versions. This will work well for static icons. For basic animation I’ll be able to use CSS targeting SVG elements in the DOM. If I introduce any more complex SVG animations I’ll need to embed the SVG content directly in the page.

Here’s a demo of the ‘Favouriting’ UI using CSS animations to give a more interesting experience to adding a cafe to favs.

See the Pen SVG Favourite by Mike (@mike_hasarms) on CodePen.0