How To: Create an OS X Icon from a Vector Graphic

Back in 2005 I wrote an very basic article on how to change icons in OS X with ones you find online at sites like Interface Lift. Unfortunately, that method of icon swapping only works with actual embedded icon files. I quickly discovered this when I wanted to make my laptop more work-oriented and use the Skribit logo for my drive icon. This post shows the steps I went through to get my drive icon to be that of an Adobe Illustrator vector graphic.

Skribit drive iconThe Skribit logo, now as my drive icon. Originally created by Jared England and others at ASW.

First off, what is a vector graphic? In a nutshell, a vector graphic stores information about defined points and lines whereas a typical raster graphic as found on the web only contains information about pixels. The end result is that vector graphics are always at their best quality and can be resized without any repercussions like pixelation that occurs when enlarging a raster graphic. If you ever hire someone to create a logo for you, chances are they will give you the finished product as a vector graphic in an Adobe Illustrator file.

This article assumes that you already have a logo you want to use that was created as a vector graphic. If not, Sitepoint has a great post that goes through the basics of creating a vector graphic in Illustrator. However, for the purpose of this article you don't really need a vector graphic, just something at least 512px by 512px large. That's the largest image size OS X Leopard supports for icons.

1) Open the vector graphic in Adobe Illustrator. Use the Selection Tool to select the entire logo and then grab one of the corners and resize the graphic to 512 pixels by 512 pixels. If Illustrator is not set to use pixels as its primary measurement unit, change it in Illustrator » Preferences » Unit & Display Performance.

Skribit Icon Resizing in Adobe Illustrator

2) File » Save As... » Illustrator EPS

Save icon as Illustrator EPS

3) Open the EPS file in Photoshop. It will prompt you to rasterize it - that's fine.

Rasterizing EPS in Photoshop

4) Image » Mode » RGB Color (I forgot to select RGB in the save window above)

5) File » Save As... » PNG (not interlaced)

Save as PNG

6) Open Icon Composer. It can be found in Developer » Applications » Utilities if you have Xcode/Developer Tools installed. Drag the PNG file you just saved into the large 512px window inside of Icon Composer. When asked to copy the image to other sizes, select "Copy to all smaller sizes."

Creating icns file with Icon Composer

If you really want to be picky, instead of having Icon Composer resize each rastered graphic for the various sizes needed for the icns file you need, you can go back to the Illustrator file, resize the vector to the needed sizes, go through all the steps above and toss in each rastered graphic to Icon Composer... but that is not really necessary for something as small as an icon.

7) File » Save As... » "something.icns"

8) Download and open IconDroplet. When prompted to choose a file, select the icns file you just created.

9) IconDroplet should have created an OS X file with the embedded icon in the same directory as the icns file.

10) Now you can simply copy the icon from the preview found on the Get Info dialogue to anything like a drive icon, application icon or folder. This is detailed in my previous post on changing OS X icons.

Isn't there an easier way?

Ah shortcuts are no fun! But yes, Panic has an excellent icon management and customization application called CandyBar that gets the job done. I'm sure there are other ways of getting this done other than through CandyBar and that my method was a little long and tedious. Let me know what you think.

Have you tinkered with using your own custom OS X icons before?

Paul StamatiouPaul Stamatiou

Paul Stamatiou is a designer, developer and photographer living in New York. He has been a product designer at Twitter since 2013. More »

Subscribe Share
Keep reading

Enjoy this article? Tweet it.

"How To: Create an OS X Icon from a Vector Graphic" by @Stammy