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 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.
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.
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.
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.
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.
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.
Next select File
→ Export 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.
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.
Then give your new symbol a very descriptive name.
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.
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.
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 🙂.