How to animate the replacement of an SF Symbol using UIKit

Use the code below to perform an animation when switching between SF Symbols.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 09/22/2023 at 10:01
Last Updated on 09/22/2023 at 10:42
<p>Two flowers that represent Swift and XCode side by side with the text "SF Symbols Animated Replacement" beneath them.</p>

Use the code below to perform an animation when switching between SF Symbols.

SubscribeWhat are Symbols?

Please note that this article assumes that you have already added an SF symbol to a Swift project. If you have not done so, please consult the tutorial linked below.

How to use SF Symbols in Swift

To perform an animated replacement use code similar to the one below, replacing INSERT_SF_SYMBOL_NAME with the name of the SF Symbol (i.e. square.and.arrow.up, chevron.right or plus).

Frequently Asked Questions (FAQ)

How do I animate symbols using SwiftUI ?

Consult the WWDC session Animate symbols in your app to learn how to animate SF symbols in SwiftUI.

To learn more about what's available in SF Symbols consult What's new in SF Symbols 5.

WWDC23: Animate Symbols in your appWWDC23: What's new in SF Symbols 5

How do I add symbol effects in UIKit?

To add SF Symbol effects such as bounce, consult the article linked below:

How to add and remove SF Symbol Effects using UIKit

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe