09 Jun iPhone 4 icon PSD file

I’ve updated the iPhone / iPad icon PSD I released not too long ago with some fixes and a 114×114 pixel icon template for designing icons for Apple’s hottest new device.

Download it here. I cannot be held responsible for inaccuracies, flaws and errors in this this PSD I might have overlooked, but if you notice anything please let me know in the comments.

Again, if you appreciate it, tweet this to help your fellow designers and developers make nicer icons for iPhone 4 (and beyond).

Related:

    iPhone / iPad icon PSD template

    Update: Get the updated version. As there's a tendency lately to release lots of (often less-than-pixel-accurate) PSD templates of iPad UI...

    Here, Icon Icon!

    A while ago Buck Wilson, the designer in a small team of Portland-bound guys, contacted me about icon design for Here, File File!, an iPhone app...

    Designing Warships

    Warships, a game designed by me and developed by the Canadian Edovia is now available on the App Store. It's a great, simple game of naval...

    Composition

    As I alluded to earlier today, Sean Patrick O‘Brien and I are working on the very first Mac application that will be released under the Cocoia...

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

45 Responses

  1. 1
    S 

    Excellent.

  2. Awesome work once again, also a small typo in your post “help” where you meant “held” – Nice one.

  3. Nit within the post – “I cannot be *help* responsible”

    Feel free to delete this comment if you like once it’s fixed.

  4. 4
    ahoge 

    Great job! One correction “I cannot be ‘held’ responsible” :)

  5. 5
    sebastiaan 

    My god you people are all over it. Got it. Thanks guys.

  6. Amazing resource, thanks a lot! And just after I downloaded your template from before :)

  7. 7
    Marc 

    Does this have the right border radius so that if you add a little stroke it shows right in the springboard and itunes?.

    I have found it to be either 83 or 90px at 512 (with snap to pixels on on photoshop paths)

  8. Thanks for this resource! It inspired me to create an application to chop up an image like this into the correctly named icon files. This app is called ChopShop and I just released it last night: http://inscopeapps.com/blog/chopshop-10/

    During my research for this app I found in the docs that the iPad search icon is 50px, your template has it as 48px. Also you might want to include the iPhone 4 search icon, which is 58 px.

  9. I’m curios have you seen the latest Apple guidelines on app icons.
    They specifically require solid rectangles, with no transparency. You can still customize it and stop them from applying their own shine (UIPrerenderedIcon property in Info.plist), but they insist on being a non-transparent square.
    This for instance excludes any customer borders you might want to add.

    Not sure how much they will enforce that though.

  10. 10
    Kwame 

    Brilliant! This is going to come in very handy. Thanks for the hard work and putting this up there. Cheers.

  11. 11
    Neven 

    Seb, thanks for these again.

    One note: make the icon label into Paragraph Text, set its width to the device’s actual max width, and center the text. It’ll make it easier to test how the icon looks with the label on it.

  12. 12
    Wolf 

    Lovely work, thank you.

    How do the devices determine which icon to use? (e.g. for a webapp that runs on both iPad and iPhone)

  13. 13
    Zef 

    Thanks for making this — and for updating it too, it’s helped me a ton!

    One thing I’d like to mention to anyone working with this is that for the iPad settings icon, iOS expects to get a 50px icon, but trims 1px from each size to display it. Be aware of this when exporting the final icon. You should export a 50x50px icon, not a 48x48px one.

  14. 14
    jason 

    sorry to sound ignorant, but how do you package all these icons into the iphone app? Is each size named something different (can i get a link to that list?) or do I zip them into an Icon.zip file?

    This seems like the best place to ask!

    Thanks!

  15. 15
    Matthew 

    @Jason — for iPhone & iPod Touch (not sure about iPad) you need to save your icon as “apple-touch-icon.png” and upload to your server’s root folder.

  16. 16
    Jeff 

    Just wanted to say thanks for the template. Quite helpful!

  17. 17
    Aaron Kato 

    Thank you for this awesome resource it comes in really handy I use it right now! Peace!

  18. 18
    Jaxon Triggs 

    This file was great and incredibly useful!! Thank you!

    However….

    There are missing required icon sizes from the file, and it could be labeled a little better, such as the names of the icons you need to save-as, and their dimensions.

    Information here:

    http://developer.apple.com/iphone/library/documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html

  19. 19
    J 

    Nice template thanks…

    I wondered, what effect does the DPI have on the quality of the final icons when displayed on the device(s)?

    I see your PSD is 72dpi – does that matter. Should each of the icons be done at the DPI of their target device also?

    thanks in advance,
    J

  20. 20
    Patrick 

    Check your email.

  21. I’m curious about what J said as well. Your PSD file is at 72PPI, where as the Retina Display has a resolution of 326PPI, I’m a bit confused. Could you please clarify?

  22. 22
    Allen 

    Thanks! great job!

  23. I love you, thank you for this template.
    And I love your blog :D

    From France !

  24. 24
    Hannah 

    Oh man, this is so great. Thanks!

  25. 25
    Cam 

    this just saved me a ton of work for an app mock-up. Thank you, I totally love you.

  26. 26
    RED 

    Excellent job! Thank you man! I’ve spent a lot of time looking for something suitable. Your icon was the best! You should add “donate” button to your site, so readers will have a possibility to gratify you for your great work!

  27. 27
    Angel F 

    Thank you so much for providing this template. Made my job so much easier and allowed me to come up with something for a client that is both professional and matches the iPhone styling. Awesome!!

  1. [...] Update: Get the updated version. [...]

  2. [...] oder einfach um das eigene Vorlagen-Archiv an PSD-Dateien zu vervollständigen – den hier angebotenen Download des “iPhone 4 icon PSD Files” können wir empfehlen. 303KB groß bietet die PSD-Datei [...]

  3. [...] Thursday, June 17th, 2010 via blog.cocoia.com [...]

  4. [...] and Photoshop is all you need :) http://blog.cocoia.com/2010/iphone-4-icon-psd-file/ (via @nevenmrgan) // Very nice, thanks. [...]

  5. [...] immagine è basata sul file icone in PSD iPhone di Sebastiaan de With, che è un documento che viene spesso aggiornato. Si noti che le icone [...]

  6. [...] Download the PSD files referenced in the video. But if you want the right corner radius for each size, check out this great template. [...]

  7. [...] found this usefull PSD in “Cocoia [...]

  8. [...] how many different icon files you have to generate for your next iPhone or iPad application, Cocoia has a nice Photoshop template to help. (Via [...]

  9. [...] Sebastiaan de With has updated his iPhone/iPad icon PSD file, adding support for iOS 4 and 114x114px [...]

  10. [...] дизайнеру и «хозяину» блога Cocoia, за предоставленный оригинал в формате PSD), демонстрирующий все, что я буду [...]

  11. [...] oder einfach um das eigene Vorlagen-Archiv an PSD-Dateien zu vervollständigen – den hier angebotenen Download des “iPhone 4 icon PSD Files” können wir empfehlen. 303KB groß bietet die PSD-Datei neben der [...]

  12. [...] Now that you have some pointers you may have a good idea what you want your icon to look like, now how do create it? Simple, use an icon template. Here is one from Cocoia’s Blog: http://blog.cocoia.com/2010/iphone-4-icon-psd-file/ [...]

  13. [...] and gloss. One of the best templates that I’ve found was created by Sebastiaan de With who distributes the template on his blog [...]

  14. 41
    iPhone Optimized Website (via Pingback)

    [...] Basic iPhone styling iOS Icon Template (PSD for Photoshop or GIMP)  [...]

  15. [...] icon is used for on his blog. Neven refers us to Sebastiaan de With, who provides us with this iPhone 4 icon template PSD (page [...]

  16. [...] your icon has the dreaded white corners, you’ve probably used an iOS icon template. Perhaps this one that Sebastian De With graciously provided. Only problem is, you’ve submitted a rounded image [...]

  17. [...] von WP-Touch hochladen. Dazu bietet sich dieser iPhone-Icon-Generator an, oder hier gibt es eine Photoshop-Vorlage [...]

  18. [...] App Icon Template von Cocoia [...]