Set the size of SF Symbols in SwiftUI

In this tutorial, we will see how to set the size of SF symbols in SwiftUI. SF Symbols are part of Apple’s system icon library, that we can use to display a wide range of icons in your SwiftUI views. These symbols can automatically adjust to the context, but we can also specify a fixed size as per our requirements.

SF Symbols are similar to fonts, and we can adjust their size just like we do with text.

Now, look at the examples below to set the size of the SF symbol

Using the .font() modifier

We can use the font() modifier to set the size of an SF Symbol. SF Symbols are scalable vector images, so adjusting the font size will scale the symbol accordingly.

We can make these symbols bigger or smaller using the font() modifier, just like we change the size of the text.

Using a Specific Size

We can specify the size of an SF symbol inside the font() modifier using the .system(size: )method.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image(systemName: "speaker.wave.3")
            .font(.system(size: 60))
    }
}

In the above program, I have set the size of the symbol to 60 points. We can change the number to make the symbol bigger or smaller as per our requirements.

Output:

Using Predefined Styles

SwiftUI provides us with many predefined styles like title, body, headline, largetitle, etc. We can use those styles to make an SF symbol larger or smaller. Have a look at the example below.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Image(systemName: "speaker.wave.3")
                .font(.caption2)
            Image(systemName: "speaker.wave.3")
                .font(.caption)
            Image(systemName: "speaker.wave.3")
                .font(.callout)
            Image(systemName: "speaker.wave.3")
                .font(.body)
            Image(systemName: "speaker.wave.3")
                .font(.title3)
            Image(systemName: "speaker.wave.3")
                .font(.title2)
            Image(systemName: "speaker.wave.3")
                .font(.subheadline)
            Image(systemName: "speaker.wave.3")
                .font(.headline)
            Image(systemName: "speaker.wave.3")
                .font(.title)
            Image(systemName: "speaker.wave.3")
                .font(.largeTitle)
        }
    }
}

Output:

We can use the .scaledToFit() to fit the SF symbol automatically within their available space.

Set weights and sizes

We can also set the weights and sizes of an SF symbol using the .font() modifier. Now, have a look at the example below.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Image(systemName: "speaker.wave.3")
                .font(.system(size: 30, weight: .ultraLight))
            Image(systemName: "speaker.wave.3")
                .font(.system(size: 30, weight: .thin))
            Image(systemName: "speaker.wave.3")
                .font(.system(size: 30, weight: .light))
            Image(systemName: "speaker.wave.3")
                .font(.system(size: 30, weight: .regular))
            Image(systemName: "speaker.wave.3")
                .font(.system(size: 30, weight: .medium))
            Image(systemName: "speaker.wave.3")
                .font(.system(size: 30, weight: .semibold))
            Image(systemName: "speaker.wave.3")
                .font(.system(size: 30, weight: .bold))
            Image(systemName: "speaker.wave.3")
                .font(.system(size: 30, weight: .heavy))
            Image(systemName: "speaker.wave.3")
                .font(.system(size: 30, weight: .black))

        }
    }
}

output:

Using .imageScale() modifier

We can also use the .imageScale()modifier to set the size of an SF Symbol. This modifier provides some predefined scale factors which are large, medium, and small. We can apply them to make an SF symbol large, medium, or small.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Image(systemName: "speaker.wave.3")
                .imageScale(.small)
            Image(systemName: "speaker.wave.3")
                .imageScale(.medium)
            Image(systemName: "speaker.wave.3")
                .imageScale(.large)
        }
    }
}

Output:

Using the frame() modifier

We can use the .frame() modifier to set the size of an SF symbol. We can specify the width and height as the parameters of the frame modifier to set the size of an SF symbol.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image(systemName: "speaker.wave.3")
             .resizable()
             .scaledToFit()
             .frame(width: 200, height: 200)
    }
}

In the above program, I have used the  .resizable() modifier to make the image resizable to adjust its dimensions.

The .scaledToFit() is used to fit the SF symbol automatically within it’s available space.

Output: