Icons flip after swapping an instance

Hi, i try to add icons to an instance, but icons flip every time and i have no idea what cause this problem!

1 Like

This is difficult to figure out without more information. Could you share a design where this happens so that I can take a look at it?

Flipping will happen when a frame’s size is reduced beyond 0. If the frame that holds the icon is “crushed” vertically by paddings or whatever, it will not have enough space and invert its height.

1 Like

Select the main component of that ‘Delete color’ button, after that select icon in the button and press shift + V (it will make flip vertical)

1 Like

This is happening to me too. At first I thought the main component was set to rotate or flipped. But can now confirm its correct at the root, yet it still swaps flipped upside down. Copy and pasting the element into the file works fine. But will not work from an instance swap.

2 Likes

I am having the issue but it horizanttaly flipped

1 Like

I had the same issue, for me going to the component of the icon, cutting it, and pasting it again fixed the problem.

The same is happening to us, too.
The component is all correct at the root, and all icons are the same exact size, yet it still flips upside down when swapping icons.
We have workarounds, but we’re a big organization and we need the icons to work properly out of the box.

3 Likes

The same happens in our company too now, icons flip themselves in buttons. Was the issue fixed by Figma?

1 Like

Been having the same issue all day here: suddenly, icons that were working perfectly started showing up rotated.
Is there any fix?

The proposed solution isn’t working for me. Everything is at 0°

Please share a link to an example file.

I made a file with the elements that are having the issues (can’t share the original)

In fact, all the icons in the “Link” component are flipped in your file. Pay attention to the Y-coordinates (should be 4, but now 20). Select the icon in the “Link” component and flip it vertically (Shift + V).

Thanks, but why did they flip? I haven’t changed them for a while, nobody touched them. How comes I now get this problem?

This is what I don’t know for sure. But I can suggest that after all, someone accessed this component and accidentally clicked this shortcut when selecting the icon. I suggest you go through Version History to check the coordinates of the icon in this component.

1 Like

Will do that, thank you

나또한 같은 문제를 겪고있다. 매우 곤란…

This happened to me also, I corrected it by using the below steps:

Go to your main component, click on the vector group and it must be rotated to -90 degree, fix that first and then Shift + V (vertical flip) if needed