Creating Custom SF Symbols

Using vector images in Xcode — Create your own SF Symbols

Figure 1. SF Symbols App
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.
Figure 2. Export Custom Symbol Template.
Figure 3. SVG File in Illustrator.
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.
Figure 4. Modify within the Named Symbol Layer Groups.
  • Don’t use text or bitmap images (there is a workaround for this as we will explain).
  • Transforms of shapes are optional but respected.
Figure 5. Xcode Error if custom SVG image doesn’t meet requirements.
Figure 6. Convert Text into a Shape.
Figure 7. Complete customised SF Symbol SVG File.
Figure 8. Custom SF Symbol in Xcode.
  • Load your app’s custom symbol images using the init(named:), init(named:in:compatibleWith:), or init(named:in:with:) methods of UIImage.
let systemImage = UIImage(systemName: "stop")
let imageConfig = UIImage.SymbolConfiguration(pointSize: 22, weight: .black, scale: .large)let systemImage = UIImage(systemName: "stop", withConfiguration: imageConfig)
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)
let customImage = UIImage(named: "tabulature")
Figure 9. SF Symbols

Reefwing Software · iOS & Android Development · Robotics · #followback #iOS #Android #developer #indiedev #robotics #startup #arduino #raspberrypi

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store