I’ve implemented thousands of icons throughout the years. I would typically look for a suitable set to use with proper licensing. For various sizing needs, I would make sure that they always had vectors to work with.
Even though I didn't always notice, some of them really didn't look great after resizing. Today's technology and my standards for quality have grown the need for me to improve this.
I always thought about icons as scalable. I read about SVG and the benefits of using this technology. I read about and used icon fonts in practice and understand the benefits and the risks of scaling icons that way. But there are times to use scalable images and times to use optimized sizes.
When I first downloaded Kyle Adams' icon design book, I expected to know most of it, and find a few good nuggets. I didn't even get past the first chapter without an “Aha!" moment. It made sense, and it was articulated very simply: "Icons are not scalable.” Reading an icon design specialist write it was just what I needed to hear.
One of the most helpful things Kyle has taught me to use in my icon design process is Pixel Hinting. Now, when I design a set I spent time determining what size the icons will need to be in use and set my dartboards accordingly. Immediately after that, I turn on Pixel Hinting. This gives me way more control as to how crisp my icons will look when I save them out, rather than looking great in Illustrator or Sketch only to be disappointed when saved out as a fixed size.
Design with Pixel Hinting Enabled
The shortcut to preview in Illustrator is: Option + Command + Y
In Sketch, you want to turn it on in the top right drop down menu.
The Difference
The past couple of years I have really taken the time to design custom icons to the exact size that I need. This has made a dramatic effect in quality. I realized it was always worth the time to design a set at scale. I hope this tip helps you in your journey.
Here is a bonus video from Kyle about creating pixel-perfect icons: