I'm trying to create a tab vien in Swift UI.

var body: some View {
    TabView {
        HomeView()
            .tabItem {
                Image(systemName: "house")
                Text("Home")
            }
        
        LibraryView()
            .tabItem {
                Image(systemName: "tv")
                Text("Library")
            }
        
        MyStuffView()
            .tabItem {
                Image(systemName: "bookmark")
                Text("My Stuff")
            }
    }
}

The problem is that even though I'm using outlined icons, the tab bar appears with filled icons, even when they are not selected. How do I get the bar to show the icons in their normal appearance? I had originally used Labels instead of Image + Text, but the result was the same.

I'm trying to create a tab vien in Swift UI.

var body: some View {
    TabView {
        HomeView()
            .tabItem {
                Image(systemName: "house")
                Text("Home")
            }
        
        LibraryView()
            .tabItem {
                Image(systemName: "tv")
                Text("Library")
            }
        
        MyStuffView()
            .tabItem {
                Image(systemName: "bookmark")
                Text("My Stuff")
            }
    }
}

The problem is that even though I'm using outlined icons, the tab bar appears with filled icons, even when they are not selected. How do I get the bar to show the icons in their normal appearance? I had originally used Labels instead of Image + Text, but the result was the same.

• swiftui
• tabview
• tabitem

• Please show what your code produces, and what the "normal appearance" should be. – Sweeper Commented Mar 2 at 16:08

1 Answer 1

This is probably intended by Apple to be a feature, to ensure consistent appearance between apps.

You might expect that the filled version can be turned off by applying the modifier .symbolVariant(.none), but this doesn't work. However, the documentation to this modifier explains how to ignore all symbol variants:

To cause a symbol to ignore the variants currently in the environment, directly set the symbolVariants environment value to none using the environment(_:_:) modifer.

This needs to be done for each image separately:

TabView {
    HomeView()
        .tabItem {
            Image(systemName: "house")
                .environment(\.symbolVariants, .none) //