Learn how to use SF symbols to customize and display your images

Photo by insspirito from Pixabay

Symbol images are highly configurable, allowing you to style your images with finesse. With the introduction of SF Symbols 5 in 2023, you now have a vast library of over 5,000 symbols to integrate into your app. However, there might be a scenario when you need a custom symbol unavailable in this extensive library.

In this article, I will demonstrate how to make a custom symbol using Adobe Illustrator and export it to Xcode, enabling seamless integration of your unique design into your app.

Preparing your Custom Symbol

Step 1: Export a template

To get started, you need an SVG symbol template. Browse the system collection from the SF Symbols app and select a symbol. Choosing a symbol resembling your custom design is not required but could be beneficial in providing a point of reference for scale, alignment, and thickness.

Once you select, click File > Export template or press ⌘E. Ensure you have Variable as the template setup and the latest compatibility selected. Click export and select a location to save the file.

Note: When writing this article, SF Symbols template version 5 is unsuitable in Xcode 15.0 beta. Please use SF Symbols 4 app and templates until Apple resolves this.

Step 2: Edit the template in a vector-drawing app

Open the template in Adobe Illustrator. On the right side of your work area, select the Layers panel. Expand the Symbols layer to view the three required variants: Ultralight-S, Regular-S, and Black-S. Within each variant is a distinct compound path. You’ll replace this compound path in a moment.

Layer panel from system symbol

You can edit the system symbol or copy/paste your created image. It is very important from here to follow the interpolation requirements set forth by Apple:

  1. Your design sources are Ultralight-S, Regular-S, and Black-S
  2. Paths have a high level of compatibility and consistency between variants
  3. All matching paths have the same number of points

Follow these general rules:

  1. Avoid open paths: Paths must connect to ensure they can be filled with color.
  2. Convert strokes to paths: Ensures strokes paths can be filled with color. To do this, select your stroke on the canvas, then Object > Path > Outline Stroke. Select View > Outline to see the impact of this change.
  3. Avoid gradients and effects: These can cause unwanted consequences.

When editing an existing symbol, preserve the number of points across all variants. If your design requires more than a few changes to the system symbol, follow the guidance below.

If you have already created an image, you can paste it into the template file rather than edit the system symbol. I find it’s easiest to size the pasted image relative to the system symbols’ Regular-S shape initially. Then, make two copies. Lock the aspect ratio to maintain width and height proportions in the Properties panel by selecting the link icon. Shrink the width of one copy by 5–10 points and enlarge the other by the same amount.

Layer panel before regroup

Avoid adding or removing points and paths to your variants once you have reached this part. Only make small adjustments to existing points to avoid interpolation deviations.

Everyone, to your positions! Drag each image to its respective variant position on the canvas (i.e., place it directly on top of the system symbols for Ultralight-S, Regular-S, and Black-S). You should now have three variants overlapping the system symbols.

Regroup your layers according to the symbols folder hierarchy. Back in the layers panel, drag your image’s layer(s) corresponding to the Regular-S variant into that grouping. Delete the compound path layer for the system symbol residing in the Regular-S layer. Repeat this process for the Ultralight-S and Black-S variants. Rename this SVG file according to your file naming conventions.

This is what your Layers panel should look like

Step 3: Validate the SVG file

Validation ensures your SVG file abides by the interpolation requirements. Your custom symbol will only be accepted once it is validated.

Example of custom SVG file

From the SF Symbols app, select File > Validate Templates. Choose your file and select Validate. If all goes well, you will receive a notice indicating you can import your symbol into Xcode. Otherwise, you may see one of the following error messages:

  • The provided variants are not interpolatable: To resolve this, ensure you copied and pasted from a single source and followed the guidance above when making changes.
  • Symbol variants… could not be found: Check the Layers panel in Illustrator and make sure you have assigned the proper image layer to each of the three variants.
Successful interpolation!

Step 4: Import your custom symbol to the Symbols app

From the left panel of the SF Symbol app, click on Custom Symbols. Drag and drop your SVG file in the center symbol grid.

Custom symbol imported

Step 5: Annotate your symbol

Select your custom symbol from the grid. From the right side panel, select the paintbrush (Color Inspector). For this demonstration, select Multicolor as the Rendering option.

In the layers panel (see bottom-right), expand the layers of your symbol. You can organize these layers and apply various attributes. Add new layers, as needed, and assign colors to subpaths. I recommend the system colors instead of custom since they can adapt to system appearance changes such as light/dark mode, contrast, and vibrancy.

In the example below, I switched to Gallery View so my symbol could fill the canvas. I organized my layers and applied system colors to the selected subpaths in each layer. Changes can be made to the other rendering modes as desired.

An annotated custom symbol

Step 6: Export to Xcode

Select your symbol in the SF Symbols app and choose File > Export Symbol > Export.

Now, in your Xcode project, navigate to the Assets.xcassets folder. Drag and drop your SVG file onto the canvas. On the right, select the Attributes Inspector. You can change Render to Multicolor or add a modifier to the Image in your code (see code below).

Step 7: Use your custom symbol in SwiftUI

In the Project Navigator, edit ContentView.swift as follows:

struct ContentView: View {
    var body: some View {
        VStack {
            Image("customSymbol4")
                .symbolRenderingMode(.multicolor)
                .font(.system(size: 80.0))
            Text("Hello gamer")
                .font(.title)
                .foregroundStyle(.tint)
        }
    }
}
Sample code preview

Bonus

If you designed your image before starting this process, you may wonder, is all of this worth it? Well, it is. You can add your .png image file directly to the Asset Catalog or convert it to a custom symbol per this article. When you export your app for distribution, look closely at the App Thinning Size Report. You’ll notice a significant reduction in the size of your app with a custom symbol instead of the .png.

Wrapping Up

You can now create a custom symbol and use Apple’s configuration options to stylize it. Explore the other rendering modes and configuration options within SF Symbols.

Be sure to check out my app, ClamQuest, on the App Store.

Thanks for reading!

Create Custom SF Symbols for Your Apps was originally published in Better Programming on Medium, where people are continuing the conversation by highlighting and responding to this story.

Previous Post
Next Post