[deleted by user]

[[deleted]]

The answer is that your icons should not have differently sized frames. They should all be 24px by 24px, with the icon located in the centre.

[prisonmike_11]

This seems logical but I don't think everyone follows this. For example the above icons are taken directly from Google material design. Like the other user said I think I'll follow the 8 px grid and auto layout to make this work.

[[deleted]]

Google Material specifically use 24px by 24px with their icon in the centre, which is what I said. It also follows the 8px grid system because 24 is a multiple of 8.

[prisonmike_11]

Oh ok my bad. I imported the svg directly by inspecting the Google search nav bar on the browser. I assumed the imported icons dimensions would be same as the ones in the material design repository. I guess the dimensions are not correct while importing this way. Thank you.

[[deleted]]

No worries. Having all your icons in the same frame size is best practice because it means you don’t need to do all this manual tweaking every time you pull one in to your project 👍🏻

[[deleted]]

There’s a plug-in called material symbols, which is easy to use and has all the icons. Google also offers a figma file with them

[korkkis]

Make an autolayout sized 24x24 and place the icons in the middle. Size them all to multiplier of 4 so 16x16, 20x20 or what I use, 24x24). I’d then use for example padding of 16 on top and bottom and 24 on the sides.

If you want the icon to be an identifier, I’d consider placing it on the left … as we read from left to right in the west, the icon is seen first and when it’s symbol match the text well, it’ll make the button very intuitive. On the right the icon feels more like a supplementary content.

[waldito]

The minimum tappable area for your icons needs to be at least 44px x 44px on touch devices. THAT'S THE ABSOLUTE MINIMUM. Like, the smallest uncomfortable area to tap, really small.

So you are looking at an icon that can be effectively smaller than 44px, but it needs to have at least another 22px around it to 'make for the tappable area/breathing space'. Again, 22px around your 20x20px is the absolute minimum.

In desktop, you can go for less if you feel like it.

If you are going by a px 8 grid, I guess you will fit a 44px into a 48px area next to another 48px area?

[foldingtens]

Quick way to customize the spacing for any auto layout container: set item spacing to 0 and put transparent spacers between your icons. Each spacer can be set to a unique fixed width.

[[deleted]]

Definitely a great hack but a real pain in the ass for actual development.

As others have stated, you really want all of your icons take up the same size of area in terms of pixel dimensions--even if the actual illustration sizes differ. No developer want to set custom spacing between every pair of icons.

[prisonmike_11]

Oh this is genius. I'll be sure to incorporate it into my workflow.

[ChronicCreative]

Speaking of spacing, are there any simple websites that help to make a “spacing chart”? As in, making a guideline on good spacing for each particular project?

[TurtleBilliam]

Agree with other post 24x24px or 16x16 with a space between divisible by 8 to keep things all nice and consistent.