Take the 2-minute tour ×

I'd love to create a "back" left-arrow-bezel button in a UIToolbar.

As far as I can tell, the only way to get one of these is to leave UINavigationController at default settings and it uses one for the left bar item. But there's no way I can find to create one as a UIBarButtonItem, so I can't make one in a standard UIToolbar, even though they're very similar to UINavigationBars.

I could manually create it with button images, but I can't find the source images anywhere. They have alpha-channel edges, so screenshotting and cutting won't get very versatile results.

Any ideas beyond screenshotting for every size and color scheme I intend to use?

Update: PLEASE STOP dodging the question and suggesting that I shouldn't be asking this and should be using UINavigationBar. My app is Instapaper Pro. It shows only a bottom toolbar (to save space and maximize readable content area), and I wish to put a left-arrow-shaped Back button in the bottom.

Telling me that I shouldn't need to do this is not an answer and certainly doesn't deserve a bounty.

share|improve this question
Related question: Draw custom Back button on iPhone Navigation Bar –  hakre Apr 27 '13 at 7:27
from @Oxced : github.com/0xced/UIKit-Artwork-Extractor –  rptwsthi Jul 9 '13 at 7:58

20 Answers 20

up vote 98 down vote accepted

I used the following psd that I derived from http://www.teehanlax.com/blog/?p=447


I then just created a custom UIView that I use in the customView property of the toolbar item.

Works well for me.

Edit: As pointed out by PrairieHippo, maralbjo found that using the following, simple code did the trick (requires custom image in bundle) should be combined with this answer. So here is additional code:

// Creates a back button instead of default behaviour (displaying title of previous screen)
UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back_arrow.png"]

tipsDetailViewController.navigationItem.leftBarButtonItem = backButton;
[backButton release];
share|improve this answer
The PSD I uploaded is for a black toolbar. I haven't tried much with the blue ones as my app doesn't use that. But from what I know the tool bar won't re-colour it as needed. chris. –  PyjamaSam Jan 21 '10 at 23:28
You don't need any special tool to re-color it, I have done it using Mac Preview's 'Adjust Color' option. –  Sushant Jan 21 '11 at 7:12
Can this solution be spelled out a bit? –  cannyboy Aug 11 '11 at 5:31
This psd is only useful for a screen scale of 1.0f. On a retina display it's going to look awful. –  Daniel Wood Sep 22 '11 at 17:14
Don't use images for this, just do it properly (see answer for stackoverflow.com/questions/4260238). –  ing0 Feb 18 '13 at 12:11

WARNING: There are reports that this will not work on iOS 6. This might only work on older versions of the OS. Evidently at least one dev has had their app rejected for using this trick (see the comments). Use at your own risk. Using an image (see answer above) might be a safer solution.

This can be done without adding in your own image files using sekr1t button type 101 to get the correct shape. For me the trick was figuring out that I could use 'initWithCustomView' to create the Bar Button Item. I personally needed this for a dynamic navbar rather than a toolbar, but I tested it with a toolbar and the code is nearly the same:

// create button
UIButton* backButton = [UIButton buttonWithType:101]; // left-pointing shape!
[backButton addTarget:self action:@selector(backAction) forControlEvents:UIControlEventTouchUpInside];
[backButton setTitle:@"Back" forState:UIControlStateNormal];

// create button item -- possible because UIButton subclasses UIView!
UIBarButtonItem* backItem = [[UIBarButtonItem alloc] initWithCustomView:backButton];

// add to toolbar, or to a navbar (you should only have one of these!)
[toolbar setItems:[NSArray arrayWithObject:backItem]];
navItem.leftBarButtonItem = backItem;

If you're doing this on a toolbar you'll have to tweak how you set the items, but that depends on the rest of your code and I leave that as an exercise for the reader. :P This sample worked for me (compiled & run).

Blah blah, read the HIG, don't use undocumented features, and all that. There's only six supported button types and this isn't one of them.

share|improve this answer
button type 101 doesn't seem to be giving me a left-pointing shape... just a rectangle. –  elsurudo Sep 11 '10 at 5:08
I tried this with a toolbar on 4.2 today and it's still giving me a left-pointing button. Those of you having issues will probably need to simplify your code a bit until you get a working example that you can crib from. As for other button types, one can obtain type numbers for any button created "normally" (in a NIB etc) and then adding code to spit out [myButton buttonType]. –  AndrewS Mar 21 '11 at 23:44
Don't do this -- Your app will be rejected. Vote this answer down. –  thefaj Jun 1 '11 at 15:11
I am inclined to think he's not sure; he's saying "don't use undocumented API" but not stating his app was rejected. And it's not an undocumented API -- it's an undocumented value. If anyone has had their app rejected, please post. I have continued to get apps approved with this value. –  AndrewS Aug 24 '12 at 21:07
This is very poor coding style. You're lucky, but you should stick to using only documented API (not magic/unpublished numbers). –  thefaj Dec 19 '12 at 5:46

The Unicode Method

I think it is much easier to just use a unicode character to get the job done. You can look through arrows by googling either Unicode Triangles or Unicode Arrows. Starting with iOS6 Apple changed the character to be an emoji character with a border. To disable the border I add the 0xFE0E Unicode Variation Selector.


UIBarButtonItem *backBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:backArrowString style:UIBarButtonItemStylePlain target:nil action:nil];
self.navigationItem.leftButtonItem = backBarButtonItem;
[backBarButtonItem release];

The code block is just for the demo. It would work in any button that accepts an NSString.

For a full list of characters search Google for Unicode character and what you want. Here is the entry for Black Left-Pointing Triangle.


The result

share|improve this answer
This worked for me -- thanks very much. Have you run into any drawbacks of this technique? –  Steven Huwig Mar 9 '11 at 18:45
I presume this will be rejected by Apple though? –  Donal Rafferty May 12 '11 at 10:11
@Donal shouldn't be. thats just a character, not a secret button. –  Richard J. Ross III Sep 13 '11 at 14:48
@Donal, this is just a string, nothing magic. –  Cameron Lowell Palmer Jul 6 '12 at 15:45

enter image description here

First of all you have to find an image of the back button. I used a nice app called Extractor that extracts all the graphics from iPhone. In iOS7 I managed to retrieve the image called UINavigationBarBackIndicatorDefault and it was in black colour, since I needed a red tint I change the colour to red using Gimp.

Then I created a view that contains an imageView with that arrow, a label with the custom text and on top of the view I have a button with an action. Then I added a simple animation (fading and translation).

The following code simulates the behaviour of the back button including animation.

        UIImageView *imageView=[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"UINavigationBarBackIndicatorDefault"]];
        [imageView setTintColor:[UIColor redColor]];
        UILabel *label=[[UILabel alloc] init];
        [label setTextColor:[UIColor redColor]];
        [label setText:@"Blog"];
        [label sizeToFit];

        int space=6;
        label.frame=CGRectMake(imageView.frame.origin.x+imageView.frame.size.width+space, label.frame.origin.y, label.frame.size.width, label.frame.size.height);
        UIView *view=[[UIView alloc] initWithFrame:CGRectMake(0, 0, label.frame.size.width+imageView.frame.size.width+space, imageView.frame.size.height)];

        view.bounds=CGRectMake(view.bounds.origin.x+8, view.bounds.origin.y-1, view.bounds.size.width, view.bounds.size.height);
        [view addSubview:imageView];
        [view addSubview:label];

        UIButton *button=[[UIButton alloc] initWithFrame:view.frame];
        [button addTarget:self action:@selector(handleBack:) forControlEvents:UIControlEventTouchUpInside];
        [view addSubview:button];

        [UIView animateWithDuration:0.33 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
            label.alpha = 0.0;
            CGRect orig=label.frame;
            label.frame=CGRectMake(label.frame.origin.x+25, label.frame.origin.y, label.frame.size.width, label.frame.size.height);
            label.alpha = 1.0;
        } completion:nil];

        UIBarButtonItem *backButton =[[UIBarButtonItem alloc] initWithCustomView:view];

- (void) handleBack:(id)sender{
share|improve this answer
thank you very much Sir Alex! –  Pega88 Mar 9 at 11:38
Sweeet! Thanks man! –  Jigzat Mar 29 at 6:42
great! you solved my problem (^ –  iWheelBuy Apr 14 at 6:29
Holy crap that app is an incredible resource! –  inorganik May 16 at 20:59
Hi Alex, Thank's for the solution. one issue i am facing with this implemented solution is: The hit area is less means when i click on arrow the handleBack doesn't get call but when i click on text handleBack get's call. Please suggest on this. Thank You –  Yogesh.Lolusare.Apple Sep 5 at 14:14

I'm not sure if this would work, but you could try creating a UINavigationController with the default settings to create the button, find the button in the navigation controller's subview hierarchy, call removeFromSuperview on it, destroy the navigation controller, and then add the button as a subview of your toolbar. You may also need to retain and the button before calling removeFromSuperview (and then release it after adding it as subview of your toolbar) to avoid it being deallocated during the process.

share|improve this answer
that's just wrong. I mean morally. +1. –  Yar Jul 18 '10 at 21:48
This is a terrible idea and I'm totally going to try it. –  Luke The Obscure Oct 16 '13 at 21:00

I found that using the following, simple code did the trick (requires custom image in bundle):


    tipsDetailViewController.navigationItem.leftBarButtonItem = backButton;
    [backButton release];
share|improve this answer
For anyone coming to this page, combine this answer with @PyjamaSam's answer. –  PrairieHippo Mar 4 '12 at 5:18
@PrairieHippo: Has been done now. Should probably have been edited in the first place. Ideal -1 for not doing that in the first place leaving the work for others. –  hakre Apr 27 '13 at 7:23

Here's what I ended up doing after searching through all these solutions and others. It uses a stretchable png's extracted from the UIKit stock images. This way you can set the text to whatever you liek

// Generate the background images
UIImage *stretchableBackButton = [[UIImage imageNamed:@"UINavigationBarDefaultBack.png"] stretchableImageWithLeftCapWidth:14 topCapHeight:0];
UIImage *stretchableBackButtonPressed = [[UIImage imageNamed:@"UINavigationBarDefaultBackPressed.png"] stretchableImageWithLeftCapWidth:13 topCapHeight:0];
// Setup the UIButton
UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
[backButton setBackgroundImage:stretchableBackButton forState:UIControlStateNormal];
[backButton setBackgroundImage:stretchableBackButtonPressed forState:UIControlStateSelected];
NSString *buttonTitle = NSLocalizedString(@"Back", @"Back");
[backButton setTitle:buttonTitle forState:UIControlStateNormal];
[backButton setTitle:buttonTitle forState:UIControlStateSelected];
backButton.titleEdgeInsets = UIEdgeInsetsMake(0, 5, 2, 1); // Tweak the text position
NSInteger width = ([backButton.titleLabel.text sizeWithFont:backButton.titleLabel.font].width + backButton.titleEdgeInsets.right +backButton.titleEdgeInsets.left);
[backButton setFrame:CGRectMake(0, 0, width, 29)];
backButton.titleLabel.font = [UIFont boldSystemFontOfSize:13.0f];
[backButton addTarget:self action:@selector(yourSelector:) forControlEvents:UIControlEventTouchDown];
// Now add the button as a custom UIBarButtonItem
UIBarButtonItem *backButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:backButton] autorelease];
self.navigationItem.leftBarButtonItem = backButtonItem;
share|improve this answer
Should use UIControlStateHighlighted not UIControlStateSelected otherwise the image does swap when the button is touched. –  Jim Aug 23 '12 at 23:03
Thanks, this helped me... I was trying to build a next button that mimicked the back button but the opposite direction (don't ask, creative told me to). Either way, this worked out great after mirroring the image. I did drop the font size to 12.0f, and used UIControlStateHighlighted, and adjust the titleEdgeInsets to be opposite. –  migs647 Oct 2 '13 at 15:36

It's easy to do with Interface Builder in Xcode 5.x


  • use Toolbar and Bar Button Item from Object library


  • in button's Attributes inspector edit Image section with your back button image

    Attributes inspector


share|improve this answer
No problem at all. OK, let's kill the comments, they're just clutter now. –  Bill Woodger Jan 30 at 11:24

You can find the source images by extracting them from Other.artwork in UIKit ${SDKROOT}/System/Library/Frameworks/UIKit.framework/Other.artwork. The modding community has some tools for extracting them, here. Once you extract the image you can write some code to recolor it as necessary and set it as the button image. Whether or not you can actually ship such a thing (since you are embedding derived artwork) might be a little dicey, so maybe you want to talk to a lawyer.

share|improve this answer
How do you recolor buttons? –  DenNukem Apr 9 '10 at 16:07

The Three20 library has a way to do this:

  UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle: @"Title" style:UIBarButtonItemStylePlain 
                                                                target:self action:@selector(foo)];

  UIColor* darkBlue = RGBCOLOR(109, 132, 162);

  TTShapeStyle* style = [TTShapeStyle styleWithShape:[TTRoundedLeftArrowShape shapeWithRadius:4.5] next:
    [TTShadowStyle styleWithColor:RGBCOLOR(255,255,255) blur:1 offset:CGSizeMake(0, 1) next:
    [TTReflectiveFillStyle styleWithColor:darkBlue next:
    [TTBevelBorderStyle styleWithHighlight:[darkBlue shadow]
                                     shadow:[darkBlue multiplyHue:1 saturation:0.5 value:0.5]
                                      width:1 lightSource:270 next:
    [TTInsetStyle styleWithInset:UIEdgeInsetsMake(0, -1, 0, -1) next:
    [TTBevelBorderStyle styleWithHighlight:nil shadow:RGBACOLOR(0,0,0,0.15)
                                        width:1 lightSource:270 next:nil]]]]]];

  TTView* view = [[[TTView alloc] initWithFrame:CGRectMake(0, 0, 80, 35)] autorelease];
  view.backgroundColor = [UIColor clearColor];
  view.style = style;
  backButton.customView = view;

  self.navigationItem.leftBarButtonItem = backButton;
share|improve this answer
Can you post a screenshot of the final result? –  jm. Jan 21 '10 at 2:38
it looked terrible. Never got the left arrow back button to look quite right. I gave up and used a proper back button with the Three20 navigator. –  Andrew Arrow Feb 2 '10 at 22:05
    self.navigationItem.leftBarButtonItem = self.navigationItem.backBarButtonItem;

Works for me. I used this when I had more tabs then could fit on the tab bar, and a view controller pushed from the "More" overrode the leftBarButtonItem in its viewDidLoad.

share|improve this answer
+1 This is what I use as well –  DenTheMan Jun 14 '11 at 14:00

To make a UIButton with an arrow pretty close (I'm not a designer ;) to the iOS 7 system back arrow:


Standard system back arrow

Apple SD Gothic Neo

Apple SD Gothic Neo < character

In Xcode:

  • Focus on the title value field of the button (or any other view/control with text content)
  • Open Edit -> Special Characters
  • Select the Parentheses group and double click the '<' character
  • Change font to: Apple SD Gothic Neo, Regular with desired size (e.g. 20)
  • Change colour as you like

Ref @staticVoidMan's answer to Back-like arrow on iOS 7

share|improve this answer

To create an image for the UIToolbar, make a png in photoshop and WHERE EVER there is ANY colour it puts it white, and where it's alpha = 0 then it leaves it alone.

The SDK actually put's the border around the icon you have made and turns it white without you having to do anything.

See, this is what I made in Photoshop for my forward button (obviously swap it around for back button):


and this is what it appeared like in Interface Builder


share|improve this answer

I was trying to do the same thing, but I wanted the back button to be in the navigation bar. (I actually needed a back button, that would do more than only going back, so I had to use the leftBarButtonItem property). I tried what AndrewS suggested, but in the navigation bar it wouldn't look the way it should, as the UIButton was kind of casted to a UIBarButtonItem.

But I found a way to work around this. I actually just put a UIView under the UIButton and set the customView for the UIBarButtonItem. Here is the code, if somebody needs it:

// initialize button and button view
UIButton *backButton = [UIButton buttonWithType:101];
UIView *backButtonView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, backButton.frame.size.width, backButton.frame.size.height)];

[backButton addTarget:self action:@selector(backButtonTouched:) forControlEvents:UIControlEventTouchUpInside];
[backButton setTitle:@"Back" forState:UIControlStateNormal];
[backButtonView addSubview:backButton];

// set buttonview as custom view for bar button item
UIBarButtonItem *backButtonItem = [[UIBarButtonItem alloc] initWithCustomView:backButtonView];
self.navigationItem.leftBarButtonItem = backButtonItem;

// push item to navigationbar items
[self.navigationController.navigationBar setItems:[NSArray arrayWithObject:backButtonItem]];
share|improve this answer

If you want to avoid drawing it yourself, you could use the undocumented class: UINavigationButton with style 1. This could, of course, stop your application from being approved... /John

share|improve this answer

Well, you don't have to have a different button for every size, you can use [UIImage stretchableImageWithLeftCapWidth:topCapHeight:], but the only thing I've found is custom images.

share|improve this answer
Right, that's the sort of thing I had in mind, but it'd be nice to get the source image - and I can't find it anywhere. –  Marco Oct 22 '08 at 19:08

I had a similar problem, and come out one library PButton. And the sample is the back navigation button like button, which can be used anywhere just like a customized button.

Something like this: enter image description here

share|improve this answer

Solution WITHOUT using a png. Based on this SO answer: Adding the little arrow to the right side of a cell in an iPhone TableView Cell

Just flipping the UITableViewCell horizontally!

UIButton *btnBack = [[UIButton alloc] initWithFrame:CGRectMake(0, 5, 70, 20)];

// Add the disclosure
CGRect frm;
UITableViewCell *disclosure = [[UITableViewCell alloc] init];
disclosure.transform = CGAffineTransformScale(CGAffineTransformIdentity, -1, 1);
frm = self.btnBack.bounds;
disclosure.frame = CGRectMake(frm.origin.x, frm.origin.y, frm.size.width-25, frm.size.height);
disclosure.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
disclosure.userInteractionEnabled = NO;
[self.btnBack addSubview:disclosure];

// Add the label
UILabel *lbl = [[UILabel alloc] init];
frm = CGRectOffset(self.btnBack.bounds, 15, 0);
lbl.frame = frm;
lbl.textAlignment = NSTextAlignmentCenter;
lbl.text = @"BACK";
[self addSubview:lbl];
share|improve this answer

Try this. I am sure you do not need a back button image to create one such.

self.navigationItem.backBarButtonItem = backButton;

That's all you have to do :)

share|improve this answer

Why are you doing this? If you want something that looks like a navigation bar, use UINavigationBar.

Toolbars have specific visual style associated with them. The Human Interface Guidelines for the iPhone state:

A toolbar appears at the bottom edge of the screen and contains buttons that perform actions related to objects in the current view.

It then gives several visual examples of roughly square icons with no text. I would urge you to follow the HIG on this.

share|improve this answer
I'm aware of this, thank you. However, I believe my intended use is appropriate. Can you be more helpful, assuming that I really do want to do what I asked about? –  Marco Oct 23 '08 at 2:13
If you're putting it at the top of the screen, it's being used wrong. Compare the gradients and borders between the UINavigationBar and the UIToolbar, and you'll see that they're slightly different. You definitely want to use a UINavigationBar at the top of the screen. –  NilObject Feb 22 '09 at 10:56
I'm putting it on the bottom. –  Marco Feb 22 '09 at 16:44
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. –  Jubobs Dec 23 at 10:39
If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. –  Hemang Dec 23 at 11:16

protected by Midhun MP Dec 17 at 0:14


Would you like to answer one of these unanswered questions instead?
