Button with symbol SF design like Apple

Hello everyone, I'm working on a fun project for my teacher and want to give my software an Apple-inspired look. Specifically, I'm trying to create image buttons similar to Apple's design (as shown in the image).

I need a button with an image that darkens its background when the user hovers over it with the mouse. Any suggestions on how to achieve this effect would be greatly appreciated.

For now, I have this code :

import SwiftUI

struct StudentRow: View {
    @Environment(\.modelContext) private var modelContext
    var student: Student
    @State private var isHover = false

    var body: some View {
        HStack {
            Text(student.name)
            Image(systemName: "xmark")
                .opacity(isHover ? 0.9 : 0.1)
                .bold()
                .onTapGesture {
                    deleteStudent(student, modelContext: modelContext)
                }
                .onHover { hovering in
                    isHover = hovering
                }
        }
        .padding()
    }
}

However, I'm not entirely satisfied with the outcome of this code.

(Trust me, the outcome is the same when using the magnifying glass icon)

plz help

I'm not entirely satisfied with the outcome of this code.

What is not satisfying ? What do you get ? What do you expect exactly ?

Why don't you apply the opacity to the background of the icon ?

Note that if you could not publish such an app on the AppStore if you copy an Apple icon.

Button with symbol SF design like Apple
 
 
Q