Using vector images in Xcode — Create your own SF Symbols
SF Symbols is a set of over 1,500 symbol images created by Apple that you can use as pictures in your app. While SF Symbols are images, you can apply traits typically associated with text. For example, you can apply a tint color, font text style, weight, or scale to integrate them seamlessly with surrounding text.
SF Symbols come in nine weights — from ultralight to black — each of which corresponds to a weight of the San Francisco system font. This correspondence lets you achieve precise weight matching between symbols and adjacent text, while supporting flexibility for different sizes and contexts. Each symbol is also available in three scales: small, medium, and large. The scales are defined relative to the cap height of the San Francisco system font.
Subject to the following constraints, you can easily create your own custom SF Symbol by using the templates provided by Apple. There are a couple of tricks to the modification process though. These will be explained in the 6 step process outlined below.
CONSTRAINTS:1. It is important to note that you cant use SF Symbols (or glyphs that are substantially or confusingly similar ) in your app icons, logos, or any other trademark-related use.2. Some symbols can’t be exported as templates for customization and can be used only to reference Apple technologies. These are listed in the Symbols for Use As-Is section of the Human Interface Guidelines.
- Download the SF Symbols App
You can use SF Symbols in apps running on iOS 13 and later, watchOS 6 and later, and tvOS 13 and later. To browse the full set of symbols, download the SF Symbols app (Mac only). Once you have downloaded and installed the app, select a symbol that you want to use as your template (Figure 1). Try and pick the symbol closests to your custom symbol.
2. Export a Custom Symbol Template
Once you have selected your template symbol, click on File — Export Custom Symbol Template… (Figure 2). Click on the Export button to save the SVG file to your desired location.
We are using the stop.svg symbol for our custom symbol. We will modify this to look like harmonica tabulature for use in a soon to be released app.
3. Open the SVG File in a Vector Drawing App
We are using Adobe Illustrator, but just about any vector drawing app should be suitable. Once you have opened up the file (Figure 3), you will see the symbol in all its weights and scales. In addition to different variants of the symbol image, the SVG file contains guides to align the symbol image with text, as well as annotations and meta information.
Stop! Before you make any changes:
Lock the artboard layer in your vector-drawing app before you make any modifications to the file to avoid clicks in the artboard selecting or dragging it.
4. Make your Required Modifications
Ensure that any modifications are done to the correct layer. As shown in Figure 4, you need to add or Edit layers within the appropriate named symbol group. We have added a new layer with the number 2 for the Ultralight small scale symbol. Don’t change the names of the template layers.
It’s not necessary for your template to contain all 27 variants of weight and scale. Only the Regular-M variant is required, but it’s a good idea to create the Regular-S/-M/-L and Semibold-S/-M/-L variants because a lot of common UIKit controls and accessibility features like Bold Text use them.
As you create your custom vector image make sure the layout conforms to the following requirements:
- Each symbol image variant must be a group, and can contain any number of shapes, but no other object types.
- Don’t use text or bitmap images (there is a workaround for this as we will explain).
- Transforms of shapes are optional but respected.
5. What about Text?
If you ignore the layout requirements in step 4 and for example, use text in your SVG image then when you add the image to Xcode you will get an error (Figure 5).
To get around this issue, select the text and then click on Type — Create Outlines in the Illustrator menu. This will change your text to a shape and Xcode will no longer complain when you import the image.
Once you have completed your modifications (Figure 7) save the template with a new file name.
6. Add SVG File to Xcode
Open your app’s Xcode project and select an asset catalog. In Xcode’s menu bar, select Editor — Add Assets — New Symbol Image Set. Then drag your exported SVG file into the Symbol SVG section of the Symbol Image pane (Figure 8).
Xcode will validate the SVG file, and display an error messages if there are any problems (Figure 5).
Using a SF Symbol
UIKit provides different ways of loading symbol images, depending on whether the system provided the image or you did:
- Load system-supplied symbol images using the init(systemName:), init(systemName:compatibleWith:), or init(systemName:withConfiguration:) methods of UIImage.
- Load your app’s custom symbol images using the init(named:), init(named:in:compatibleWith:), or init(named:in:with:) methods of UIImage.
Thus to load a system supplied image use something like:
let systemImage = UIImage(systemName: "stop")
To adjust the image attributes, create a configuration object and pass it in as a parameter.
let imageConfig = UIImage.SymbolConfiguration(pointSize: 22, weight: .black, scale: .large)let systemImage = UIImage(systemName: "stop", withConfiguration: imageConfig)
The available configuration options for point size, weight, scale, and text style are:
init(pointSize: CGFloat, weight: UIImage.SymbolWeight)
init(pointSize: CGFloat, weight: UIImage.SymbolWeight, scale: UIImage.SymbolScale)
init(textStyle: UIFont.TextStyle, scale: UIImage.SymbolScale)
init(font: UIFont, scale: UIImage.SymbolScale)
To load custom SF Symbol images:
let customImage = UIImage(named: "tabulature")
Enjoy using customized SF Symbols and never worry about image resolution again!