SF Symbols for iOS: Getting Started

Using Custom Symbols

Using a custom symbol in your app is incredibly easy. Switch to Xcode and select the main asset catalog, Assets.xcassets, in the Project navigator on the left. Switch to Finder and drag your new SF Symbol into the asset catalog.

Confirm that the Regular-M variant is the letter “i” in a circle rather than an exclamation mark in a circle.

Next, switch to Finder and open the Custom Symbols directory in the materials you downloaded at the start of the tutorial. Drag all six custom symbols into the asset catalog as well. Alternatively, use your vector graphics app and newfound knowledge to create your own set of custom symbols. :]

Loading a custom symbol uses a different API than the one used to load one of the provided SF Symbols. Rather than calling init(systemName:) on Image, you can just use the default initializer, init().

Switch back to Xcode and open TFLLineStatus.swift. At the bottom of image(), replace default with the following code:

case .specialService:
  return Image("special.service")
case .partSuspended:
  return Image("part.suspended")
case .partClosure:
  return Image("part.closure")
case .partClosed:
  return Image("part.closure")
case .exitOnly:
  return Image("exit.only")
case .noStepFreeAccess:
  return Image("no.step.free.access")
case .diverted:
  return Image("diverted")
case .information:
  return Image("information")

Ensure the Debug Data scheme is still selected. Then, build and run your app.

Ta-da, you’ve successfully added custom symbols into your Tube status app! :]

Supporting Older Operating Systems

And finally, a quick tip!

If you need to support older operating system versions and still want to use SF Symbols in your app, here’s a workaround to help. Simply export the SVG from the SF Symbols macOS app and open it in a vector graphics application like Sketch, Affinity Designer or Figma.

Export the layer you want to use as a PNG and add it as an asset in your app’s asset catalog. Then, simply use the default initializer rather than using init(systemName:) in your Image.

You won’t have access to the advanced features that SF Symbols provide, but you can still use the images.

Where to Go From Here?

You can download the completed project files by clicking Download Materials at the top or bottom of the tutorial.

As you can see, using both the built-in SF Symbols and providing your own custom symbols is incredibly easy with Swift.

If you’d like to see a video on how to build your own custom symbol in Affinity Designer, Caroline Begbie has put together a superb and very speedy demonstration.

You should also check out the videos introducing SF Symbols from the 2019 and 2020 WWDC events, as well as the documentation on Apple’s Human Interface Guidelines about SF Symbols.

You can learn all the details from Apple on creating your custom symbols, and finally, don’t forget to read the official page for SF Symbols.

We hope you enjoyed this tutorial, and if you have any questions or comments, please join the forum discussion below!