Change color of SF Symbols icons

Question

I have a MenuModel struc used to have a list of icons into a table as a menu:

 var menu: [MenuModel] = [SideMenuModel(icon: (UIImage(systemName: "house.fill")?.withTintColor(.systemRed))!, title: "Home"),...]

Menu appears but icons still white. I am unable to change colors using the .withTintColor option.

I have also try using it directly on func tableView(_ tableView: UITableView, cellForRowAt by:

self.menu[6].icon.withTintColor(.systemRed)

without success.

You need to show us what you're trying to do... This line: `let greenImage = UIImage(systemName: "lock.icloud")?.withTintColor(.systemGreen)` gives me green tinted image - https://i.stack.imgur.com/6I2jN.png - (of course, you'd want to unwrap the optional). What is `self.menu[7].icon`? — DonMag, Dec 05 '22 at 17:14
So... `self.menu[7].icon` is a `UIImage`? And when you set it, it gets used as the `.image` property of a `UIImageView`? Does the line I posted in my comment work for you now? — DonMag, Dec 08 '22 at 20:00
icon is a UIImage, and used as you can see on my code, it not works — doxsi, Dec 08 '22 at 20:41

score 0 · Answer 1 · answered Dec 08 '22 at 21:03

You can set the image color in a few different ways...

Two options:

if let img = UIImage(systemName: "lock.icloud")?.withTintColor(.systemRed, renderingMode: .alwaysOriginal) {
    imgView.image = img
}

or:

if let img = UIImage(systemName: "lock.icloud") {
    imgView.image = img
}
imgView.tintColor = .systemRed

Here is some example code... using the first method to create a Red image, and the second method to create a Green image:

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let imgViewA = UIImageView()
        let imgViewB = UIImageView()

        if let img = UIImage(systemName: "lock.icloud")?.withTintColor(.systemRed, renderingMode: .alwaysOriginal) {
            imgViewA.image = img
        }
        
        if let img = UIImage(systemName: "lock.icloud") {
            imgViewB.image = img
        }
        imgViewB.tintColor = .systemGreen

        imgViewA.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(imgViewA)
        imgViewB.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(imgViewB)

        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([

            imgViewA.topAnchor.constraint(equalTo: g.topAnchor, constant: 80.0),
            imgViewA.centerXAnchor.constraint(equalTo: g.centerXAnchor, constant: 0.0),
            imgViewA.heightAnchor.constraint(equalToConstant: 80.0),
            imgViewA.widthAnchor.constraint(equalTo: imgViewA.heightAnchor),
            
            imgViewB.topAnchor.constraint(equalTo: imgViewA.bottomAnchor, constant: 20.0),
            imgViewB.centerXAnchor.constraint(equalTo: g.centerXAnchor, constant: 0.0),
            imgViewB.heightAnchor.constraint(equalToConstant: 80.0),
            imgViewB.widthAnchor.constraint(equalTo: imgViewB.heightAnchor),
            
        ])
        
    }
    
}

Result:

Change color of SF Symbols icons

1 Answers1