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.