Designing for iOS requires a meticulous approach to detail, and one of the most critical aspects is icon sizing. The dimensions and resolutions you choose directly impact user engagement, app store visibility, and the perceived professionalism of your product. Getting this foundation wrong can lead to a disjointed user experience, while nailing it ensures your interface feels polished and intuitive from the very first launch.
Understanding iOS Density and Points
Before diving into specific pixel measurements, it is essential to grasp the iOS coordinate system, which uses points rather than pixels. A point is a logical unit that can represent multiple pixels on high-resolution displays. This abstraction allows interface elements to scale appropriately across devices with different screen densities, such as the standard Retina displays and the Super Retina XDR screens found on newer models. When you specify an icon size in points, the system automatically renders the correct number of physical pixels to maintain sharpness.
App Store and Marketing Icons
The icons users see on your app’s App Store page and your marketing materials follow a specific set of rules. For the App Store listing, Apple requires a large 1024 by 1024 pixel asset. This single image is used across various placements, so it must be vector-based or exported at a high enough resolution to look crisp when scaled down. For marketing purposes, you will also need a series of smaller assets, including a 512 by 512 pixel icon for the App Store itself and a 1024 by 1024 pixel iTunes Artwork file to ensure brand consistency across the store ecosystem.
iOS UI Icon Sizes and Specifications
Within the application interface itself, iOS provides a clear hierarchy for icon sizes based on their function and context. Tab bar icons, which serve as primary navigation, should be designed at a template size of 25 by 25 points to fit the standard tab bar height. For toolbar and navigation bar icons, the recommended template size is 22 by 22 points. If you are designing for an action button or a custom control that requires a slightly larger touch target, a 30 by 30 point template is often appropriate to ensure usability and visual balance.
Template Rendering and Configuration
Apple strongly recommends designing your UI icons as templates. By setting the rendering mode to template, you allow the system to apply its standard color treatments, such as the dynamic tinting seen in dark mode or selected states. This approach ensures your icons integrate seamlessly with the system’s appearance settings. When you export these templates, you should provide the artwork at the base point size (e.g., 25x25pt) and let Xcode handle the multiplication for @2x and @3x resolutions, which results in 50x50 and 75x75 pixel files respectively.
Handling Device Specifics and App Thinning
To manage the complexity of multiple resolutions, Xcode utilizes a system called app thinning. When you submit your app to the App Store, you include the base vector PDF or the individual PNGs for the different scales. The store and the device then work together to deliver the correct asset. For example, an iPhone 12 Pro Max with a 3x scale will pull the 75x75 pixel version of a 25x25 point icon, while an older iPhone 8 with a 2x scale will use the 50x50 pixel version. This process ensures optimal download sizes and storage usage without sacrificing visual fidelity.
