Monday, October 3, 2011

Icons on iOS and OS X

Sometime I need some small table to resume quickly the artwork required for the iOS and OsX applications. They are often the same image, but in different resolutions. Here they are:

OsX



ResolutionNotes
Icons1024 x 1024 pixels
512 x 512 pixels
256 x 256 pixels
128 x 128 pixels
32 x 32 pixels
16 x 16 pixels

Toolbar icons
(inside control)
19 x 19 pixelsOutline style, recommanded to be black
Toolbar icon buttons32 x 32 pixelsColor with antialiasing
Sidebar icons16 x 16 pixels
18 x 18 pixels
32 x 32 pixels
Black and white with alpha, all three resolutions required
More information for Os X here: Icon Design Guidelines

iOS


ResolutionNotes
Icon for iPhone57 x 57 pixelsSuggested name: Icon.png. No shadow or round corners required.
Icon for iPhone
with Retina Display
114 x 114 pixelsSuggested name: Icon@2x.png. No shadow or round corners required.
Icon for iPad72 x 72 pixelsSuggested name: Icon-72.png. No shadow or round corners required.
Small icons iPhone
(Spotlight and settings)
29 x 29 pixels
Small icons iPhone
High Resolution
(Spotlight and settings)
58 x 58 pixels
Small icons iPad
(Spotlight)
50 x 50 pixelsIt trims the side pixels (safe area 48x48)
Small icons iPhone
(settings)
29 x 29 pixels
Toolbar icons for iPhone20 x 20 pixelsApproximately
Toolbar icons for iPhone
High Resolution
40 x 40 pixelsApproximately
Toolbar icons iPad20 x 20 pixelsApproximately
Tab bar icons iPhone30 x 30 pixelsApproximately
Tab bar icons iPhone
High resolution
60 x 60 pixelsApproximately
Tab bar icons iPad30 x 30 pixelsApproximately
More information for iOS here: Custom Icon and Image Creation Guidelines

Open source/free toolbar icon sets

Some link to free/open source iPhone toolbar icon set: