Search code examples
iosswiftuiwidgetwidgetkitsf-symbols

SF Symbols lost color in iOS 15 widget

Multicolor SF symbols are black in iOS 15 widget. (have a look at the attached pictures 14.5 vs 15.0)

this is how it looks in the code:

Image(uiImage: UIImage(systemName: getIconName(iconId: iconId))!)
    .resizable()
    .scaledToFit()
    .frame(width: 20)

Playing around with .renderingMode() doesn't help. I've tried all posible params, but no luck. Only when I set it to .template and set some color, but I need it to be as it was - multicolor.

(It happens on both - iPhone and simulator (tested with beta iOS and beta XCode), I also tried to use new SF symbols, or apply new function available in iOS 15 .symbolRenderingMode() but nothing helped).

iOS 14:

before

iOS 15:

after

Solution

  • iOS 15+

    The name of some of the symbols has been changed. Ensure that you use the correct name.

    You need to use .symbolRenderingMode(.palette) and set the color of each of its layers explicitly using .foregroundStyle() view modifier

             Image(systemName: "cloud.sun.fill")
                .symbolRenderingMode(.palette)
                .foregroundStyle(.black, .yellow)

    🎁

    Use

    Image(systemName:getIconName(iconId: iconId))

    instead of

    Image(uiImage: UIImage(systemName: getIconName(iconId: iconId))!)