SFSymbols are one of the best feature provided by apple to the developers. It provides vast list of icons that can be scaled and modified as per our need. These images provides consistency across our all screens and apps without any additional effort. SwiftUI’s Image view helps us to load over 2500 SF symbols without much trouble and in multi colors.
To load icons from Apple’s SF Symbols set, use the Image(systemName:) initializer, passing in the icon string to load, as shown below.
Image(systemName: "cloud.snow.fill")
.imageScale(.large)
The image you get back is scalable and colorable, which means you can ask SwiftUI to scale up the image to match whatever Dynamic Type text style it accompanies, if any
Image(systemName: "cloud.snow.fill")
.font(.largeTitle)
We can change the tint color with foregroundStyle() modifier as shown below.
Image(systemName: "cloud.snow.fill")
.font(.largeTitle)
.foregroundStyle(.blue)
Some SF Symbols have multi-color mode. If you are using those images, you can bring the original colors to the icons by using modifier .renderingMode(.original) as shown below.
Image(systemName: "cloud.sun.rain.fill")
.renderingMode(.original)
.font(.largeTitle)
.padding()
.background(.blue)
.clipShape(Circle())
You can optionally apply a foregroundStyle() modifier to a multi-color SF Symbol, which will cause part of the symbol to be recolored. For example, this will render part of the icon blue and part green as shown below.
Image(systemName: "person.crop.circle.fill.badge.plus")
.renderingMode(.original)
.foregroundStyle(.blue)
.font(.largeTitle)