Some variable SF Symbols don't work.

Question

Created Dec ’25

Replies 2

Boosts 2

Views 3k

Participants 3

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

Mar ’26

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

2

Answer 2

Bikrrr OP

5d

@akashr Thank you! 🙏

This saved me from wasting more time on this. I’d already burned a couple hours trying to figure out why a symbol that clearly supports variable value in the SF Symbols app, wasn’t working in code.

I really wish Apple’s docs included more real-world samples. Seems like many symbols do need .symbolVariableValueMode(.draw) for this to work.

0