: Exporting from Sketch for icon font I am trying to export SVG icons from Sketch to import into Fontello, however the SVG's don't appear to be correct for the app (they also do not work in

@Sent7350415

This manual worked for me. it's very informative. he writer talks about sketch exporting problems. i'm quoting from his article in case the article will be removed.

Overall Solution


Create an artboard for each icon (insert -> artboard).
Make sure each artboard’s position
has no half-pixels and is an even number.
Remove all icon rotations.
Remove any bounding boxes so Sketch doesn’t export unneeded code.
Prevent SVG from being made out of borders layer > paths > vectorize stroke (thanks Gus)
export Clean .svg


*this is the icon the writer tried to export



Sketch exporting bugs

Bug #1

fixed sketch transform export by changing the artboard position to an even number.
This removes any transform in the code. On another note, since the position was off by half-pixels, Sketch changed the size of my viewbox to 0 0 25 25. My original artboard was 24 x 24px. This bug even added specs to the code. No bueno.

Bug #2

Problem: By design, each icon was set to width: 24px , height: 24px, and border-radius: 3px. The problem is, when exporting, the rectangle was added into the path, thus making it difficult to scale at any size by css.

Solution: Delete any transparent bounding box and let css do the magic. All the developers really needed was the viewbox set to 24 x 24px. They could add in the width, height, and border-radius.

Bug #3

Problem: Sketch exports a rotate(-180.000000).

<path d=”M16,7.4 L14.4864865,6 L8,12 L14.4864865,18 L16,16.6 L11.027027,12 L16,7.4 Z” fill=”#000000" transform=”translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) “></path>


Solution: Open up your .svg icon into Adobe Illustrator, rotate the icon, then drag & drop back into Sketch. This removes the rotation all together.

Bug #4
Problem: using the slice tool export translate and transforms again.
Solution: Nothing. Just don’t do it. It takes too long to slice anyways and is a waste of time.

Vote Up Vote Down

@Caterina889

I figured out how to export SVG from sketch for icomoon correct importing:

Step 1

Prevent SVG from being made out of borders by selecting the path group and clicking on: layer > paths > vectorize stroke

To know that this has worked, the strokes where transformed to closed paths and the inspector now displays the fill color instead of the border color.

Step 2

Export each icon/svg by clicking on the Make Exportable tab on the inspector and selecting SVG format.

Step 3

Import the SVG icons to icomoon as usual, now the set should display the icons correctly and the grid size should be accurate. NOTE: Make sure that all of your SVG's on sketch have the same height.

UPDATE 2016
Thanks to @jackocnr for pointing out that:


In 2016, the Sketch menu option is Layer > Convert to Outlines

Vote Up Vote Down

@Shanna688

If you are using sub-paths, flatten the shape before exporting. I still got an error in Fontello about creating compound paths manually, but it seems to have worked correctly.

(my shape was a circle with two shapes cut out of it.)

Vote Up Vote Down