Using SF Symbols in SwiftUI — Tutorial
Hi, my name is Izzy, and in this tutorial I want to show you how you can use the icon library SF Symbols with currently over 3,200 icons. The icons / symbols are designed to work with Apples system font called “San Francisco”, which is the reason the icons are referred to as “SF Symbols”.
Currently version 3 is the newest version, and you can download a small app on the official Apple Developer page. This app contains all the symbols you can use and has an easy search functionality.
This tutorial is split into three parts:
- How to use and customize SF Symbols
- Example usage in a (Space Travel) App
- Using shapes as border around Text and Symbols
The example usage will build on a previous tutorial I wrote, which you can read here.
Prerequesits
- Mac with XCode 12 installed
- Experience in Swift programming not necessary but can make your life easier
- Optional: SF Symbols installed, download here
How to use and customize SF Symbols
Adding SF Symbols to your App
If you scroll through the SF Symbol library, you will notice, that each item has a name consisting out of one or more words, each separated by a dot. This is the name we need to use in our app.
With the name we can simply create an Image in our view and pass the name as the systemName parameter. This Image you can also diretly wrap into a Text if you want the symbol to appear in text. Alternativly we can also use a Label.
If you use a Text you will see that the symbol will appear in the text, where you added it. For a Label it will generally appear before the text, but that depends on where you use the label. If you add the label to a TabBar, the icon will appear above the text, and in other circumstances it might even just show either the text or the icon.
Customizing SF Symbols
One important thing to remember is, that even if you just use the SF Symbol as an image, you can use the same modifiers to change its size. Let’s take a look at an example.
Here we added the .largeTitle font to the scribble icon to make it appear bigger. Instead we could have also used .font(.system(size: 96)). We also changed the color of the icon with .foregroundColor(.purple) and for the Text we simply used the normal modifiers we usually also have.
One thing worth noting is, that you can’t use the .fontWeight() modifier on an Image. There are two ways to change the weight, either by wrapping it in a Text or by adding the weight to the .font.
When changing the font size of the text, the symbol is automatically changing with it. If you want the symbol to appear smaller or bigger in comparison to the text, you can add a .imageScale() to it. As a argument you can pass the size (.small, .medium or .large) so for example, .imageScale(.large)if you want the icon to appear larger than the text.
Example usage of SF Symbols in our Space Travel App
If you want to follow along, this is the first part of the tutorial: https://ix76y.medium.com/space-travel-app-part-1-creating-a-fullscreen-background-image-in-swiftui-beginner-tutorial-ca6f950b3b8
In the previous tutorial I showed you how you can use a full screen background image in your app and overlay it with text. Now we want to work further on that, and add some SF Symbols to make the app look more interesting.
Beneath the text, we want to show that the moon will be the destination of this space travel and that it will take around 3 days to get there. We will use the icons mapping.and.ellipse and clock.arrow.circlepath for this.
First lets create a separate view called details, so we can work on this without bothering with the rest of the code. And let’s directly add a HStack, as we want the text to appear next to each other.
Inside the HStack we can now simply add our Text with the symbols (Line 28–29). Also increased the spacing of the HStack to keep them a bit more apart (Line 27) and add the details view to the main view (Line 18) so you can see all the changes in the preview.
If you look at the preview, it actually does already look very much the way we want it to look:
At the end, lets also center the HStack and add some padding to the top, to add some space between the text and this element.
Adding a border around Symbols and Texts
We also want a Text with Symbol above the text block to display the rating of our space travel trip. However, this time we want to add a border around the icon and the text. Let’s start again, by creating a new view called rating.
Add a Text view to it, with the star symbol and write the rating behind it (Line 20). Make sure to add the rating view to the main ContentView in the VStack after the first Spacer(Line 6).
To add a border around an element, there are multiple ways you can go about to do so. In this case I want to show you, how you can use overlay to achive a border around the element.
In the overlay you can simply pass any shape you want the border to have. For a squareish look, we could choose a Rectangle, or for this very round look we can use a Capsule. Each of these shapes, can be either filled with a color, and or have a border. In this case we are only interested in a border, for which we can define a color and a line width. With the .frame modifier, we can adjust its size, and in the end add some padding to the bottom, so there is more space to the text coming underneath.
You may notice that the rating text is now perfectly aligned with the text underneath, and the capsule is too far left. We can easily adjust that, by adding a offset to move the view a little bit to the right.
Conclusion
Congratulations 👏, if you managed to read and follow along until here. I hope you learned a lot about SF Symbols and how you can easily integrate them into your apps.
Next Tutorials
I will write a few more tutorials to finish this design and will link them in this article as soon as I publish them. Topics will include:
- adding custom fonts
- creating custom Shapes
I hope you enjoyed this tutorial and if you have any comments about the general layout of the tutorials or any whishes for future tutorials feel free to let me know in the comments. 😊
