Introducing SF Symbols

All right.

Let's do this.

Hi, I'm Paolo, and later on, I'll be joined by my colleague, Tom here on stage. And we are here today to introduce you to SF symbols. Symbols play a very important role in interfaces. They are effective at communicating meaning.

They can indicate which items you have selected. They can be used to visually differentiate one type of content from another, and symbols appears in -- appear in various contexts throughout the system.

This creates a sense of familiarity throughout the user interface.

Symbols are used in a variety of ways, and designing symbols comes with an inherent challenge, which is pairing them nicely with the other essential element of any UI, which is text.

Text is used in a variety of point sizes in the UI, and so are symbols.

We use symbols a lot, and so do you.

We want to make your job easier.

Now in iOS 13, we redesigned all our symbols.

You'll notice how the symbols have a rounder look, and how generally they are a bit heavier in weight, making them more visible. They're also designed to perfectly match and align with text.

And while we took great care in redesigning all the symbols in the system that you may already be familiar with, we are thrilled to announce that we've extended this list, and designed many more, which we call SF symbols. They are a platform-consistent, high-quality set designed by Apple for you to use in your apps.

They come in vector form, which means they are scalable, and will render great at small and large point sizes.

They come in weights that match our family of system fonts, San Francisco -- all the weights.

And there's over 1,000 to choose from. If these are still not enough, you can even customize them and create your own. Let's look at them in more detail.

They're designed to work with text. They're specified in typographic points, like text.

When symbols appear next to text, they all sit nicely on the same baseline.

When symbols and text are positioned vertically, there are two most common cases -- whether the text supports the symbol, or the symbol supports the text. Horizontal alignment ensures that everything looks great, and this is possible thanks to their margins, which are not necessarily the same, as you can see in the bottom-right blue rectangle. Margins are invisible, but they're always considered when laying out elements on the screen. Let's look at weights. SF symbols have been carefully drawn to look great at different weights, from ultra-light to black, just like our system fonts.

Every weight has been drawn manually, and special consideration went into each design. Thinner weights have a distinctive, beautiful elegance, while the heavier ones strive to maintain detail and visibility. There is a need for using symbols at different sizes when they are next to text, even if the text size doesn't change.

This is something that many of us already do, depending on the amount of emphasis that the symbol may need, and how much space is available.

So with iOS 13, we turned this into a system.

We call these scales -- small, medium, and large. It's important to notice here that the point size of the symbol is still the same. It's just the scale that changes.

Each scale remains weight-matched with the text, and, mind you, it's not just linearly-scaled, the stroke thickness is adjusted to the weight of the text, and the other great benefit is that using scales means that automatically they're optically vertically-centered to the cap height.

This way, vertical layout between symbols and text is automatic for all three scales.

So where are these scales used, and when should you use a particular scale? Well, here are 3 UI examples.

They all use 17-point text, but the container for each of these symbols have different heights. So the text is the same size in all 3, and the symbols are as well, but the symbols use a different scale in order to best fit their space. And in some places, like toolbars, your kit will do the right thing, and will pick the correct scale for the control automatically.

So when we put all this together -- resizing, scaling, and weight -- it means you can use them with dynamic type, and everything just works. And of course, symbols can be localized, too. Here's an example of the Voice Memos app, running in English, and running in Arabic. Notice how the time control reflect the numeral system of the locale. If you're wondering how to make sense of all these symbols, well, each symbol has a unique name, and most symbols come in variants that can be outlined or filled. They can be enclosed in a circle or a square, and may come with a standardized system of badges.

And we made it convenient for you to use these symbols.

First, they are included in the San Francisco fonts available for download, so you can use them in your design prompts.

The scales are accessible by open Type Features. The default scale is medium, and small and large can be selected through the Typography panel, or application-specific UI.

And as a reminder, these fonts are for design only, not for deployment. So how do you use these symbols? How do you access them and get them into your designs? Well, to help you with that, we created a new app, which is called SF Symbols, and this is what it looks like. It will let you browse symbols, either in a collection view or in a table view.

It will let you search them by name, and preview them in different weights that the fonts come in.

You can download the SF Symbols app with the new fonts from developer.apple.com/design, and speaking of design, design resources -- the new design resources on developer.apple.com also use symbols. They reference them by name, and some of the system icons are now symbols, too. So if you were using some of these, they will automatically use the new designs. Now that we've seen how to discover the symbols available to you, let's look at a real example. Here's a spec that you might have put together for your app.

You can see how before maybe you had to do something like this -- specify your images, the rectangular bounds, and explicit pad and insets, and now, symbols greatly simplify the paradigm. You just have to specify a name, its point size, and alignment, maybe its weight and scale if appropriate.

So I'm working on this app with Tom, and here the symbol in the second row is a bit too generic. It's a list of beverages, so I want to replace it with something more appropriate, something that conveys that these are tasty, hot beverages.

So I think I'm going to change it, and I want to go for a teacup.

That teacup looks great. I'm sure Tom will love it, but it's not included in the set of symbols that we provide.

Well, the SF Symbols app lets you customize and create your own symbols.

In order for you to do that, you need to start by exporting the symbol from the app, and symbols can be exported through their template.

This is what a template looks like.

It has all the weights, and all the scales for the symbol. The template is in SVG format, which means it can be edited by most design tools. It's specially constructed to be navigable and usable through any of the design stage, and the very same template is also directly used by Xcode as a source artifact.

No more tens of hundreds of files floating around.

So let's look at how we did our teacup. First, we went to the SF Symbols app, and we looked for a good starting point. Our teacup is enclosed in a circle, so I think the circle is a great starting point. And so, I searched for circle, and it's there. So I can select it and export its template from the File menu. I can save it, and now it's