What's new in SF Symbols 5

Highlight

SF Symbols 5 introduces a symbol animation system with 7 configurable animation presets (Appear, Disappear, Bounce, Scale, Pulse, Variable Color, Replace) for all symbols, all sizes and all rendering modes. Developers can use one line of code to animate interface icons and deliver richer interactive feedback.

Core Content

The evolution path of SF Symbols

When SF Symbols first launched in 2019, it only had a monochrome mode. In 2021, three rendering modes, Hierarchical, Palette, and Multicolor, have been added. Variable Color is introduced in 2022, allowing symbols to express changes in intensity.

SF Symbols 5 in 2023 brings animation capabilities. Animation is supported for all symbols, all sizes, and all rendering modes.

(02:03) Animation presets are configurable, each with unique visual characteristics.

Two core concepts of animation

Hierarchical animation vs overall animation

(02:32) Each symbol is defined by a unified hierarchy. By default, symbols animate in layers—each layer moves in turn, with clear and precise movements. You can also choose global animation to have all layers move at the same time.

Space Plane

(03:17) Animation uses three planes of space to create a sense of depth:

• Midplane: The center of the three-dimensional space, which is the reference point for positioning and movement
• FRONT PLANE: closest to the observer, the symbol appears larger
• Back plane: furthest away from the observer, the symbol looks smaller

Symbols move between these planes based on directionality, up and down, or out of sight entirely.

Seven animation presets

Appear / Disappear

(04:55) Appear is used when the symbol first appears on the interface, and the element gradually appears to attract attention. Disappear is used when a symbol is removed from the interface to provide visual feedback to inform the user that the element has been deleted.

Bounce

(05:28) Fast, elastic movement, simulating the bouncing of objects. Three uses:

1. Provide interactive feedback - inform the user that the operation is successful
2. Strengthen the concept of symbols - make symbols more lively
3. Create a sense of energy – make symbols more interactive

(06:09) Example of brightness slider: When the slider is pulled to the far right, the sun.max symbol performs a Bounce animation to inform the user that the maximum brightness has been reached.

Scale

(06:39) Provide visual feedback by changing the symbol size. Scale Up briefly zooms in and then resumes, confirming that the interaction is recognized. Scale Down simulates the feeling of a physical button being pressed.

(07:42) Scale Up enlarges and holds when hovering the folder, and resumes after moving away. Scale is stateful - the scaling state lasts until the effect is removed.

Bounce vs Scale choice

(08:07) Bounce means “an action occurred” or “action is required”. Scale means “selected” or “focused”.

Pulse

(08:33) Convey ongoing activity by changing transparency. Can be applied to the entire symbol or only to specific layers.

(08:56) Screen sharing icon: The overall Pulse can convey the activity state, but only the layer representing the screen Pulse, the information is more precise.

Variable Color

(09:38) Variable Color has also been added to the animation library this year, with two modes:

• Cumulative: Highlight layer by layer, retaining the previous state. Fit indicates successful Wi-Fi connection
• Iterative: Highlight layer by layer, only one layer at a time. Suitable for representing Wi-Fi search networks

(10:30) Iterative with the reversing option, the highlight layer will reverse back to the starting point, and then start again until the action is interrupted.

Replace

(10:55) Replacement of one symbol with another, conveying a change of state or switch of functionality.

Directional options:

• Down/Up: Old symbols disappear downwards and new symbols appear upwards. Usually follows user input
• Up/Up: Old symbols disappear upwards and new symbols continue to appear upwards. Create a sense of progress

(12:20) Play/Pause button: Clicking the play symbol immediately transitions to the pause symbol, indicating the next available operation.

(12:38) Text editing toolbar: After selecting text, the undo/redo/paste symbols are replaced with cut/copy symbols to prompt the user for currently available operations.

Detailed Content

Using symbol animations in SwiftUI

SF Symbols 5 animation via SwiftUIsymbolEffectModifier usage:

// Bounce animation
Image(systemName: "checkmark.circle.fill")
    .symbolEffect(.bounce)

// Scale animation
Image(systemName: "folder.fill")
    .symbolEffect(.scale.up)

// Pulse animation
Image(systemName: "shared.with.you")
    .symbolEffect(.pulse)

// Variable Color animation
Image(systemName: "wifi")
    .symbolEffect(.variableColor.iterative)

// Replace animation
Image(systemName: isPlaying ? "pause.fill" : "play.fill")
    .symbolEffect(.replace.downUp)

Key Points: -.symbolEffect()Receive animation preset type -.bounce、.scale、.pulseWait is the default enumeration value

• Replace animation is automatically triggered when symbols switch
• All animations support custom configuration options

Animation configuration options

// Whole-symbol animation (the default is by layer)
Image(systemName: "bell.fill")
    .symbolEffect(.bounce.wholeSymbol)

// Custom speed
Image(systemName: "star.fill")
    .symbolEffect(.pulse.speed(0.5))

// Variable Color with reversing
Image(systemName: "wifi")
    .symbolEffect(.variableColor.iterative.reversing)

Key Points: -.wholeSymbolHave all layers animate simultaneously -.speed()Control animation speed -.reversingLet Variable Color loop in reverse

Design custom symbols for animations

(13:37) To support animation, custom symbols need to be drawn with overall shapes and use the Erase layer appropriately.

Drawing steps:

1. Define the symbol body with a completely closed path
2. Draw the parts that require independent animation as separate layers
3. Use the Erase layer to create a hollow effect
4. Annotate the Draw and Erase layers in the SF Symbols app

(16:31) Symbols with Erase layers animate more smoothly, with continuity and cohesion between shapes. Symbols without an Erase layer may look normal when static, but lose depth and vitality when moved.

Add new symbols

(17:36) SF Symbols 5 adds over 700 new symbols, bringing the total to over 5000:

• Automobile: steering wheel, car seat, seated figure
• Games: arcade consoles, joysticks, various buttons
• EV Charging: different types of electric vehicle plugs
• Weather categories: moonrise, moonset, rainbow
• Everyday Objects: Tons of new object symbols

Core Takeaways

Add Bounce feedback for button actions

• What to do: When the user completes key operations (save, send, confirm), let the relevant icon perform a Bounce animation
• Why it’s worth doing: Clear visual feedback allows users to feel that the operation has been received by the system, reducing repeated clicks.
• How to start: Triggered in the action closure of the button.symbolEffect(.bounce)

Use Pulse to indicate background activity status

• What to do: Uploading, synchronization, recording, etc. are in progress, marked with Pulse animation
• Why it’s worth it: Users can tell which features are still working at a glance without having to open the app to check
• How to get started: Add for status icons.symbolEffect(.pulse), removed when the event ends

Use Replace animation to switch toolbar status

• What to do: Dynamically switch toolbar icons based on the currently selected content, with Replace animation transition
• Why it’s worth doing: Smooth symbol replacement allows users to understand status changes, which is more natural than direct switching.
• How to start: Conditionally render different symbols, SwiftUI automatically applies Replace transition animation

Enable animation support for custom icons

• What to do: Redraw key custom icons in the app using the overall shape method, adding an Erase layer
• Why it’s worth it: Customized icons can also enjoy the animation system of SF Symbols, resulting in stronger brand consistency.
• How to get started: Import SVG in the SF Symbols app, annotate levels, and test various animation presets

Related Sessions

• Animate with springs — Application of Spring animation in SwiftUI
• Create animated symbols — Detailed guide to creating custom animated symbols
• What’s new in SwiftUI — List of new features in SwiftUI