Adopt Variable Color in SF Symbols

Highlight

SF Symbols 4 introduces the Variable Color feature, which allows developers to control the visibility of each layer in the symbol through percentage values, and use the same symbol to express dynamic values such as signal strength, progress, volume, etc., without the need to prepare multiple sets of icon resources.

Core Content

In the past, to display signal strength, battery power, or volume changes in an app, developers needed to prepare 4-5 icons of different states, and then switch the images based on the values in the code. This approach is expensive to maintain and is prone to blurring when scaling.

SF Symbols 4’s Variable Color simplifies this problem completely. The system provides a number of built-in symbols to support Variable Color. You only need to pass in a floating point number from 0 to 1, and the symbol will automatically adjust the color depth of each layer.

(01:09) The core mechanism of Variable Color is: some layers inside the symbol are marked as “participating in variable coloring”. When a percentage value is passed in, these layers are activated in order from bottom to top. Thresholds are evenly distributed between 0% and 100%.

Take the microphone symbol for example. It has 4 dots on the left side, each on a separate layer. At 0% none of the dots appear; above 0% the first is activated; 26% and above activates the second; 51% and above activates the third; 76% to 100% activate all. This behavior is exactly the same as the system Wi-Fi strength indicator.

(04:42) System symbols support Variable Color in four rendering modes: Monochrome, Hierarchical, Palette, and Multicolor. You don’t need to do it separately for each mode.

For custom symbols, the SF Symbols app introduced Unified Annotation this year. In the past, you had to create two sets of layer structures for Hierarchical and Multicolor respectively. Now you only need to create them once, and all rendering modes share the same set of layer structures.

(07:46) In Unified Annotation, you can set a layer to Variable Color, or set the layer to Erase (dig holes in the bottom layer) or Hidden (hide in specific rendering modes). Remember to select the 4.0 template format when exporting custom symbols so that Variable Color and Monochrome control information can be carried.

Detailed Content

How to use system symbols

Using system symbols with Variable Color in SwiftUI is simple:

import SwiftUI

struct SignalStrengthView: View {
    @State private var signalStrength: Double = 0.75

    var body: some View {
        Image(systemName: "wifi", variableValue: signalStrength)
            .font(.system(size: 48))
            .foregroundStyle(.blue)
    }
}

Key points:

variableValueParameter accepts values from 0.0 to 1.0Doublevalue
The system will automatically calculate the display effect based on the Variable Color layer inside the symbol
the samevariableValueConsistent performance across rendering modes

Variable Color annotation of custom symbols

Steps to add Variable Color for custom symbols in the SF Symbols app:

Open the custom symbol and switch to Multicolor rendering mode
Separate the layers that need to participate in Variable Color
Select these layers in the layers panel and click the Variable Color button to enable
The order of the layers in the list determines the filling order: the bottom ones are filled first, the top ones are filled last.

(10:55) Layer order is important. Suppose you make a puzzle square symbol and want the first 9 small squares to be filled in order. You need to put these 9 small squares into separate layers, arrange them in fill order from bottom to top, then select them all and enable Variable Color.

Threshold calculation rules

(05:07) The system distributes 0% to 100% evenly to all layers participating in Variable Color. Assume there are N layers:

0%: all layers are inactive
Greater than 0%: the first layer is activated
Each subsequent threshold interval is approximately 100/N

For the 3-layer case, the theoretical thresholds are 33.3% and 66.7%. The system rounds these values to the nearest whole percentage and then requires 1 percentage point higher to activate the next tier. So the actual thresholds become 34% and 68%. This design avoids floating point precision issues causing abnormal symbol display.

Export and Compatibility

(14:54) Select the 4.0 template format when exporting custom symbols to retain Variable Color and Monochrome rendering control information. If you already have custom symbols annotated last year, the SF Symbols app will automatically upgrade to Unified Annotation, and Hierarchical and Multicolor annotations will be fully retained. If support for older platforms is required, 2.0 and 3.0 template formats are still available.

Core Takeaways

Make an intuitive practice timer

Make a puzzle square with custom symbols and set the first 9 small squares to Variable Color. When the timer is running, it gradually increases over timevariableValue, the square gradually fills up. For children who don’t know numbers, this kind of visual feedback is more friendly than text. The entry API isImage(systemName: variableValue:)。

Add a dynamic volume icon to the music player

usespeaker.wave.3symbolic fitvariableValue, mapping the current volume value directly to the symbol display. The icon changes in real time when the user drags the slider, without any custom image resources.

Use symbols to express progress in download management

usearrow.down.circleOr customize the download symbol and pass the download progress (0.0 to 1.0) tovariableValue. The symbol is completely filled when the download is complete, and the visual feedback is more intuitive than a purely digital progress bar.

What’s new in SF Symbols 4 — Learn about the new rendering modes and visual design of SF Symbols 4
Explore the SF Symbols 3 app — Basic usage and symbol organization of SF Symbols app
Adopt SwiftUI — Best practices for integrating SF Symbols in SwiftUI