iOS app design with symbol fonts

Recently, Nearest Contacts underwent a fairly extensive makeover of both its internal logic and its cosmetics. Part of that makeover was to move to icons built with a symbol font—that is, a font whose characters include an extensive collection of useful symbols.

The font: SymbolSet's SS Pika, described as “a friendly new symbol font with precise pixel-fitting and a warm, organic finish.” 


Using a symbol font to replace icons is fairly easy, especially if you create a class or two to facilitate it. In my case, I needed all my icons in views, so each icon view is now a UILabel, configured appropriately, and initialized with the character that gives me the symbol I need.

You can initialize the text with the Unicode value of the character you need, but in my case I took Pika's documentation and editing into a lookup table of name to code, so my helper class takes a name, looks up the character, and initializes the label.

From there, you can dress up your icon however you like. Change the color, or put the label on a button image background. In my case, I needed to rotate one of my icons (it acts as a compass), and because of baseline considerations the center of rotation of the label wasn't the center of the character. So I wrapped the UILabel in a slightly larger UIView, offset the label to put the center of the center of the view, and rotated the UIView instead of the UILabel.

For user interaction, I attached gestures to the icons that needed them, not needing the extra functionality of UIButton. (And using UIButton would have meant some extra work, specifically having to render an image from my UILabel, since UIButton needs a UIImage, not a view. Not that hard, but not something I needed.) (Your helper class could provide some buttonish features, such as color adjustment for button state, disabling the associated gesture, etc.)

Some of the advantages of font-based icons:

  • They scale to whatever size you might need
  • They adapt to Retina displays with no work on your part
  • Any color you want, as long as it's flat
  • Easy to change to new icons, as long as the icon you need is present in the font
  • Consistent look across all your icons
  • Relatively inexpensive

Disadvantages? Pretty much the same as any stock icon set: if you want a symbol that isn't present in the set, you're stuck. And while each icon can be any color you like, it can

In the event, Nearest Contacts uses 16 symbols from the font for all its icon needs, with the exception of two system buttons in the navigation bar, and two placeholder images for use when a contact has no image of its own (I wanted to use the same placeholder image as the Contacts app). In addition to app icons, the app icon itself is constructed of two symbols, one superimposed on the other.

I'm happy with the result, and I'll be keeping an eye out for interesting symbol fonts to play with.