Introduction

Adding an icon to a UITextField is usually done with the built-in leftView or rightView properties. The main implementation detail is not the image itself, but wrapping it in a container view so the field gets proper padding and the icon does not sit flush against the edge.

Use leftView for the Most Common Case

The standard pattern is to create an image view, place it inside a small container, and assign that container to leftView.

1import UIKit
2
3func makeTextField() -> UITextField {
4    let textField = UITextField(frame: CGRect(x: 20, y: 100, width: 280, height: 44))
5    textField.borderStyle = .roundedRect
6    textField.placeholder = "Search"
7
8    let icon = UIImageView(image: UIImage(systemName: "magnifyingglass"))
9    icon.tintColor = .secondaryLabel
10    icon.contentMode = .scaleAspectFit
11    icon.frame = CGRect(x: 12, y: 11, width: 20, height: 20)
12
13    let container = UIView(frame: CGRect(x: 0, y: 0, width: 40, height: 44))
14    container.addSubview(icon)
15
16    textField.leftView = container
17    textField.leftViewMode = .always
18    return textField
19}

The container provides padding, which is why this looks better than assigning the image view directly.

Use rightView for Clear Buttons or Status Icons

The same idea works on the right side.

1let warningIcon = UIImageView(image: UIImage(systemName: "exclamationmark.circle"))
2warningIcon.tintColor = .systemOrange
3warningIcon.frame = CGRect(x: 8, y: 11, width: 20, height: 20)
4
5let rightContainer = UIView(frame: CGRect(x: 0, y: 0, width: 36, height: 44))
6rightContainer.addSubview(warningIcon)
7
8textField.rightView = rightContainer
9textField.rightViewMode = .whileEditing

This is useful for validation indicators, password visibility buttons, and accessory actions.

Make the Icon Interactive Only If It Needs To Be

If the image is purely decorative, a plain image view is enough. If tapping it should trigger an action, use a button instead.

1let button = UIButton(type: .system)
2button.setImage(UIImage(systemName: "eye"), for: .normal)
3button.frame = CGRect(x: 0, y: 0, width: 36, height: 44)
4button.addTarget(self, action: #selector(togglePasswordVisibility), for: .touchUpInside)
5
6textField.rightView = button
7textField.rightViewMode = .always

That is cleaner than adding gesture recognizers to an image view when the icon is actually meant to behave like a control.

Keep Layout Consistent Across Fields

If several text fields use icons, extract the setup into a helper to keep padding and sizing consistent.

1func makeIconContainer(systemName: String, width: CGFloat = 40, height: CGFloat = 44) -> UIView {
2    let imageView = UIImageView(image: UIImage(systemName: systemName))
3    imageView.tintColor = .secondaryLabel
4    imageView.contentMode = .scaleAspectFit
5    imageView.frame = CGRect(x: 12, y: 11, width: 20, height: 20)
6
7    let container = UIView(frame: CGRect(x: 0, y: 0, width: width, height: height))
8    container.addSubview(imageView)
9    return container
10}

That makes the form feel intentional instead of slightly different on each field.

UIKit Versus SwiftUI

Even though the tag list mentions SwiftUI, this topic is really about UIKit's UITextField. In SwiftUI, you would typically build the effect differently, often by composing an HStack with an Image and a TextField, or by wrapping a UIKit text field in UIViewRepresentable if you need UIKit-specific behavior.

So the API answer here is specifically leftView and rightView on UITextField.

Common Pitfalls

The most common mistake is assigning an image view directly without a container and ending up with no padding.

Another common issue is forgetting to set leftViewMode or rightViewMode, which makes the icon never appear. Developers also often use a decorative image view when the icon should actually be a button, which makes the UI harder to interact with correctly.

Summary

• Use leftView or rightView to place icons inside a UITextField.
• Wrap the icon in a container view so the field has proper padding.
• Use leftViewMode or rightViewMode to control when the icon is visible.
• Use a button instead of an image view when the icon should be tappable.
• Extract common setup into helpers so multiple fields stay visually consistent.