⏱ Reading Time: 3 mins

The seventh revision of SF Symbols, the built-in collection of icons from Apple, was introduced at WWDC 2025. With these advancements, there’s more we can now do with SF Symbols as there are new APIs available, while the SF Symbols app was enhanced with capabilities to specify animations for our own icons. Leaving the latter aside, we’ll get to meet the most interesting additions that we can adopt to our apps.

Note: You can find an older detailed tutorial about SF Symbols here.

Animating with the drawOn and drawOff effects

Two new symbol effects are now available to use as of iOS 26, the DrawOn and its counterpart, DrawOff. They both animate the symbol’s appearance and disappearance respectively, with the difference in these two new effects being the fact that they use specific draw data; data that we can also set in the SF Symbols app in custom icons, but that’s not something we focus on in this post.

To see that working, let’s begin with the following Image view that presents a simple icon:

The above Image view is resized and given a tint color for demonstration reasons.

We apply the two new draw effects using the symbolEffect(_:isActive:) modifier like so:

The isHidden argument is a state property that controls whether the effect is active:

isHidden is true at first, and that activates the drawOn effect. In this state the symbol is not drawn on screen initially, but when the value changes, the icon appears with the draw animation. Subsequent changes toggle the animation between the drawn-on and drawn-off states.

To complete the example, let’s add a button that toggles the isHidden property, having eventually this example view for now:

The result of the drawOn effect is the following:

Once the drawOn effect animates the appearance of the symbol, the next toggle of the isHidden value makes SwiftUI play the opposite animation, which looks like the drawOff animation, even though we didn’t explicitly apply it.

You can play around and change the symbol effect to drawOff, making the isHidden initially false:

Now the animation is the exact opposite; the icon appears by default, and it disappears on button tap with the drawOff effect. On the next tap, SwiftUI plays the reverse animation, making the symbol appear again.

Draw animation variations

The really interesting part with the draw symbol effects is not their addition to the already existing effects, but the fact that they provide animation variations that shine in multi-layer icons. There are three possible ways to animate, which we set right after the draw effect in code:

• Whole symbol: The entire symbol is animated as a single unit. This is similar to not providing any value after the draw effect.
• By layer: All layers start animating simultaneously.
• Individually: The animation of each layer starts right when the previous one finishes.

To see the result of all these, we’ll use an icon with multiple layers (e.g. “wifi”):

Note that the above draw variations have the same effect when icons have a single layer.

Gradient rendering mode

Along with the new draw symbol effects, SF Symbols 7 now support gradient as a new color rendering mode for icons. So far we were able to tint symbols, but only with a flat color. Now we can render with a gradient of the given tint color, using the symbolColorRenderingMode(_:) modifier with the .gradient argument:

For your reference, heartImage is the following:

It’s easy to spot the difference between the gradient and flat color rendering mode by putting two icons side by side:

Here’s how they look like:

Wrapping up

We all use SF Symbols in our apps in order to present icons that users are familiar with. Now, we can make their appearance even more attractive, either by applying the draw effect, or just by applying a gradient tint color. I would recommend to download and explore the SF Symbols app for macOS, if you haven’t done that already. It’s a great tool that clearly demonstrates the possibilities of system icons. I hope you found this post useful. Thanks for reading!