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.
Create recognizable, highly-simplified designs. Too many details can make an icon confusing or unreadable. Strive for a simple, universal design that most people will recognize quickly and won’t find offensive. The best icons use familiar visual metaphors that are directly related to the actions they initiate or content they reveal.
Use color to communicate selected and deselected states. Avoid toggling between two different icon designs, like a solid version and an outlined version.
Avoid including text in an icon. If you need text, display a label beneath the icon 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
Above all, your app's icon family should be visually consistent in size. If individual icon designs vary in weight, some icons may need to be slightly larger than others to achieve this effect.
Navigation Bar and Toolbar Icon Size
Use the following sizes for guidance when preparing custom navigation bar and toolbar icons, but adjust as needed to create balance.
|Target sizes||Maximum sizes|
|72px × 72px (24pt × 24pt @3x)||84px × 84px (28pt × 28pt @3x)|
|48px × 48px (24pt × 24pt @2x)||56px × 56px (28pt × 28pt @2x)|
Tab Bar Icon Size
In portrait orientation, tab bar icons appear above tab titles. In landscape orientation, the icons and titles appear side-by-side. Depending on the device and orientation, the system displays either a regular or compact tab bar. Your app should include custom tab bar icons for both sizes.
|Attribute||Regular tab bars||Compact tab bars|
|Target width and height (circular glyphs)||75px × 75px (25pt × 25pt @3x)||54px × 54px (18pt × 18pt @3x)|
|50px × 50px (25pt × 25pt @2x)||36px × 36px (18pt × 18pt @2x)|
|Target width and height (square glyphs)||69px × 69px (23pt × 23pt @3x)||51px × 51px (17pt × 17pt @3x)|
|46px × 46px (23pt × 23pt @2x)||34px × 34px (17pt × 17pt @2x)|
|Target width (wide glyphs)||93px (31pt @3x)||69px (23pt @3x)|
|62px (31pt @2x)||46px (23pt @2x)|
|Target height (tall glyphs)||84px (28pt @3x)||60px (20pt @3x)|
|56px (28pt @2x)||40px (20pt @2x)|