Prevent icons from cracking when outlining strokes

You: "outline stroke"

Figma:

Your newly outlined icon:

Stroke vector paths becoming cracked and shattered messes after being converted to outlines sucks. Most annoying is it only seems to happen sometimes, to certain icons, but without any rhyme or reason. And worse still is manually untangling the nodes and paths is pretty much impossible and not worth your time.

Good news though, there's a solution. Multiple in fact!

Solution 1: scale it up, outline, then scale it back down

This is my preferred method because it's fast and very reliable (in my experience).

Chances are your vector path and the frame its in are normal size dimensions for icons, like 16x16, or 24x24, etc.

If you have an icon that keeps cracking when outlined, <span class="inline-code">⌘+Z</span> undo yourself back to having a stroked path. Then scale it waaay up. Like 1,000px by 1,000px—something massive. Then try outlining it again. Here's a GIF showing this method in action:

Once you've successfully outlined the shape without any cracks, scale it back down to a normal size, componentize it, and be on your way!

If you find you still get a cracked path when outlining the scaled-up icon, just try some slightly different dimensions. If 1,000px didn't work, try 1,500px, or 2,141px. The number really doesn't matter, as long as it's big. Eventually you should land on something that works!

Shout out to Figma community forum user, Mara3 for replying in a thread with this solution! I have them to thank for learning this method.

But if that's taking too long, or you're just not seeing results, try the following solution from Gleb's tweet thread:

Solution 2: break down paths before outlining

This method is a bit more involved, but also puts you in more control.

If your icon can be broken down into multiple simpler shapes, try separating them out. Here's an example video of doing this with Phone and No Phone from Feather Icon:

The steps you want to take are:

1. Starting with the stroked path, make a copy and name it "node harvesting"
2. Go back to the original icon path and look for simple, already-separated vectors (if there are any). Outline those first. If they crack, undo the action to revert back to the stroked path.
3. Double click into a vector path and a cluster of nodes. Cut the nodes to your clipboard.
4. Paste the nodes back into the frame. If you lose parts of your path, you can harvest missing pieces from the "node harvesting" copy you made in step 1!
5. Outline the smaller paths you just pasted in. If you still get cracked pieces, break them down further until this no longer happens.
6. Once all your path segments are outlined without cracks you can flatten all the outlined shapes into a single layer, or join them together with a union boolean operation.

Thank you to Gleb for tweeting about this method (and other ways to deal with cracked icons)!

This post happens to be part of a series of blog posts I'm writing about how to get your design system's iconography under control.