Alex Sailer

Quick Tips: Icon Design

With the launch of a few new icon-related products this week, we thought it might be helpful to share some of the tips we’ve learned over the years. As with most things in this industry, every designer has their own method, so if you have any tips of your own then hit us up on Twitter and let’s chat!

Icon tips blog

General Tips

  • Design icons in vector format for easier scalability. We use Adobe Illustrator.
  • When using Illustrator, regularly change the view to “Pixel Preview” to make sure your icons aren’t rendering any sub-pixels.
  • When using Illustrator, make sure you have “Align New Objects to Pixel Grid” turned on. This will help prevent sub-pixels.
  • When using Illustrator, make sure you set up your new document correctly. We’ve created some illustrator templates to save you time during setup.
  • Construct icons at their intended final size.
  • Scaling icons at multiples of 2 is easy. Other scaling factors can cause problems, so always be sure to check your pixel preview when scaling icons up or down. Most of the time, icons will need minor tweaks to be perfect at all sizes.
  • When using Illustrator through Adobe’s Creative Cloud, icons can be placed in a Creative Cloud library. You can then share your library with your team or use it as a place to store your icon(s). Read more about collaborating with Creative Cloud libraries.

App Icon Tips

  • App icons can be tricky because there are so many scenarios where a finalized icon will need to appear in different sizes. It’s important to give each size instance of the icon special attention to make sure it scales correctly and maintains legibility.
  • When designing an icon for iOS, place the icon in a folder group on your home screen. That will show you how it will look at its smallest size.
  • Each operating system is very different in terms of icon size requirements. We’ve created an illustrator template with 62 artboards that account for six different operating systems.
  • App icons living on mobile phones can support more than web-safe colors.
  • Most finalized app icons will need to be saved to .PNG format
  • Be sure to read any available operating system design guidelines for size requirements and naming conventions.
  • When designing for iOS, make sure your icon has 90° corners because iOS automatically applies the border radius when rendered.

Give this a share if you enjoyed it :)