Safari Developer Library

Developer

iOS 7 Design Resources iOS Human Interface Guidelines

Download PDF

Icons and Graphics

The App Icon

Every app needs a beautiful app icon. It’s not unusual for people to base their initial opinions about your app’s quality, purpose, and reliability solely on the look of your app icon.

image: ../Art/app_icon_gallery_2x.png

Here are a few of the things you should keep in mind as you think about your app icon. When you’re ready to start creating it, see App Icon for detailed guidance and specifications.

  • The app icon is an important part of your app’s brand. Approach the design as an opportunity to tell your app’s story and build an emotional connection with users.

  • The best app icons are unique, uncluttered, engaging, and memorable.

  • An app icon needs to look good at many different sizes and on different backgrounds. Details that might enrich an icon at large sizes can make it look muddy at small sizes.

Bar Icons

iOS provides a lot of small icons—representing common tasks and types of content—for use in tab bars, toolbars, and navigation bars. It’s a good idea to use the built-in icons as much as possible because users already know what they mean.

image: ../Art/bar-icons_2x.png

If you need to represent custom actions or content types you can create custom bar icons. Designing these small, streamlined icons is very different from designing an app icon. If you need to create custom bar icons, see Bar Button Icons to learn how.

image: ../Art/text_in_toolbar_2x.png

Note that you can use text instead of icons to represent items in a navigation bar or toolbar. For example, Calendar uses “Today,” “Calendars,” and “Inbox” instead of icons in the toolbar.

To help you decide whether to use text or icons in the navigation bar or toolbar in your app, consider how many icons are visible onscreen at one time. Too many icons on a screen can make an app seem difficult to decode. Also, note that this decision might be different for an iPhone app than for an iPad app because an iPad app tends to have more room for text in bars.

Graphics

iOS apps tend to be graphically rich. Whether you’re displaying users’ photos or creating custom artwork, here are a few guidelines you should follow.

Support the Retina display. Make sure that you supply @2x assets for all artwork and graphics in your app.

Display photos and graphics in their original aspect ratio, and don’t scale them greater than 100%. You don’t want the artwork or graphics in your app to look skewed or too large. Let users choose whether they want to zoom images in or out.

Don’t use images that replicate Apple products in your designs. These symbols are copyrighted, and product designs can change frequently.