fontawesome_auto_subsetter

README

TLDR

It is a CLI tool that scans your an input directory for all references to fontawesome icon tags, for example fa-home, fa-user, etc.

It then generates an optimized bundle containing an all.min.css file and accompanying font files (fa-solid-900.woff2, fa-regular-400.woff2, and fa-brands-400.woff2).

Install:

go install github.com/BookOfCooks/fontawesome_auto_subsetter

Run:

fontawesome_auto_subsetter ./src ./static/fontawesome

This will scan all files in the ./src directory for any files that contains references to fonts like fa-home, fa-user, etc. When it's found all the used icons, it subsets the woff2 files and purges the css file to create an optimized bundle.

That bundle is then saved to:

./static/fontawesome/css/all.min.css
./static/fontawesome/webfonts/fa-brands-400.woff2
./static/fontawesome/webfonts/fa-regular-400.woff2
./static/fontawesome/webfonts/fa-solid-900.woff2
./static/fontawesome/webfonts/fa-v4compatibility.woff2

To embed into your site:

<link rel="stylesheet" href="/assets/fontawesome/css/all.min.css"/>

Motivation

Font Awesome is probably the most widely-used, popular, and recognizable icon libraries in all of development. Its primary advantages are the massive repertoire of icons for seemingly every purpose under the sun, and it's ease-of-use.

However, those two properties count as its biggest downsides.

Font Awesome is Huge

MASSIVE! Okay, maybe not under today's abhorrent standards, but PageSpeed Insights sure makes it feel like it. As of writing this (May 12, 2026), the free bundle contains 2,183 icons.

The all.min.css you import to use it is 75.5 KB but transfers 17.3KB. That sounds pretty good, yeah compression! But unused css has more effects than wasting network bytes

The more unused CSS there is, the more time that a browser might potentially need to spend calculating the styles for each node.

It's even worse for the .woff2 font files.

fa-regular-400.woff2 (18.9 kB)
fa-solid-900.woff2	(114.7 kB)
fa-brands-400.woff2	(110.1 kB)

You might be asking, "what about the transfer sizes." It turns out if you compress the file (which the cdnjs.cloudflare.com does), the transfers sizes is actually a KB or so larger than their actual file sizes. You can test this for yourself by importing FontAwesome via CDN.

Why does this happen. Well woff2 files are already heavily compressed, just like JPEG compression. So a second round of compresssion by HTTP middleware often just makes the file bigger, read more about it from Mozilla.

Font Awesome is easy to use

I should start off by saying that there is more than 1 way to use FontAwesome.

Firstly, if you're lucky to be in a modern web project with bundlers and frameworks, you can utilize Font Awesome NPM packages to import the icons you need as Components.

Secondly, rather than using the simple <i class="fa-solid fa-house"></i>, you can copy the icon's SVG markup directly from fontawesome.com.

However, the most common method people use by far is the CDN, which means they import the entire FontAwesome library. Yes it's slow, but does come with some advantages.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

It's a single line of code, and now you don't have to fiddle with components or SVG. Especially SVG (Scalable Verbose Graphics).

<i> tags inherit your text color, SVGs don't. <i> tags are self descriptive, SVGs aren't. <i> tags are good, SVGs mustn't.

However, there's one advantage SVGs have over <i> tags; they don't require import()ing heaven and earth to load on the site.

My Solution

Some people don't want to put even a morsel of effort into optimizing their websites. And for that, I have no solution.

This tool is primarily for me and for the clients I work with and whose sites I optimize. So I built a basic tool that just does the simplest thing possible to achieve my goals.

Font Awesome actually has a subsetting tool, though it seems I must select the icons I want manually. Absolutely unacceptable.

So I wrote a CLI to do it for me automatically. To install:

go install github.com/BookOfCooks/fontawesome_auto_subsetter

Then run:

fontawesome_auto_subsetter ./src ./static/fontawesome

This will scan all files in the ./src directory for any files that contains references to fonts like fa-home, fa-user, etc. When it's found all the used icons, it subsets the woff2 files and purges the css file to create an optimized bundle.

That bundle is then saved to:

./static/fontawesome/css/all.min.css
./static/fontawesome/webfonts/fa-brands-400.woff2
./static/fontawesome/webfonts/fa-regular-400.woff2
./static/fontawesome/webfonts/fa-solid-900.woff2
./static/fontawesome/webfonts/fa-v4compatibility.woff2

It will also tell you how many icons you're using, here's a sample from my site:

khalil@khalil-computer:~/Desktop/prayershub_workspace/goserver$ fontawesome_auto_subsetter ./ ./dist/fontawesome
Font Awesome 7 Free Regular:    Using 8 out of 170 glyphs
Font Awesome 7 Free Solid:      Using 47 out of 1423 glyphs
Font Awesome 7 Brands Regular:  Using 0 out of 551 glyphs
Font Awesome v4 Compatibility Regular:  Using 2 out of 39 glyphs

To embed into your site:

<link rel="stylesheet" href="/assets/fontawesome/css/all.min.css"/>

That's great and all, but what do the numbers look like? (comparing actual size)

css/all.min.css                     75.7kb  -> 11.5kb
webfonts/fa-brands-400.woff2        110.1kb -> 372 bytes (excluded)
webfonts/fa-regular-400.woff2       18.9kB  -> 1.6kb
webfonts/fa-solid-900.woff2         114.7kb -> 4.8kb
webfonts/fa-v4compatibility.woff2   4.0kb   -> 724 bytes (excluded)

I like having green in my PageSpeed Insights, and customers and users of my websites like them do. If that sounds like you, let's talk: bookofcooks123@gmail.com