Anton Antonov
- Oct 16, 2019
- 4 min read

How to use custom icons in Flutter?

Hey! Before we actually get started please check out our new cool startup - Hello! App.

The best mobile app to exchange contacts between a group of people. https://link.helloapp.io/download

This article will cover

How to prepare vector icons;
How to convert created icons into a TTF file;
Usage of TTF icon fonts in Flutter;
How can you optimize the process by using our new XD plugin;

You can find many SVG icons to try here:

https://github.com/google/material-design-icons

For information like, how to create your own vector icons using Adobe XD, please visit:

https://helpx.adobe.com/xd/how-to/mobile-menu-icon.html

Preparing vector icons

There are two main things to keep in mind when making icons for flutter:

Make sure all vector paths are closed and any compound vector paths are combined;
If you need to use multiple colors in the same icon, the export process will be a bit more complicated. Your complex icon must be exported using numerous layers but as a part of one font file and combined later back into one icon programmatically in Flutter;
If your background layer is super complicated (see an example below), it makes sense to export it just as an image and put it into your Flutter app assets directory. In this case, you should export into a TTF font file only the foreground path of your icon;

As an example, you’d like to create such a complex icon; to achieve this goal, you need to create two vector paths, export them separately as a part of your TTF font, and apply colors later programmatically.

Or export only the foreground layer into the Flutter TTF font and use a raster image as a background. As a developer, you can combine both vector icons in a stack of widgets, one on top of another, to make the illusion it is one complex icon.

Create a new Artboard in Adobe XD.

Hint: Use Artboards to organize and group icons logically.

Create your foreground layer (or import any available SVG image to play with).

Make sure you don’t have groups, only Path entries (you can try groups as well, but sometimes the final result will not look as you may expect)

Export TTF fonts

...before, it was required for designers to perform a lot of steps to export the SVG icons into the TTF font:

Export all SVG files locally
Name all files properly
Go to FlutterIcon.com
Upload all icons on this website
Insert your custom font name like CoolIcons
Download archive
Extract files
Notice that downloaded .dart file has a strange name like cool_icons_icons.dart

Which is still cool, but… if your Developers are using componentization and prefer to organize the code into a set of reusable Flutter packages, they may face with unpleasant issue: an absence of fontPackage attribute for all entries in generated .dart wrapper file, which means they will need to patch such a file each time Designers team will update it… just to insert the required attributes. If the icons set is quite big it is an annoying task.

Before After

Here in Fin.Design we prefer to optimize such processes. With our new XD plugin, all you need to do to achieve the better result is just to perform one step: Select your well-organized Artboard and just export your cool new TTF font!

And if you need, you can add required fontPackage attribute just in-place, during the export!

You don’t need to download, extract, or whatever. It is just ready-to-go.

Hint: export your TTF fonts into the shareable folder to speed-up the team collaboration even more.

Let’s get back to our demo

On a previous stage, we created a new crisp Bitcoin vector icon as a part of our brand-new icons set, for some fin-tech project.

All you need to keep in mind is to organize things accurately in your Artboard:

TTF font generator uses the name of the Artboard as the name of the exported font and class (e.g., Cool will be converted to CoolIcons class and CoolIcons.ttf font file accordingly).
Name your Artboards logically (you can use multiple words separated by spaces, all other special symbols will be removed during the export). For instance, Contact Us will be exported as ContactUsIcons;

That’s why, if your Artboard is organized accurately, your export of the TTF font is just a three-click process.

1. Select Artboard

2. Choose “Export Flutter Icons” menu option

3. And finally, export it

Hint: Export Flutter Icons plugin supports multi-selection, so all you need to create multiple TTF fonts in one export is just to select multiple Artboards.

For information like, how to install Flutter and make your first Flutter app, please visit:

https://flutter.dev/docs/get-started/install

https://flutter.dev/docs/get-started/codelab

So, all you need to do to see your idea in the Flutter app:

Create a new demo project using the following command in the console:

Copy exported TTF font and .dart wrapper files to the .../bitcoin_icon_demo/lib directory

Drag and drop created folder bitcoin_icon_demo into the VS Code icon in Dock to open it (Mac users) or just open VS Code and open a newly created folder.
Create folder named assets in your lib directory and place your background image there. In our example, the background image is quite complicated, so we decided to use it as a png file.