DoYouEvenFlutter [EP.3] Creating custom icon font

Luke Urban
ITNEXT
Published in
5 min readJan 13, 2021

--

Nowadays, almost every app uses icons, we basically live in the renaissance of iconography. Your icon amount can vary between a few to hundreds, depending on your app specification. While working full-time as a Flutter developer, I have to work closely with our UI design team, which loves creating custom icons for the app we are currently working on. This approach gives our creation a unique characteristic, differing our application from the crowd. Unfortunately, at first, there was a cost to this. The icons were not scalable and they’ve made our app heavier and heavier. The solution was pretty obvious: I had to use custom font class, the same method used by the Flutter team, but I couldn’t find a comfortable workflow for creating one.

If you are in need of:

  • Creating font, with your custom icons,
  • Save some space, by eliminating icons as images,
  • Have scalable custom icons that behave like build-in icons

Please continue reading this article.

What tool do we use to draw our icons?

That’s quite simple — Figma. Since I’ve discovered Figma back in my previous job, about two years ago, almost no one knew about it. At the time of writing this article Figma is FREE and it offers everything…

--

--

Writer for

Building tech startups in public🔨Trying to portray technology a little differently. Emphasis on trying…I publish tech/startup/programming videos on YouTube🔴