Custom Icons
If your app includes tasks or modes that can’t be represented by a system icon, 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.
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, antialiasing, 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.
Distinguish your custom icon from the system icons. Your icon shouldn’t be easily mistaken for one of the system-provided icons. If you want your 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.
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.
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.
Don’t use text in a custom 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
| Device | Navigation bar and toolbar icon size |
Tab bar icon size |
|---|---|---|
| iPhone 6s Plus, iPhone 6 Plus | About 66px by 66px | About 75px by 75px Maximum 144px by 96px |
| iPhone 6s, iPhone 6, iPhone SE | About 44px by 44px | About 50px by 50px Maximum 96px by 64px |
| iPad Pro, iPad, iPad mini | About 44px by 44px | About 50px by 50px Maximum 96px by 64px |