128

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

5 Answers 5

204

SF Symbols are similar to fonts, thus:

.font(.system(size: 60))
4
  • 28
    Interesting. Very counter-intuitive since SF Symbols are used inside Image
    – Zain
    Aug 5, 2019 at 15:50
  • 2
    Not really, especially when you think about web dev and font awesomes
    – Bartosz
    Nov 24, 2019 at 3:07
  • 7
    @Zain I agree with. Not just counter intuitive but weird
    – visc
    May 13, 2020 at 17:29
  • 3
    The top answer should include the tip from @mathias-bak about being able to use .imageScale(Image.Scale).
    – richkzad
    Mar 19, 2021 at 16:10
100

An alternative is to use .imageScale().

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

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))
0
30

If you want to use frame you can as well:

Image(systemName: "plus")
     .resizable()
     .scaledToFit()
     .frame(width: 24, height: 24)
1
  • 3
    This actually sets the exact size, unlike font approach. Good.
    – kelin
    Mar 20 at 21:27
4

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()
    }
}

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.