55

I want to customize my NavigationBar button and using my own images.

The question is what the size should be?

I found that the button size should be 40*40, so the image should be 80*80 for retina?

pkamb
  • 30,595
  • 22
  • 143
  • 179
user2053760
  • 1,613
  • 2
  • 14
  • 19

6 Answers6

94

These are the sizes that the documentation recommends for custom icons now.

enter image description here

  • @2: 50 x 50
  • @3: 75 x 75

Create two images of the above pixel sizes and then add them to a new image set in your Assets.xcassets file. (Apparently the @1 size is no longer needed.)

enter image description here

Alternatively, you could use a universal vector image (pdf) (see here and here). This has been my preference recently.

Related answer

Suragch
  • 428,106
  • 278
  • 1,284
  • 1,317
25

Apple updated their Human Interface Guidelines Docs. Now the recommended sizes for creating custom icons for Navigation Bar and Toolbar

  • @2x - 48px × 48px (24pt × 24pt @2x)

  • @3x - 72px × 72px (24pt × 24pt @3x)

enter image description here

Vinoth Vino
  • 8,283
  • 3
  • 63
  • 64
13

The typical standard sizes (non-Retina) are 22px by 22px, while the 2x (or Retina) sizes are 44px by 44px.

davidrayowens
  • 1,532
  • 1
  • 13
  • 23
5

Apple docs were updated and now the recommended size is 25pt x 25pt.

Please refer to documentation here.

Unheilig
  • 15,944
  • 193
  • 67
  • 96
Paul N
  • 76
  • 2
  • 4
5

You should prepare 3 images icons for each tab bar item (1x, 2x and 3x).

First create the 3x at 75w 75h pixels (maximum: 144 x 96) and save it as iconTab0@3x.png.

Then resize it to 50w 50h pixels (maximum: 96 x 64) and save it as iconTab0@2x.png.

Finally resize it to 25w 25h pixels (maximum: 48 x 32) and save it as iconTab0.png.

Now all you need is to select those 3 images at your finder and drag them to your image assets.

human interface guidelines

enter image description here

enter image description here

enter image description here

Disha
  • 578
  • 6
  • 9
4

Here are the current sizes:

https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/custom-icons/

"Toolbar and navigation bar - between 24x24 (@1x) and 28x28 (@1x)".

gebirgsbärbel
  • 2,279
  • 1
  • 22
  • 38
Sea Coast of Tibet
  • 4,946
  • 3
  • 24
  • 37