SwiftUI Animate SF Symbols

SF Symbols is a great solution for making visual tasks with developing an iOS application. Not only are they great, but there are so many different ones to choose from. If you want to make your SF Symbols stand out a bit more or create some kind of visual effect, then animating your SF Symbols is the way to go.

In the following examples, we will discover different variations of animations, so you are ready to animate your SF Symbols.

How to animate SF Symbols in SwiftUI

As of iOS17 Apple has made it easy for us to apply animations to the SF Symbols. We can utilize the symbolEffect modifier and then apply many different animations.

Pulse animation 

Pulse animations provide instant visual feedback to users, indicating that an action has been completed or something is happening in the background. This pulse animation enhances the user experience by reducing uncertainty and providing a sense of responsiveness.

Image(systemName: "trash")
    .font(.system(size: 50, weight: .bold))
    .symbolEffect(.pulse, value: 1)

The result:

Bounce animation

Like pulse animations, bounce animations provide visual feedback to users, indicating that an action has been acknowledged or completed. This feedback gives the users a feeling that their interactions with the app are being registered and enhancing the overall user experience.

The bounce animation is often used when an item has been deleted or added.

Image(systemName: "trash")
    .font(.system(size: 50, weight: .bold))
    .symbolEffect(.bounce, value: 1)

The result:

variableColor animation

Variable color animation type is cool because it changes the opacity of the variable layers in the SF Symbol making the symbol stand out and making your application come to life.

There are many different ways you can use this type, in the following example we will create a wifi symbol and create 4 different animations using the variableColor effect:

import SwiftUI

struct SFSymbolsView: View {
    @State var valueToUse: Int = 0
    var body: some View {
        HStack {
            Image(systemName: "wifi")
                .font(.system(size: 50, weight: .bold))
                .symbolEffect(.variableColor, value: valueToUse)
            
            Image(systemName: "wifi")
                .font(.system(size: 50, weight: .bold))
                .symbolEffect(.variableColor.iterative, value: valueToUse)
            
            Image(systemName: "wifi")
                .font(.system(size: 50, weight: .bold))
                .symbolEffect(.variableColor.hideInactiveLayers, value: valueToUse)
    
        }
                
        Button {
            valueToUse+=1
        }label: {
            Text("Make animation")
        }
        .buttonStyle(.borderedProminent)
    }
}

The result:

Replace animation

Replace animations can make transitions between two SF Symbols smoother and more visually appealing. Instead of SF Symbols abruptly appearing or disappearing, a replace animation can create a seamless flow from one SF Symbol to another, enhancing the overall user experience.

In the following example we will have a trash can and replace it with a trash can with a slash:

import SwiftUI

struct SFSymbolsView: View {
    @State var isDeleted: Bool = false
    var body: some View {
        Image(systemName: isDeleted ? "trash.slash" : "trash")
            .font(.system(size: 50, weight: .bold))
            .contentTransition(.symbolEffect(.replace))
        
        
        Button {
            isDeleted.toggle()
        }label: {
            Text("Delete/Undelete")
        }
        .buttonStyle(.bordered)
    }
}

The result:

Wrap up SwiftUI SF Animation

Applying animation to your SF Symbols makes your application come to life and gives the user a visual indication that something is happening. In this blog post, we covered the most common animations you can apply to the SF Symbols.

I hope you can use this in your application — happy coding 🙂

Scroll to Top