When designing apps for Apple platforms it makes sense to leverage the power of SF Symbols—a highly customizable set of symbols (icons) you can use in your app. SF Symbols offers thousands of symbols for various needs and purposes.
However, despite of the abundance of symbols, some projects demand a truly custom approach tailored to specific use cases. Fortunately, SF Symbols supports the ability to upload your own custom-made symbols. Let see how you can create custom SF Symbols for SwiftUI apps.
Prerequisites
Before we begin, here are few of the things you’ll need to create custom SF Symbols:
- SF Symbols app. This is the official Apple app used for browsing SF Symbols as well as customizing them and adding new ones for use in Xcode. You can download the SF Symbols app here.
- Vector graphics editor app. You can use any app you’re comfortable with, be it Sketch, Adobe Illustrator, or anything else. As long as the app is capable of editing vector images and exporting them to SVGs, you should be fine.
Export a Template
To create a custom SF Symbol you’ll need a special SVG template that you can get by exporting it from SF Symbols. Choose any existing symbol and use the “File > Export Template…” command or the ⌘+E shortcut. I recommend exporting a template for a symbol that closely resembles your icon, so that you could use the template symbol as a reference point.
When exporting the template, select the “Variable” template setup. This is crucial because it significantly simplifies the symbol creation process. To fully utilize the power of SF Symbols in SwiftUI, each symbol needs 27 variations: three scale sizes (small, medium, large) across nine weights (from ultra-light to bold).
By choosing the “Variable” template, you only need to design three weight variations of your symbol. SF Symbols will automatically generate the remaining 24, ensuring your icon adapts perfectly to different font sizes and weights within your app.
Preparing SVG file for SF Symbols
With the symbol template SVG exported, use it to create your own symbol. You’ll need to replace the three weight variations in the exported SVG template with your designs. While ideation and illustration are entirely up to you, here are few tips for designing your SF Symbol.
Weight Variations
Since you need to design symbol in three weight variations—ultralight, regular, and black—it can be a bit tricky to get the weights right. I found it easier to start with regular weight and tweak it for the other two variations.
Layers Order
When exporting a template from SF Symbols, it follows a specific layer hierarchy. Each symbol is contained within a folder with its name, which includes three subfolders for Symbols, Guides, and Notes. To ensure proper import into SF Symbols, this hierarchy must be maintained.
Place the layers of your symbol within the appropriate folders for each weight variation. For example, layers for Black weight variation should be placed in “Symbols > Black-S” folder within the SVG file.
Most importantly, make sure to maintain the same layer order across all weight variations. This applies to both regular layers and those within combined shapes. For example, if you combined a rectangle and a circle shapes, ensure they are in the same order in all of the variations. Otherwise, you might end up with very peculiar results.
Stroke Width
If your symbol contains lines, such as clock hands or sun rays, maintaining consistent stroke width with existing SF Symbols is crucial for visual harmony. To achieve this, export a template of an SF Symbol that uses strokes and match the stroke width in your vector art.
Overlap Distance
Similarly to stroke width, it’s recommended to match overlap distances in your vector art to similar icons in SF Symbols. Preserving the overlap shape in export also helps in variations generation process.
Margins Alignment
Place your symbol within the guides provided in the SVG template. Apple recommends adjusting the left and right margins of each symbol by moving the corresponding guides along the x-axis.
While the top and bottom guides should remain fixed, use them to align your symbol vertically. This ensures proper centering with text, even if you don’t plan to use the symbol in conjunction with text.
Import Custom Symbol to SF Symbols
Once you’re happy with your design, save your symbol as an SVG file based on the template exported from SF Symbols. Then, simply drag and drop you symbol’s SVG into the SF Symbols app. Imported symbols are initially saved in the Custom Symbols folder within the Library but can be reorganized into additional folders if necessary.
Check Weight Variations
After importing your symbol, verify its appearance across all weight variations by manually clicking through the font weight options in the SF Symbols toolbar. If something doesn’t look as expected, the chances are there might be an issue with the layers organization in your SVG file.
Divide Symbol into Layers
To achieve finer control over color rendering and animations, divide your symbol into layers. These internal SF Symbols layers are loosely based on SVG layers.
By default, custom symbols are imported as a single layer. To create a new layer, select a portion of your symbol in the preview area and drag it to the layers area in the Inspector Panel (⌘+I).
Each layer can have unique settings:
- Activate Clear Behind: Removes the pixels of layers beneath it.
- Activate Variable Color: Allows the layer to alternate its color when used with the Variable Color animation.
- Activate Always Pulse: Causes the layer to pulse independently when used with the Pulse animation.
Adjust Symbol Rendering Options
Next, configure color rendering. Use the Colors inspector in the Inspector Panel to preview your symbol in different rendering options and adjust layer colors accordingly.
Here’s a breakdown of rendering options:
- Monochrome: Renders your symbol in a single color.
- Hierarchical: Uses a single color with varying opacity for each layer, based on your configuration.
- Palette: Determines layer colors when using the .foregroundStyle(_:_:_:) modifier in SwiftUI. The picker labels (primary, secondary, tertiary) correspond to the modifier’s arguments.
- Multicolor: Allows you to set individual colors for each layer, ideal for rendering your symbol in custom multicolor schemes.
Configure Symbol Animation
Customize your symbol’s animations using the Animations inspector in the Inspector Panel. Each animation offers straightforward settings, such as whether the entire symbol or individual layers animate. Preview your symbol with different animations to verify desired behavior.
Combine Your Symbol With Components
Another cool feature SF Symbols offers is the ability to combine existing symbols with Components. These are the basic elements you can add to your symbol, like enclose it in a shape, add a badge to it, or slash it. To combine an SF Symbol with a Component right-click on it and select “Combine Symbol with Component…”.
Combining symbol with a Component will create a new symbol in your library’s Custom Symbols folder with dot-separated name (e.g., “symbol.component”). You can further combine the resulting symbol with other Components.
Using Custom SF Symbols in Xcode
After configuring your symbol in SF Symbols, export it for Xcode using “File > Export Symbol…” or the ⇧+⌘+E keyboard shortcut.
To use your custom symbol in Xcode, import the SVG file into your project’s Assets folder. The imported symbol can then be used in SwiftUI’s Image view by simply passing its name like this:
Image(“custom.symbol")To change the size of the symbol in SwiftUI pass the .system(size:) modifier within the .font() modifier. Here’s an example:
Image("custom.symbol")
.font(.system(size:200))Set the desired color rendering option using .symbolRenderingMode(_:) modifier.
Image("custom.symbol")
.symbolRenderingMode(.palette)To apply animations to your custom SF Symbols in SwiftUI, use the symbolEffect(_:options:isActive:) modifier on the Image view. For example:
Image("sound.hihat")
.symbolEffect(.pulse)Wrap-up
Well, that’s it! Designing custom symbols is a rewarding endeavor. When done well, custom symbols can make your app stand out and enhance its overall user experience. By following the guidelines we’ve discussed, you can create unique and visually appealing symbols that complement your app’s design. Happy symbolizing!