According to Apples's iOS Human Interface Guidelines, icons placed in navigation bars and toolbars should be "about" 22 x 22 (@1x), 44 x 44 (@2x), and 66 x 66 (@3x) px.

If you look at system icons in iOS, they are all sorts of sizes.

UIButtonBarAction (38 x 53 px) Action icon

UIButtonBarCompose (46 x 46 px) Action icon

UIButtonBarTrash (38 x 50 px) Action icon

What sizes can my icons be?

TL/DR: (any width, up to 30px height)

Let's first see what a 22 x 22px image looks like inside a UIBarButtonItem. I created a sample project to try it out, and used Xcode's UI snapshot feature to take a look at the real dimensions.


My 22 x 22px image is placed inside a 44 x 30px container.

So, what happens if I put a 44 x 30px image inside that container?

UIBarButtonItem-2 Well, now my 44 x 30px image is placed inside a 66 x 30px container.


Based on further testing, I concluded that the max height of an image is 30px. If the image gets any taller, it will be squished down to 30px tall when it's displayed.

The width, however, keeps going. The size of the UIBarButtonItem keeps expanding with wider images to the point that it pushes the title over, and takes up as much space as possible.

There is always a 10px padding on the left and right of the image, presumably so multiple items don't get too close together and become hard to tap.

Here is the result of placing a 500 x 30px image in a UIBarButtonItem. UIBarButtonItem-3

What about really small images? Here's the result of trying a 2 x 2px image. UIBarButtonItem-4