4,270 animated icons

ebolax Animated Icons

Lucide, Heroicons and Iconoir CSS-only hover animations. Click any button to copy the icon code with the <i> tag in one click.

View on GitHub

Heroicons

Usage: aic aic-hero-icon-name

Showing 1–80 of 324 icons

No Heroicons found for your search.

Heroicons Solid

Usage: aic aic-hero-s-icon-name

Showing 1–80 of 324 icons

No Heroicons Solid icons found for your search.

Iconoir

Usage: aic aic-io-icon-name

Showing 1–80 of 1383 icons

No Iconoir icons found for your search.

Iconoir Solid

Usage: aic aic-io-s-icon-name

Showing 1–80 of 288 icons

No Iconoir Solid icons found for your search.

Lucide

Usage: aic aic-luc-icon-name

Showing 1–80 of 1951 icons

No Lucide icons found for your search.

Install from npm

You can install this package from npm and use the built CSS and icons in your project.

npm i @ebolax/animated-icons

After installing, link the stylesheet from node_modules/ebolax-animated-icons/dist/animated-icons.css (or the minified animated-icons.min.css) and use the icon classes as shown below.

<link rel="stylesheet" href="node_modules/@ebolax/animated-icons/dist/animated-icons.min.css">

For the simplest setup, you can use the bundled animated-icons.bundle.min.css file, which includes all icons as embedded assets.
This means you do not need to copy or serve the aic-icons folder separately. 

<link rel="stylesheet" href="/path/to/animated-icons.bundle.min.css">

You can also import the CSS file directly into your JavaScript or TypeScript project using import or require: 

import "@ebolax/animated-icons";

Or, for CommonJS projects: 

require("@ebolax/animated-icons");

Basic usage

Basic usage: Just add an i tag with the aic class and the icon's class name. For example:

<!-- Heroicons -->
<i class="aic aic-hero-academic-cap"></i>

<!-- Heroicons Solid -->
<i class="aic aic-hero-s-academic-cap"></i>

<!-- Iconoir -->
<i class="aic aic-io-mail"></i>

<!-- Iconoir Solid -->
<i class="aic aic-io-s-mail"></i>

<!-- Lucide -->
<i class="aic aic-luc-home"></i>

Using icons inside buttons or links

When an icon is used inside a parent element (button, link, nav item), wrap the icon with a container that has the aic-wrapper class. This keeps the animation and hit area correct when the user hovers the parent.

<button class="aic-wrapper">
  <i class="aic aic-hero-s-banknotes"></i> Test
</button>

Change the animation

You can change the animation by adding the --aic-animation style variable attribute to the icon. The value is the name of the animation. For example, to change the animation to bar, you can add the style="--aic-animation: aic-bar;" attribute to the icon.

<i class="aic aic-hero-arrow-path" style="--aic-animation: aic-bar;"></i>
DEMO

Available animations (you can click to change the animation):

bar

bell-ring

dot-appear

fade

gear

heart-beat

mail-flap

nudge-up

nudge-down

nudge-left

nudge-right

nudge-right-up

nudge-right-down

nudge-left-up

nudge-left-down

page-turn

pulse-element

rocket-lift

scale-pop

shake

spin

Advanced Usage

You can change that style variables:

For Example:

<i class="aic aic-hero-arrow-path" style="--aic-size: 48px; --aic-duration: 2000ms;"></i>
DEMO

See Animated Icons in action

Hover over any element to preview the animation.

Sidebar
Tabs

Tab content area

Buttons