I've stopped flattening icon layers, and my color overrides are working perfectly

Many teams source their icons from an existing collection. It's an easy choice when there's lots of excellent, free icon libraries out there! Phosphor, Lucide, FontAwesome, and Untitled, to name a few popular ones.

When a design system is starting up, or beginning a new generate with a clean slate of assets, a Figma librarian will often have to import all those icons and prepare them as components to be published to consumers.

Some libraries, like Phosphor, will import icons with a layer structure where each SVG path is separated out as individual layers:

Most design system designers first instinct will be to flatten those layers. They do this because they want to make sure consumers color overrides are preserved if they choose to swap between icons. Flattening those layers turns results in a single-layer SVG path, like this:

But whether they realize it or not, flattening those layers has closed the door on a lot of opportunities. Yes, it was in favor of a better consumer experience (override preservation), and that's good, but we shouldn't pretend it's free from other consequences:

❌ The artwork is now much more difficult to manipulate

This matters less for existing icons, but can matter a great deal when the team needs to make one or two product-specific or industry-specific icons. 

Few product design teams have in-house icon illustrator talent they can call on. A product designer who is responsible for this artwork would be much more successful composing a custom icon if those SVG paths were separated out rather than flattened into a single layer.‍

❌ You can no longer create a system of smaller, shared shapes

Similar to the first point, re-used shapes like plus-signs, minus-signs, checkmarks, exclamation points, and sparkles that are reused (!!) across icons cannot be componentized when all you allow is a single layer for each icon.

❌ no multi-color, multi-stroke artwork.

If a future re-brand or refresh to a products' visual identity calls for icons that use more than one color, a single flattened SVG path won't be able to support that. For now, Figma Design only lets you apply 1 stroke color to a layer. So 1 layer means you only get 1 color.

The same goes for stroke widths. Now, this might not come up for in-product icon usage, but it's a much more likely possibility for brand and marketing teams whose icons benefit from more complex visuals. If your design system team has aspirations to expand your influence into the world of marketing design, you'll have new consumer-needs (like fancier styling) to account for.

❌ Severely limited animation capabilities

Flattening discrete layers into a single layer means you can't animate different parts of an icon. Look at these examples from Yup Nguyen:

The glass of the magnifying glass appears to rotate. The top and bottom lines of the hamburger menu move away from the center line, which stays still, before they fold together and spring back in the shape of an "X". The front of the file folder tilts forward, and a paper document peeks out. The clapper of the bell has a tight wiggle, while the bell's body has a larger swaying motion. All of these movements require isolated, part-specific animation.

The solution: shape-building operations

All those problems I described above don't have to come at the cost of losing overrides. You can protect overrides and keep your SVG paths separated. To do so, you simply need to use shape building tools.

To prove the override protection, check out this this GIF:

The section on the bottom—not using shape-building—didn't preserve the pink color override on all the paths because Figma is looking for matching layer names. And Figma does not care how many layers there are.

<span class="figma-component">chef-hat</span> has 2 layers, both named vector. <span class="fimga-component">cherry</span> has 4 layers, all named vector. Figma recognized the first 2 layers within <span class="fimga-component">cherry</span>—the fruit body shapes—as matching the first two layers of <span class="fimga-component">chef-hat</span>, so it preserved the red override. But it didn't have anything to match to the other 2 layers of <span class="fimga-component">cherry</span> (the stem and leaf) so those remained black.

If the swap happened in the opposite direction (<span class="fimga-component">cherry</span> to <span class="fimga-component">chef-hat</span>) then things would've been fine.

This partial color override issue only occurs when you swap an icon with fewer layers for one with more layers.

That's where shape-building layers come in.

Figma doesn't care how many child layers are inside of a union or subtraction. It just cares that those layers have names.

And the reason we have to use shape-building layers and not extra frames is because the shape-building layer is what is responsible for holding the color. Its children can have any color applied to them, and it won't matter. The color of the shape-building layer wins out. And that's how color overrides get preserved.

This is a powerful concept to understand. You can extrapolate it to achieve much more complex systems within your Figma icon collection.

If you'd like to see how I use this method to build more resilient icon components, you might be interested in a private one-time livestream I'm holding on Saturday, January 24th 11am ET (see your timezone). It's $29 USD to access the stream, and its recording. It won't be publicly available afterwards.

<a href="https://alicepackard.kit.com/products/live-stream-access-january-2026" class="button primary" style="padding:16px,0px; margin:auto; border-bottom:0px solid">View livestream details</a>