SF Symbols Animation in SwiftUI

Kelvin Tan
Swiftly Engineered iOS
4 min readSep 15, 2023

--

SF Symbols is a comprehensive library of vector-based symbols introduced by Apple. The library contains over 5,000 symbols, making it a versatile resource for developers to craft more consistent and polished apps. These symbols can be exported and edited using vector graphics editing tools to create custom symbols with shared design characteristics and accessibility features.

SF Symbols 5, the latest version, introduces a collection of expressive animations, over 700 new symbols, and enhanced tools for custom symbols. The new symbols include automotive indicators, game controller buttons, additional weather conditions, currencies, and more.

The introduction of SF Symbols has simplified the layout of user interface elements through automatic alignment with surrounding text and support for multiple weights and sizes. It has made the integration of beautiful icons as easy as setting UIImage filenames.

Prerequisites

  • At least Xcode 15 (macOS Ventura 13.4) and above
  • iOS 17 and above

Type of Animation Effect

Bounce effect

Some of the options for bounce are:

  • nonRepeating (Bounce without any repeat, similar as default)
  • repeat(x) (x could…

--

--

Kelvin Tan
Swiftly Engineered iOS

Father, husband, software engineer. Building software and building a family, one line of code and one moment at a time. 🚀💻💙 http://ko-fi.com/kelvintanzy