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/icon\_font\_extractor)

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 icon_font_extractor 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.

icon_font_extractor 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.

icon_font_extractor 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)	fa_arrow_back_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, icon_font_extractor 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! 🎉

I developed an app (fairledger.app) in both typescript (web) and flutter (mobile). I use claude to develop in parallel, same core code pushed to both platforms. Same UI, same screens, etc. tbh, the web version seems to be more visually appealing. Running typescript in mobile browser looks better than the flutter app (except for the 'in browser vs app' aspect). The app just seems 'flat' compared to the web version? I realize I do have a critical eye and lean into perfectionism sometime,

Are there some flutter elements feature I can leverage to give a little 'pop' to the mobile app?