<icon-fall> Web Component
September 16, 2026
@zachleat/icon-fall
A web component to rain Font Awesome icons down your web site.
Demo GitHub npm- Versions
- 1 version in1.0.0
New - Audit
- -
- Issues
-
0
- PRs
-
0
I’ve been doing some spring/fall cleaning and found an unpublished follow-up component to <snow-fall> (a web component to “snow” on your website — which also happens to work with emoji too). Originally it was created as an easter egg for Blog Awesome (click on the Font Awesome flag in the very bottom of the footer) but others have wanted to use it for more things!
Presenting: <icon-fall>:
It’s in use on this page (if you are on my web site and not in a feed reader). You can also install it with npm install @zachleat/icon-fall.
It has options for count (attribute, number of icons) and a comma separated list of colors (via --icon-fall-colors custom property).
Poster image by Johannes Plenio
17 Comments
@zachleat yes...responsibly https://emojistorm.rknight.me EmojiStorm
@zachleat “Sensitive content” hee hee hee
@zachleat @fontawesome A great victory for the web! Also, I stared at the demo way too long.
@Meyerweb I am a squishy sensitive person
@robb I’m not your dad
@pixelambacht @fontawesome 😅😅😅
@zachleat @fontawesome Dude... there's literally a snowflakes icon. Amateur hour. (just kidding)
@zachleat well this is a hell of a way to find that out
@khalidabuhakmeh @fontawesome I get paid by the component
@hejchristian @robb now compare it to github and youtube tabs 😅
@zachleat pleased with how easy it was to sloppily erase parts of the letters in the title here.
@cbirdsong did… did the moon crash into the earth
@zachleat i haven’t seen it, but I assume it did https://en.wikipedia.org/wiki/Moonfall_(film) Moonfall (film) - Wikipedia
I should have named it <icon-spring>
I should have named it <icon-spring>
@zachleat @fontawesome this is a sin against not only Jesus but a whole bunch of little miniature Unicode pictures of Jesus
@zachleat const date = new Date(); const month = date.getMonth(); let name = 'icon-confusion'; if (month > 2 && month < 6) { name = 'icon-spring'; } else if (month > 8) { name = 'icon-fall'; } customElements.define(name, definitio… Truncated