Using Font Awesome Icons in Flutter

Last updated on April 18, 2022 A Goodman Loading... Post a comment

This article covers almost everything you need to know about using Font Awesome icons in Flutter.

Overview

Font Awesome is a popular icon kit for websites and mobile apps which contains thousands of free icons (you can see the full list of free icons here).

You can easily add Font Awesome icons to your Flutter app with the flutter_font_awesome package.

To implement a Font Awesome icon, we use the following constructor:

FaIcon(
  IconData? icon, 
  {
     Key? key, 
     double? size, 
     Color? color, 
     String? semanticLabel, 
     TextDirection? textDirection
  }
)

Here are the details about the properties:

PropertyTypeDescription
iconIconData?which icon will be shown
keyKey?the key of the icon widget
sizedouble?how big the icon is
colorColor?set the color for the icon
semanticLabelString?semantic label
textDirectionTextDirection?the text direction to use to render the icon

Sample usage:

FaIcon(
      FontAwesomeIcons.accessibleIcon,
      color: Colors.red,
      size: 80,
),

Your IDE (I’m using VS Code) will suggest available icons as you type FontAwesomeIcons. like this:

To get a better understanding, see the complete example below.

Example

Preview

This tiny app does nothing but displays some Font Awesome icons:

The Code

You can install flutter_font_awesome package by running the command below:

flutter pub add font_awesome_flutter

Here’s the full source code in main.dart with explanations:

import 'package:flutter/material.dart';

// import font awesome
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'KindaCode.com',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('KindaCode.com')),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          // a simple icon
          const FaIcon(
            FontAwesomeIcons.lightbulb,
            color: Colors.red,
            size: 80,
          ),
          const SizedBox(
            height: 10,
          ),
          // another simple icon
          const FaIcon(
            FontAwesomeIcons.bitcoin,
            color: Colors.blue,
            size: 80,
          ),
          const SizedBox(
            height: 10,
          ),
          // icon in button
          OutlinedButton.icon(
              onPressed: () {},
              icon: const FaIcon(
                FontAwesomeIcons.arrowsRotate,
              ),
              label: const Text('Demo Refresh Button')),
          const SizedBox(
            height: 10,
          ),
        ]),
      ),
      // icon in floating action button
      floatingActionButton: FloatingActionButton.large(
        onPressed: () {},
        child: const FaIcon(
          FontAwesomeIcons.bomb,
          size: 40,
          color: Colors.yellow,
        ),
      ),
    );
  }
}

Conclusion

You’ve learned how to use Font Awesome in Flutter. As of now, you have one more option to add icons to your apps. If you’d like to explore more new and fascinating things in the modern Flutter world, take a look at the following articles:

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles