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.

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.

Full-color image of the Wallet app icon.

App icon

Image of the black and clear glyph used in the Wallet app icon.

Glyph

Image of the Wallet glyph with only green color applied.

Glyph (color applied)

Design icons as glyphs. A glyph, also known as a template image, is a monochromatic image with transparency, anti-aliasing, and no drop shadow that uses a mask to define its shape. Glyphs automatically receive the appropriate appearance—including coloring, highlighting, and vibrancy—based on the context and user interactions. A variety of standard interface elements support glyphs, including navigation bars, tab bars, toolbars, and Home screen quick actions.

Prepare glyphs with a scale factor of @2x and save them as PDFs. Because PDF is a vector format that allows for high-resolution scaling, it's typically sufficient to provide a single @2x version in your app and allow it to scale for other resolutions.

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 level of detail, optical weight, stroke weight, position, and perspective.

Images of six glyphs, representing a video camera, a still camera, an alarm clock, a heart, an envelope, and a conversation bubble. All six glyphs are solid gray; some include interior detail lines, all of which use the same weight.

Make sure icons are legible. In general, solid icons tend to be clearer than outlined icons. If an icon must includes lines, coordinate the weight with other icons and your app's typography.

Two images of a clock face icon. The icon on the left is solid blue to indicate active and the icon on the right is solid gray to indicate inactive. A green checkmark shows that this is the recommended approach.

Two images of a clock face icon. The icon on the left is outlined in blue to indicate active and the icon on the right is solid gray to indicate inactive. A red Ex shows that this is not the recommended approach.

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.

Images of six glyphs, representing a video camera, a still camera, an alarm clock, a heart, an envelope, and a conversation bubble. Three horizontal dashed lines show that the alarm clock and bubble glpyhs are the tallest glyphs because of their greater weight.

Home Screen Quick Action Icon Size

A Home screen quick action icon appears next to the title. If you need to create a custom icon for your Home screen quick action, use the following sizes for guidance.

Image of a solid blue square, which represents the maximum size, with the outline of a smaller square centered inside it. A vertical line, extending to the top and bottom edges of the outer square, represents the maximum height. A horizontal line, extending to the left and right edges of the outer square, represents the maximum width.

Maximum width and height
104px × 104px (34.67pt × 34.67pt @3x)
70px × 70px (35pt × 35pt @2x)

Image of a solid blue square, which represents the target, centered inside a larger, white square. A vertical line, extending to the top and bottom edges of the inner square, represents the target's height. A horizontal line, extending to left and right edges of the inner square, represents the target's width.

Target width and height
80px × 80px (26.67pt × 26.67pt @3x)
54px × 54px (27pt × 27pt @2x)

Image of a solid blue rectangle, which represents the target, inside the outline of a larger square. The width of the rectangle is slightly larger than its height. A horizontal line, extending to the left and right edges of the rectangle, indicates the target's width.

Target width (wide glyphs)
88px (29.33pt @3x)
60px (30pt @2x)

Image of a solid blue rectangle, which represents the target, inside the outline of a larger square. The height of the rectangle is slightly larger than its width. A vertical line, extending to the top and bottom edges of the rectangle, indicates the target's height.

Target height (tall glyphs)
88px (29.33pt @3x)
60px (30pt @2x)

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.

Target width and height (circular glyphs)

Image of a solid blue circle, which represents the target, centered inside the outlines of two squares. All three shapes are contained within the outline of a rectangle. The width of the inner square is slightly smaller than the diameter of the circle. The width of the outer square is the same as the diameter of the circle. The width of the rectangle is slightly larger than its height. A vertical line, extending to the top and bottom edges of the outer square, indicates the target's height. A horizontal line, extending to left and right edges of the outer square, represents the target's width.

Regular tab bars Compact tab bars
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)

Image of a solid blue square, which represents the target, centered inside the outline of a slightly larger square. Both shapes are contained within the outline of a rectangle. The solid blue square is slightly smaller than the outlined square. The width of the rectangle is slightly larger than its height. A vertical line, extending to the top and bottom edges of the blue square, represents the square's height. A horizontal line, extending to left and right edges of the blue square, indicates the target's width.

Regular tab bars Compact tab bars
69px × 69px (23pt × 23pt @3x) 51px × 51px (17pt × 17pt @3x)
46px × 46px (23pt × 23pt @2x) 34px × 34px (17pt × 17pt @2x)

Target width (wide glyphs)

Image of a solid blue rectangle, which represents the target, vertically centered inside the outline of a larger rectangle. The height of the blue rectangle is approximately half the height of the outlined rectangle. The outlines of two squares are horizontally centered within the outlined rectangle. The width of the outlined rectangle is slightly larger than its height. A horizontal line, extending to left and right edges of the outlined rectangle, represents the target's width.

Regular tab bars Compact tab bars
93px (31pt @3x) 69px (23pt @3x)
62px (31pt @2x) 46px (23pt @2x)

Target height (tall glyphs)

Image of a solid blue rectangle, which represents the target, horizontally centered inside the outline of a larger rectangle. The width of the blue rectangle is approximately half the width of the outlined rectangle. The outlines of two squares are horizontally centered within the outlined rectangle. The width of the outlined rectangle is slightly larger than its height. A vertical line, extending to top and bottom edges of the outlined rectangle, represents the target's height.

Regular tab bars Compact tab bars
84px (28pt @3x) 60px (20pt @3x)
56px (28pt @2x) 40px (20pt @2x)