How to change SF Symbol icon color in UIKit?

Question

In SwiftUI, you can change the icon's color using foregroundColor modifier:
Change the stroke/fill color of SF Symbol icon in SwiftUI?

Is there a way to change the color in UIKit? I looked up the documentation and didn't find anything related to it.

let configuration = UIImage.SymbolConfiguration(pointSize: 16, weight: .regular, scale: .medium)
let iconImage = UIImage(systemName: "chevron.right", withConfiguration: configuration)

iOS 15 in 2021 has new multi-colored icons in SF Symbols 3: https://stackoverflow.com/questions/69304679/sf-symbols-hierarchical-palette-and-multicolor-rendering-mode-colors — pkamb, Sep 28 '21 at 23:13

score 80 · Answer 1 · edited Mar 15 '23 at 21:32

80

Use below code for changing SFSymbols icons color

let imageIcon = UIImage(systemName: "heart.fill")?.withTintColor(.red, renderingMode: .alwaysOriginal)
imageView.image = imageIcon

Before

After

edited Mar 15 '23 at 21:32

pkamb

33,281
23
160
191

answered Apr 22 '20 at 17:32

ShigaSuresh

1,598
17
19

score 45 · Accepted Answer · answered Oct 06 '19 at 10:13

45

Use:

let icon = UIImageView(image: iconImage.withRenderingMode(.alwaysTemplate))
icon.tintColor = .red

answered Oct 06 '19 at 10:13

Yonat

4,382
2
28
37

4

If you use a UIButton, template the image as above, then set the button tint color. – David H Nov 19 '19 at 21:43
2

it used it without the second line but .image on "icon" , then I as usual in SwiftUI do `.foregroundColor(.red)` :) – LetsGoBrandon Feb 07 '20 at 14:51

score 10 · Answer 3 · answered Feb 12 '20 at 21:23

10

let iconImage = UIImage(systemName: "chevron.right",
                                            withConfiguration: UIImage.SymbolConfiguration(pointSize: 16, weight: .regular, scale: .medium))?.withTintColor(.systemGreen)

answered Feb 12 '20 at 21:23

Nikolay Ukolov

111
1
3

11

Please add some sort of comment instead of just code. – Erion S Feb 12 '20 at 21:27

score 9 · Answer 4 · answered Oct 22 '20 at 17:31

9

muteCall.setImage(UIImage(systemName: "mic.slash")?.withTintColor(.white, renderingMode: .alwaysOriginal), for: .normal)

Set rendering to always original

answered Oct 22 '20 at 17:31

qwaswsa

175
1
8

2

Seems this is replicating the solution from the most upvoted answer - https://stackoverflow.com/a/61371425/1974224 – Cristik Sep 26 '21 at 05:54

Евгений Коузов · Answer 5 · 2021-04-23T05:51:05.693

7

let image = UIImage(systemName: "arrow.up.circle.fill")?.withTintColor(.black, renderingMode: .alwaysOriginal)
button.setImage(image, for: .normal)

edited Apr 23 '21 at 05:51

answered Apr 23 '21 at 05:44

Евгений Коузов

319
3
7

3

Seems this is replicating the solution from the most upvoted answer - https://stackoverflow.com/a/61371425/1974224 – Cristik Sep 26 '21 at 05:54

score 5 · Answer 6 · answered Feb 18 '23 at 07:05

A small addition. I'm glad if it's of any help to anyone. We can combine not only different colours, but also different sizes and weight. For example you can do this:

let colorsConfig = UIImage.SymbolConfiguration(paletteColors: [.white, .magenta])
let sizeConfig = UIImage.SymbolConfiguration(pointSize: 30, weight: .bold)
let image = UIImage(systemName: "plus.circle.fill", withConfiguration: colorsConfig.applying(sizeConfig))
button.setImage(image, for: .normal)

score 2 · Answer 7 · answered Sep 23 '21 at 18:49

2

@IBOutlet weak var downButton: UIButton!
downButton.setImage(UIImage(systemName: "chevron.down")?.withTintColor(.red, renderingMode: .alwaysOriginal), for: .normal)

answered Sep 23 '21 at 18:49

Dayanithi Natarajan

833
12
21

Can you add details about how the proposed code addresses the problem? Code-only answers are not very helpful, neither for the asker, nor others. – Cristik Sep 25 '21 at 17:00
This answer was flagged as [Low Quality](https://stackoverflow.com/help/review-low-quality) and could benefit from an explanation. Here are some guidelines for [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). Code only answers are **not considered good answers** and are likely to be downvoted and/or deleted because they are **less useful** to a community of learners. It's only obvious to you. Explain what it does, and how it's different / better than existing answers (if there are any). [From Review](https://stackoverflow.com/review/low-quality-posts/29904629) – Trenton McKinney Sep 25 '21 at 22:28
2

Also, seems this is replicating the solution from the most upvoted answer - https://stackoverflow.com/a/61371425/1974224 – Cristik Sep 26 '21 at 05:54

How to change SF Symbol icon color in UIKit?

7 Answers7