I’ve found there’s 2 reliable solutions to icons “cracking” when going from strokes to outlines:
Solution 1: scale it up, outline, then scale it back down
- While your icon path is still using a stroke, use the scale tool to increase the size to some super big value. My go-to is 1,000px by 1,000px.
- Try outlining it. If the vector path “cracks” or “breaks” like in your original screenshot, try a slightly different large size. There’s not a magic number necessarily. You could do 2,000px by 2,000px, or 1,623px by 1,623px! The idea is just to work at a very big size until you can successfully outline the path without any cracks.
- Once you successfully outline the path, you can scale it back down to a normal size that matches the rest of your icon set.
Solution 2: break down paths before outlining
I learned this from @Gleb, and he’s kindly posted this solution elsewhere in the forum: Fix Outline Stroke - #25 by Gleb.
I’ll expand on the steps here for clarity. The general idea is to split up the vector path from one path into many smaller paths. Once you have those, outline them, and then recombine into a single path:
- Starting with the stroked path, make a copy and name it "node harvesting"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.
- Double click into a vector path and a cluster of nodes. Cut the nodes to your clipboard.
- 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!
- Outline the smaller paths you just pasted in. If you still get cracked pieces, break them down further until this no longer happens.
- 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.
This approach is a bit more involved, and if you’re not used to working with vector paths in Figma (most UI designers don’t need to do this ever!) then you might run into some quirks (hence my “node harvesting” suggestion). I made an accompanying video tutorial and blog post if anyone wants more details or visual examples of these steps.