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 icons for both sizes.

Unfortunately, they fail to specify when you get which.

Also I might include those images for both sizes, but will the system switch between them automatically (how?) or do I have to do it myself?

Answer 1

You should not do this yourself system can do it automatically.

here is Apple Human Interface Guidelines, where you can find icon resolutions: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/custom-icons/

for example: If you are using circular icons for tab bar item you should create following sizes for portrait mode:

• 75px × 75px (25pt × 25pt @3x)
• 50px × 50px (25pt × 25pt @2x)
• 25px × 25px (25pt × 25pt @1x)

and for landscape mode:

• 54px × 54px (18pt × 18pt @3x)
• 36px × 36px (18pt × 18pt @2x)
• 18px × 18px (18pt × 18pt @1x)

after you add this icons into Assets.xcassets or somewhere, you can select Tab Bar Item icons from storyboard:

select Tab Bar item and in the attributes inspector, choose portrait image for image field, and landscape image for landscape field.

After that system will do everything for you.

Answer 2

Unfortunately, the compact/regular state does not only depend from the orientation or the app window size, it also depends on the device.

You can find a regular/compact size breakdown here for different devices. You should look for the second value (for eg Compact width, regular height ).

The change happens between the two types of icons automatically , as soon as the orientation/app window changes.

Answer 3

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.