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