Subset Font Awesome to Only the Icons You Actually Use
- Font Awesome font files include thousands of icons — most projects use under 50
- Subsetting to your specific icon glyphs cuts the file 85–95%
- The Custom character set option works if you know the Unicode code points for your icons
- For more targeted icon-only subsetting, the font-awesome-subset npm package is purpose-built
Table of Contents
Font Awesome ships a font file containing thousands of icon glyphs. If your project uses 30 of them, the other 1,400-plus glyphs are overhead — downloaded and embedded with every page load for no reason. Subsetting Font Awesome to only the icons you actually use can cut the font file from 150–400 KB down to under 20 KB, depending on how many icons you need. Here is how to approach it, with and without a CLI environment.
Why Full Font Awesome Files Are So Large
Font Awesome 6 Free includes approximately 2,000 icons across three style variants (Solid, Regular, Brands). The corresponding font files — fa-solid-900.woff2, fa-regular-400.woff2, fa-brands-400.woff2 — together exceed 400 KB uncompressed. Even a single variant file runs 80–150 KB.
For most projects, the actual icons used in the UI number somewhere between 10 and 100. The rest of the glyphs are dead weight. Subsetting eliminates that dead weight and serves only the icon outlines your pages actually need.
Option 1 — Custom Glyph Subsetting via Unicode Code Points
Font Awesome maps each icon to a Unicode code point in the Private Use Area (PUA) — typically in the range U+F000 to U+F8FF. The Font Awesome documentation and Cheatsheet list the Unicode code point for every icon. If you know which icons you need and their code points, you can type those characters into the Custom field of the Font Subsetter.
To type a PUA character: on Windows, use the Character Map application (charmap.exe) or copy the character directly from the Font Awesome Cheatsheet. On Mac, use the Character Viewer. Paste the characters into the Custom field, generate the subset, and download.
This approach works but requires you to know the Unicode code points for each icon, which adds lookup time. It is practical for small icon sets — under 20 icons — where the lookup is manageable.
Sell Custom Apparel — We Handle Printing & Free ShippingOption 2 — font-awesome-subset for Automated Icon Subsetting
The font-awesome-subset npm package is purpose-built for Font Awesome subsetting. You pass it an array of icon names (e.g., ['home', 'user', 'search']) and it produces a subsetted font file containing only those icons. It handles the Unicode lookup automatically, which is the main friction point with the manual approach.
Setup requires Node.js: npm install font-awesome-subset. You then run it as a Node script or an npm build step. For teams already running a Node.js pipeline, this integrates cleanly. For designers or projects without a Node environment, the manual custom character approach (Option 1) is faster.
Option 3 — Replace Font Awesome with Inline SVG Icons
The most complete solution to Font Awesome file size is to stop using the font file altogether and switch to individual SVG icons. SVG icons are loaded only on pages that use them, have no font-loading delay, and can be styled with CSS. Libraries like Heroicons, Lucide, and Phosphor provide open-source SVG icon sets that integrate cleanly with React, Vue, and other component frameworks.
This is a larger refactor than subsetting, but for new projects it eliminates the font overhead entirely. For existing projects using Font Awesome heavily across many components, subsetting is the faster path to a performance improvement.
How to Measure Font Awesome File Size Impact
In Chrome DevTools, open the Network tab, filter by "font," and reload the page. Note the transfer size for each Font Awesome font file. After replacing with a subset, reload and compare — the transfer size for the font files should drop dramatically. For a project using 30 icons from Font Awesome Solid, a typical result is dropping from 120 KB to 8–15 KB.
Run a Lighthouse audit before and after and check the "Reduce unused CSS" and "Font render-blocking" diagnostics. A smaller font file that downloads faster will show improvement in both LCP time and Total Blocking Time.
Subset Font Awesome — Keep Only What You Use
Upload a Font Awesome font file and use the Custom character set to keep only the icons you need. Free, no CLI, no account.
Open Font Subsetter FreeFrequently Asked Questions
Does Font Awesome subsetting break the icon rendering?
No, as long as the subset includes the code points for all icons used in your UI. Icons not included in the subset will show as blank squares — review your pages after subsetting to confirm all icons render correctly.
Can I subset Font Awesome Pro files the same way?
Font Awesome Pro files are the same font format. The subsetter works on them the same way. Check your Font Awesome Pro license regarding whether subsetting is permitted — it typically is for the licensed project.
Is there a Font Awesome subsetter built into their website?
Font Awesome does not offer a built-in subsetter on their website as of 2026. Their Kit CDN approach adds some optimization via their delivery network, but a custom subset is still the most lightweight option.
