How can I generate iOS/Flurry style icons in OS X?

Building off of cksum's answer, if you can get ahold of the mask, overlay and shadow images at high enough resolution (@2x images are still only about 140px square,) and you're comfortable with the command line/shell scripting, you can use ImageMagick, a nice command line image processor, to actually mask and compose the icon.

Once you've installed ImageMagick (They have installation instructions here) you should be able to process your image with the mask, overlay and shadow:

convert YourImage.png overlay.png -composite YourImage_overlay.png
convert YourImage_overlay.png mask.png -alpha off -compose CopyOpacity -composite YourImage2.png
convert shadow.png YourImage2.png -composite YourImage_largest.png
convert YourImage_largest.png -geometry 512 Icon512.png
convert YourImage_largest.png -geometry 256 Icon256.png

This assumes that Your_Image is large and square (1024x1024) and that the mask.png, overlay.png and shadow.png are the same size.

Ideally, you wouldn't just resample the largest icon down to get the smaller versions, but you could instead use normal icon making software (e.g. IconBuilder) and use it to make YourImage at each size, then do the above to each one individually.

As for getting the mask, overlay and shadow images to the correct size, my best recommendation would be to enlarge them and then build them back (i.e. drawing a new roundrect and gradients) at full resolution with Photoshop or GIMP.

Once you have the image at each resolution, you can throw it into Apples own Icon Composer (in the iOS/Mac SDK) to create the .icns

It's not the easiest solution, but it provides you the flexibility of specifying the exact mask and other effects and of the command line.


Perhaps if someone wrote a hack (but I remain skeptical as all this could be easily done by getting the icon's template (PSD file) and doing it manually.

iOS has a framework in place to deal with SpringBoard icons. The files are as follows (naming convention taken from iOS 5. Previous iOS versions drop the ~iphone suffix):

  1. AppIconMask@2x~iphone.png
  2. AppIconOverlay@2x~iphone.png
  3. AppIconShadow@2x~iphone.png

(1) is the clipping mask, that dictates the shape of the icon. (2) is the "gloss" effect that has somewhat fallen out of favor in the past couple of years and is optional. (3) is the base of the icon, the shadow that is applied under the final product.

I made a graphic and accompanying explanation of how they all work together on my website which should help better explain how iOS delivers icons on its respective device.

Jaku iOS Theme icon mask pictogram

OS X has no such system in place. Each icon is simply constrained by the dimensions set in Finder. Apple never sought to control the way icons look on OS X, but wanted to have a uniform appearance on iOS (and I don't blame them), hence the reason why they developed such a framework.

You could try contacting a Cocoa developer on porting the MobileIcons.framework from iOS to OS X, but again, because Finder can adjust sizes (in Lion, anywhere from 1024x1024 on down), I remain skeptical that it at all possible.


The other apps mentioned have their uses, but for your stated request, there are 2 apps that accomplish it very easily:

  • icons
  • iDeveloper - Icon Generator

Both are available on the Mac App Store, but I prefer icons between the two—it's vastly more robust, and quite polished. As you'll see from the screen-cap I added, icons makes tinkering with all the variables (corners, shine, export sizes, etc.) very easy—and that's only one part of the app! (The other tabs address non-iDevice icons…)

screen-cap of ***icons*** app interface