Safari Developer Library


iOS Human Interface Guidelines


Template Icons

A custom icon that you create for a bar or Home screen quick action is also known as a template icon or image, because iOS uses it as a mask to produce the icon you see when your app runs.

iOS defines lots of standard small icons, such as Refresh, Action, Add, and Favorites. As much as possible, you should use these buttons and icons to represent standard tasks in your app. (To learn more about the standard buttons and icons you can use in bars, see Toolbar and Navigation Bar Buttons and Tab Bar Icons.)

If your app includes tasks or modes that can’t be represented by a standard icon—or if the standard icons don’t coordinate with your app’s style—you can design your own small icons. At a high level, you should aim for an icon design that is:

  • Simple and streamlined. Too many details can make an icon appear sloppy or indecipherable.

  • Not easily mistaken for one of the system-provided icons. Users should be able to distinguish your custom icon from the standard icons at a glance.

  • Readily understood and widely acceptable. Strive to create a symbol that most users will interpret correctly and that no users will find offensive.

Whether you use only custom icons or a mix of custom and standard, all icons in your app should look like they belong to the same family in terms of perceived size, level of detail, and visual weight.

For example, take a look at the family of iOS bar icons and notice how the similarities in size, detail, and weight produce a sense of harmonious unity:

image: ../Art/icon_family_2x.png

To create a coherent family of icons, consistency is key: As much as possible, each icon should use the same perspective and the same stroke weight. To ensure that all icons have a consistent perceived size, you may have to create some icons at different actual sizes. For example, the set of system provided icons shown here all have the same perceived size, even though the Favorites and Voicemail icons are actually a bit larger than the other three icons.

image: ../Art/balanced_icons_2x.png

If you’re designing a custom tab bar icon, you should provide two versions—one for the unselected appearance and one for the selected appearance. The selected appearance is often a filled-in version of the unselected appearance, but some designs call for variations on this approach.

image: ../Art/invert_or_fill_2x.png

To create a filled-in version of an icon that has interior details (such as the Radio icon) invert the details so they retain their prominence in the selected version. The Keypad icon also has interior details, but the selected version would be confusing and hard to recognize if its background was filled in and the circles became white outlines.

image: ../Art/alternate_design_2x.png

Sometimes, a design needs a slight alteration to look good when it’s selected. For example, because the Timer and Podcasts icons include open areas, the selected versions condense the strokes a bit to fit into a circular enclosure.

image: ../Art/thicker_stroke_2x.png

If an icon becomes less recognizable when it’s filled in, a good alternative is to use a heavier stroke to draw the selected version. For example, the selected versions of the Voicemail and Reading List icons are drawn with a 2-point stroke, instead of the 1-point stroke that was used to draw the unselected versions.

image: ../Art/filled_in_both_states_2x.png

Sometimes, an icon’s shape has details that don’t look good in a stroked outline. When this is the case—as it is for the Music and Artists icons—you can use the filled-in appearance for both versions of the icon. It’s easy for users to distinguish the selected and unselected appearances of such icons because the selected appearance is darker and gets the tint.

To design a custom small icon, follow these guidelines:

  • Use transparency to define the icon’s shape. iOS ignores all color information, so there’s no need to use more than one fill color.

  • Don’t include a drop shadow.

  • Use antialiasing.

If you want to create a small icon that looks like it's related to the iOS icon family, use a very thin stroke to draw it. Specifically, a 1-point stroke (that is, a 2-pixel stroke for @2x resolution) works well for most icons.

Regardless of the icon’s visual style, use the sizes listed in Table 45-1 to create custom toolbar, navigation bar, and tab bar icons. If you’re designing a custom template icon for a Home screen quick action, see Home Screen Quick Actions for details.

Don’t include text in a custom tab bar icon. Instead, use the tab bar item APIs to set the title for each tab (for example, initWithTitle:image:tag:). If you need to adjust the automatic layout of the title, you can use the title adjustment APIs, such as setTitlePositionAdjustment:.