Resizing icons in library (without affecting nested icons in other components)

Ask the community
1

Hello,

What do I want to do?
Our current icons in our library are 64x64px. I want to resize them to 24x24px.

What’s the problem?
The nested icons in other components get automatically resized by resizing the main icons in the library. I need to keep the size of the nested icons and only want to change the main icon within the library.

Is this possible, can anyone help? :slight_smile:

2

Hello @Janina1 ,

Yes it it possible, but depending on what you want there are different options, here a two you might consider:

Option A: Create variations of the icons

  1. Create Variations of icons in different size
  2. Name the property “size” or similar and leave the original on default

Option B: Override the size of the instances

  1. Override the size of all the nested icons by resizing them a little bit(use “select all with same instance” to select them)
  2. change the size of the main icon to the size you want(the size of the nested icons should not be affected)
  3. resizing all the nested icons back their original size

Option A would be the best way forward for you I think, otherwise it might cause trouble if you reset the sizes in your nested icons by accident later on. it is also pretty easy, and does not involve any direct change in all the nested components.

I made a quick file to demonstrate the two options. I use colors instead of icons.
red=option A and blue=option B above. The other colors are for you try out.

just duplicate and try it out, I hope that it helps you :slightly_smiling_face: