Icons are not cut correctly, empty edges

[gallisiardi]

There are several empty pixels left, right and below. I know that this is not a big deal.

But if you resize it, as in my case up to 16x16, these spaces on the right, left and bottom edges, I can lead to empty pixels, which do not allow you to take advantage of all the space available to the icon.
They also translate into a waste of space (bytes), and other problem when you need to add padding, margin, border, ecc.

I recommend cutting the icons including all the shadows and removing the edges.

With the 16x16 icons and an online tool for creating sprites images, I've been able to get them all 220 in 125K, this is great for websites (i atttach you).

I hope my advice can be useful to your project.

Congratulations for project.

[cjdowner]

Hey, thanks for the comment

That is expected. That is the 'icon' variant which contains additional stying. For the icons to be in their square 32x32pt canvas, the area is smaller to account for its shadow (made red for visibility)

What you want is the color variant which is edge-to-edge as expected.

Can I ask what tool you used for creating the sprites? That's a good idea 👍

[gallisiardi]

I used this:

https://www.toptal.com/developers/css/sprite-generator

16x16 It s good dimension for site that have a lot of icon in same page page.