While building a website, I ran into an issue with icon rendering that took a while to pinpoint.
Â
Initially, icons using stroke colors rendered correctly. However, icons that were filled did not render at all. For example, taking the same icon, flattening it, and applying a fill would cause it to disappear.
Â
After investigating further, I found that the issue was not the icon itself, but the parent frame (wrapper) containing the icon. This happens regardless of whether the frame uses Auto Layout or not.
Â
The problem occurs when the parent frame has a color applied via predefined color styles / variables. If a color style (variable) is applied to the frame, any filled icon inside it fails to render properly. Removing the color style from the parent frame resolves the issue.
Â

Fill as hash value of color - all good
Â


Â
