Tab Bar Icon Size

Question

Apple says:

Depending on the device and orientation, the system displays either a regular or compact tab bar. Your app should include custom tab bar i

Answer 1

TLDR: You can specify different icons for regular or compact tab bar in Asset Catalog by setting Width Class to Any & Compact.

Yes, according to Human Interface Guidelines Custom Icons - Tab Bar Icon Size you should include both icon sizes

In portrait orientation, tab bar icons appear above tab titles¹. In landscape orientation, the icons and titles appear side-by-side.

¹⁾ This is true only on iPhone. On iPad for full-screen apps the icons and titles appear side-by-side in both portrait and landscape orientations.

Depending on the device and orientation, the system displays either a regular or compact tab bar. Your app should include custom tab bar icons for both sizes.

The guidelines are talking about Size Classes. In this case regular or compact tab bar means tab bar in regular or compact width size class.

You can specify different images for different size classes in the asset catalog. Just set Width class to Any & Compact in the Attributes Inspector for you tab bar icon Image Set:

Set the larger images for regular size class in the Any Width section and smaller images for compact size class in Compact Width section.

The system will then automatically show the correct image according to the size class (device, orientation, multitasking configuration).

You can find the correct icon sizes for the icons in Human Interface Guidelines Custom Icons - Tab Bar Icon Size.

For example for a circular glyph the icon should be:

• 25x25 pt (50x50 px @2x) for regular tab bars
• 18x18 pt (36x36 px @2x) for compact tab bars

For a square glyph the icon should be:

• 23x23 pt (46x46 px @2x) for regular tab bars
• 17x17 pt (34x34 px @2x) for compact tab bars

There are additional sizes for wide glyphs and tall glyphs.

In the screenshot above I use PDF images with Scale set to Single Scale in the Attributes Inspector. The system automatically generates 1x, 2x and 3x PNGs.