How big should a UIBarButtonItem image be?

ios uikit uibarbuttonitem uibaritem
Epsilon Prime picture Epsilon Prime · Oct 19, 2009 · Viewed 80.1k times · Source

I'm looking to create my own custom Sort By Date and Sort By Number buttons that I plan on placing in the navigation bar as the right button.

How big should my image be to appropriately fill the space -- the UIBarItem documentation page doesn't list anything about the size the image should be.

Answer

Sixten Otto picture Sixten Otto · Oct 19, 2009

As of iOS 11, the Human Interface Guidelines suggest glyphs be about 25×25 points in toolbars and navigation bars, up to a maximum of about 28 points. (And the HIG should definitely be in your bookmarks if you're working on iOS apps!)

That would translate to images 25px square for older devices like iPad 2 / Mini, 50px square for most current devices like iPhone 8 or iPad, and 75px square for Retina HD devices (the iPhone 6/7/8 Plus, or iPhone X). Asset catalogs will help immensely in keeping the different asset sizes organized (and Xcode can even generate them from vector sources these days).

Related questions

Swift Custom NavBar Back Button Image and Text

I need to customise the look of a back button in a Swift project. Here's what I have: Here's what I want: I've tried creating my own UIBarButtonItem but I can't figure out how to get the image to be …

Read More
titleTextAttributes UIAppearance font in iOS 7

I am using UIAppearance to apply fonts to UINavigationBar and UIBarButtonItem and I am having problems. I ran this code: [[UIBarButtonItem appearanceWhenContainedIn:[UIToolbar class], nil] setTitleTextAttributes: @{NSFontAttributeName : [UIFont fontWithName:@"My_Font" size:17.0]} forState:UIControlStateNormal]; NSLog(@"%@", [[UIBarButtonItem appearanceWhenContainedIn: [UIToolbar class], nil] …

Read More
Vertically align text to top within a UILabel

I have a UILabel with space for two lines of text. Sometimes, when the text is too short, this text is displayed in the vertical center of the label. How do I vertically align the text to always be at …

Read More