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?

score 195 · Accepted Answer · answered Aug 03 '19 at 21:20

195

SF Symbols are similar to fonts, thus:

.font(.system(size: 60))

answered Aug 03 '19 at 21:20

Ryan

10,798
11
46
60

27

Interesting. Very counter-intuitive since SF Symbols are used inside `Image` – Zain Aug 05 '19 at 15:50
2

Not really, especially when you think about web dev and font awesomes – Bartosz Nov 24 '19 at 03:07
7

@Zain I agree with. Not just counter intuitive but weird – visc May 13 '20 at 17:29
2

The top answer should include the tip from @mathias-bak about being able to use `.imageScale(Image.Scale)`. – richkzad Mar 19 '21 at 16:10

Mathias Bak · Answer 2 · 2020-12-12T20:16:08.617

93

An alternative is to use .imageScale().

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

edited Dec 12 '20 at 20:16

answered Jun 04 '20 at 15:09

Mathias Bak

4,687
4
32
42

1

These seems to be the recommended way to apply scaling. See https://developer.apple.com/videos/play/wwdc2020/10207/ – Ryan R Mar 21 '21 at 02:53

score 78 · Answer 3 · answered Nov 15 '19 at 04:00

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

score 26 · Answer 4 · answered Feb 23 '22 at 13:46

26

If you want to use frame you can as well:

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

answered Feb 23 '22 at 13:46

Tob

627
6
9

2

This actually sets the exact size, unlike font approach. Good. – kelin Mar 20 '23 at 21:27

score 3 · Answer 5 · answered Aug 02 '22 at 09:44

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

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

5 Answers5

Linked