Sweet Symbols - SF Symbols

What are SFSymbols?

SF Symbols are set of over 2,400 consistent, highly configurable symbols you can use in your app. As they are integrated into the San Francisco system font they automatically ensure optical vertical alignment with text for all weights and sizes.

Design to work with text

SF Symbols is not just an icon. It designs to work along with their text. It comes in nine weights — from ultralight to black — to match a weight of the San Francisco system font.

Each symbol is also available in three scales: small, medium, and large.

Improved Optical alignment

Using optical alignment was a challenging in SF Symbol. Until version 1.1 it was not possible to horizontally align symbols. It automatically ensured the vertical alignment if used with the San Fransisco system font.

With the 2.0 update, you can now give symbols negative side margins that are supported by both standard and custom symbols. This should give you enough control to visually align symbols horizontally.

Multicolor Symbols

By default, a symbol can use an app's accent color. In SF Symbols 2 and later, you can use multicolor symbols to display images that contain more than one color.

The newly introduced multicolor symbols are unique compared to tinted symbols as they automatically adapt to appearance modes like Dark mode, accessibility settings, and vibrancy.

Custom Symbols

You can create custom symbol if there is no symbol available to match your requirements. The exported SVG version of a symbol is well structured and can be used as a base for your custom symbol. You can modify the SVG version of a symbol using a vector-editing tool like Sketch or Illustrator. Use the result in your app as you would use the original SVG version of a symbol. Custom symbols don't support adaptive color.

Localized Symbols

Another great new feature is the localized symbols variants to support right-to-left writing systems as well as script-specific symbols for Hebrew, Arabic, and Devanagari.

How to use SFSymbol ?

We can initialize SFSymbol with a new  UIImage as Apple treats it as an image.

Swift :

UIImage(systemName: "star.fill")

SwiftUI :

Image(systemName: "star.fill")

change the scale of an SF Symbol in Swift

It allows you to set the font, scale, point size, weight, and text style.

Swift :

let boldFont = UIFont.boldSystemFont(ofSize: 24)
let configuration = UIImage.SymbolConfiguration(font: boldFont)

titleLabel.font = boldFont
let image = UIImage(systemName: "book.circle", withConfiguration: configuration)

SwiftUI :

let font = Font.system(size: 24).bold()

Image(systemName: "book.circle").font(font)
Text("Book").font(font)

You can use any of below available option that suits your case and this all are text related.

init(pointSize: CGFloat)
init(pointSize: CGFloat, weight: UIImage.SymbolWeight)
init(pointSize: CGFloat, weight: UIImage.SymbolWeight, scale: UIImage.SymbolScale)
init(scale: UIImage.SymbolScale)
init(textStyle: UIFont.TextStyle)
init(textStyle: UIFont.TextStyle, scale: UIImage.SymbolScale)
init(weight: UIImage.SymbolWeight)
init(font: UIFont)
init(font: UIFont, scale: UIImage.SymbolScale)

Set scale

The concept of scale applies to all Apple UI. You can try setting the same symbols to navigation bars, toolbars, or tab bars and see how scale work in action. When there is enough space like regular height, Apple use .large scale on navigation bars, toolbars, and tab bars. When the space is limited like compact height, Apple use .medium scale.

You can set a scale with SymbolConfiguration like other properties.

Swift:

let smallConfiguration = UIImage.SymbolConfiguration(scale: .small)
let image = UIImage(systemName: "book.circle", withConfiguration: configuration)

SwiftUI:

Image(systemName: "book.circle").imageScale(.small)

prefferedSymbolConfiguration

Apple exposes this kind of behaviour in two places, UIImageView and UIButton. The UIImageView and UIButton class comes with a new property preferredSymbolConfiguration which allows you to apply a specific configuration to any symbols set in the image view.

We can setSymbolConfiguration to the  UIImageView's preferredSymbolConfiguration just like we set SymbolConfiguration to an UIImage.

let imageView = UIImageView(image: defaultSymbolImage)
let updatedConfiguration = UIImage.SymbolConfiguration(weight: .bold)
imageView.preferredSymbolConfiguration = updatedConfiguration

This will change the symbol whenever it’s set in the image view

If you want to make sure a symbol always appears in a specific color, you can make use of the withTintColor method:

let heartImage = UIImage(systemName: "heart.fill")!
let redHeartImage = heartImage.withTintColor(.red, renderingMode: .alwaysOriginal)

For buttons, it works more or less the same by making use of the UIButton.setPreferredSymbolConfiguration(_:forImageIn:) method. Default styles applied to system buttons are .body and .large.

You can do this easily using the applying method.

let boldLargeConfig = UIImage.SymbolConfiguration(pointSize: UIFont.systemFontSize, weight: .bold, scale: .large)
let smallConfig = UIImage.SymbolConfiguration(scale: .small)
let boldSmallConfig = boldLargeConfig.applying(smallConfig)
let boldSmallSymbolImage = UIImage(systemName: "square.and.pencil", withConfiguration: boldSmallConfig)

Restricted Symbols :

Some symbols can not exported as SVG version of symbol for customization and can be used only to reference Apple technologies. you can refer this paragraph to know the list of restricted symbols -> Symbols for Use As-Is.

Browse for available symbols :

Apple provides you a SF Symbol  app from where you can browse, copy and export the symbol of your choice. The app can be downloaded here and is available for macOS 10.14 and later.
https://developer.apple.com/design/downloads/SF-Symbols.dmg

Here, you can browse, search or export the symbol template and can display them in selected weight.

You can also browse and search from any image field under the attributes inspector tab.