Some variable SF Symbols don't work.

Question

Created Dec ’25

Replies 1

Boosts 1

Views 1.3k

Participants 2

Some SF Symbols (wifi for example) render fine with the variable. But many, mostly ones with the circle being variable, do not seem to work. The SF Symbols app shows them rendering with a variable fine. But in code it doesn't work. Am I missing something or is there a reason?

    var body: some View {
        HStack {
            Image(systemName: "01.circle", variableValue: 0.5)
            Image(systemName: "figure.wave.circle", variableValue: 0.5)
            Image(systemName: "wifi", variableValue: 0.5)
        }.font(.largeTitle)
        
    }
}

Screenshot 2025-12-16 at 10.34.12 AM.png

Boost

Answer 1

akashr OP

1d

I ran into this while looking into the same issue, variableValue alone isn’t always enough for every variable symbol. In this case, setting the variable value mode explicitly fixes it:

Image(systemName: "01.circle", variableValue: 0.5)
    .symbolVariableValueMode(.draw)

That should give you the same behavior you see in SF Symbols app

1