3 Ways to Add Images Icons for Tab Bar Items in SwiftUI

Intruduction

Apple encourages developers to design outstanding user experiences. And the icon plays an important role. The same is true in TabView, there are three ways for developers to add an icon for each tab bar item appropriately in SwiftUI.

1. System Fonts for Apple Platforms

Apple platform provides a set of over 2,400 consistent, highly configurable symbols developers can use in your app. All these symbols are built-in and available in a wide range of weights and scales to help developers create adaptable designs. For example, developers could use these symbols like the code below.

TabView {
    Text("Hello, world!")
        .tabItem {
            Image(systemName: "star")
            Text("Favorites")
        }
}
Tab Bar Item with System Fonts Symbols

Developers can search for symbols by SF Symbols 2, which is the official tool by Apple. In addition, All these symbols are available in iOS 13 and later, macOS 11 and later, watchOS 6 and later, and tvOS 13 and later.

2. Standard-resolution and High-resolution Custom Images

Alternatively, developers can use custom images instead of system fonts symbols for tab bar items. Developers should prepare 3 images icons for each tab bar item. The three images icons includes a standard resolution image icon (1x), and two higher resolution image icon (2x and 3x).

A general workflow to create such three images icons is like below.

Firstly, create the 3x at 75w 75h pixels (maximum: 144 x 96) and save it as icon@3x.png.

Next, resize it to 50w 50h pixels (maximum: 96 x 64) and save it as icon@2x.png.

Finally, resize it to 25w 25h pixels (maximum: 48 x 32) and save it as icon.png.

Import 3 Images Icons

Now all you need is to select those 3 images at your finder and drag them to your image assets and use them with Image.init(_ name: String, bundle: Bundle? = nil) like the code below.

TabView {
    Text("Hello, world!")
        .tabItem {
            Image("flower")
            Text("Flowers")
        }
}
Tab Bar Item with Custom Images

Developers should follow the Human Interface Guidelines, otherwise, image icons could not work expectedly. In this case, custom image icons do not auto resized if you do not follow the above steps.

3. A Vector Image PDF

Another option is to create a vector image PDF. What you do is resize your vector image to the smallest size (22×22) and export it to a PDF file. You can do this with Adobe Illustrator, Sketch, and many other vector image editing tools.

Then you add the PDF file to your assets folder and in the Properties Inspector set “Scale Factors” to “Single Vector“.

Add PDF and Set Scales

Reference the code below.

TabView {
    Text("Hello, world!")
        .tabItem {
            Image("smile")
            Text("Smile")
        }
}
Tab Bar Item with PDF

That should do it!

Conclusion

In the summary, you have learned three ways about adding image icons for each tab bar item. PDF is the most recommended way for custom image icons because PDF is a vector image. Notice sizes mentioned above, all work well for correct sizes of images, otherwise, images display unexpectedly. Right Now, open your Xcode project and optimize images for your tab bar items!

Welcome to comment on this blog below and share this blog to your social media or any other place.

Hope it helps and thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *