Have you ever swapped <span class="figma-component">arrow-up</span> for <span class="figma-component">arrow-right</span>, but the icon was still pointing up?
This likely happened because you applied rotation to the wrong layer when creating your icon components.
You probably started with <span class="figma-component">arrow-right</span>, then (and order doesn't matter much here) made a copy, detached, rotated the parent frame 90 degrees (this is where things went wrong!), and then turned it into a new main component to become <span class="figma-component">arrow-down</span>:
Instead, you should have rotated the vector shape inside the frames. The rotation of all your icons' parent frames should be 0 degrees, like so:
The order of your build steps do not matter (detach, re-name, rotate vector, re-componentize VS re-name, detach, rotate vector, re-componentize). It's the layer you rotate that matters.
Arrows aren't the only icons to watch out for. Make sure you review these other common icons too:
I learned this thanks to the prolific Gleb Sabirzyanov in this community forum thread. This blog post is merely an expanded version of Gleb's reply (correctly marked as the solution to this problem) from that thread.
It's also part of a larger series of blog posts I'm writing about how to get your design system's iconography under control. One that is closely related post is this one about why you shouldn't have a "direction" variant property on your arrow icons (or others that have some kind of directionality)!
If you'd like to be notified of when I publish a new blog post, joining my newsletter is a great way to keep up. My readers enjoy bonus behind-the-scenes insights on every post!
