Apple provides a set of over 2,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.
Downloads
To follow this tutorial, you can download the source file, which will help you compare your progress.
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.
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: "gear")
.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: "gear")
.imageScale(.large)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.
Image(systemName: "paperplane.circle.fill")
.renderingMode(.original)