How to use Custom Icons in Flutter(Using SVG or Icon Font)?

Many icons are predefined in the flutter and are very easy to use. Many times though, just these icons are not enough. For example, if you want to show an icon of a particular company or logo etc, you'll have to reach for other than the official icons.

So, Let's see how you can add custom icons to your flutter project

Social Media Icon

Let's say you want to use the above social media icon. As of now, there is no pre-made package on pub.dev, so you'll have to add them yourself. This method will only work for any icon pack which has SVG icon font.

Converting for the use in Flutter

The first step is obviously you need to download the icon pack(SVG). If you are following along with the above icon, get it from this download page.

Once you have downloaded the SVG icon, you need to somehow convert these into icons to be able to use them in your flutter project.

Thankfully, There's one open-source tool fluttericon.com which can do the conversion for you.

Steps to proceed with fluttericon.com

1. Drag the SVG font file or icons to the webpage
2. Select the icons you want.
3. Give your Custom Flutter icon pack a name( this will also be used as the class name)
4. Download the zip file.

Get the zip file for use in Flutter

Using it in Flutter

After extracting the zip file you want to get the ttf file located under the fonts folder of extracted zip into your flutter project.

I created an icons folder so that regular fonts won't get mixed up with icon fonts.

This is a regular font file so you need to add it as a font asset in pubspec.yaml 

pubspec.yaml

…

flutter:

…

  fonts:    

    - family: AssetIcons

      fonts:

        - asset: assets/icons/AssetIcons.ttf

…

Now, drag the assets_icons.dart extracted from the zip file into the lib folder. It contains a AssetsIcons class which provides every single icon from the font.

assets_icons.dart

class AssetIcons {

  AssetIcons._();

  static const _kFontFam = 'AssetIcons';

  static const String? _kFontPkg = null;

  static const IconData socialMedia = IconData(0xe800, fontFamily: _kFontFam, fontPackage: _kFontPkg);

}

USAGE:

Using these icons is again as simple as importing the assets_icons.dart file

import 'assets_icons.dart';

...

Icon(AssetsIcons.socialMedia, size: 25),

...

 #Flutter