Alongside the introduction of iOS 13, Apple has significantly updated its Design Resources with new tools for developers and designers that will help create consistent, usable, and visually pleasing apps. One of the biggest additions is a brand new set of configurable symbols and a companion macOS app called SF Symbols.
SFSymbols is a set of over 1,000 consistent and highly configurable symbols that was designed to integrate with Apple’s system font, San Francisco. These symbols can be used in iOS 13, watchOS 6, and tvOS 13. Each symbol was designed with a variety of sizes and weights so you can find the right version for your app. From Apple’s Human Interface Guidelines:
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. By specifying a scale, you can adjust a symbol’s emphasis compared to adjacent text, without disrupting the weight matching with text that uses the same point size.
Inside the macOS companion app, currently in beta, SF Symbols are presented in a sortable and searchable list. Symbols can be dragged to the desktop, prepared for Xcode, or exported as a template. This allows designers to create their own symbols based on Apple’s set:
To create a custom symbol, export a symbol that’s similar to the design you want and modify the template using a vector-editing tool like Sketch or Illustrator. Use the result in your app as you would use the original template file.
SF Symbols is a promising new asset that should greatly improve the consistency of iOS apps and the speed of development. A rich library of symbols means that designers can spend less time recreating the assets Apple has already built and more time on app illustration, iconography, and visual polish.
New symbols in use in iOS 13.
Lovely new Apple-designed serif called "New York". pic.twitter.com/cxvndtIUxE
— Max “Tim Van Damme” Voltar [emoji] (@maxvoltar) June 3, 2019
Check out our News Hub for everything announced at WWDC 2019.