Exploring Custom SF Symbols: How to Create Your Own (Part 3)

1328 words • 6 minute read.

This is the final piece (for now at least) to my SF Symbol deep dive trilogy! Yes, it sounds like some kind of Matrix rip-off, doesn’t it?

If you have missed the first two articles you can check out Exploring SF Symbols here, and Exploring SF Symbols in Motion here.

Apple’s SF Symbols app is an essential tool in my opinion, when it comes to working with SF Symbols. There are two reasons for this; One, it acts as a catalogue allowing you to browse through every SF Symbol, including all of the different variations of a particular symbol. It also allows you to customise any symbols already in the catalogue, improving the symbol for the context you wish to use it.

Now we know what it can do, let’s take a look at how we can make a multi-coloured SF Symbol…

Let’s get customising…

Let’s take the symbol custom.clock.arrow.trianglehead.2.counterclockwise.rotate.90 and customise it. The same should work for any symbol.

Secondary click on the symbol to reveal the context menu and select Duplicate as Custom Symbol .

A screen shot showing an SF Symbol being duplicated A screen shot showing an SF Symbol being duplicated.

Then the symbol will appear in the Custom Symbols section, located under the Library header in the left hand Categories panel.

In the Inspectors panel, if you select the Rendering Inspector (the paint brush) you should see the layers panel on the bottom right hand side. You can then secondary click on ➕ and select New Layer . We also need to make sure that Multicolor is selected under the Rendering header.

A screen shot showing the duplicated SF symbol in the custom symbols folder

A screen shot showing the duplicated SF symbol in the custom symbols folder.

Now we have three separate layers, one for each path within the SF Symbol. Make sure to select a single path for each layer, this will allow us to change the colour of each individually.

A screen shot showing the duplicated SF symbol with 3 separate paths

A screen shot showing the duplicated SF symbol with 3 separate paths.

If we expand each layer in the layers panel and select Subpath 1 for layer one, Subpath 2 for layer two and you’ve got it… Subpath 3 for layer three.

A screen shot showing the duplicated SF symbol with 3 separate expanded layer paths

A screen shot showing the duplicated SF symbol with 3 separate expanded layer paths.

You can then collapse the layers just to make it easier to work with. We can now see the path that is selected for each of our layers, along with the colour for each path to the right of it.

A screen shot showing the duplicated SF symbol with different paths selected within each layer

A screen shot showing the duplicated SF symbol with different paths selected within each layer.

If we change the colours of each layer, we can see that reflected on out main symbol in the middle.

A screen shot showing the duplicated SF symbol with each layer having a different colour

A screen shot showing the duplicated SF symbol with each layer having a different colour.

Exporting the customised SF Symbol as an SVG

Next select FileExport Symbol... or press Shift + Command + E , we will be shown the assets we can export, tapping Export allows us to select a destination to export them to. I am unsure at this point why it doesn’t export a full catalogue for Xcode 16.

A screen shot showing the customised symbol being exported

A screen shot showing the customised symbol being exported.

Importing the customised SF Symbol into Xcode

Now that we have out custom symbol exported, we can get back into Xcode. Open the project you want to import your symbol into to, and select the Assets catalogue. Next tap the ➕ button and select Symbol Image Set .

A screen shot showing a symbol image set being created in Xcode

A screen shot showing a symbol image set being created in Xcode.

Then give your new symbol a very descriptive name.

A screen shot showing the newly names image set

A screen shot showing the newly names image set.

We can then drag and drop our exported .svg file, into the asset catalogue, the same as we would with any other type of asset.

A screen shot showing the exported svg file imported into Xcodes asset catalogue

A screen shot showing the exported svg file imported into Xcodes asset catalogue.

Using the new SF Symbol in code

Great stuff, we have our new symbol customised, and imported. Believe it or not… we can write some actual code. Using our new symbol can be done in the same way as any other imported asset in SwiftUI.

Using the Image() API, passing in the symbol name as a String, allows us to render the new symbol as a SwiftUI Image. The symbol will be shown in either white or black (Depending on your selected colour scheme). If you want the symbol to show the new colours that have been added, you’ll need to add the modifier .renderingMode(.original) .

Image("customSymbol")
    
Image("customSymbol")
    .renderingMode(.original)

A screen shot showing the newly customised symbol rendered on device

A screen shot showing the newly customised symbol rendered on device.

Conclusion

It may seem like a lot of work just to add some colour to a symbol, but it can be a fun process, adds character and individuality to your app. There is so much more you can do here when customising like adding badges and animating different paths. Go and take a look and I would genuinely love to see what you come up with.

Thanks for stopping by 🙂.