How To Use Icons In Flutter? Font Awesome Icons In Flutter

In this tutorial, we will discuss icons in flutter in detail, how we can customize the flutter icon widget, how can we change icon flutter color, font awesome icons flutter implementation, how to change icons size, the usage and implementation of font awesome icons, but first if you are new and want a complete setup and want to build your first app instantly, then click here, now let’s jump into flutter icons.

Introduction: Flutter Icons

Icons are used in flutter app to make the apps more attractive. To use them in your flutter app, make sure in the flutter section, uses material design is true in your pubspec yaml.

flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

By default, it will be true, but if not then set it to true. Now let’s leave the boring part and start implementing icons in flutter app.

Implementation

Icon(Icons.email)

So by using the icon class, we have implemented our first icon. The required first argument is icon data, we have used email icons using the icons class and getting the email icon from it. Let’s see if we can see an email icon in our flutter app:

Icon Color

color: Colors.blue

In order to change the color of flutter icon, use the color constructor of icon class. In our case, we have specified it to blue. Let’s see how it looks now:

Icon Size

size: 50

Flutter icon size change takes place by using the size constructor of icon class. We have set it to 50, now let’s see how it looks:

Font Awesome Icons

Let’s talk about using font awesome icons to implement icons. We can see a lot of beautiful icons using this package. Let’s see how to use it.

Import Font Awesome Flutter

font_awesome_flutter: ^9.2.0

Import font awesome flutter icons by importing this package. Use it in the dependencies section of your app’s pubs pec yaml as shown in the below image:

Implementing Font Awesome Icons

Icon(
        FontAwesomeIcons.airFreshener,
        color: Colors.blue,
        size: 50,
      )

As we can see in the above code, the implementation of font awesome icons is simple. Just use font awesome icons class in the icon data argument of icon class and you can access and use the font awesome icons in flutter app. We have used air freshener, let’s see how it looks:

Icon Theme

IconTheme(
        data: IconThemeData(opacity: .2),
        child: Icon(
          FontAwesomeIcons.airFreshener,
          color: Colors.blue,
          size: 50,
        ),
      )

Using the icon theme class, we can specify the icon’s color, size and opacity. For demonstration, we have given it an opacity of 0.2. Let’s see how the icon appears now: