Â
In my free time, I have been experimenting with the iPhone home screen icons. I was initially pleased by the icons, but found several to be lacking after having looked at them for prolongued periods of time. Since I don’t want to be greedy, I will share some techniques, know-how and tips with you to help you get up to speed designing icons for your own iPhone. I will also look at my upcoming set of icons and discuss why I am changing so little to the look of the default icons.
First off, the basics. iPhone icons generally come in two sizes, one of which you see most; the home screen icons are 57×57 pixels, whereas some icons can also be seen in 29×29 list size; an example of the list sized icons can be seen in the iPhone settings. For all icons, it is wise to ensure proper clarity at this smaller size as well; several applications boast icons in a list view. On the home screen, it’s a good idea to restrict yourself to a fixed radius of the rounded corners; mixed corner styles get annoying pretty quickly. When designing my icon set, I took in mind the style of the device and the UI to ensure a coherence in the design.  My colleagues of mezzoblue made some observations about this and I recommend you do the same; flip through menus and applications and go back to the home screen. Some designs are more obvious when you have gotten around to using the applications behind them. Keep this method in mind when testing new icons.Â
  When you’re eager to look at the iPhone resources on your Mac or PC, you’ll have a hard time opening the files; Apple uses a custom PNG format for the bitmap resources of its applications. You can use the commandline utility fixpng, made by my fellow Dutchman Marco. Surprisingly, you won’t have to modify your own PNG graphics to use them – apparently, the iPhone can handle either without problems. The icons for each application on the home screen can be found in the bundles, which you can find on your iPhone’s /Applications folder. For changing the Weather app icon, for example, you have to place your icon.png in /Applications/Weather.app/, overwriting the existing icon.png. It’s worth noting that apart from not using ICNS files like in regular OS X, the iPhone also uses PNG format icon resources instead of the default of TIFF on OS X. Â
 I compiled a set of resources for the interested, with high-resolution versions of the default icons and Photoshop files of base shapes you may want to use. Feel free to use these shapes and their associated styles for your own iPhone icon or graphic. I do want to mention that the original icons are property of Apple Inc. and should be treated as such.Â
 It’s worth bearing in mind that the iPhone’s pixels on the screen appear very close together to the point of blending; no wonder, given the iPhone boasts an additional 40 pixels or so per inch of screen. May this also serve as a reminder to proof your icons on the actual screen; some details can get lost, and things look invariably different on your iPhone.
 Now, on to my icons; So far, I have completed 4 icons that I use as replacements of Apple’s defaults. I think at several points, that there is room for improvement and consistency with the aesthetic of OS X on the desktop, and the UI of the applications that the icons are supposed to represent. Here is a shot comparing the old icons to the new icons; note that there are some color mismatches between the old icons and the new ones that don’t exist in reality (the left side is oversaturated) and the Notes icon is still a bit rough.Â
Â
Old and new. Click for full size.
As you can observe, I have changed the Settings, Weather, Notes and Calendar icon so far. I will discuss my changes for each.
Settings; Settings had an odd problem; the dislocation of the iPhone settings icon and the Leopard System Preferences seems to be obvious; iPhone uses odd pointy gears with a strikingly oversimplified background. After about a week, I found this icon incredibly annoying and fixed up a better icon to replace it. Here’s a comparison of the Leopard System Preferences icon, the iPhone settings icon, and my new iPhone settings icon.Â
Â
Apple, you can do better than this.
I am not sure of your preference, but mine certainly lies with the Leopard icon.Â
Â
Â
Â
Weather What I found interestingly annoying about the Weather icon was that it didn’t really relate to the UI of the application behind it. Louie Mantia also re-colored the icon to the ‘widget’s’ interface colors, and I think that’s a good idea. I chose to add more detail to the icon, matching the composition of the neighboring Maps icon to balance out the shapes and represent the UI more accurately.
Â
Â
 Calendar and Notes; I found the icons for these quite flat, given the ‘multi-document’ nature of the applications behind them. I have redrawn the calendar icon to temper the over-saturated colors of the default icon and add more subtle shading, like you can see on your desktop in the iCal icon.
 Â
Â
Clock; Now here’s a very curious icon; it seems the icon has been taken straight from the widget on OS X, not bearing in mind that the application doesn’t even feature clocks on a black background. I have always found the dashboard clocks quite ugly on black and I really like the appearance of the clocks in the iPhone application. It was a no-brainer to make the background of the clock match the application’s toned-down silver-ish background.Â
  Over the next few weeks, I intend to replace the SMS, Phone and iPod icons with something a bit more photorealistic, and changing the Maps, Photos and Camera icons to less generic imagery (I would like to see satellite imagery for Maps, and the Camera would be nice if it looked more like it actually is in real life). I have an ongoing effort for these icons, but I found it’s quite hard to get something at the same level of quality as the defaults and just blends in. Of course, your input is welcome, as are requests.
Feel free to download the iPhone shapes and styles here, and a complete set of hi-resolution JPEG’s of the default iPhone icons here. I will release a set of freeware iPhone replacement icons in a week.
Feel free to digg this
.
Why did you leave out the proper drop shadows for them?
Joshua; I intend to make all icons background-shaded once I start working on the ones that actually have a background. So far, it hasn’t come into my list of priorities yet.
all people with strong opinions and good work to share have angry readers. jealousy is the word, here.
go on with the good work and yours explanations. it’s all useful to ponder.
–
by the way, is it possible to have the nice leopard-sized icon for the preview application you did weeks ago ? I love it :)
thanks.
looking forward to those icon replacements. :)
hope you can squeeze in a few ipod touch icons as well (address book, music, and video) :)
The height of your new icons doesn’t match the height of the original Apple designs.
Great work Sebastiaan, keep in coming. Who knows one day I may be able to get me an iPhone, and make use of them ;)
PS, what’s up with that hater? I think his husband must have dumped him :P
Dear Sebastiaan, I want the resource files which you have mentioned above.I really liked the effort. Thanks
Did you end up making any more?
Hi,
I want to know in which directory is located the icon for the iPod utility and the Dock icon.
Thanks
Javier
Very nice, Sebastiaan. I love it when people will share their great ideas with all of us.
No HATERS allowed! Only cool people, PERIOD.
-natASHa-
Thats good really like it.
Top work, Your icons are fantastic. Not to mention how well this blog works on an iPhone.
Excellant icons, work very well (jpeg format) with ma SE w960i Excellant effort
If I have a web site and want to make a default icon for the home screen bookmark, what do I name it and where do I put it?
Holy crap. Talk about splitting hairs. You’ve got WAY too much time on your overpriviledged hands.
You should be spending your time doing something more worthwhile… why not go do some volunteer work at your local soup kitchen?
Excellent thanks for the PSD’s and good work that really helped me out!
Foo Bar you sound far too bitter, why are you commenting on here anyhow? you should have used that time helping an old blind woman cross a road.. or something.
Your icons a beautifully drawn, but I agree with foo bar that you’re splitting hairs…
I think Apple have sensibly pared down the iPhone icons to make them very simple and flat — hence the subtle change to the Settings icon, for example. In this context, I think your Notes and Calendar look a bit fussy.
You maybe have a point with Clock, given the black-on-black problem — but I still prefer the original!
Thanks for the article. I needed to make a couple icon examples and the specs to make an icon, and I’m sure you would be happy to know you are in the top 2 on Google under “Iphone app icon”
I LOVE what you’ve done with the setting and calender icons, I’m not wild about the clock icon, the Notes icon needs work, and I’m not sure about the weather icon. The weather icon, in my opinion, should be similar to the calender icon in that it temperature (perhaps a setting in the settings.app) and the clock should, if it doesn’t take an unreasonable amount of memory, move like a clock. I also think that if you are going to make the clock a metallic icon, you should put more detail into the metal. I hate the original icon. Although it doesn’t relate to the app itself, perhaps take a wooden approach to the icon. It may look surprisingly classy.
incredible icons collections thanks for sharing
My opinion is that Settings icon on the bigger device is big machinery gears, whilst Setting on iPhone should be much smaller, because of the device itself. Image iphone is some sort of hand watches against Big Ben. One thing I dislike in setting on iphone is the border, it looks crappy.
I have to design an iphone icon for a new application.
I have read the specs and guidelines on the apple website. However, I am not clear if I just design it “flat” then the developer submits it to apple with the program files? Or do I do that so that I can see how the icon will look with the filters applied through Mac OS.
CAN SOMEONE ADIVSE ME.
thank you.
No offense but its just an icon… why would it matter at if the gears are pointy..
The specs for the iPhone icons are 57 x 57 and 29 x 29 (not 59 x 59). Otherwise, great stuff!
Very nice article!
Did you use Photoshop or Illustrator ?
Great read by the way :)