How to change icon's color of selected tab bar item in SwiftUI?

Question

I tried to change icon's color with UITabBar.appearance().unselectedItemTintColor but it works only with systemImage and doesn't highlight image, only text.

init() {
   UITabBar.appearance().unselectedItemTintColor = .secondaryLabel 
}

TabView {
        FirstView()
            .tabItem {
                Text("Home")
                Image("home")
            }
            
        CatalogView()
            .tabItem {
                
                Text("Categories")
                Image("catalog")
                    
            }
        
        CustomerProfileView()
            .tabItem {
                Text("Profile")
                Image("profile")
            }
           
            
        ShoppingView()
            .tabItem {
                Text("Cart")
                Image("shoppingbasket")
            }  
    }

I also tried .accentColor but Xcode says it will be deprecated.

Does [this](https://stackoverflow.com/a/70920597/7129318) answer your question? — Yrb, Mar 03 '22 at 13:54
@Yrb hi! I tried UITabBar.appearance().tintColor and UITabBar.appearance().barTintColor but it doesn't highlight icons — Jane, Mar 04 '22 at 05:02

score 4 · Accepted Answer · answered Mar 04 '22 at 07:50

4

You can use foregroundColor in this case.

Image("shoppingbasket")
    .renderingMode(.template)
    .foregroundColor(Color(.secondaryLabel))

answered Mar 04 '22 at 07:50

Yejun Park

199
3

Thank you! Now it finally highlights icon too. – Jane Mar 04 '22 at 11:01

score 2 · Answer 2 · answered Dec 20 '22 at 11:39

2

Your code works just fine.

init() {
   UITabBar.appearance().unselectedItemTintColor = .secondaryLabel 
}

But you also need to set your asset as a template image in the asset catalog:

So no need to use .foregroundColor

answered Dec 20 '22 at 11:39

bjorn.lau

774
5
16

How to change icon's color of selected tab bar item in SwiftUI?

2 Answers2