Wrong SF symbol displayed

Question

DennisCM OP

Created Sep ’22

Replies 2

Boosts 0

Views 1.2k

Participants 3

Hi there!

After a few months off, I'm starting a new app.

I'm making a TabView like this:

import SwiftUI

struct ContentView: View {
    @State private var tab: Tab = .adventures

    var body: some View {
        TabView(selection: $tab) {            
            Text("Explore")
                .tag(Tab.explore)
                .tabItem {
                    Label("Explore", systemImage: "airplane.circle")
                }

            Text("Profile")
                .tag(Tab.profile)
                .tabItem {
                    Label("Profile", systemImage: "person")
                }
        }
    }

    enum Tab {
        case explore, profile
    }
}

As you noticed, I want airplane.circle and person SF Symbols on the TabView but SwiftUI is showing airplane.circle.fill and person.fill in the preview canvas and also when I run the app in the simulator.

Screenshot 2022-09-01 at 14.27.32.png

Why it is forcing me to show those icons?

Xcode version: 13.4.1
SF Symbols version: 3.3
iOS deployment target: 15.0

Thank you.

Boost

Answer 1

robnotyou OP

Sep ’22

This may not be quite what it seems.

If we just have...

var body: some View {
    Label("Explore", systemImage: "airplane.circle")
}

...then the correct image is shown.

I suspect the filled-circle effect you are seeing, is a by-product of using the image in a TabBar.
That is, the image is correct, but it is displayed in a way that you did not expect.

0

Answer 2

scl-dev OP

Aug ’24

Add .environment(\.symbolVariants, .none) in a tabbar to get the non-filled symbol, otherwise SwiftUI automatically chooses the filled symbol in a TabView

1