SF Symbols

In addition to SwiftUI Apple also introduced SF Symbols at WWDC. Think of it as the Glyphicons that ship with Bootstrap, but then for iOS/iPadOS/tvOS apps.

SF Symbols provides a set of over 1,500 consistent, highly configurable symbols you can use in your app. Apple designed SF Symbols to integrate seamlessly with the San Francisco system font, so the symbols automatically ensure optical vertical alignment with text for all weights and sizes.

This was long overdue.

Each icon comes in comes in nine weights (from ultralight to black) and three sizes (small, medium, and large), which make them usable in just about any context they appear in: regular text, buttons, menus, … it’s all covered.

As outlined in WWDC2019 Session 206 – featuring @inferis who worked on it – they’re very easy to use them. Creating your own also is a breeze. Nice work, Tom!

One lesser detail about these though, is that some icons are only allowed to be used for referring to one of Apple’s apps. This seems logical for stuff like Face ID (which has a very specific icon), but is very limiting for apps such as Mail that have a very generic icon (e.g. the enveloppe):

Introducing SF Symbols WWDC2019 Session 206 (video + slides) →
SF Symbols →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.