Hello and welcome to WWDC. Hi. I'm Thalia, and together with Paolo, we're here to go through what's new in SF Symbols. Today, we're going to have a recap of what SF Symbols is in the basics. We're going to look at some new additions and refinements. We will talk about localized symbols and how you can make your apps awesome with them.

We will see how to deal with old and new symbols when targeting different OS versions. We will talk about colors. And lastly, we're going to talk about layouts when using SF Symbols. So, let's get started. At Apple, we design interfaces for apps and devices that millions of people use around the world.

When we design at this scale, it is essential to have a visual system that embodies ideas, giving more substantial meaning to representations of actions, objects and even more abstract concepts like language. That's why we designed SF Symbols, a consistent and flexible library of iconography we introduced last year that is designed to seamlessly integrate with the system font, San Francisco. All the San Francisco families: SF Pro, SF Pro Rounded, SF Compact and SF Compact Rounded.

When symbols appear next to text, they are vertically centered with a cap height. Still, there are other typographic guidelines we need to consider. Let's look at the baseline. The baseline is the imaginary line upon which the text rests, and all typographic elements are related to it. While text always sits on the baseline, that's not necessarily true for symbols. The relationship of the symbols with a baseline works in a bit of a different way. Indeed, symbols are designed to work next to text, but we take the baseline as a flexible guide when creating one. Some can sit above the baseline, like the infinity symbol.

And some symbols can descend below it, like the folder symbol. This is intended, and it's meant to optically balance the shape of the symbol with San Francisco, so consider this when designing your own symbols. All symbols come in three scales: small, medium and large, with medium being the default scale.

The symbol scales can be used to vary the emphasis of a symbol relative to the text it sits adjacent to while remaining weight-matched and vertically centered with text. Let's take a look at the scales in more detail. Small symbols are approximately 20% smaller than the medium scale. And large symbols are about 30% larger than the medium scale.

But as we can see, only scaling the symbol will make them appear to have different weights. Of all the symbols, the small scale looks lighter, and the large scale looks bolder. It's a very subtle difference, but we make some weight compensations which allow us to maintain the same stroke thickness, making the symbols look weight-matched not only between the scales but also with text. Here are some examples. Different scales may be appropriate based on the amount of vertical space surrounding a symbol in a container. Remember, the point size of all these symbols is the same relative to the text. It's just the scale of the symbol that changes.

You've seen SF Symbols in the user interfaces since last year throughout the system and the apps we make, but also from you. These are only some of the examples of what you have made. The response has been truly amazing. Let's look at how to use SF Symbols with an example. We're going to see how to do this in design tools and in code. We're going to use the SF Symbols app and Xcode.

The SF Symbols app has been updated, and a better version is available for download from the Apple Developer website like before. It comes with a version of the system fonts suitable for design tools. And these fonts have symbols in them. So, here's the app I'm working on for our example. This is a great opportunity to use symbols. With symbols, we can make the Play and the Shuffle button more distinctive and recognizable. To do that, let's look at it in a design tool like Sketch.

Here's my document with the interface I'm working on. I have installed the SF Symbols app and the fonts that come with it. We now need to add the Play and the Shuffle symbols. To do that, let's go to the SF Symbols app, go into the search field and look for it. Here it is. Now, I just copy the symbol with the usual shortcut, command-C, or using the Edit drop-down menu. Then I'll just paste it in my artwork.

That's it. That's all I need. See here that I have my text set out to 17 points for the text and for the symbol. I can then do the same for the shuffle symbol. I'll go back to the app, search for it, then I'll just copy and paste it.

Nothing changes. This is a good spot to learn how to do this in code. To do that, here's Paolo to show us how. Here we have the same view implemented in UIKit. I construct my image with UIImage(systemName and set it to my view. The initializer takes a symbol name, so I look for the symbol name in the app. I go to the app, search for "play" and here it is. It's called "play.fill."

Good. One down. For the next one, Thalia tells me it's called "shuffle." So I go back to the app, search for "shuffle" and, indeed, here it is. Pro tip: I can copy the symbol name with shift-command-C and paste that directly into Xcode. Careful here. I copied a symbol name, not the symbol itself. If you copy the symbol, it will not work. Now, we're ready to build and run.

And our symbols are showing up. That's cool, but in this instance, we can do better. If we look at the relationship between the text and the symbol, the symbol appears too big. We can actually select a different scale for the symbol. And remember, we are not changing the point size. In Sketch, we can do this by selecting the small scale stylistic set from the Text menu.

Now, let's do the same for the shuffle symbol. Again, let's select the small scale. Also notice here how, when I change the scale, the symbol remains optically centered and weight-matched with the text. And to change the symbol scaling code, we are going to use the symbol configuration for that. So, I just construct my UIImage.SymbolConfiguration with a scale, and I'm done.

I could be done here, but there's a better way. Let's take it up a notch and configure a symbol with the same text style as the font, so the symbol can resize well with Dynamic Type. We can do that by passing the textStyle argument to our SymbolConfiguration, in this case, we have a headline.

If we build and run now, we can see that symbols follow the selected text size. If I have it set to large size, text and symbols go big. If I pick a small size, text and symbols resize accordingly. This is the kind of behavior we can only get if we use textStyles.

If you've been using SwiftUI instead, then using symbols looks like this. Call Image with systemName to get an image of the symbol back. Change its scale with the imageScale modifier and change other parameters of the configuration like point size, font weight or, as we've seen, textStyle via the font modifier.

New this year, we have the very convenient label, which lets us construct a very common UI element all in one go. And we also have a handy way to do text attachments by combining text and image. For more information, make sure to check out the "What's New in SwiftUI" session. This is all great, but this app also works on macOS, and it is not a Catalyst app. Here's what it looks like in Big Sur.

We're thrilled to announce that starting from macOS Big Sur, SF Symbols are also available on the Mac natively. Now, for the first time, old platforms can benefit from this unified iconography. In design, nothing changes. The way I use symbols is identical to the other platforms. In code, we can use symbols with the new NSImage API, which can take an accessibility description in the constructor.

So, here we have it, our Music app in its full glory using SF Symbols on macOS. As part of the UI redesign for macOS, not only did we bring SF Symbols to the Mac, we also have some additions and refinements. In iOS 13, we shipped more than 1,500 symbols. Now we have more than 750 new ones.

We have some devices, some for transportation, some symbols related to game controllers and even some human-related symbols. And all these are neatly organized in the app with categories. And not only does the app come with some predefined categories, but you can also create your own collections now. For example, if I'm designing an app related to sounds and music, and I want to have all the symbols I want to use in one easy, accessible place, I can create a collection based on my selection, name it "Music," in this case, and even add or delete more symbols as I go.

Another improvement is for when symbols are laid out vertically. This is especially true for symbols that have variants with badges. For instance, if we focus on folder and folder-related symbols, you can see how more often than not we want to align the symbols so that the badge extends beyond the folder itself.

This is an optical alignment, so you should use your best judgment if you're creating your own symbol. This is a great opportunity to have another look at the template. If you're not familiar with the template, it is that artifact that is a design source file that I can export from the SF Symbols app, modify and directly import into Xcode as is. There are three rows, one for each symbol scale, small, medium and large, and nine columns, one for each weight, from ultralight to black.

Each one of the symbols is in its own layer with a unique, descriptive identifier. These layer names are vital to the integrity of the file, so make sure that if you customize the template, you maintain this structure. We have a new version of the template now. It is labeled as version 2.

It's pretty much identical to version 1, especially in terms of structure, but if we zoom in, there's one important difference. The margins are not rectangles anymore, but lines. This is what lets us set positive or negative margins. In this case, the margin on the left is positive, and the one on the right is negative because it tucks in, overlapping with the outlines of the symbol. The color is not important here, it's just a visual indicator. It's their name and position that matters. In code, nothing changes. I still call my symbol as before. But when I go use the symbol, the margins produce the correct alignment that Thalia was just describing.

So, let's talk about localization. As we know, English uses the Latin alphabet, which is a left-to-right writing system, but in other locales, the writing system is right to left, like Arabic or Hebrew. We've had localized symbols since last year. Now we have more. Remember that these localize automatically, so there's no need to call out the localized variants in your spec.

If a symbol is localized, the app will show you what these variants are. To implement this for your custom symbols, there's nothing new. Remember to localize your asset catalog and assign a locale to each SVG template. In some cases, we do need a different design that properly responds to the design sensibilities of the locale, but in some other cases, in right-to-left locales, we can just flip the symbol as is. To achieve this, set the direction of the symbol to "mirrors."

This is also a good spot for a quick word on how to handle deprecated names and new symbols when it comes to targeting previous versions of the OS. SF Symbols naming system is designed to have internal consistency. And the repertoire keeps growing as we introduce new symbols this year. Let's look at this example. In the case of the bin symbols, we have bins with X marks and arrows pointing up, we have filled variants and circled variants too.

We strive to keep consistency in the naming scheme. That's why what was called "bin.xmark" is now "xmark.bin." The shape that we named "bin" moved to preserve coherence with the system. So how should you deal with that when targeting different OSes? First of all, this information is available to you when browsing symbols in the SF Symbols app.

So if your app minimum deployment target is iOS 13, you should be looking for symbols available in that version of the OS. Those symbols may have a different name from the latest version of the OS, so if you're backwards deploying to iOS 13, you have to use the old name. The new name will not be available there. But if your minimum deployment target is iOS 14, instead, then you should use the new name.

Xcode is aware of these name changes and will warn you accordingly if you're using storyboards. If you're not careful about this, people using your app will likely see no symbol, or worse, even get a crash, which is definitely not a great experience. Okay, next, let's talk about colors. Symbols can be colored. As of last year, by default, they take the tint color of the app. As a reference, here's how Calendar does it.

But there are some cases where we want one symbol to come with more than one color, like in the Weather widget. The symbols related to the weather are way more effective if they come in multiple colors. And sometimes we want both. We want part of the symbol to reflect the tint color, but also come with some pre-tinted parts. We're happy to announce that all of this is possible now with multicolor symbols. A set of predefined colored symbols to use in your UIs. You can access them by the color mode preview in the app, through the "Toolbar" button or with the multicolor category.

You can also choose between the two preview modes: "monochrome" for the black and white version of the symbol and "multicolor" for the colored version. In my specs, I will just make sure to annotate symbols with "multicolor." These colors adapt dynamically with appearances, just like system colors. In code, this is done by asking for a version of the symbol image with a different rendering mode. Pass true to setTemplate for the monochrome, tintable symbol, and this is the default behavior, by the way, and pass false to get the multicolor version.

Speaking of specs, let's have a refresher of the benefits of using symbols in layouts. Here's an example of a spec. In this case, it is for Mail. We have a pretty standard macOS sidebar layout, with symbols and text next to each other. The symbols here specify a scale and a point size, the same point size as the text. Symbols and text are baseline aligned. There should be no surprises here by now.

On the vertical axis, the labels are leading aligned, and my column of symbols is center aligned. This may be different from what you're used to if you're coming from a pre-symbols world. Notice here, I do not specify frames. Symbols are not designed to be constrained in frames with a specific size. It's the typographic nature of symbols that really makes it easy to spec as if they were text.

This frees you from having to specify frames and alignments that would make it really hard, if not impossible, to leverage all the features of SF Symbols. Symbols have their own size. They will occupy a different amount of surface on the screen, but they're coherent relative to each other, so don't force them into a frame. Be wary of anything that uses sizeThatFits and symbols. As long as symbols have the same text style or point size, you will be good.

Also make sure to use center alignments rather than aspectFit or scale to fit, and check your content gravity is set to "centered" if you're using CALayers, especially when symbols are enclosed in a well-defined area. When laying symbols next to text, remember to align them to the baseline, not to align them to their center. And vertically, use alignment guides to make the symbols and text grow harmoniously when text gets resized. Okay, so let's recap what we've covered.

We have a new version of the app and new features. We have hundreds of new symbols. Some of the existing symbols got new names, and we saw how to deal with them. Remember to use the oldest name for the minimum OS you're targeting. We also saw how to use SF Symbols on macOS with the new NSImage API in AppKit.

We saw how to deal with localized symbols. And we have new multicolor symbols now and how to use them with the different rendering modes. And lastly, we had a refresher on how to spec for symbol images by not specifying frames but symbol configurations and alignments. I hope you enjoyed learning about all the new features of SF Symbols, and we are looking forward to seeing what you will do.