How do I set a weight to SF Symbols for iOS 13?

Question

I have this

Image(systemName: "arrow.right")

But how do I make it bold, semibold etc?

I am using the new SwiftUI.

EmilioPelaez · Accepted Answer · 2020-11-09T20:49:41.117

172

When using the font modifier, set a weight to the font you're passing.

For example, if you want to use one of the default text styles (which I recommend, since they adapt to the user's Dynamic Type setting), you can do it like this:

Image(systemName: "arrow.right")
  .font(Font.title.weight(.ultraLight))

If you want to specify a font size, you can do it like this:

Image(systemName: "arrow.right")
  .font(Font.system(size: 60, weight: .ultraLight))

edited Nov 09 '20 at 20:49

answered Jun 09 '19 at 22:19

EmilioPelaez

18,758
6
46
50

I tried this, but this seems to change the size and not the weight (bold, light, semibold ect). Unless i misunderstood? – Just a coder Jun 09 '19 at 22:21
My bad, it was I who misunderstood. I've updated my answer. – EmilioPelaez Jun 09 '19 at 22:28
1

For default size this would be `Font.body.weight(.ultraLight)` (for example inside navigationBarItems) ([all font weights](https://developer.apple.com/documentation/swiftui/font/weight)) – Ti Hausmann Nov 09 '20 at 18:36

score 82 · Answer 2 · answered Sep 02 '19 at 17:51

82

For UIKit, symbols can be configured as follows:

UIImage(systemName: "arrow.right",
        withConfiguration: UIImage.SymbolConfiguration(pointSize: 16, weight: .bold))

answered Sep 02 '19 at 17:51

Hejazi

16,587
9
52
67

score 29 · Answer 3 · edited Jun 20 '20 at 09:12

29

SwiftUI 1.0

I just wanted to also mention how to change the weight along with a custom font size.

HStack(spacing: 40) {
    Image(systemName: "moon.zzz")
        .font(Font.system(size: 60, weight: .ultraLight))
    Image(systemName: "moon.zzz")
        .font(Font.system(size: 60, weight: .light))
    Image(systemName: "moon.zzz")
        .font(Font.system(size: 60, weight: .regular))
    Image(systemName: "moon.zzz")
        .font(Font.system(size: 60, weight: .bold))
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 05 '19 at 16:27

Mark Moeykens

15,915
6
63
62

1

This should be the accepted answer I think as the question is dealing with SwiftUI and it sets the `.system` font not the `.title` ← which could interfere with other styling. – tyirvine Oct 30 '20 at 02:00

score 27 · Answer 4 · answered Jul 10 '20 at 21:38

27

UIKit -- Swift 5 -- Xcode 11

If you only want to set the weight (so you don't mess up auto icon sizing), do this:

let configuration = UIImage.SymbolConfiguration(weight: .semibold)
UIImage(systemName: "trash", withConfiguration: configuration)

answered Jul 10 '20 at 21:38

Trev14

3,626
2
31
40

score 26 · Answer 5 · answered Nov 07 '20 at 11:53

26

You can also wrap the Image with Text. With that you can use and assign the fontWeight() to Text:

Text(Image(systemName: "xmark"))
    .fontWeight(.semibold)

answered Nov 07 '20 at 11:53

Florian Mielke

3,310
27
31

1

This is the best solution for SwiftUI as the font size doesn't have to be set. – G. Marc Dec 22 '21 at 14:51

score 15 · Answer 6 · edited Jun 20 '20 at 09:12

15

UIKit SWIFT 5.x

To set their attributes: create a configuration then pass it in as a parameter:

let imageConfig = UIImage.SymbolConfiguration(pointSize: 22, weight: .black, scale: .large)
let image = UIImage(systemName: "delete.right", withConfiguration: imageConfig)

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 28 '20 at 20:15

Gary Mansted

269
3
9

score 9 · Answer 7 · edited Jan 04 '23 at 07:29

9

For iOS 16.0, macOS 13.0, tvOS 16.0, watchOS 9.0, you can use fontWeight() directly on the Image().

Image(systemName: "chevron.right")
    .fontWeight(.semibold)

edited Jan 04 '23 at 07:29

Joannes

2,569
3
17
39

answered Nov 19 '22 at 08:03

sobri

1,626
15
28

3

Thank you! This is the best answer for iOS 16.0+ – marticztn Feb 14 '23 at 10:29

score 1 · Answer 8 · answered Aug 30 '22 at 20:45

Xcode 13.4, Swift 5.X

import UIKit
import SwiftUI


public extension Image {
    
    @available(iOS 13.0, *)
    static func buildSystemImage(named systemName: String, weightConfiguration: UIImage.SymbolWeight) -> Image? {
        guard let imageConfig = UIImage(systemName: systemName, withConfiguration: UIImage.SymbolConfiguration(weight: weightConfiguration)) else { return nil }
        return Image(uiImage: imageConfig)
    }
}

Usage:

if let systemImage = Image.buildSystemImage(named: "arrow.left", weightConfiguration: .semibold) {
    // Your code.                
}

How do I set a weight to SF Symbols for iOS 13?

8 Answers8

SwiftUI 1.0

UIKit -- Swift 5 -- Xcode 11