Hey Drew! Mind if I ask a question to get more context?

Are all of your multi-colored icons things like Google’s “G” logo, or an image? If so, I suspect that preserving color overrides isn’t necessary (correct me if I’m wrong though).

Or do you have two-tone or multi-hue icons (like these ones) that you also need to support?

Hi Alice! Sure thing — yep, that’s correct! I don’t need to preserve the color overrides.

Cool! Okay I think that makes things a lot easier for you.

Structure-wise you don’t need to sweat the layers at all. In fact, if your goal is to preserve logo-icons’ original colors, I would suggest purposefully deviating from the layer structure your regular icons use. Like this:

That way when you do make color overrides, they don’t transfer to your icon-logos. In the example below all the icons are white, but when placed in a ❖ Button I override them to purple. But because ❖ Icon / Logo / Google has a different layer structure, it’s protected from also receiving that purple override:

The only things I can think of that you’ll want to make sure are aligned between these things for consistency when swapping:

• 
  Frame size. E.g. if your icons are 24x24px, do the same for logo-icons and your image-icon)


• 
  Constraints settings. Make sure everything is set to scale horizontally and vertically. If you need an auto-layout friendly icon, you @Ridd’s icon wrapper method!


• 
  Naming / organization. If your logo-icons and image-icons are sitting on the same page, frame/section as your other icons, that will help make sure they’re discoverable from the swap panel. Of course you can also use “preferred instances” in the component property to make sure everything you want available is accounted for.

Let me know if this helps!

Gah! Huge help! Thank you so much. This makes perfect sense. Really appreciate you laying it out so clearly. 🙏🙏🙏

My pleasure, for real! Holler if you run into snags.