Ole Begemann: iPhone Development

iPhone Development, Cocoa and Objective-C

The Apple Symbols font: a great repository for iPhone button icons

with 3 comments

For iPhone developers looking for icons to use in buttons, toolbars, navigation bars and tab bars, there are a few good resources available, for example Joseph Wain’s excellent (and free!) collection of 130 icons and Eddie Wilson’s set of 160 iPhone UI icons ($69). These are not only beautifully designed but also already have the right sizes and format for use in toolbars and tab bars.

If you are not afraid of making your own PNGs, there is another free and hidden treasure in every Mac OS X installation: the Apple Symbols font. It contains many of the icons Apple uses in the built-in iPhone apps and makes them readily available for your own buttons.

Background: standard buttons in the iPhone SDK

The set of standard buttons that Apple ships with the iPhone SDK is quite limited in both number and context. For instance, the standard toolbar buttons can only be used inside a UIBarButtonItem on a toolbar or navigation bar. Now, this is a good thing, I hear you say, because it enforces consistent UIs. And I agree to a point. Specifically, I urge you to follow Apple’s Human Interface Guidelines and use the system-provided buttons for (and only for) their documented meanings or you risk the rejection of your app.

Icons for buttons, toolbars/navigation bars and tab bars shipped with the iPhone SDK

Icons for buttons, toolbars/navigation bars and tab bars shipped with the iPhone SDK

Apple Symbols to the rescue

If the standard buttons do not cover your needs or ff you need to use one of the standard toolbar buttons outside of a toolbar (in a simple UIButton, for example), you are out of luck. But Apple Symbols contains many more standard icons for your icon-making pleasure. Open the OS X Character Viewer in Glyph View, select the Apple Symbols font and scroll down to the very end of the Glyph Catalog:

The Apple Symbols font in Character Viewer

The Apple Symbols font in Character Viewer

Making a button from one of these glyphs is as simple as inserting it into Photoshop or any other graphics software that can work with fonts, resizing it, and saving it as a transparent PNG. Use about 20⨉20 pixels for toolbar and navbar icons, and about 30⨉30 pixels for tab bar icons and other buttons.

Am I allowed to do this?

I am not a lawyer but I have not found any restrictions that would forbid the use of these glyphs in your apps. This is what the Mac OS X license agreement has to say about fonts:

D. Fonts. Subject to the terms and conditions of this License, you may use the fonts included with the Apple Software to display and print content while running the Apple Software; however, you may only embed fonts in content if that is permitted by the embedding restrictions accompanying the font in question. These embedding restrictions can be found in the Font Book/Preview/Show Font Info panel.

And Font Book lists no license or embedding restrictions for Apple Symbols:

Apple Symbols Font Info

Written by Ole Begemann

October 1st, 2009 at 5:30 pm

Posted in Uncategorized

3 Responses to 'The Apple Symbols font: a great repository for iPhone button icons'

Subscribe to comments with RSS or TrackBack to 'The Apple Symbols font: a great repository for iPhone button icons'.

  1. How can I copy one of these symbols into Photoshop to work with them? Copy/paste doesnt work for the hidden symbols… Please help!

    SW

    14 Jan 10 at 12:22 pm

  2. I recall hitting this one myself when I found those font entries.

    I recall taking an intermediate trip through TextEdit to put the symbols I wanted into a text or RTF file, then copy and pasting from there to GIMP. (My copy of PhotoShop 7 quit working with OS X 10.5 and I was making do.)

    My goal was a png file of the symbol with a transparent background and this did work. Pixelmator makes the same job pretty easy for me now (and a lot cheaper than PhotoShop.)

    When I didn’t need a transparent background, taking a screen shot of a large-sized font symbol in TextEdit did a good job.

    Walt Sellers

    21 Jan 10 at 4:48 am

  3. If you look at the bottom right of the character viewer there is a button that says “Insert with Font”. If your active window is a program that can accept these characters (such as TextEdit), that button will be active, and clicking it will insert the character into your text.

    My Photoshop CS4, however, will not accept any of the characters in the 4800+ range, which is basically all the ones I want for my iPhone apps.

    Eddie Marks

    22 Jan 10 at 8:33 am

Leave a Reply