Use font icons in Flutter

5 min read, 23 November, 2018

Icons are used extensively in mobile apps. In Flutter, we can use Icon to display icons. We can also use IconButton to render a button with an icon. This article shows different ways to use icons in Flutter apps.

  • Icons from Material design
  • Icons from community packages
  • Icons from custom fonts

Material design icons

Material design icons are already included and can be used directly. For example, Icon(Icons.alarm) renders the alarm icon. Icons contains constants for all icons. You just need to find the correct one to use.

Community icons

There are a number of community packages that include different icons to use. A quick search shows the following packages.

Let's use the package font_awesome_flutter to add Font Awesome icons.

The package font_awesome_flutter needs to be added to pubspec.yaml first.

dependencies:
  flutter:
    sdk: flutter

  font_awesome_flutter: ^8.2.0

Then import the package,

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

Now we can add Font Awesome icons using Icon(FontAwesomeIcons.angry). FontAwesomeIcons also contains a list of constants for different icons.

Custom font icons

If you are trying to use some commercial font icons or there is no community packages available for the font icons, you can still use the font icons directly in Flutter apps.

Let's use Boxicons as an example. First we need to get the font file. Here I find the boxicons.ttf file from GitHub and put it under the directory fonts.

Then we need to add the font to pubspec.yaml. Here we declared a custom font family Boxicons with the font file fonts/boxicons.ttf.

flutter:

  fonts:
    - family: Boxicons
      fonts:
        - asset: fonts/boxicons.ttf
          weight: 400

To render an icon, we need to provide the IconData object with the icon's code point and font family. Font family is the name we declared in pubspec.yaml. The code point is the identifier for each icon, 0xeb03 here is for the bolt icon in Boxicons.

Icon(IconData(0xeb03, fontFamily: 'Boxicons'))

We can use different approaches to find the code points for icons. Font Awesome provides a JSON file to list metadata for all icons, including code points. font_awesome_flutter uses this file to generate constants for the icons. Boxicons doesn't provide this kind of metadata. It has a SVG file where we can find code points for icons. For example, the code below shows the code point 0xeb03 of the icon bxs-bolt.

<glyph unicode="&#xeb03;" glyph-name="bxs-bolt" d="M587.221 859.563c-7.861 9.264-19.513 15.104-32.529 15.104-0.009 0-0.018 0-0.027 0h-255.999c0 0 0 0-0.001 0-22.061 0-40.212-16.744-42.437-38.217l-0.015-0.183-42.667-426.667c-0.136-1.279-0.214-2.764-0.214-4.267 0-23.564 19.103-42.667 42.667-42.667 0 0 0 0 0.001 0h128v-334.976l417.323 521.643c5.803 7.23 9.314 16.517 9.314 26.624 0 23.562-19.080 42.668-42.633 42.709h-205.615l34.389 206.293c0.364 2.096 0.572 4.509 0.572 6.971 0 10.563-3.831 20.232-10.18 27.692l0.050-0.061z" />

I created the package boxicons_flutter to make the use of Boxicons easier.

Display icons

Icon has several other arguments.

  • size - Size of the icon. Icons are always square with width and height both equal to size. The default value of size is 24.0.
  • color - Color of the icon.
  • semanticLabel - Label for accessibility.
  • textDirection - Text direction, either right-to-left, TextDirection.rtl; or left-to-right, TextDirection.ltr.

IconWidget shown below specifies the icon size to 120.

class IconWidget extends StatelessWidget {
  IconWidget(this.iconData, this.description);

  final IconData iconData;
  final String description;

  
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(10),
          ),
          Icon(
            iconData,
            size: 120,
          ),
          Text(description),
        ],
      ),
    );
  }
}

Below is the screenshot of different font icons.

Screenshot of font icons

Source code

Source code of this article is available on GitHub.