Libraries

SF Symbols were introduced in 2019 and were a massive gift for UI designers and developers.

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.

Use SF Symbols in 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. Vertical and horizontal alignment is automatically ensured if used with the San Francisco system font.

Plus, you can give symbols negative side margins 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.

Color me impressed

Since their 2.0 update, SF Symbols can be colorized. The 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 pick these colors to match your brand or your app’s overall look and feel. In Linearity Curve 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 achieve precise weight matching between symbols and close-by text easily.

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.

Use SF Symbols in Linearity Curve

The SF Symbols join our Iconator and Unsplash integrations as a new tab at the bottom of the Library Tab. You can use Apple's SF Symbols library of over 2.4K icons freely in your personal projects, but you cannot use these icons outside the Apple ecosystem and for commercial use of icons, logos.

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!