Animate Falling Font Awesome Icons Web Component – icon-fall

<icon-fall> is a lightweight Web Component that rains Font Awesome icons across the browser viewport.

It works with Font Awesome Kits, web fonts, inline SVG, and SVG sprites. Multiple child icons cycle through the falling effect.

The package does not bundle Font Awesome. You can set the icon count with an HTML attribute and adjust size and colors with CSS custom properties.

Features

• Multiple child icons rotate through the falling sequence.
• Randomized horizontal positions, scale, opacity, duration, and start delay.
• Fixed full-viewport animation layer with pointer events disabled.
• Font Awesome Kits, web fonts, inline SVG, and SVG sprite input.
• Configurable icon count, size, and rotating color palette.
• Falling icons are hidden from the accessibility tree.

How To Use It

Installation

Install icon-fall from npm:

npm install @zachleat/icon-fall

Import the package in your project:

import "@zachleat/icon-fall";

You can also load the library directly as a module:

<script type="module" src="icon-fall.js"></script>

Note that Font Awesome is not bundled with icon-fall. Load your Font Awesome Kit, web-font stylesheet, inline SVG, or SVG sprite separately.

Basic Usage

Place a Font Awesome icon inside <icon-fall>. The default effect renders 100 falling copies of the child icon.

<script type="module" src="icon-fall.js"></script>
<icon-fall>
  <i class="fa-solid fa-snowflake"></i>
</icon-fall>

Rotate Multiple Icons

Place multiple icons inside the component to cycle through different designs. The icons repeat in child order until the configured count is reached.

<icon-fall>
  <i class="fa-solid fa-star"></i>
  <i class="fa-solid fa-heart"></i>
  <i class="fa-solid fa-bolt"></i>
</icon-fall>

Change The Number Of Falling Icons

The default count is 100. Changing the attribute after the first render triggers another render.

Set the count attribute:

<icon-fall count="200">
  <i class="fa-solid fa-star"></i>
</icon-fall>

Change Icon Colors

Set --icon-fall-colors to a comma-separated list of CSS colors:

<icon-fall
  style="--icon-fall-colors: #ff6b6b, #51cf66, #339af0"
>
  <i class="fa-solid fa-star"></i>
</icon-fall>

Change Icon Size

The default icon size is 2em:

<icon-fall style="--icon-fall-size: 3em">
  <i class="fa-solid fa-snowflake"></i>
</icon-fall>

Available HTML Attributes

• count (integer, default 100): Sets the number of falling icon copies. Attribute changes trigger another render.
• ready: Added automatically after the first successful render.

Available CSS Custom Properties

• --icon-fall-colors: Comma-separated color list applied to the generated icons in rotation. The default behavior inherits color.
• --icon-fall-size (default 2em): Sets the base size of each falling icon.

Font Awesome Setups

icon-fall works with four Font Awesome rendering methods.

• SVG+JS and Kits: Font Awesome can replace <i> elements with SVG after page load. The component detects the resulting child changes and renders again.
• Web fonts: Font Awesome stylesheets are copied into the Shadow DOM when their URL contains fontawesome or font-awesome. Inline style blocks containing Font Awesome are detected as well.
• Inline SVG: Font Awesome SVG markup can be placed directly inside <icon-fall>.
• SVG sprites: Same-document <symbol> references are copied into the Shadow DOM. Same-origin external sprite references also work.

Custom Element Registration

The default import automatically registers <icon-fall>.

The package also exports the IconFall class for projects that need another custom element name:

import { IconFall } from "@zachleat/icon-fall?nodefine";
class MyIconFall extends IconFall {
  static tagName = "my-icon-fall";
}
MyIconFall.define();

Use the new tag after registration:

<my-icon-fall>
  <i class="fa-solid fa-star"></i>
</my-icon-fall>

Reduced Motion

icon-fall does not apply prefers-reduced-motion by itself. Projects using <is-land> can conditionally render the effect when motion is permitted:

<is-land on:media="(prefers-reduced-motion: no-preference)">
  <icon-fall>
    <i class="fa-solid fa-snowflake"></i>
  </icon-fall>
</is-land>

Alternatives & Related Resources

• Add Falling Snow Animation To Sites With Snow-fall Component
• Creating Customizable Snowfall with JavaScript – Snowflakes.js
• Display Falling Snowflakes On Webpage – pure-snow.js

FAQs

Q: Why are Font Awesome web-font icons missing inside icon-fall?
A: Font Awesome CSS must also reach the component’s Shadow DOM. Linked stylesheet URLs need fontawesome or font-awesome in the URL for automatic detection, while inline style blocks need to contain Font Awesome.

Q: Why do existing icons keep their old colors after I change --icon-fall-colors?
A: The component reads the color list during rendering. Change count or otherwise trigger another render if the generated icons need to receive the new palette.

Q: Why does the effect fail in a browser without Constructable Stylesheets?
A: icon-fall depends on CSSStyleSheet.prototype.replaceSync() and adopted stylesheets. It does not include an alternate rendering implementation for browsers without that API.