Table of Contents
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.
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.
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.
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.
change the scale of an SF Symbol in Swift
It allows you to set the font, scale, point size, weight, and text style.
let boldFont = UIFont.boldSystemFont(ofSize: 24) let configuration = UIImage.SymbolConfiguration(font: boldFont) titleLabel.font = boldFont let image = UIImage(systemName: "book.circle", withConfiguration: configuration)
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)
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
You can set a scale with
SymbolConfiguration like other properties.
let smallConfiguration = UIImage.SymbolConfiguration(scale: .small) let image = UIImage(systemName: "book.circle", withConfiguration: configuration)
Apple exposes this kind of behaviour in two places,
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 set
SymbolConfiguration to the
preferredSymbolConfiguration just like we set
SymbolConfiguration to an
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
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
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.
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.