iOS 7 Back Button Symbol?

My solution is to use a Unicode character as back button icon:

‹

SINGLE LEFT-POINTING ANGLE QUOTATION MARK Unicode: U+2039, UTF-8: E2 80 B9

HTML Entity: ‹

Drawback:

  • Does not exactly look like the real back button icon, but close enough for me

Advantages:

  • Simple and quick to implement
  • No image file needed
  • Thus, the color of the back button icon is not fixed but may get adjusted by color design changes / new versions of iOS

Instructions:

  • Show the OS X Character Viewer (next to the clock, maybe you have to activate it in Preferences -> Keyboard)
  • In the left list, click on "Parentheses"
  • In Xcode, place your text cursor inside the string you define as back button text
  • In the Character Viewer, click on the first entry in the third row (I had to click a few times until it was inserted in Xcode)

Maybe there are even better characters which look like the back button icon...


Official Apple back button symbol artwork can be downloaded at https://developer.apple.com/ios/human-interface-guidelines/resources/


You have to use an image. These assets are in the original size from Apple. Here you go, simply right-click and save each one.
1x: 1x

2x: 2x

3x: 3x

Source: https://developer.apple.com/design/resources/


You can extract all iOS7 artwork using Cédric Luthi's iOS-Artwork-Extractor available on GitHub: compile this app in the simulator and look for UINavigationBarBackDefault.png.

The picture is UINavigationBarBackDefault.png.

An alternative is to get the Teehan + Lax iOS7 GUI PSD (iPhone) file. It contains most of iOS7 artwork. There's also a Sketch App version: Teehan + Lax iOS7 GUI for Sketch.

Tags:

Ios

Iphone

Uibutton

Interface Builder

Recent Posts