font_awesome_flutter 8.8.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 99

font_awesome_flutter #

Flutter Community: font_awesome_flutter

The Font Awesome Icon pack available as set of Flutter Icons.

Based on Font Awesome 5.13. Includes all free icons:

  • Regular
  • Solid
  • Brands

Installation #

In the dependencies: section of your pubspec.yaml, add the following line:

  font_awesome_flutter: <latest_version>

Usage #

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return IconButton(
      // Use the FaIcon Widget + FontAwesomeIcons class for the IconData
      icon: FaIcon(FontAwesomeIcons.gamepad), 
      onPressed: () { print("Pressed"); }

Example #

View the Flutter app in the example directory to see all the available FontAwesomeIcons.


Why aren't the icons aligned properly or why are the icons being cut off? #

Please use the FaIcon widget provided by the library instead of the Icon widget provided by Flutter. The Icon widget assumes all icons are square, but many Font Awesome Icons are not.

Why aren't the icons showing up on Mobile devices? #

If you're not seeing any icons at all, sometimes it means that Flutter has a cached version of the app on device and hasn't pushed the new fonts. I've run into that as well a few times...

Please try:

  1. Stopping the app
  2. Running flutter clean in your app directory
  3. Deleting the app from your simulator / emulator / device
  4. Rebuild & Deploy the app.

Why aren't the icons showing up on Web? #

Most likely, the fonts were not correctly added to the FontManifest.json. Note: older versions of Flutter did not properly package non-Material fonts in the FontManifest.json during the build step, but that issue has been resolved and this shouldn't be much of a problem these days.

Please ensure you are using Flutter 1.14.6 beta or newer!

How can I use pro icons? #

This library only packages the free Font Awesome icon fonts. If you own the pro icon fonts and want to use them with Flutter, please follow these instructions.

❗ By importing pro icons you acknowledge that it is your obligation to keep these files private. This includes not uploading your package to a public github repository or other public file sharing services.

  • Download this package's newest release, extract the folder and move it to a location of your choice
  • Remove #s from pubspec.yaml at the indicated position
  • run flutter packages get
  • Download your font awesome pro icons (web version)
  • Move all .ttf files from the webfonts directory to this package's lib/fonts (replace existing fonts)
  • Move icons.json from metadata to this directory
  • Run ./tool/
  • Add version >= 4.7.0 to your project's dependencies, Override it with the path to your local installation
  font_awesome_flutter: '>= 4.7.0'
    path: /path/to/your/font_awesome_flutter

Duotone icons #

Duotone icons require special treatment. Instead of FaIcon a special class FaDuotoneIcon needs to be used. It allows to set the primary and secondary colors for the icon. If primary and / or secondary color are not defined, they will default to the standard IconTheme color.


Contributors #

  • Brian Egan
  • Phil Plante
  • Michael Spiss

8.8.1 #

  • Fix icon_data.dart not being accessible

8.8.0 #

  • Upgrade to Font Awesome Icons 5.13

8.7.0 #

  • Add FaIcon widget for Font Awesome Icons
  • Update README with FAQ

8.6.0 #

  • Move package to FlutterCommunity
  • Upgrade to Font Awesome Icons 5.12.1
  • Directions to support pro icons if you've purchased them (thanks @michaelspiss!)

8.5.0 #

  • Upgrade to Font Awesome Icons 5.9

8.4.0 #

  • FIX BAD BUILD - 8.3.0 had a problem with the update Script, please do not use!
  • Upgrade to Font Awesome Icons 5.7

8.3.0 #

  • Upgrade to Font Awesome Icons 5.7

8.2.0 #

  • Upgrade to Font Awesome Icons 5.5

8.1.0 #

  • Upgrade to Font Awesome Icons 5.3.1

8.0.1 #

  • Fix documentation

8.0.0 #

  • Upgrade environment version constraint for Dart 2
  • Upgrade to font awesome icons 5.2.0

7.1.0 #

  • Upgrade to font awesome icons 5.1.0

7.0.0 #

  • Renames:
    • All icons that end with capital-O (for outline) have been renamed. E.g. addressBookO has been renamed addressBook
    • All solid icons have been renamed to solidIconName. E.g. addressBook renamed solidAddressBook
  • Generate Icon pack based on JSON definition from source. Much easier upgrades / maintenance / consistency going forward! Big thanks to @pplante on Github for the contribution :)
  • Move fonts into the lib folder.

6.0.0 #

  • Update to Font Awesome Icons 5.0.2, which includes tons of new Icons!

5.0.0 #

  • semver mistake: 4.7.3 should have been a major bump as it involves breaking changes.

4.7.3 #

  • Simpler Install: Remove the need to specify the font in your own pubspec.yaml

4.7.2 #

  • MOAR README updates

4.7.1 #

  • README fix

4.7.0 #

  • Expose Font Awesome 4.7.0 woff font asset. This was the smallest version of the font file that worked with Flutter.
  • Created FontAwesomeIcons class, which provides static access to all Font Awesome 4.7.0 Icons as IconData, similar to Flutter's built-in Icons class.
  • Created a Gallery App that can be used to view all provided icons
  • Created README with installation instructions
  • Added file


import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:font_awesome_flutter_example/icons.dart';

void main() {

class FontAwesomeGalleryApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Font Awesome Flutter Gallery',
      theme: ThemeData.light().copyWith(
        iconTheme: IconThemeData(size: 36.0, color: Colors.black87),
        textTheme: TextTheme(
          body1: TextStyle(fontSize: 16.0, color: Colors.black87),
      home: FontAwesomeGalleryHome(),

class FontAwesomeGalleryHome extends StatefulWidget {
  State<StatefulWidget> createState() => FontAwesomeGalleryHomeState();

class FontAwesomeGalleryHomeState extends State<FontAwesomeGalleryHome> {
  var _searchTerm = "";
  var _isSearching = false;

  Widget build(BuildContext context) {
    final filteredIcons = icons
        .where((icon) =>
            _searchTerm.isEmpty ||
    final orientation = MediaQuery.of(context).orientation;

    return Scaffold(
      appBar: _isSearching ? _searchBar(context) : _titleBar(),
      body: GridView.builder(
        itemCount: filteredIcons.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
        itemBuilder: (context, index) {
          final icon = filteredIcons[index];

          return InkWell(
            onTap: () {
                  builder: (BuildContext context) {
                    return GestureDetector(
                      onTap: () {
                      child: Container(
                        color: Colors.white,
                        child: Hero(
                          tag: icon,
                          child: FaIcon(
                            size: 100,
            child: Column(
              children: <Widget>[
                Hero(tag: icon, child: FaIcon(icon.iconData)),
                  padding: EdgeInsets.only(top: 16.0),
                  child: Text(icon.title),

  AppBar _titleBar() {
    return AppBar(
      title: Text("Font Awesome Flutter Gallery"),
      actions: [
            icon: FaIcon(,
            onPressed: () {
                  onRemove: () {
                    setState(() {
                      _searchTerm = "";
                      _isSearching = false;

              setState(() {
                _isSearching = true;

  AppBar _searchBar(BuildContext context) {
    return AppBar(
      leading: IconButton(
        icon: FaIcon(FontAwesomeIcons.arrowLeft),
        onPressed: () {
            () {
              _isSearching = false;
              _searchTerm = "";
      title: TextField(
        onChanged: (text) => setState(() => _searchTerm = text),
        autofocus: true,
        style: TextStyle(fontSize: 18.0),
        decoration: InputDecoration(border: InputBorder.none),

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  font_awesome_flutter: ^8.8.1

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:font_awesome_flutter/font_awesome_flutter.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Jul 2, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

because of import path [font_awesome_flutter] that is in a package requiring null.

Health issues and suggestions

Document public APIs. (-0.74 points)

1599 out of 1613 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.28.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8
Dev dependencies
recase ^3.0.0