Figma and Fontello: not the perfect duo. The right way to create an icon font
When designing an application there are a lot of reasons to use icons: they are recognizable at first impact more than text, they can also replace text in some cases. Also, if they are intuitive, and beautiful, users will love them: the application will be simpler to use, and also pleasant. Icons are fundamental in a digital product.
You can find tons of icon sets online, some of the most famous are Material Design, Font Awesome, Icons8 and many more. But some times you just need some very customs icons that you can’t find online, e that’s the moment when you need to create a custom icon set. Or an icon font.
Our latest project is a cool application for a client. We decided to make it in Flutter and, yes, we needed to use a lot of custom icons.
Luckily, it’s easy to import icons on a Flutter project, thanks to FlutterIcon.com, which is a tool, based on Fontello, that create a font file with all the icons, and a couple of configuration files for the project.
Sounds cool, right? It is, but when we tried it for the first time we figured out it wouldn’t be a piece of cake as we thought.
Once we got our icons designed in Figma, we exported them in SVG format and imported them on FlutterIcon. A lot of them were not rendered correctly by the tool, and some of them didn’t even appear. Luckily, FlutterIcon notify us what was wrong: the generated SVGs were composes of tags and attributes that are not supported by the tool.
To understand more, and to fix all the issues, we decided to create some simple icons and shapes in Figma, and test them, to find out what’s wrong.
Since this article want to be as useful as possible for a lot of people, we now use Fontello for our examples. Practically speaking, nothing changes, since FlutterIcon generates the icon font in the same way Fontello does.
As you can see, the result is not good. The icons are in the same order as created. Only two icons are rendered correctly, one (the number 6) is filled instead of empty inside, the other ones are not rendered.
Let’s try to understand why: firstly, Fontello needs our icons to be compound paths. Also, Fontello doesn’t support a lot of tags, like rect, circle, line, stroke, mask and many more.
So, what we need to do? We have to fix our icons, and almost every single icon need different actions, so we will now fix them one at a time.
1. Filled square
If we open the SVG file with a code editor, we will see some simple code: inside the svg tag there are two rect tags.
The first one is a white rectangle big as the icon (36*36px), this is the background of our icon. Just forget about it.
The second rect is our black icon. The one we can’t see in Fontello.
rect is one of the tags that are now supported by Fontello. To get our icon we need to convert the rectangle into a path.
Luckily, Figma can do this action in a very simple way: we just need to select the rectangle inside the frame, right click on it, and select “Outline Stroke” from the menu. For those who prefers to use shortcuts, just use CTRL + Shift + O.
Now, apparently nothing changed in Figma. But let’s try to export our svg icon and open it with a code editor:
As you can see, the second rect tag has now been replaced by a path tag. The icon is exactly the same, but if we now try to import in in Fontello… surprise! Yes, it works!
(Fontello will still show us some error, but don’t worry about them, the icon will be showed correctly in our icon font).
2. Filled circle
The second icon, the filled circle, was invisible too in Fontello. Once we open the file with a code editor we can see that circle tag… which is not supported by Fontello…
Luckily, the solution is pretty the same the one we just seen for the square. Edit the icon in Figma, right click on the circle and select “Outline Stroke”, the export the frame and… now it works. This because the circle tag was converted to a path tag for the same shape.
Small tip: we had a circle tag here because the shape we made was a perfect circle. If you create an ellipse, will be converted to an ellipse tag, which is not supported by Fontello, so you’ll have to outline stroke it too.
3. Line
The thirth icon, the Line, is converted to a line tag. No, Fontello doesn’t support the line tag but yes, we can convert it to a path using the “Outline Stroke” action! Nothing more, nothing less than the previous icons.
Small tip: a shape tool similar to Line that you can find in Figma is the Arrow tool. It also works in a similar way, so you just need to draw your arrow and change the color and the stroke width. If you have an arrow in you icon, no panic: arrows will be automatically converted to path when Figma export the file, so no more extra steps to outline stoke it!
4. Custom shape
To create a custom shape we used the Pen tool. You can actually draw everything you want with it. And the result, once we export our icon, is a beautiful path tag, which Fontello can handle with no problems. In fact, this was one of the icons that rendered correctly in Fontello. No actions required here.
Small tip (again): if you need to draw a custom shape, the Pen tool is probably the fastest way. But if you just need a polygon or a star, Figma provides the Polygon and the Star tools, with their custom settings, which are pretty cool. And they will be converted to paths, so you see them in Fontello with no extra step but to export them.
Alright, let’s start again!
5. Union shape
Ok, there are a couple of things we need to consider here.
First, no panic for the wall of code inside the d attribute of the path tag. This time the icon is a bit more complicated than the previous ones, so it’s definitely normal to have more code that defines it.
The icon is a union of two circles. This doesn’t mean that we created two circles and exported the icon, we actually created a single object using the Union selection in Figma. The generated SVG code is a single path tag, and no two circle tags. And that’s why Fontello can render it correctly.
But you can see also that the path tags has a couple of new attributes: fill-rule and clip-rule, both with a “evenodd” value. Fontello doesn’t support these attributes, so it will ignore them. Luckily, this won’t break our icon. But it will do in the next one :(
6. Difference shape
While the code here looks like much simpler that the previous icon, that fill-rule and clip-rule attributes are causing errors.
We used the Substract selection tool to substract a square to a bigger square. The result is an empty square, but Fontello shows us a filled square.
When Figma exports our icon, it will add a couple of attributes, “fill-rule” and “clip-rule”, which are needed to determine the empty parts of an icon.
Just to do some tests, if we open the icon on Chrome, it will be shown with the empty part, as we want. What if we remove the fill-rule and clip-rule attributes? As you can see in the fiddle below, Chrome will show us a filled icon, because it cannot determine the empty parts of the icon.
This is exactly why Fontello shows us a filled icon: since it doesn’t support those attributes, it will just ignore them, but doing this results in renders a wrong icon.
So how to fix?
Of course there is a solution. We need to avoid using fill-rule and clip-rule, but without breaking everything. In fact, we can have icons with empty parts even without those attributes, or, better, using the default value for them, nonzero, instead of evenodd.
How does nonzero work?
We will try to explain it in a simple way. It all depends on the direction in which paths are created. If a path is created from left to right, it is drawn clockwise. If a path is created from right to left, it is drawn counterclockwise.
As you can see in the image below, in an icon with a big square drawn clockwise, and a smaller square also drawn clockwise, we end up with a unique filled square. But if the smaller square is drawn counterclockwise, we get the icon empty in the center.
A complete explanation of fill-rule values can be found in this nice article by Joni Trythall.
So, can we check and fix all these things directly from Figma? Yes, we can!
Thanks to the community there is a nice Figma plugin (developed by Evan Wallace) called Fill Rule Editor that is exactly what we need now.
As you can see, it’s very simple to use the plugin. We just need to:
- Select the object;
- Remember to outline stroke the object (Right click on it → Outline Stroke);
- Right click on it → Plugins → Fill Rule Editor;
- A small window will open. You can see your object colored in a beautiful orange or blue pattern. Orange means “evenodd” and blue means “nonzero”;
- We need a nonzero value, so we click on the path and the color will change; at this point some empty parts of the object may be filled;
- You can also see the directions of the paths. To invert them, click on one of the small arrows. Change them until you get a correct result;
- Once your icon is fixed and blue (it has to have a nonzero value), just close the plugin and export the icon.
This is the code of the fixed icon:
As you see there is no more fill-rule and clip-rule attributes. And the icon is now ready and working for Fontello.
Small tip: you may have to do this operation for a set of shapes. You don’t need to close the plugin every time. Just keep the plugin window open and select the object you need to edit to save some time :)
7. Stroked shape
The stroked shape looks similar to the difference shape, but actually is pretty different.
While the difference shape is an object created substracting a small square to a bigger square, the stroke icon is composed by a single shape (a circle) not filled and with a solid stroke.
Guess what? The stroke attributes (stroke and stroke-width) are not supported by Fontello, and that’s why we can’t see our beautiful icon.
Remember the “line” icon? It also had a stroke attributes, that was converted to a path using the “Outline Stroke” action in Figma. This is what we need to fix our icon. Outline stroke it, first. And then use the Figma plugin to check the shapes directions and to set a nonzero value to the fill-rule and clip-rule attributes, as we did in the difference icon. Et voilà! Our icon is ready to be converted!
8. Mask shape
No code this time. Masks are not supported by Fontello and Figma can’t convert masks in objects.
No solution this time, but we still have boolean operators (Union selection, Substract selection, Intersect selection and Exclude selection) that can’t be used to get the same result of masks. After using them always remember to Outline stroke the final object and use the plugin on it to check the path directions.
Bonus: texts
Using texts will not cause issues when you open your icon in Fontello. Figma automatically converts texts levels to paths. Also, we did a couple of tests and it looks like that there are no problems with number and letters which have empty parts (e.g. the number 8).
So… this is it!
We just fixed almost all of our icons. And even if we can’t directly use masks when we design our icons we can use different tools to get our perfectly shaped icons anyway.
Here’s a small list of things to keep in mind while designing icons in Figma for an icon font:
- Just one color, more different colors are not supported;
- You can use Figma tools like Rectangle, Circle, Line etc. but remember to always convert these elements to a path (Right click on the element→ Outline Stroke);
- You can use strokes, but remember to always convert the stroke to a path (Right click on the element → Outline Stroke);
- Always check the paths directions with the plugin if your icon have empty parts inside. Always click on the icon to set it a nonzero rule (blue pattern) and eventually change the paths directions to get your empty parts;
- Avoid the use of masks. You can use the binary operators instead;
Yes, a lot of steps to get a finished, working, icon for an icon font. We want to speed up the process so… we are working on a plugin to do this!
Stay tuned! 😉
That’s all!
It has been a nice journey through Figma and SVG worlds. At the end, we can see our beautiful icon set on our app!
Who we are?
We are a team of developers and designers based in Padua, Italy.
We make mobile applications and web apps, using Flutter, React and React Native. We are always ready to create something great!
Our website | Dribbble | Instagram | Linkedin
Are you interested on what we do? Drop us a few lines!
