What’s new in SF Symbols 6

Hola, I’m Thalia and I’m a designer on the Apple Design Team. In this session, we're diving into the world of SF Symbols, Apple’s library of iconography that is crafted to provide familiar and accessible symbols. SF Symbols is a powerful tool, that ranges from localization to expressive animations. There is a lot to cover, so let’s get started. Today we’re excited to introduce new presets and enhancements. We’ll cover this in Animation presets. In the SF Symbols app section, we’ll go over some updates and we’ll learn how to annotate your symbols so you can take full advantage of the new animations. And finally, we’ll explore the new additions to the library in New Symbols. SF Symbols animations is a feature we introduced in a previous year. If you are not familiar with it, check out: "What's new in SF Symbols 5". Here, we go over the concepts, and the full power of animation in more detail.

You should also get familiar with the SF Symbols app, so if you need a refresher, I recommend you check out: "Create animated symbols". Now, let's begin.

This year we’re thrilled to introduce new universal animation presets: Wiggle, Rotate and Breathe. As well as fantastic updates to Replace and Variable Color. All these presets will let you create even more expressive animations to elevate your app’s interface.

First, is Wiggle.

You can use the Wiggle preset when you want to highlight changes or a call to action that might be overlooked. Wiggle can also add a dynamic emphasis to an interaction, or reinforce what the symbol is representing. For example, when you have an arrow pointing in a specific direction. Speaking of directions, this is a very important concept for Wiggle. I’ll use the paper plane as an example. Symbols can wiggle right or left. They can also wiggle depending on the reading direction, forward or backward. These movements make the symbol shift horizontally before returning to its original position.

Symbols can also wiggle vertically, up or down, again, returning to its starting point.

Symbols can wiggle in a clockwise or counterclockwise direction.

Now, for this specific symbol, none of these directions point in the same way as the paper plane does. So for cases like this, a custom angle that matches the symbol’s orientation needs to be specified. We’ll go with a 315 degree angle, making the paper plane look like it’s about to take off! We wanted to make Wiggle easy to use. So many symbols, like the paper plane, have a built-in preferred direction. But, you can always customize the animation to use a different one, if that’s what your app needs.

Next, let’s look at Rotate.

With Rotate you can add dynamic movement to a symbol by imitating how an object behaves in the real world, or by acting as a visual indicator. For example, when a task is in progress, the rotation confirms that it is working as expected.

Some symbols can rotate entirely, while in other cases, you’ll only want certain parts of the symbol to rotate. For symbols like this desk fan, you can use the By Layer rotation option to spin only the fan blades. We’ll learn how to do this with your own symbols later on.

Now, let’s talk about Breathe.

Breathe is the animation that smoothly increases and decreases the presence of a symbol, giving it a living quality. It helps convey status changes, or it can signal that an activity is taking place. For example, when you have an ongoing recording session.

You might notice that Breathe looks a bit like Pulse, a preset we introduced in SF Symbols 5. Pulse conveys ongoing activity by changing it’s opacity, while Breathe uses opacity and size, to affect how a symbol looks while in motion. If you don’t know which preset to choose, ask yourself: What am I trying to communicate? We want the heart to have more presence and feel like it has a more lifelike quality. In that case, Breathe is a better fit.

Next, let’s talk about Replace.

The Replace animation is a preset where a symbol is swapped with another.

This year, Replace has a new awesome option called Magic Replace.

Magic Replace is a smart transition between two symbols with related shapes. Slashes can draw on and off, and badges can appear, disappear, or be replaced independently of the base symbol.

Magic Replace is the new default behavior, but there is one thing to consider here. There might be cases where Magic Replace is preferred, but cannot be performed because the symbols are not related. If Magic Replace can’t be used between two symbols, you’ll get a standard Replace animation.

And you can still control what direction should be used for this fallback animation.

So, now you notice how Magic Replace is performed between the two related symbols, but Off-Up is used when changing to the person symbol.

This is ideal for tappable elements. For example, we can give immediate feedback in the UI, and still preserve motion when the new symbol comes on the screen.

And if you’ve been using symbol components on your own symbols, Magic Replace will work with them too! All you need to do is to re-export the symbols from the SF Symbols 6 app, and import them into Xcode 16, and you’re good to go.

We also have an update on Variable Color, which is the preset that shows different levels of strength, and relies on color to communicate the state of a symbol changing over time. The design of a symbol has influence on how the animation looks when Variable Color is repeating. For some symbols, it makes sense to have the color opacity progress from one point to the other. When the two end points don't meet, we call this open loop. But when the two end points do meet, the animation performs in a closed loop. When it comes to repeating variable color, we improved this animation by honoring the true nature of each symbol. Now the ones with a closed loop design can repeat smoothly. If you have symbols that support variable color, you can now annotate them to optimize closed loop designs for seamless continuous playback.

To give you an example of how all these new presets can be implemented in your apps, we’ve designed a sample app for people who love plants. It helps catalog them, track essential care activities, and monitor the plant's health. Here it is. I designed a set of new symbols that I’ll use in the UI in combination with some from the SF Symbols library. We can use Magic Replace to warn about weather events that can affect the health of the plants. With a smooth transition between one symbol to the other, Magic Replace is the best kind of replace yet, and we encourage you to use it whenever possible.

In this example, people are able to scan their environment and detect the type of plant they have at home. Once it is detected, the app shows the plant’s name and some information about it.

To clearly indicate the preferred action on the screen, the chevron inside the button starts to wiggle. By doing this, it calls attention to itself and helps communicate that we can add this Monstera to our plant collection. If you have a visually complex UI, you might want to try an animation like this one to help people find their way around the app.

Want to make Live Activities feel more alive? Using Rotate can be a good way! In this example, the arrows spin - showing there is a task in progress.

Let’s look at another example. In this view, we can check the plant’s health and water intake.

A good method for watering an orchid is to soak its roots for about 15 minutes. Once we start the timer, the water drops animate using the Breathe preset, giving some visual feedback and showing that an activity is taking place.

Just one thing you should take into consideration: Animations are great in UI, but using too many or in the wrong context can make it feel overwhelming and distracting, drawing attention away from important content and actions.

It's best to use animations intentionally and purposefully, ensuring that they add to the experience rather than distracting from it. Now that we have learned about all the new presets and enhancements, I’ll guide you through the latest updates in the SF Symbols app.

All the awesome new presets are available in the Animation inspector, sitting right next to the other presets. Here you will find the new Wiggle animation.

The Default setting lets each symbol choose its preferred Wiggle direction. In this case, since this symbol has an arrow pointing up, it prefers to wiggle in the Up direction. But we can also specify it ourselves. Like here, wiggling to the Right.

Like in Wiggle, the Default direction gives the symbol a preferred rotation. Or, you can choose a different one: Clockwise or Counterclockwise.

And here is the Breathe preset. When Pulses is enabled, layers that are opted-in to the Pulse animation preset change their opacity, to give the symbol even more depth and dynamic movement.

You’ll have more control over how to repeat your animations. There is play Once, which allows for a single viewing. In Repeat with Delay, the animation will play over and over again, and you can decide how long to pause between repetitions. And in Continuous, the playback will begin and continue, until it is explicitly stopped.

That was a quick overview of the new animation presets. We've been reviewing them with system-provided symbols, but if your app features your own custom symbols, the SF Symbols app is your go-to tool to ensure they're ready for the new animation features.

Do you remember the symbols I’ve designed for the app? Let’s go over them and see how easy it is to annotate them. Let’s start with this plant inside the pot.

We will put the heart shaped leaf in one layer and the pot in a second layer.

When I preview the animation, it moves in a way that it makes it look like it’s shaking no. I want it to look happy, like it’s dancing! Let’s change the prefer Wiggle direction to Up.

Now it’s perfect! Next, lets animate these water drops with Breathe. We’ll add one drop per layer, in the order we want them to move, or you could leave them all in one layer if you want the preset to animate the entire symbol. Here is the second layer, and the third layer.

Okay, let’s check the Preview.

It looks great! One quick note here: If you have a symbol that you have previously annotated with a layer that opts into Pulse, Breathe will leverage that annotation when Pulses is selected, so you don’t have to worry about any additional steps.

Now for Rotate, let’s check this symbol. We have already defined the layers with the leaf in one layer, and the arrows in a second layer.

Let’s review how it looks.

Well, this is not exactly what we want. Because the arrows are the most prominent part of the symbol, I want them to be the only layer that moves when in motion, so let’s select can Rotate. This is the behavior we want. A layer using can Rotate relies on a rotation anchor point to spin around that specific point.

When clicking on this button, some new controls appear in the canvas.

We have the anchor point and the guides that shows the symbol’s margins. The app places the anchor point in the middle of these guides automatically.

But sometimes, if you have a symbol like this desk fan, we need to move the anchor point to the center of the layers that opts into can Rotate, in this case, the fan blades.

To help you do that, we have this Snap to Points button.

When I click on it, the vectors of the paths show up, and the anchor point snaps to align with those points.

This is super helpful when centering the anchor point.

In case you prefer it, you can also inspect these two points and manually type in a coordinate halfway between them.

You’ll have to be precise when placing the anchor point, so be sure to preview it to check that the animation looks just right.

We also have these controls in the canvas. Like with symbol components, rotation anchor points need to be defined in these three weights. Once defined, the system will take care of interpolating the values and figuring out where to place the anchor points in every weight and every scale.

We went through the process of annotating your own symbols. Now let’s check out the new additions to the SF Symbols library.

We have expanded the Automotive category with symbols like batteries, convertibles and temperature indicators. There are figures representing a diverse set of activities.

We have new localized symbols including scripts like Greek, Cyrillic, and several Indic numeral systems. Progress indicators, haptics, home and widget related symbols. And many objects to choose from! There are over than 800 new symbols, making SF Symbols 6 a dynamic library showcasing over 6,000 unique symbols, including a comprehensive range of scales, weights, and rendering modes, as well as captivating animation presets, designed to enhance your apps! If you want to explore all the new additions and the fantastic animation presets, you can find the new beta version of the SF Symbols app in developer.apple.com/sf-symbols Now, with these updates, symbols reach even more dimensions of expressiveness. Thank you for joining today. I hope you enjoyed learning about what's new in SF Symbols.