tab bar icons appear as blue squares

Question

Well, the title says most of it. I've tried with icon sets of 75/50/25 px and 72/48/24 px, as stated by different guides, but when I run the app in Xcode, the icons appear as (appropriately sized) blue squares. The icons are all black and white .png files, with negative images for the selected images. Any suggestions would be appreciated.

Answer 1

Okay, the solution is NOT to set the image to render as image, but to use an alpha 0 background instead of a white background on the icon image.

Answer 2

Another tip. Don't name your image assets the same name as iOS System icons/glyphs. I had a download icon labeled download(.png). After renaming the issue disappeared. Very inconsistent behavior.

Answer 3

This might not fix your issue, and also may seem very obvious. But I'll put it here just in case it helps anyone.

First of all, I'm going to point out scenarios to check that can get you in this state that may or may not apply to everyone:

• The asset's render type is set to Template Image
• You are changing the tabBar.tintColor

If either of these are true and you are getting a solid colored square as your icon, the first thing I would check is the actual image you are using. It is probably an image/icon sitting on a white background or something like that rather than a transparent background.

If you are using a .png, .pdf, or .svg icon and want to tint the icon, you will need a transparent background. Transparency doesn't exist for .jpegs so they just won't work for tinting the icons.

This is because changing the tint will tint the whole image. If there isn't transparency, Xcode will have no idea what is icon and what is background. So a 40x40 icon just becomes a colored square.

Another benefit of using a transparent background will be now instead of having multiple images for selected/unselected states, you can just set the desired colors for .selected and .normal states and use one image.