How to convert all shapes to outlines in an SVG.

Hi, I’m trying to upload some SVGs to FontAwesome to serve them as custom icons. However, when uploading I’m stumbling with the error:

This SVG contains strokes that need be expanded.

There were strokes detected in your SVG. You’ll need to convert all shapes to outlines in your source file, re-export the SVG, and try uploading again.

I’m trying to find a function that does this conversion but cannot find it and, to be honest, I don’t understand what exactly this conversion to outlines means for this purpose. The SVGs I’m trying to upload are composed by a few shapes and sometimes masked with other ones.

Can someone point me to the right direction to convert shapes to outlines in Sketch?

1 Like

Hey Andres,

Thanks for sharing this!

Reading your post, and the mention of masks, not sure if the the Font Awesome tool is reading well the way we are exporting Masks in the SVG and therefore, causing issues. Would you mind trying to expand and then flattening those shapes masked and see if that helps?

If you could also share the URL to the Font Awesome tool, and a sample Document, we’d love to take a look at this as well!


Another solution proposed by one of my colleagues (after sharing this specific case internally) is:

  • Select all the elements within the graphic you want to export as SVG
  • In the menubar, do: Layer > Convert to Outlines
  • Export the SVG and try again.

Hi Raul and thanks for your interest.

I’ve dug a little bit further and apparently the problem arises from the fact that FontAwesome need the SVG to contain only one path and of course if multiples shapes are included then one must find a way to flatten them into one path. For this purpose FontAwsome docs suggest to combine shapes with logical operators, which I’ve done but this hasn’t solved the issue.
FontAwesomeTestIcon.sketch (7.6 KB)

So far I was able to solve the problem using Figma by combining shapes with logical operators and then using their function ‘Outline stroke’. I’ve try to replicate the solution in Sketch by applying the logical operators as well and trying to use the ‘Convert to outlines’ function but, no matter what I select, it’s always greyed-out and unavailable.

I’ve attached a Sketch file with 3 testing Artboards, if you want to play around with them. There’s a ‘raw’ version (only the shapes), a combined version (shaped combined with ‘difference operator’) and a masked version (shapes combined with a mask). All combined versions, when exported, cause the issue with FontAwesome.

Also, here are some links to FontAwesome’s docs:

Thanks for your follow-up, appreciate your help

Hey Andres,

Thanks a ton for the sample Document and the extra information on the current situation!

We made some changes and adjustments to the Document, and created a copy of the Icon that we think might work. Would you mind:

  • Downloading this version of the Document
  • Selecting the Icon test Artboard
  • Exporting the icon as SVG
  • Trying to upload it to to FontAwesome?

For your convenience, we have also exported the icon so you can try right away to upload it to FontAwesome.

Let us know how it goes!

Hi Raul for trying to figure out this. I’ve tried to upload to FontAwesome an exported SVG from the icon_test artboard, as you instructed but, unfortunately, I keep getting the error “This SVG contains strokes that need be expanded.” I’ve also tried uploading the SVG file you shared with me, just in case, but still produces the same error.


Thanks for trying that, we’ll keep on checking what could be happening and report back as soon as we know more.

We don’t have access to the FontAwesome upload tool so it might take some time, but we’re on it! :pray:

We haven’t had much success trying to replicate this on our end. However, I do know the team is actively looking into some issues with exporting SVG files from the app, and we’ll forward these comments to them. :pray:

Thanks Raul, no worries. Whenever available send me any new files and I can try them in my FontAwesome kit, no problem. Cheers.