Figma to Flutter icon fonts

Creating custom icons for a Flutter app can be a tedious process, especially if you want to use different design tools and generate the necessary font and Dart files.

In this post, I will show you how to easily create custom icons in Figma and export them as SVG files, which you can then upload to Fluttericon.com to generate the necessary font and Dart files.

First, create your custom icons in Figma and export them as SVG files(Or from any other design software that you use).

To do this, simply select the icons you want to export and go to "File > Export > SVG".

This will create a separate SVG file for each of the icons you selected.

Next, go to https://www.fluttericon.com/ and upload the SVG files you just exported from Figma.

This will automatically generate the font and Dart files for you.

However, if you see an error like "If image looks not as expected please convert to compound path manually.

Skipped tags and attributes: stroke,stroke-width,fill", this means that your SVG files contain strokes that need to be converted to fills.

To do this, simply import the SVG files to https://icomoon.io/app, select all the icons, and export them.

If you encounter an error while trying to export the icons from icomoon.io, it is likely because you have strokes in the SVG files.

In this case, you will need to convert the strokes to fills before you can export the icons.

To do this, follow the instructions at https://icomoon.io/#docs/stroke-to-fill.

Once you have converted the strokes to fills and successfully exported the icons from icomoon.io, you will get a zip file that contains an SVG file.

You can then use this SVG file to upload to fluttericon.com and generate the necessary font(ttf) and Dart files.

These files are stored in a zip file, which you can download and extract on your work machine.

Now unzip the file, add the .ttf font file to the fonts directory and .dart file to the lib directory in your Flutter project.

Next, we need to update the pubspec.yaml file in our project to include the font icons.

To do this, add the following lines to the pubspec.yaml file:(replace font family name and fonts asst name with your fonts respective names)

flutter:
 fonts:
  - family: MyCustomFont
   fonts:
    - asset: fonts/my_custom_font.ttf

This will tell Flutter to use the my_custom_font.ttf font file as a custom font with the family name MyCustomFont.

Now you can start using the font icons throughout your app like below.

Icon(
  MyCustomFont.ico_success,
  color: ColorUtils.charcoal,
  size: 22,
)

This process may seem tedious at first, but it is actually quite simple once you get the hang of it.

And the end result is worth it, as you will have beautifully designed custom icons for your Flutter app.

Before closing, I just want to state some of the benefits of using custom icon fonts over jpeg/png:

1. Icon fonts are scalable, which means you can change their size without losing quality.

This is useful when creating responsive designs that need to look good on a variety of screen sizes.

2. Icon fonts are easy to customize.

You can change their color, size, and other styling attributes using the built-in IconTheme widget in Flutter. This makes it easy to create consistent, professional-looking designs.

3. Icon fonts are more lightweight than jpeg or png images.

Since they are rendered as text, they take up less space in your app's binary and can be downloaded more quickly. This can help improve the performance of your app.

Author: Anil Rao K