Hey! I’ve run into similar behavior when nesting icon buttons inside larger components—especially when using Master icons that inherit state-based styles. It does seem like a Figma rendering quirk, particularly when the distortion appears inconsistently. In my case, the issue was more noticeable when switching between variants or when auto layout constraints weren’t fully aligned across nested layers.

A few things that helped:

- Double-checking that the icon’s constraints and resizing settings match across all instances.

- Flattening or detaching the icon temporarily to test if the distortion persists.

- Ensuring that the parent component doesn’t override inherited styles unexpectedly.

It’s definitely worth reporting as a bug if it keeps happening randomly. Meanwhile, I’ve started documenting these edge cases in my design system to avoid surprises during handoff.😊

Thanks for your response! I checked all this things already and now I’m pretty sure this is a rendering problem from Figma. It’s getting worst and worst unfortunately, also the file performance :/

Icons inside a button often look distorted due to alignment or scaling issues — the best fix is to make the button use display: flex with align-items: center and justify-content: center, set a consistent line-height: 1, and explicitly size the icon (e.g., width: 1em; height: 1em;) so it scales evenly alongside text; if you’re using Tailwind or a UI library, just add flex items-center gap-2 to the button and give the icon a fixed size like w-5 h-5 for clean alignment.

thefrlegendsapks.com