• Anton Antonov

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.


  • Open pubspec.yaml in VC Code and list your new resources (All generated .dart wrappers contain the corresponding instruction):


  • Notice we have lib/ before fonts and assets.

Hint: That’s an example of how you should place fonts and assets in reusable Flutter packages.

  • Open main.dart and perform the following changes:

1. Import your icons wrapper

2. Change your primary color

3. Replace the default floating action button

with a new one


4. Connect your device or open an emulator and run the following command from your project home directory: 

Have fun!



You can find the source code of the demo project here:

https://github.com/findesign-opensource/export-flutter-icons-demo

#flutter #development #productivity

4,538 views0 comments

Recent Posts

See All