Discrepancies between Icon Design and Generated Font

Environment

Product Version 07/06/2023
Product ThemeBuilder

Description

Why do the generated font icons in ThemeBuilder differ from my icon design in Figma? How can I fix the discrepancies between the icon design in Figma and generated font in ThemeBuilder?

Cause

When you design icons in Figma and then convert them to font icons, the glyphs in the generated font may differ from the design. As a result, the generated font icon may represent a different shape. This common issue isn't specific to ThemeBuilder and has been reported by many svgs-to-font services like IconMoon, Fontello, and others.

The cause for the discrepancies is that Figma exports layers as SVGs that contain specific attributes like fill-rule and clip-rule, which determine whether a path or an area of the path must be filled or not. During SVG to font conversion, these attributes are discarded and lead to the observed discrepancies.

You can find a detailed explanation and a suggested workaround in the article Figma and Fontello: not the perfect duo. The right way to create an icon font

Solution

To fix any mismatches between the icon design and the generated font icons, use the Fill Rule Editor plugin for Figma. The plugin enables you to edit the fill rules of vector objects.

To fix any discrepancies between the design and the icon fonts, make sure that your icons in Figma have nonzero values:

  1. Install the Fill Rule Editor plugin for Figma.
  2. Select the icon object in Figma.
  3. Right-click the object and select Outline Stroke.
  4. Right-click the object again and select Plugins > Fill Rule Editor.
  5. In the small window that opens, note that some parts of the object are evenodd while others are nonzero.
  6. Click the path until the value changes to nonzero—the path will turn blue. Some empty parts of the object may get filled—this is expected at this point.
  7. Note the small arrows that show the direction of the paths.
  8. Click on the arrows to change the direction of the paths until you achieve the desired result.
  9. Close the plugin and export the icons.
In this article
Related articles
Not finding the help you need?