How do I set the size of a SF Symbol in Xcode 11 using SwiftUI?
Add a comment |
5 Answers
SF Symbols are similar to fonts, thus:
.font(.system(size: 60)) 4 Comments
Zain
Interesting. Very counter-intuitive since SF Symbols are used inside
Image
Bartosz
Not really, especially when you think about web dev and font awesomes
richkzad
The top answer should include the tip from @mathias-bak about being able to use
.imageScale(Image.Scale).
skg
It's counter-intuitive for people that don't need precision.
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 Comment
Ryan R
These seems to be the recommended way to apply scaling. See developer.apple.com/videos/play/wwdc2020/10207
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)) 
Comments
If you want to use frame you can as well:
Image(systemName: "plus") .resizable() .scaledToFit() .frame(width: 24, height: 24) 
2 Comments
kelin
This actually sets the exact size, unlike font approach. Good.
Radu Ursache
this is the way to force all symbols have the same size
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() } } 
