We’re building a country selector with flag icons for our design system. For legal/IP reasons we couldn’t just grab an existing flag set. Our IP&S department suggested we create our own abstracted, round versions so they’re safe to use.

We designed the icons in Figma. To make them round, we used masks on groups (instead of subtracting everything into one circle shape), because otherwise it would be a huge amount of manual work and would result in SVGs with tons of paths and layers.

The problem:
When we export from Figma, those masks become opacity masks in the SVG. These render fine on desktop browsers, but cause issues in iOS and Android (both in apps and sometimes in WebViews).

So my question is:
👉 What’s the best practice for handling this? Should we:

• Convert all masks to <clipPath> post-export?

• Do a boolean “subtract/intersect” in Figma to bake the circle into the geometry?

• Or handle the rounding at the UI layer (e.g. border-radius / ImageView corner radius) and drop the masks completely?

Has anyone run into the same thing with masked SVGs on mobile platforms? Curious how you solved it without ending up with bloated or fragile SVG files.