JLV
How to use system icons for Apple platforms with different size, scale and multicolor! SwiftUI Tutorial!

Location

Total Floor Area

Design

Program

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)
Note: If you use font properties on the icon, you will not be able to use the multicolor option.

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.

Resources

More Projects