Overview

Animated icons is a vanilla custom elements implementation of several animated icons that you can choose to import into your site in order to have these animations as a part of your UI.

Setup

See the GitHub readme for more information on installing and setting up the icons to be used in your project.

Triggering Animation

Unless otherwise noted, icons do not animate automatically. Instead, you can trigger the animation by either adding the animate attribute to the icon element, or by calling the .animate() method on a reference to the icon element.

In addition, you can reset the animation by removing the attribute or calling the .reset() method on a reference to the icon element.

Icons

Icons Demo

Each icon has unique configuration information and APIs that you can use to color them and change parts of their animations. See the icon demo link above to preview each icon, or see below for more specific information on each icon.