Create animated symbols

Highlight

SF Symbols 5 introduces animation capabilities to symbols. Developers can preview and configure animation effects such as Bounce, Pulse, and Variable Color through the SF Symbols app, and use Symbol Components to quickly create system-style icons with badges, slashes, and circular shells.

Core Content

Pain points of icon animation

Before iOS 16, if you wanted to make the icons in your app move, you had to write the animation code yourself. useUIImageViewSwitch frame by frame, or useCore AnimationManually control the position and transparency of each layer. This method is time-consuming and labor-intensive, and it is difficult to be consistent with the system style.

SF Symbols 5 directly solves this problem. Apple has built animation capabilities into the symbol system. Developers only need to specify the animation type in the code to make the icons move.

Preview animation with SF Symbols App

The SF Symbols app has a new Animation Inspector panel (01:51). After selecting a symbol, you can choose an animation effect from the pop-up menu:

• Bounce: Bounce animation, can be configured to bounce up or down
• Pulse: Pulse animation, you can pulse by layer or as a whole
• Variable Color: Layer-by-layer color change animation

Each animation has configuration options. For example, Bounce can be setBy Layer(Each layer moves independently) orWhole Symbol(total movement). When you modify the default configuration, the preview area will display “Modified”. Click the reset button to restore the default.

After you find a configuration you like, click the copy button to get the corresponding API name (03:23).

Let custom symbols support animation

If the custom symbol has been marked with Variable Color, it naturally supports Variable Color animation (05:11).

But for motion animations such as Pulse and Bounce, it is necessary to additionally mark which layers should participate in the animation. SF Symbols 5 adds new layer annotation controls:

• Check the layer in the Annotation list to mark it to participate in the Pulse animation
• Create a Layer Group to group multiple layers and make them move together

If symbols are exported from SF Symbols 4 or earlier, or are compatible with Xcode 14, they contain no motion information and can only move as a whole (06:07).

Symbol Components: Combine system-style symbols

Symbol Components are an important feature of SF Symbols 5 (09:51). It provides a set of system-style decorative components, including:

• Enclosures: round enclosure, square enclosure, etc.
• Badges: Badges such as plus sign, minus sign, ellipses, etc.
• Slash: slash modification

The operation is simple: right-click on the custom symbol, select “Combine Symbol with Component”, and then select the desired component from the component library. New symbols automatically inherit the visual style and animation behavior of the system symbol.

For example, add the symbol.circle.fillAfter shelling, the system will automatically handle:

• Use primary layer in Hierarchical mode
• Correctly erase background in Monochrome mode
• Retain the Variable Color setting of the original symbol

Compatibility export

The SF Symbols app has redesigned the export process (15:17). You can select the target platform version when exporting a template:

-Default: latest version, supports sports optimization

• SF Symbols 3 (iOS 15/macOS Monterey): Simplified drawing, no support for motion layer structures
• SF Symbols 2 (iOS 14/macOS Big Sur): Static templates

When exporting to Xcode, tell the app which version of Xcode you are using, and it will automatically select the most appropriate file format.

Detailed Content

Animation type and configuration

SF Symbols 5 provides several built-in animation presets. Each animation can be previewed and configured through the Animation Inspector in the SF Symbols app.

Bounce animation

Bounce gives the symbol a bouncing effect. Configuration options include:

• Direction: Up or Down
• Layer Mode: By Layer (each layer bounces independently) or Whole Symbol (whole bounce)

Pulse animation

Pulse gives the symbol a pulsing breathing effect. The Annotation list allows precise control over which layers participate in the pulse.

Variable Color Animation

Variable Color animation causes the colors of each layer of a symbol to activate one after another. There are two modes:

• Cumulative: Each layer gradually activates cumulatively, then fades out together
• Iterative: Only activate one layer at a time

You can also turn on the Reversing option to play the animation in reverse (04:06).

Using symbol animation in code

In SwiftUI, symbol animation is done viasymbolEffectModifier usage:

import SwiftUI

struct ContentView: View {
    @State private var isBouncing = false
    
    var body: some View {
        Image(systemName: "speaker.wave.3.fill")
            .symbolEffect(.bounce, value: isBouncing)
            .onTapGesture {
                isBouncing.toggle()
            }
    }
}

Key points:

• symbolEffect(.bounce)Apply Bounce animation -valueParameters control the timing of animation triggering, and the animation is played when the value changes.
• The system will automatically process the motion effect of the layer

Layer annotation of custom symbols

For custom symbols to support animation, the layers need to be properly labeled in the SF Symbols app.

Label Pulse layer:

1. Open the Annotation panel of the custom symbol
2. Find Pulse-related annotation controls
3. Check the layers that should participate in the pulse

If no layers are checked, the entire symbol will pulse together.

Create Layer Group:

1. Select multiple layers
2. Right-click and select “Add to Layer Group”
3. The layers in the group will move together

Each layer in a Layer Group still retains its own label settings, but moves as a whole.

Use of Symbol Components

Symbol Components are based on Variable Templates technology. Variable Templates requires three weight versions in Small size: Ultralight, Regular, and Black. The remaining 24 variants are automatically blended.

To combine symbols and components:

1. Select the custom symbol in the SF Symbols app
2. Right-click and select “Combine Symbol with Component”
3. Select a shell, badge or slash from the component library
4. Fine-tune the position and size of the sidebar

Fine-tuning options include:

• Adjust badge position to avoid visual flaws
• Modify slash length to ensure sufficient symbol area is covered
• Check Override under Ultralight or Black weights for additional adjustments

The system will automatically perform weight compensation: when the basic symbol is scaled into the shell, the system will increase the line thickness to maintain visual consistency (13:29).

Compatibility settings

In the export interface of the SF Symbols app, the Compatibility picker allows you to select the target platform:

Target platform	Corresponding system version	Template features
Default	iOS 17+ / macOS Sonoma+	Full motion optimization
SF Symbols 3	iOS 15 / macOS Monterey	Simplified drawing, no motion
SF Symbols 2	iOS 14 / macOS Big Sur	Static Templates

You can also set the target platform when annotating custom symbols. Monochrome annotations will not be editable if set to SF Symbols 3 or earlier, as this feature is not available until SF Symbols 4 (16:52).

Core Takeaways

Add dynamic icons to setting items

• What to do: In the settings page, use Pulse animation to mark the currently activated options
• Why it’s worth doing: Variable Color animation is naturally suitable for expressing “in progress” or “activated” status, without writing any animation code
• How to start: Find the appropriate symbol in the SF Symbols app, export it and use it in SwiftUIsymbolEffect(.pulse)application

Use Symbol Components to unify App icon style

• What to do: Repackage the custom icons in the App with Components, and add a circular shell or badge
• Why it’s worth it: Components automatically handles 27 size variations and animation behaviors, so icons look as professional as native ones.
• How to start: Open the SF Symbols app, right-click the custom symbol and select “Combine Symbol with Component”

Design exclusive animation for loading status

• What to do: Design a custom symbol for the app’s loading indicator and animate the progress with Variable Color
• Why it’s worth doing: Variable Color animation allows each layer of the symbol to light up in sequence, which is more brand-like than static circles.
• How to get started: Create custom symbols in the SF Symbols app, split the graphic into multiple layers and label it with Variable Color

Preserve downgrade experience for users of older versions

• What to do: Export two sets of symbol templates, one for iOS 17+ with full animation, and one for older versions with static version
• Why it’s worth it: The SF Symbols app’s Compatibility picker handles downgrades automatically, ensuring all users have a good experience
• How to start: Select the corresponding SF Symbols version when exporting, Xcode will automatically compile the correct format

Related Sessions

• Animate symbols in your app — Use symbol animation in your app
• What’s new in SF Symbols 5 — Overview of new features in SF Symbols 5
• Animate with springs — The underlying principle of SwiftUI spring animation