Ask Your Question

Revision history [back]

click to hide/show revision 1
initial version

To enable automatic color filling when creating a font from an SVG Figma icon using Icomoon, you need to follow these steps:

  1. Open your SVG file in Figma and make sure that it has only one layer.

  2. Convert the layer into a vector by selecting it and then click on "Vectorize".

  3. Export the vector as an SVG file by selecting it and then click on "Export".

  4. Open Icomoon and select "New Icons Set" to create a new icon set.

  5. Click on the "Import Icons" button and select your SVG file.

  6. In the "Configure" tab, make sure that the "Font Name" is set to the desired name and click on "Generate Font".

  7. In the "Download" tab, download the font files.

  8. In your CSS file, add the following code to enable automatic color filling:

.icon {
  fill: currentColor;
}
  1. Use the font by adding an icon class to your HTML code and setting the color using CSS.

For example:

<i class="icon my-icon" style="color: red;"></i>

This will fill the icon with the current color specified in the CSS.