Skip to main content

Hi everyone,


I wanted to bring up an issue we’re facing with our icon library. We’ve assigned a size property to each Icon (Small, Medium, and Big), but some icons also have additional properties like direction or filling (such as arrows or favorite actions).


The problem: When we switch from a standard Medium or Big icon to one with multiple properties, the size property defaults to Small and doesn’t preserve the original size selection. Adding images below 👇🏼


IconsGIf


This limitation is particularly challenging as we’re currently building components like buttons and cards.


I’m curious if anyone has any ideas on how we can fix this?


Thanks in advance!


Note: This is how we’ve built the icons:

image

Figma will try to match the same properties in the new replaced component as long as it has the same properties.


In your case, it won’t work because the arrow icons have an extra property: Direction.


If you try to change the Profile icon with any other icon that only has one property that’s named the same, it should always keep the right property value.


Now there are two solutions for you:



  1. Split the arrow component into four components, then it would work

  2. Create a fake property in all the other icons to match the extra property in the arrows component (not recommended)

Hey! Thanks for the response.


Yes, I think I’ll do the first one… the problem is that we have the filling property for some icons (like, bookmark, favorite, etc) and creating separate components for those is not the best idea…


So, I think I’ll add documentation on the use of the buttons to make sure people is not using those icons…


Thanks again!

Reply


Terms & ConditionsCookie settings