How to add an icon into a text field in SwitUI

TextField inside of a Form

We can simply use HStack and put the components inside.

Form {
 Section {
    HStack {
      Image(systemName: "person.circle")
      TextField("", text: $nickname)
    }
  } header:  {
    Text("YOUR BUDDY'S NAME")
  } footer: {
    Text("Your workout buddy must have an account and a nickname provided on their app profile.")
  }
}

Plain TextField

We can use HStack, put the image and text field into it. Then we can draw a border around it, so it looks like a text field, indicating that user can tap on it and enter the value.

HStack(alignment: .top) {
  Image(systemName: "person.circle")
    .resizable()
    .frame(width: 24, height: 24)
  TextField("", text: $value)
}
.padding()
.overlay(
  RoundedRectangle(cornerRadius: 8)
    .stroke(Color.gray, lineWidth: 1)
)
.padding()

References & Materials

• https://developer.apple.com/documentation/uikit/uitextfield
• https://sarunw.com/posts/textfield-in-swiftui/
• https://stackoverflow.com/questions/57383811/swiftui-add-image-to-left-side-of-text-field
• https://jainrishu111.medium.com/textfield-in-swiftui-869a6f44aa63