Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SF Symbols Multicolored icons

Im making an app with weather icons, and i wanted to use apple's SF Symbols! At WWDC2020 they released multicolred ones.

So my question is, why are my icons appearing in black like so:

enter image description here

I have set the rendering mode to alwaysOriginal. And it does nothing. If i set it to template it becomes blue, like the default tint color.

currentConditionImageView.image = UIImage(systemName: "cloud.sun.fill")!.withRenderingMode(.alwaysOriginal)

But according to the SF Symbols app, the symbol should look like this:

enter image description here

Has anyone encountered this Problem, and how did you solve it? Im looking forward to your answers!

like image 884
Elliot Czigány Avatar asked Sep 19 '25 09:09

Elliot Czigány


1 Answers

The rule is:

In a template environment, such as a button, if you apply the .alwaysOriginal rendering mode to a multicolor symbol image, its inherent colors will appear.

But an image view is not a template environment. Try making this image the image (not the background image) of a UIButton.

enter image description here

If you put a multicolored image in a non-template environment, like an image view, you are basically misusing it if you make it .alwaysOriginal. You should just make it .alwaysTemplate and accept it as a monochrome image adopting the tint color.

enter image description here

like image 110
matt Avatar answered Sep 21 '25 22:09

matt