I set out to create pixel perfect icons. Here’s what I discovered along the way.

over 5 years ago from , Interaction Designer

Some designers don’t take it seriously enough, others think it falls magically from the sky, and only a few take the challenge and really create it. I personally believe that icons are a very important part of a good design, and therefore every designer should be able to design a system of icons as long as there’s passion, patience, and guidelines.

Check out the complete guide: https://blog.ginetta.net/i-set-out-to-create-pixel-perfect-icons-heres-what-i-discovered-along-the-way-4e46378932df#.crvwhmf0i


  • Cody FitzgeraldCody Fitzgerald, over 5 years ago

    I've been working on a way to say this for a while, but I think you nailed it! Icon design is incredibly important, especially for site accessibility (thinking about the fact that a huge percentage of the world won't be viewing your work on a @2x screen).

    To offer a differing opinion, I actually find 'Snap to Pixel Grid' to be very cumbersome and detrimental to effective icon design. Our design system optimizes at @2x (large majority of our users on mobile devices) to ensure that our @1x optimization remains intact, as opposed to the other way around, where over-optimization was very apparent. Our system uses a 2dp stoke, with a 1dp detailing line. For cases where curves are present, we take that 2dp stroke and narrow it to 1.875dp (shaving off .125dp on each side) in order to keep optical weight the same, as well as open up narrow areas for better visual clarity. With 'Snap to Pixel Grid' on, this completely destroys our optimization, as it pulls those points back to the grid, thereby tinting unnecessary pixels.

    Just my two cents on the subject, but I'm interested as to the use of it in icon design. Again, great writeup!

    6 points
    • , over 5 years ago

      Thanks for your comment, Cody. It's also very important to understand exceptions so thank you for sharing your way of handling it. If I'm in a similar situation in the future, i'll definitely refer to this comment!

      1 point
  • Scott LewisScott Lewis, over 5 years ago

    Great article. Thanks for quoting me. As it happens, we just finished a 2016 version of the review of Illustrator, Affinity Designer, and Sketch today - http://blog.iconfinder.com/compare-adobe-illustrator-affinity-designer-sketch-2016/

    0 points
  • Travis Arnold, over 5 years ago

    Awesome post! It's something that seems to not get as much attention as it really should. Going to share this with my team :) Have you heard of SVGsus? That's been my new favorite tool for managing icons lately.

    0 points
    • , over 5 years ago

      Thanks Travis, for sharing SVGsus. So far I don't use anything to organize my icons and this one looks promising!

      0 points
  • Tom GantzerTom Gantzer, over 5 years ago

    Beautiful work! The write-up is excellent - I could definitely share this with my team. One thing we really struggle with is organising icon sets. I know Icomoon and Lingo will do it, but we have been on the hunt for a Windows/Mac app that can share across both platforms. Do you happen to have seen anything like this?

    0 points
    • , over 5 years ago

      Hi Tom, thank you for your comment. As I said to Travis, so far I didn't use any tool to organize my icons or even icon sets. I let you know if I find something in the meantime!

      0 points