Creating Dynamic Icons for Apple Platforms with SF Symbols in SwiftUI

This tutorial covers how to use SF Symbols in SwiftUI to easily add system icons to your Apple platform applications. You will learn how to choose from the extensive library of icons, customize the size and color, and how to use them on different platforms with varying scale factors. By the end of the tutorial, you will be able to efficiently incorporate high-quality system icons into your app's user interface.

How to use system icons for Apple platforms with different size, scale and multicolor

Apple provides a set of over 5,400 configurable symbols that you can use in your app. They work seamlessly with San Francisco, the system font for macOS, iOS, iPadOS, watchOS, and tvOS.

SF Symbols

SF Symbols are highly adaptable and can be configured to a number of weights and sizes. Using them is as simple as copying and then, pasting these to your project. To use these, make sure that you've the SF Symbols app installed on your device.

Download sf tool here : https://developer.apple.com/sf-symbols/

..

Compatibility 

SF Symbols are compatible with iOS 13 and later, macOS 11 and later, watchOS 6 and later, and tvOS 13 and later.

..

Weights 

SF Symbols are available in various weights as well as scales. 

This allows you to create designs that are easily adaptable. Some of the weight options include thin, light, bold, heavy, etc. The image below shows the weights available.

..

Using SF Symbols 

In SwiftUI, you can easily generate icons from SF Symbols using their name. Additionally, you can customize the size (small, medium, large), change the weight and change the icon color. 

You can also edit the icon by using the font modifier.

 Image(systemName: "square.and.arrow.up")
                           .font(.system(size: 20, weight: .light))

..

Changing Scale 

You can add the imageScale modifier to the SF Symbol, treating it as an image. 

The imageScale modifier takes in one of the following values - large, medium, small.

 Image(systemName: "square.and.arrow.up")
                           .font(.system(size: 20, weight: .light))

..

Multi Color

You can use multicolor SF Symbols. In the app, they appear in the Multicolor category. Or, you can click on the Color icon in the toolbar. 

The renderingMode modifier is necessary to show the all the colors.

Note: If you use font properties on the icon, you will not be able to use the multicolor option.

Image(systemName: "paperplane.circle.fill")
                           .renderingMode(.original)

..

Using SF Symbols in the Design Tool 

You can even use the SF Symbol icon in your favorite design tool. Using it is as simple as searching for the icon in the SF Symbols app. Then, dragging and dropping it inside the design tool. In the image below, we're using Sketch but you can use any editor.