Outlined symbol icons in tabs

Question

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.

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) // 👈 added
            Text("Home")
        }

    LibraryView()
        .tabItem {
            Image(systemName: "tv")
                .environment(\.symbolVariants, .none) // 👈 added
            Text("Library")
        }

    MyStuffView()
        .tabItem {
            Image(systemName: "bookmark")
                .environment(\.symbolVariants, .none) // 👈 added
            Text("My Stuff")
        }
}