138

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.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Epsilon Prime
  • 4,576
  • 5
  • 31
  • 34

4 Answers4

244

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).

Sixten Otto
  • 14,816
  • 3
  • 48
  • 60
  • 1
    Thanks, exactly what I needed to know combined with a pointer to a great document. Bookmarked. – Epsilon Prime Oct 19 '09 at 21:43
  • 1
    I wish the Mobile HIG stated something more helpful than "about 20x20" though. If you use an image of exactly 20x20px it will actually not map 1:1, and the button won't be square. – Clafou Jul 22 '12 at 22:24
  • 1
    Clafou, are you talking about an image for the content of the button (as this question is), or to be used as the background of the button (with the appearance customization API)? Have you posted a question about this? – Sixten Otto Jul 23 '12 at 20:21
  • You can see some of the various sizes Apple uses by looking at the images Apple has here: http://developer.apple.com/library/ios/#documentation/uikit/reference/UIBarButtonItem_Class/Reference/Reference.html#jumpTo_30 – JasonZ Jul 25 '13 at 18:13
  • 1
    For iOS 7, see @hashier's answer. – Rudolf Adamkovič Sep 29 '14 at 16:26
  • iOS Human Interface Guidelines -> Icon and Image Design -> Icon and Image Sizes. [Link](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1) – Alan Dong Jan 11 '15 at 20:12
  • https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/custom-icons/ – Bradley Thomas Feb 24 '19 at 23:13
  • HIG: https://developer.apple.com/design/human-interface-guidelines/components/menus-and-actions/buttons – Jonny Nov 18 '22 at 06:03
47

The Human Interface Guidelines tells you this since iOS7:

Regardless of the icon’s visual style, create a toolbar or navigation bar icon in the following sizes:

About 44 x 44 pixels

About 22 x 22 pixels (standard resolution)

Here is a great matrix of all needed sizes for resources for all platforms

hashier
  • 4,670
  • 1
  • 28
  • 41
25

Yes, Apple suggest to use images with 22px, 44px and 66px size for UIBarButtonItems, but if you use preinstalled icons like Bookmark icon, it's sized by 25px 50px and 75px for 1x, 2x and 3x respectively.

Here are 2 icons in UIToolbar. On the right is Apple's system bookmark icon and on the left my custom icon.

Here my custom icon sized 22px-44px-66px:

enter image description here

And here 25px-50px-75px:

enter image description here

So, if you use custom and system icons in one toolbar, I would suggest to use 25px-50px-75px scaling, or your custom icons will be smaller. In fact I always use 25px-50px-75px scaling, it looks better on toolbars, as for me.

Peter Tretyakov
  • 3,380
  • 6
  • 38
  • 54
  • 1
    Thank you for that! I was sure that some of the icons like the bookmarks one are a bit larger than the 22-44-66px size – tech4242 Oct 21 '16 at 11:38
  • 1
    I have tried **25px-50px-75px** and it is really looking nice. not small not large. – MBH Nov 15 '17 at 09:51
-4

Easy: Include your images in Assets.xcassets.

How?

  • Clic on Assets.xcassets
  • Clic + icon and then click "New Image Set"
  • Drag and drop your image to 3x slot
  • Rename the image set
  • In the BarButton you can use this name under "Image" field
jobima
  • 5,790
  • 1
  • 20
  • 18