UI Icons

2 minutes, 54 seconds

Great icons are familiar because they make an instant connection to the things that we see everyday: a camera, a trash can, clouds. They set a friendly tone without words. In this lesson, you’ll learn how to find great icons, when to use and when not to, and you’ll learn how to customize them so that they can fit beautifully in your app’s design.

iOS Icons

Everything is thinner in iOS, that includes the icons as well. The reasoning behind this is to defer as much attention as possible to the content. Some early complaints stated that line icons are less recognizable, but that was probably intended. iOS still use filled icons, but for another purpose: bring attention to an active state.

The icons for the Tab Bar have 2 states: outline and fill mode. When an icon is filled, it means that the current page is selected.

Obvious Icons

Design-Icons

Navigation and Tab Bar Icons

Icons used in the Nav Bar and Tab Bar should have a canvas size of 30 x 30 pt. In fact, most icons except for the App Icon will be around that size.

Screen Shot 2016-08-10 at 2.00.22 AM

App Icon

The App Icon is used for the branding of your app. It’s the first thing that users see when they experience it. It appears prominently on the Home screen, the App Store, in Spotlight and Settings.

Icon Size

Design-AppIconsRes

Icon Grid

Apple applied a golden ratio on some of their icons. This ensures that the icons are the heroes while keeping good proportions. While this is a good rule to follow, it’s not a strict rule. Even Apple omitted it on many of their icons.

Icon Sets for iOS

Most of us are not icon designers. That’s why it’s best to find vector icon sets that we can customize. These are the ones that I recommend and that I personally use in my projects. With these sets, you will have thousands of icons to choose from, both in line and fill modes.

IconFont Sketch Plugin

Icon Font

IconJar

IconJar