How to properly fit SVG icons in Figma?

Question

SVG

I switched to Figma and the question arose: when loading svg icons, there is a frame and the vector itself (sometimes in a group). In order to fit the icons to one size, we set the frame size to 40x40. But they can visually differ in size from each other (the vector itself). How to proceed in this case: make them visually identical, but then the frame will be different, or? What is the right thing to do in such situations so that there are no problems in design, and then layout?

Answer 1

It's best to keep the frame the same size, otherwise you'll just have trouble aligning the elements. In addition, the frame is convenient to export, and it is obviously better for the layout designer when all the icons are the same size.
So change the content inside the frame. In such cases, I arrange the rulers and stretch the icons already along them.

Answer 2

It is considered good practice to make containers (frames) for icons, because an icon can be a non-whole pixel size, and there are no half-pixels on the web. Just center the icons inside the frame and slightly adjust the height, width, if they are not square, well, so that it is clear)

Answer 3

In general, I will join the previous comments, the container (viewbox) should be the same for everyone, the icons are drawn in pixelperfect. And between themselves to level already visually, but not getting out of the container.
Google wrote design principles on the topic of visual rendering .