SF Symbols (“SF” as in San Francisco) is basically an icon font that provides a set of over 2,400 free symbols to use in your design. And it’s really easy to use them well, too. It won’t just make your interface look good, but it will give it that native Apple feel which users love so much.

The case of UI

For interface design, these icons really work like magic.

To start with, they ease the burden of having to design or buy icons. You can use SF Symbols to represent tasks and categories of content in a multitude of UI elements, such as navigation bars, toolbars, tab bars, context menus, and widgets.

The best part is that you can use a symbol everywhere you can use an image. So whenever you design an icon with an SF Symbol, the developer will not need an individual icon file. The only thing required is the icon font, which is automatically bundled into iOS 13.

Improved optical alignment

One of the normal challenges of using icons is optical alignment.

But now you can say goodbye to bad-alignment days too! Vertical and horizontal alignment is automatically ensured if used with the San Francisco system font.

Plus, you can give symbols negative side margins that are supported by both standard and custom symbols. This should give you all the control you need to visually align these bad boys with any other font too.

Color me impressed

Since their latest 2.0 update, SF Symbols can now be colorized.

Veteran users might not be quite so impressed by this, since they’re used to applying a tint to the older SF Symbols and call it a day.

But the newly introduced multicolor symbols are unique in the sense that they automatically adapt to appearance modes and accessibility settings. The possibilities are endless from here.

For example, you can use different colors in different areas of a symbol, and you can pick these colors to match your brand or your app’s overall look and feel. In Vectornator you can easily pick the matching color by using the eyedropper; this will automatically set your SF Symbol's color to the correct one.

Edit like it’s 1999

We saw earlier how SF Symbols are not your ordinary icons.

They work more like a font, which is much easier to edit. It comes in nine weights — from ultralight to black — to match the weight of the San Francisco system font. This correspondence allows you to easily achieve precise weight matching between symbols and close-by text.

But you can configure SF Symbols in other metrics, like scale. Scale is a way for you to adjust your symbols to be larger or smaller, but keep the other attributes like stroke, baseline, and weight the same as your font. You have 3 scales to choose from: small, medium, or large.

And that’s not even it, you can continue editing by point size and text style. You can do so many things with these powerhouse icons.

Can I use them everywhere?

Errm that’s where it gets tricky. You cannot use these icons outside the Apple ecosystem. So if you’re designing an app for iOS/macOS, you’re good. But otherwise, you cannot use these for anything else but displaying mock-ups.

In Apple’s own words: “All SF Symbols shall be considered to be system-provided images as defined in the Xcode and Apple SDKs license agreements and are subject to the terms and conditions set forth therein. You may not use SF Symbols — or glyphs that are substantially or confusingly similar — in your app icons, logos, or any other trademark-related use. Apple reserves the right to review and, in its sole discretion, require modification or discontinuance of use of any Symbol used in violation of the foregoing restrictions, and you agree to promptly comply with any such request.”

Apart from that, there’s also a list of symbols that can only be used to reference particular Apple technologies, like for AirPods, Airplay, Apple Watch, and so on.

Here’s a useful list you should keep an eye on ->

The perfect integration

We are a macOS/iOS design app, so it was really a no brainer adding these symbols to our existing Iconator database of over 80,000 vector icons. They’re all equally as amazing, but if you are designing an interface suitable for Apple devices, or you are going to be using the San Francisco font, we for sure recommend giving SF Symbols a go.

The SF Symbols will join our Iconator and Unsplash integrations as a new tab at the bottom of the Library Tab. To access any of them, simply tap or drag the symbol you love from the search window and drop it into your design. You’re good to go!

Are you a multi-skilled, multi-tool designer-type? Then you'll love the integrations that come next! Check out Sketch below.