Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS navigation bar item image size

People also ask

What size should Icons be in a navigation bar?

Microsoft suggests you set your touch target size to 9 mm square or greater (48×48 pixels on a 135 PPI display at a 1.0x scaling). Avoid using touch targets that are less than 7 mm square.


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

  • iOS how to set app icon and launch images

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


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


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

Please refer to documentation here.


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 [email protected].

Then resize it to 50w 50h pixels (maximum: 96 x 64) and save it as [email protected].

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


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