How do you manage icons' source file while flattening is required by the icon library?

You can combine vectors in so called Boolean Groups. This is as easy as combining two or more vectors with a boolean operation. In this Boolean Group your vectors are still preserved and editable, while the group itself appears as an outlined/converted shape. If you change the vectors inside the group (e.g. increase stroke width) this will affect the outer shape of the Boolean Group.

I am currently working on my very own icon set (launching soon) and I’m leveraging this very technique to keep my icons editable but to let them appear as outlines (this also works when exported as an SVG). I already created like close to 1000 icons with this approach and so far it’s working quite well and straightforward.

Additionally, Boolean Groups can be nested – so the complexity of your icons shouldn’t be an issue 😊

Hi Thomas, thanks for the advice. Yeah boolean groups can be an ideal solution if it works perfectly as expected and I have been using it in my new icon set, too 😀
However, as the icon set grew, we started to encounter some unexpected display with some of icons.

Here’s a recent case:

I noticed that the rotate circle seemed to be the source of problem because once they are flattened, it’s solved. These things makes me wonder if there’s a better way to manage icon set? Since Microsoft Fluent and some other big companies’ icon set on Figma Community is fully flattened and outlined.

Haha, yeah I agree…sometimes the vectors and/or boolean operations can lead to pretty weird results. In your example it only seems to affect one side of the scissors, so what I often do when the boolean operation breaks a shape like this, I try to redraw certain parts of it and/or try to reduce the complexity of the vector. I know this is far from ideal, as one would hope that these operations would work as expected, but at least so far it was somewhat of a fix/workaround for me 😅

Regarding the other icon sets you’ve mentioned: I can only guess, but I assume that those haven’t been made in Figma, but in some other tools (like Illustrator). They then imported the flattened SVGs into Figma.

In my experience though, icons that have been drawn in Figma are way more lightweight than imported assets from other tools.

Yeah, made from other tool can be an acceptable reason. I prefer Figma because of the component feature. It makes so many elements reusable, which is important for icon set’s scalability.

Another workflow I can guess is that, they have a plugin or something to help them flatten + outline components in batch before publishing. 🤔 Once published, undo the flatten step

Yep…being able to use components in Boolean Groups is a game changer. This makes designing icons so much more fun and they are way easier to maintain.

Hmm, that would be a good workaround indeed. I wonder how performant Figma is when flattening hundreds or even thousands of layers at once.

@kogami since I was facing similar challenges when preparing my own icons library I created a simple plugin that does the following:

• duplicates selected component(s) or instance(s)
• flatten all of its child elements into a single vector
• sets the flattened element’s constraints to ‘SCALE’
• renames the flattened element to ‘Vector’
• converts the copy into a new component
• maintains the same name as the original selection

The plugin is available through Figma Community: check it out here.

Hope it will help you guys. Feel free to leave feedback!

Thanks! Sound cool. I will share this plugin with my teammates and get back to you

@Dominik_Pacholczyk sorry for the late reply. The plugin looks promising. Our biggest concern is that can it support variant component? It’s common to set icon size and coloring method as variant properties and we are doing in this way.