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, tab bar, toolbar, or Home screen quick action.

Example icons

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. iOS 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 iOS icon family, use a very thin stroke to draw it. A 1pt stroke (2px for @2x resolution) 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, use color variations, and enclose the icon within a shape, such as a circle.

Examples of filled icons

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.

Don’t use replicas of Apple hardware products. Apple products are copyrighted and can’t be reproduced in your icons or images. In general, avoid displaying replicas of devices because hardware designs tend to change frequently and can make your icon look dated.

Provide alternative text labels for icons. Alternative text labels aren’t visible onscreen, but they let VoiceOver audibly describe what's onscreen, making navigation easier for people with visual impairments.

Custom Icon Sizes

Navigation bar and toolbar icon size Tab bar icon size
Recommended 75px × 75px (25pt × 25pt @3x) 75px × 75px (25pt × 25pt @3x)
50px × 50px (25pt × 25pt @2x) 50px × 50px (25pt × 25pt @2x)
Maximum 83px × 83px (27.67pt × 27.67pt @3x) 144px × 96px (48pt × 32pt @3x)
56px × 56px (28pt × 28pt @2x) 96px × 64px (48pt × 32pt @2x)