Converting icons to curves

Verze:

31. 07. 2023

Zodpovědná osoba:

Dominik Šlechta

In illustrator it's quite easy, adobe XD also handles it mostly without problem. Figma often doesn't handle icons well though, and to get the correct conversion to curves you need to throw in inkscape.

In Figma we can add new icons for example via plugins.


Unfortunately some icons may have stroke instead of fill, this could lead to inconsistent sizes.

So you need to select the icon and set how it should be exported in the bottom right (you can have more icons at once, but you need each icon to have its own grouped paths)


After exporting, open for example inkscape (free software), select the inserted icons (again there can be more than one) and convert to fill via the top menu.


Check the layers in the right column (if you don't see the layers, there are tabs with the layers icon at the top, or click on the layers icon in the far right bar - VIEW OBJECTS)

Check if the icons are grouped correctly, you can double-click to rename the layers.

Select the icons in inkscape and the export menu will open on the top left via File -> Export. Here we choose batch export - export the groups separately and at the bottom we set the format to svg and change the path if necessary.


Now we can insert the icons again into Figma, or wherever we need. We have successfully converted.