Custom Icons

If your app includes tasks or modes that can’t be represented by a system icon (see System Icons), or if the system icons don’t match your app’s style, you can create your own icons. A custom icon, sometimes called a template, discards color information and uses a mask to produce the appearance you see onscreen in a navigation bar or tab bar.

Create simple, recognizable designs. Too many details can make an icon appear sloppy or unreadable. Strive for a design most people will interpret correctly and won’t find offensive.

Design a solid color icon with transparency, anti-aliasing, and no drop shadow. The system ignores all color information, so there’s no need to use more than one fill color. Allow transparency to define the shape of the icon.

Keep your icons consistent. Whether you use only custom icons or mix custom and system icons, all icons in your app should be the same in terms of size, level of detail, perspective, and stroke weight. If you want an icon to look like it's related to the system icon family, use a very thin stroke to draw it. A 1-point stroke (2px for @2x, 3px for @3x) works well for most icons.

Provide two versions of custom tab bar icons. Provide icons for both the selected and unselected states. The selected icon is often a filled-in version of the unselected icon, but some designs call for variations to this approach. For example, Apple apps sometimes invert icon interiors, increase or reduce strokes, and enclose the icon within a shape, such as a circle.

An illustration of two clock icons, one with a solid blue fill and no outline, and the other with a solid gray fill and no outline. A green checkmark underneath the icons indicates correct usage.

An illustration of two clock icons, one with no fill and a blue outline, and the other with a solid gray fill and no outline. A red X underneath the icons indicates incorrect usage.

Don’t use text in a tab bar icon. If you need to show text, display a title beneath the tab and adjust its placement accordingly.

Custom Icon Sizes

Navigation bar icon size Tab bar icons
108px × 108px (36pt × 36pt @3x) 108px × 108px (36pt × 36pt @3x)
72px × 72px (36pt × 36pt @2x) 72px × 72px (36pt × 36pt @2x)