How do I set the size of a SF Symbol in Xcode 11 using SwiftUI?
5 Answers
SF Symbols are similar to fonts, thus:
.font(.system(size: 60))
-
28Interesting. Very counter-intuitive since SF Symbols are used inside
Image
– ZainAug 5, 2019 at 15:50 -
2Not really, especially when you think about web dev and font awesomes– BartoszNov 24, 2019 at 3:07
-
7
-
3The top answer should include the tip from @mathias-bak about being able to use
.imageScale(Image.Scale)
.– richkzadMar 19, 2021 at 16:10
An alternative is to use .imageScale()
.
Image(systemName: "chevron.left").imageScale(.small)
Image(systemName: "chevron.left").imageScale(.medium)
Image(systemName: "chevron.left").imageScale(.large)
-
1These seems to be the recommended way to apply scaling. See developer.apple.com/videos/play/wwdc2020/10207– Ryan RMar 21, 2021 at 2:53
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))
If you want to use frame you can as well:
Image(systemName: "plus")
.resizable()
.scaledToFit()
.frame(width: 24, height: 24)
-
3
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()
}
}