99

I have icons for a tabBar of size 100.

I checked at Apple's Human Interface Guidelines of 2013 and it says the image size should be 30x30 / 60x60.

But as the height of tab bar controller is 50, I kept the size of the image at 50x50.

Now, when I run the project, I see the ugly design below:

enter image description here

Any idea what size images I should use so that the design will be perfect?

Note: I am not writing text also (e.g. Home, Search, etc). The text of the tab button is there in the image itself.

Cœur
  • 32,421
  • 21
  • 173
  • 232
Fahim Parkar
  • 28,922
  • 40
  • 153
  • 260

6 Answers6

210

According to the Apple Human Interface Guidelines:

@1x : about 25 x 25 (max: 48 x 32)

@2x : about 50 x 50 (max: 96 x 64)

@3x : about 75 x 75 (max: 144 x 96)

rsc
  • 9,304
  • 4
  • 32
  • 31
  • Yes , This correct According to apple. Check the below link for more information https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html – Chamath Jeevan Apr 12 '16 at 09:21
  • cool, but how is it possible to make an image so small with out blurring? – niX Jun 15 '17 at 11:47
  • 2
    Has since been updated to 23x23 (for squares) or 25x25 (for circular images) (https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/custom-icons/) – Seop Yoon Dec 15 '17 at 07:22
  • Seop, you can just update my answer to reflect the latest info. But noticed that I said "about 25", so I would consider 23 to be inside that about range. – rsc Dec 16 '17 at 18:29
  • Mostly I use square glyphs such as a home icon, glad @SeopYoon pointed it out. I will be using 23x23 for tab bar icon size. – Cons Bulaquena Jan 31 '18 at 08:47
  • This is the proper answer for me – Carlos Espinoza Jun 01 '19 at 18:47
114

30x30 is points, which means 30px @1x, 60px @2x, not somewhere in-between. Also, it's not a great idea to embed the title of the tab into the image—you're going to have pretty poor accessibility and localization results like that.

garrettmurray
  • 3,208
  • 1
  • 22
  • 23
  • 3
    I knew this, but if I want wordings inside image itself, then what can be done? – Fahim Parkar Aug 05 '13 at 22:22
  • If you're planning to create a totally custom UITabBar, you should probably do just that, rather than using images for standard UIKit version. Otherwise I believe you'll be left with deadspace at the bottom. – garrettmurray Aug 05 '13 at 22:26
  • hmmm that is happening... I will ask designer to make default images for tab bar they way apple support... thanks – Fahim Parkar Aug 05 '13 at 22:35
  • Thanks, mate. This was a big and quick help. – Felipe Mar 07 '16 at 21:54
45

According to the latest Apple Human Interface Guidelines:

In portrait orientation, tab bar icons appear above tab titles. In landscape orientation, the icons and titles appear side-by-side. 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.

enter image description here

enter image description here

I suggest you to use the above link to understand the full concept. Because apple update it's document in regular interval

Mihir Oza
  • 2,633
  • 3
  • 30
  • 56
  • 2
    This should be upvoted more, since it is their new guideline. – Seop Yoon Dec 15 '17 at 07:21
  • For instructions how to set different icon for a regular or compact tab bar see this response: https://stackoverflow.com/questions/49492229/tab-bar-icon-size/55712653#55712653 – Marián Černý Apr 17 '19 at 05:08
6

Reference: https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/[https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/].

enter image description here

So the 50x50 size is a good choice.

Allen
  • 6,257
  • 4
  • 38
  • 54
  • 1
    That is at a @2x resolution. Which is about 25px for the 1x. Something to keep in mind when naming files – Rene Pot Oct 07 '17 at 12:09
2

According to my practice, I use the 40 x 40 for standard iPad tab bar item icon, 80 X 80 for retina.

From the Apple reference. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1

If you want to create a bar icon that looks like it's related to the iOS 7 icon family, use a very thin stroke to draw it. Specifically, a 2-pixel stroke (high resolution) works well for detailed icons and a 3-pixel stroke works well for less detailed icons.

Regardless of the icon’s visual style, create a toolbar or navigation bar icon in the following sizes:

About 44 x 44 pixels About 22 x 22 pixels (standard resolution) Regardless of the icon’s visual style, create a tab bar icon in the following sizes:

About 50 x 50 pixels (96 x 64 pixels maximum) About 25 x 25 pixels (48 x 32 pixels maximum) for standard resolution

firelyu
  • 1,712
  • 5
  • 21
  • 27
-3

Thumbs up first before use codes please!!! Create an image that fully cover the whole tab bar item for each item. This is needed to use the image you created as a tab bar item button. Be sure to make the height/width ratio be the same of each tab bar item too. Then:

UITabBarController *tabBarController = (UITabBarController *)self;
UITabBar *tabBar = tabBarController.tabBar;
UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];
UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:2];
UITabBarItem *tabBarItem4 = [tabBar.items objectAtIndex:3];

int x,y;

x = tabBar.frame.size.width/4 + 4; //when doing division, it may be rounded so that you need to add 1 to each item; 
y = tabBar.frame.size.height + 10; //the height return always shorter, this is compensated by added by 10; you can change the value if u like.

//because the whole tab bar item will be replaced by an image, u dont need title
tabBarItem1.title = @"";
tabBarItem2.title = @"";
tabBarItem3.title = @"";
tabBarItem4.title = @"";

[tabBarItem1 setFinishedSelectedImage:[self imageWithImage:[UIImage imageNamed:@"item1-select.png"] scaledToSize:CGSizeMake(x, y)] withFinishedUnselectedImage:[self imageWithImage:[UIImage imageNamed:@"item1-deselect.png"] scaledToSize:CGSizeMake(x, y)]];//do the same thing for the other 3 bar item
James
  • 7
  • 2