DEV Community

Cover image for Stop hand-writing IconData — introducing `icon_font_extractor`
Julian Finkler
Julian Finkler

Posted on

Stop hand-writing IconData — introducing `icon_font_extractor`

If you've ever dropped a custom icon font into a Flutter app and then spent the next hour copying codepoints from a website into static const declarations, this one's for you.

(https://pub.dev/packages/iconfontextractor)


The real pain: Font Awesome Pro

My specific trigger for building this package was Font Awesome Pro. FA Pro is excellent — thousands of high-quality icons, multiple styles (solid, regular, light, thin, duotone), and a proper ligature-based font file. But integrating it into Flutter the "normal" way is a nightmare:

Find the codepoint for each icon you need

Write static const IconData faHouse = IconData(0xf015, fontFamily: 'FontAwesomePro') by hand

Repeat for every single icon across every style variant

Maintain it when you update the font

There are third-party packages that ship pre-built constant maps, but those only cover the free tier, go stale between FA versions, and add a dependency you have to trust. If you're paying for Pro, you have the font file — you should be able to use it directly, with zero manual work.


How iconfontextractor works

Icon fonts like Font Awesome Pro, Material Symbols, IcoMoon exports, and Fontello bundles all ship a GSUB ligature table inside the font file. That table maps human-readable strings ("house", "arrow-left", "trash-can") to glyph IDs, which are in turn mapped to codepoints via the font's cmap table.

iconfontextractor reads those two tables in pure Dart — no native code, no external font tooling — and emits a .g.dart file with a typed IconData constant for every ligature it finds.


Setup is few lines of YAML

You don't even add it as a dependency in your app. Install it globally once:

dart pub global activate icon_font_extractor

Then add a single block to your existing pubspec.yaml:

flutter:
fonts:
- family: FontAwesomePro # already here if you're using the font
fonts:
- asset: assets/fonts/fa-pro-6-solid-900.otf

icon_fonts:

  • family: FontAwesomePro outputFile: lib/icons/fa_pro_solid.g.dart naming: snake # icn_house, icn_arrow_left, icn_trash_can iconPrefix: fa # fa_house, fa_arrow_left, …

Run the generator:

icon_font_extractor generate

And you're done. You get a file like this:

// GENERATED CODE - DO NOT MODIFY BY HAND.
import 'package:flutter/widgets.dart';

@staticIconProvider
abstract final class FontAwesomePro {
FontAwesomePro._();

/// Ligature: house
static const IconData fa_house = IconData(0xE001, fontFamily: 'FontAwesomePro');

/// Ligature: arrow-left
static const IconData fa_arrow_left = IconData(0xE002, fontFamily: 'FontAwesomePro');

// … hundreds more
}

Use it exactly like any built-in icon:

Icon(FontAwesomePro.fa_house, size: 24)
IconButton(icon: Icon(FontAwesomePro.fa_arrow_left), onPressed: _goBack)


The best part: tree-shaking just works

Flutter's icon tree-shaking is baked into flutter build — it scans your compiled Dart code for IconData literals and strips every glyph from the font that isn't referenced. This normally only works with the Material icon set because it requires @staticIconProvider-annotated classes.

iconfontextractor emits exactly that annotation on every generated class. So if your app uses 40 out of 2,000 Font Awesome icons, only those 40 glyphs end up in your release build. No manual subsetting, no IcoMoon round-trips, no --tree-shake-icons=false workarounds.


Multiple fonts, multiple styles

Font Awesome Pro ships separate files per style. No problem — list them all:

icon_fonts:

  • family: FontAwesomeProSolid
    outputFile: lib/icons/fa_solid.g.dart
    iconPrefix: fas

  • family: FontAwesomeProRegular
    outputFile: lib/icons/fa_regular.g.dart
    iconPrefix: far

  • family: FontAwesomeProLight
    outputFile: lib/icons/fa_light.g.dart
    iconPrefix: fal

Each gets its own generated file. One generate run covers all of them.


Naming flexibility

Every team has different conventions. Four built-in strategies cover the common ones:

| Strategy | Example output |

|---|---|

| snake (default) | faarrowback_ios |

| camel | faArrowBackIos |

| pascal | FaArrowBackIos |

| keep | faArrow-back-ios (as-is after sanitising) |

The prefix is also configurable (iconPrefix), and it participates in the chosen strategy — so snake with prefix fa produces fa_house, camel produces faHouse, and pascal produces FaHouse. Consistent all the way down.


CI-friendly

A --check flag makes the tool exit non-zero if any generated file would change without actually writing it. Drop it in your CI pipeline to catch stale generated code before it lands:

GitHub Actions / any CI

  • run: dart pub global activate icon_font_extractor
  • run: icon_font_extractor generate --check

Works for any icon font

Font Awesome is just the motivating example. The same workflow applies to:

Material Symbols (the newer variable-weight successor to Material Icons)

IcoMoon / Fontello custom bundles

Any font exported from Figma with ligature names

Internal design-system fonts your team owns

If the font has a GSUB ligature table, iconfontextractor can read it.


Get started

dart pub global activate icon_font_extractor

Feedback, issues, and PRs are welcome. If you're using Font Awesome Pro or another commercial font and hit an edge case, open an issue — the more real-world fonts this is tested against, the better.

Happy coding! 🎉

Top comments (0)