How do I set the size of a SF Symbol in SwiftUI?

Question

How do I set the size of a SF Symbol in Xcode 11 using SwiftUI?

Teresitateressa

Answer 1

SF Symbols are similar to fonts, thus:

.font(.system(size: 60))

Teresitateressa

Interesting. Very counter-intuitive since SF Symbols are used inside Image – Slack

Not really, especially when you think about web dev and font awesomes – Yesseniayester

@Slack I agree with. Not just counter intuitive but weird – Cardoso

The top answer should include the tip from @mathias-bak about being able to use .imageScale(Image.Scale). – Symbolize

Answer 2

An alternative is to use .imageScale().

Image(systemName: "chevron.left").imageScale(.small)
Image(systemName: "chevron.left").imageScale(.medium)
Image(systemName: "chevron.left").imageScale(.large)

Vansickle

These seems to be the recommended way to apply scaling. See developer.apple.com/videos/play/wwdc2020/10207 – Tryma

Answer 3

You can set weights and sizes:

Image(systemName: "checkmark.circle")
    .font(.system(size: 16, weight: .ultraLight))
Image(systemName: "checkmark.circle")
    .font(.system(size: 16, weight: .thin))
Image(systemName: "checkmark.circle")
    .font(.system(size: 16, weight: .light))
Image(systemName: "checkmark.circle")
    .font(.system(size: 16, weight: .regular))
Image(systemName: "checkmark.circle")
    .font(.system(size: 16, weight: .medium))
Image(systemName: "checkmark.circle")
    .font(.system(size: 16, weight: .semibold))
Image(systemName: "checkmark.circle")
    .font(.system(size: 16, weight: .bold))
Image(systemName: "checkmark.circle")
    .font(.system(size: 16, weight: .heavy))
Image(systemName: "checkmark.circle")
    .font(.system(size: 16, weight: .black))

Certainly

Answer 4

If you want to use frame you can as well:

Image(systemName: "plus")
     .resizable()
     .scaledToFit()
     .frame(width: 24, height: 24)

Yablon

This actually sets the exact size, unlike font approach. Good. – Garlicky

Answer 5

Since iconographic SF Symbols are deeply integrated into the San Francisco system font (at the moment, we have 4000+ of them), they can be edited using vector graphics tools and can be manipulated habitual way.

var body: some View {
    
    Image(systemName: "swift").imageScale(.large)
    
    HStack {
        // Spacer()            
        Label("Swift", systemImage: "swift").scaleEffect(2)       
        // Spacer()
        Text("Swift \(Image(systemName: "swift"))").font(.largeTitle) 
        // Spacer()
    }
}

Mme