Creating Custom SF Symbols

David Such
6 min readMay 13, 2020

Using vector images in Xcode — Create your own SF Symbols

Figure 1. SF Symbols App

SF Symbols is a set of over 1,500 symbol images created by Apple that you can use as pictures in your app. While SF Symbols are images, you can apply traits typically associated with text. For example, you can apply a tint color, font text style, weight, or scale to integrate them seamlessly with surrounding text.

SF Symbols come in nine weights — from ultralight to black — each of which corresponds to a weight of the San Francisco system font. This correspondence lets you achieve precise weight matching between symbols and adjacent text, while supporting flexibility for different sizes and contexts. Each symbol is also available in three scales: small, medium, and large. The scales are defined relative to the cap height of the San Francisco system font.

Subject to the following constraints, you can easily create your own custom SF Symbol by using the templates provided by Apple. There are a couple of tricks to the modification process though. These will be explained in the 6 step process outlined below.

CONSTRAINTS:1. It is important to note that you cant use SF Symbols (or glyphs that are substantially or confusingly similar ) in your app icons, logos, or any other trademark-related use.2. Some symbols can’t…

--

--

David Such
David Such

Written by David Such

Reefwing Software · Embedded Systems Engineer · iOS & AI Development · Robotics · Drones · Arduino · Raspberry Pi · Flight Control

No responses yet