Animated icons, Pro

FZ Icons Pro is a paid library with 113 animated icons in three styles: line, duotone and filled. It is separate from the free library, and you receive it as a package of files to add to your project.

Get the package

Buy the library. You receive a license key and a signed download link.
Download the package before the link expires.
If the link has expired, get a new one from your account. The steps are in download your license again.

What is in the package

File	Description
`dist/fz-pro.js`	Ready script that registers the `fz-pro` tag and adds the styles automatically
`dist/fz-pro.esm.js`	ES module version for projects with build tools
`dist/fz-pro.css`	The styles, if you want to add them yourself
`dist/fz-pro.d.ts`	TypeScript types
`dist/icons.json`	Icon data
`svg/line/`, `svg/duotone/`, `svg/filled/`	A separate animated SVG file for each icon

Use the script

Copy fz-pro.js to your website, then:

<script src="/fz-pro.js"></script>

<fz-pro name="payment-success" variant="duotone" play="once"></fz-pro>
<fz-pro name="cart-add" play="hover" size="28"></fz-pro>
<fz-pro name="dallah" variant="filled" play="loop" label="Hospitality"></fz-pro>

Attribute	Values	Default
`name`	Icon name	none
`variant`	`line`, `duotone` or `filled`	`duotone`
`play`	`loop`, `hover`, `once` or `none`	`hover`
`size`	A number or any CSS value	`1em`
`label`	Text for screen readers	Icon is hidden from screen readers

hover: animates when the mouse is over the icon or its direct parent, so an icon inside a button moves with the button.
once: animates once each time it appears on screen.

Use JavaScript

import { toSvg, inject, play } from './fz-pro.esm.js';

inject();
btn.innerHTML = toSvg('cart-add', { variant: 'duotone', play: 'hover', size: 20 }) + ' Add to cart';

btn.addEventListener('click', () => play(btn));

inject adds the styles once, and play runs the animation from your code.

SVG files

Each file in the svg/ folder is separate and animates by itself:

<img src="svg/duotone/truck.svg" alt="">

Customize

All colors are CSS variables. You can set them on :root or on any element:

:root {
  --fz-accent: #e0a23a;
  --fz-g1: #12b886;
  --fz-g2: #0b6e5f;
  --fz-on: #fff;
  --fz-bg: #fff;
  --fz-dur: 1.6s;
  --fz-stroke: 1.75;
}

Variable	Description
`--fz-accent`	Accent color
`--fz-g1`, `--fz-g2`	Start and end of the `filled` gradient
`--fz-on`	Details on top of the `filled` style
`--fz-bg`	Your background color, which separates overlapping parts
`--fz-dur`	Animation speed
`--fz-stroke`	Line thickness

On dark backgrounds, set --fz-bg to your background color so overlapping parts separate cleanly.

Animation stops automatically for users who turn on "reduce motion" on their devices.

For what your license covers, see licenses.