Search code examples
swiftsf-symbols

Swift SF Symbol Background Color


enter image description here

I want to set the background image of the "atom" symbol to white with opacity and put the in the centre of the circle.

Currently I have two separate snippets of code and can't workout how to set the background colour of the symbol or put an image inside a Circle().

Image(systemName: "atom")
      .cornerRadius(25)
      .accentColor(.white.opacity(0.25))
      .frame(width: 50, height: 50)
Circle()
    .fill(.white.opacity(0.25))
    .frame(width: 50, height: 50)

Solution

  • I don't know why you need to put a white Image within a white Circle. It will not be visible at all. However, you can try this .overlay approach:

    Circle()
        .fill(.white.opacity(0.25))
        .frame(width: 50, height: 50)
        .overlay {
            Image(systemName: "atom")
                .resizable() //<- here to make .frame works
                .foregroundColor(.white) //<- here to change `atom` tintColor
                .frame(width: 50, height: 50)
        }
    

    Output

    enter image description here