Use icon inside a Button in SwiftUI from SF Symbols

I am sure that you have noticed an icon inside a button while using some apps. In the image below you can see the button with a user icon:

You can notice the user icon () from the SF Symbol in the button above. You may wonder how I am able to add this icon inside the button just before the button text label. By adding an icon, you can make it feel better and also give it a professional look. Adding a meaningful icon to the button is also user-friendly that can help to improve the user experience.

Well, it’s simple. We just passed the SF symbol for the icon to the systemImage property. Below is given the code:

        Button {
            // Some code
        } label: {
            Label("User login", systemImage: "person.fill")
        }.padding().background(.green).foregroundColor(.white)
          

That’s it. We have successfully added an icon inside the button before the button text.

As you can see, in the button label view, we set the label title property and after that, we provide person.fill to the systemImage property. Here person.fill is the icon from SF Symbols:

Label("User login", systemImage: "person.fill")

We have added the padding, background and foregroundColor modifier to give it a professional look and make it feel better.

By Faruque Ahamed Mollick