Using SF Symbols in SwiftUI


This tutorial is focusing on SF Symbols and how to use them in SwiftUI for adding icons to your app.

Apple has designed over 4000 icons and continues adding more. These are called SF Symbols (San Francisco). It makes it easier for iOS developers to use SF symbols as app icons effectively and at the same time, it gives users the feeling that they belong on the Apple platform.

I often call SF symbols as SF icons or only icons. This is because these are used as icons by app developers. These are very flexible and you can easily change the size, color and many other things of these icons.

To get the list of all SF Symbol icons you can get the SF Symbols app. But I personally prefer to search on Google when I need an icon from SF symbols.

How to use SF Symbols in SwiftUI

Let’s see how you can use the SF symbols icon in SwiftUI. Just like adding an image using Image() view, you can also add SF symbols in the app. You have to provide the systemName in the Image control which is the name of the icon in the system.

Here is the syntax:

Image(systemName:)

Below is given the simplest way of using SF symbols to add paperplane icon with an Image instance:

Image(systemName: "paperplane")

The above program will add an icon of paperplane in our app view as you can see below:

paperplane icon from SF symbols

If you want to fill the color of an icon, you have to add .fill with the name of the icon like you can see below:

Image(systemName: "paperplane.fill")

Below is what it will look like:

paperplane fill color icon from SF symbols

Changing the size

We can also change the size of icons of SF symbols. SF symbols are completely vector graphics. So changing the size for adjustment will not affect the quality.

In SwiftUI, you can use the font() modifier. Below is given an example:

Image(systemName: "paperplane")
            .font(.largeTitle)

Below is how to set a custom size:

Image(systemName: "paperplane")
            .font(.system(size: 58))

Change the color of SF symbol

Depending on the layout, SF symbols use the default font color in SwiftUI. If you want to change this color, then you can use the foregroundColor() modifier in a way as you can see below:

Image(systemName: "circle")
            .foregroundColor(.green)

Make symbol bold

To make an icon bold, we have to use the font() modifier and inside it, we will use bold() modifier. Below is the example where we are making our heart icon bold:

Image(systemName: "heart.fill")
    .font(.system(.largeTitle).bold())