How to animate SF Symbols in SwiftUI

Improve your app’s UX by animating SF Symbols

Image from Apple

Having a remarkable user experience in our app could be the main factor in user retention.

Animations play a fundamental role in that area. By adding animations to certain actions, we will be providing a more engaging experience to our users.

If we use SF Symbols, we can get pretty cool animations, basically for free. From iOS 17, Swift introduced a new modifier symbolEffect to perform pre-defined animations over SF Symbols.

Here is how we can use this cool feature.

We have seven built-in animations available to apply to any SF Symbol: Bounce, Pulse, Variable Color, Scale, Appear, Disappear, Replace

All animations are grouped into four types of behaviors

1. Discrete: the animation runs one time and ends.
2. Indefinite: the animation will continue until we remove it or disable it.
3. Transition: animate a symbol in or out of the view.
4. Content Transition: for animating a replacement of one symbol with another.