How to Use Font Awesome Icons in Flutter App

Flutter gives an inbuilt icon pack to use in your app, but it has very few icon sets, so you have to depend on other icon packs. Font Awesome is one of the best icon packs for flutter or web applications. See the example below and learn how to use Font Awesome Icons in your App.

Read this also: How to Use Flat Icons on Flutter App

First, you need to add font_awesome_flutter Flutter Package in your dependency. Add the following line in your pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  font_awesome_flutter: ^8.8.1

Icon(Icons.menu)

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

Icon(FontAwesomeIcons.cartPlus)

Icon(FontAwesomeIcons.user,
    size: 50, //Icon Size
    color: Colors.white, //Color Of Icon
)

Find out Icon's name from the official website of Font Awesome. You will find 1500+ icons freely. Get the name of an icon and use it in Flutter. Be careful, the Icon name is not exactly the same in Flutter, but the starting word is similar. Use Visual Studio Code with Dart and Flutter extensions, it will suggest the name.

See the example below and find out the use of Font Awesome Icons.

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class UseFontAwesome extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(
           title: Text("Use Icons"),
           leading: Icon(Icons.menu),
           //placing inbuilt icon on leading of appbar
           actions: <Widget>[
               
               IconButton(
                 onPressed: (){},
                 icon: Icon(FontAwesomeIcons.envelope), 
                 //using font awesome icon in action list of appbar
              ),

              IconButton(
                 onPressed: (){},
                 icon: Icon(FontAwesomeIcons.cartPlus), 
                 //cart+ icon from FontAwesome
              ),

              IconButton(
                 onPressed: (){},
                 icon: Icon(FontAwesomeIcons.userAlt), 
                 //cart+ icon from FontAwesome
              ), 
           ],
       ), //set app bar

       body: Container(
          height:300, //height of container
          alignment: Alignment.center, //alignment of content
          padding:EdgeInsets.all(20), //padding of container wrapper
          child:RaisedButton.icon(
                onPressed:(){
                    //action for raised button.
                }, 
                icon: Icon(FontAwesomeIcons.user,
                    size: 50, //Icon Size
                    color: Colors.white, //Color Of Icon
                ), 
                label: Text("Awesome", style: TextStyle(
                    fontSize: 60, //button font size
                    color: Colors.white //button font color
                ),),
                color: Colors.deepOrangeAccent, //color of button
          )
       )
    );
  }
}

In this way, you can use Icons in Flutter and make your app more attractive and interactive.