Introduction

Getting a UIButton to show a leading image while keeping the title visually centered is trickier than it first appears. The default button layout treats the image and title as one combined content block, so if you need independent positioning, you usually have to customize layout instead of relying on one alignment property.

Why the Default Layout Is Not Enough

With a stock button, setting contentHorizontalAlignment = .left moves both the image and the title left together. That does not keep the title centered across the button.

If you truly want the image anchored near the leading edge and the title centered within the remaining visual space, you need to control the subview frames or use carefully chosen insets.

A Custom Button Subclass

A simple subclass gives predictable behavior.

1import UIKit
2
3final class LeftImageCenteredTitleButton: UIButton {
4    private let imageSize: CGFloat = 20
5    private let leadingPadding: CGFloat = 12
6    private let spacing: CGFloat = 8
7
8    override func layoutSubviews() {
9        super.layoutSubviews()
10
11        guard let imageView = imageView, let titleLabel = titleLabel else {
12            return
13        }
14
15        let imageY = (bounds.height - imageSize) / 2
16        imageView.frame = CGRect(x: leadingPadding,
17                                 y: imageY,
18                                 width: imageSize,
19                                 height: imageSize)
20
21        let titleX = leadingPadding + imageSize + spacing
22        titleLabel.frame = CGRect(x: titleX,
23                                  y: 0,
24                                  width: bounds.width - titleX - leadingPadding,
25                                  height: bounds.height)
26        titleLabel.textAlignment = .center
27    }
28}

This keeps the image near the left edge while centering the title inside the remaining horizontal space.

Using the Custom Button

1let button = LeftImageCenteredTitleButton(type: .system)
2button.setImage(UIImage(systemName: "star.fill"), for: .normal)
3button.setTitle("Favorites", for: .normal)
4button.backgroundColor = .systemBlue
5button.tintColor = .white
6button.setTitleColor(.white, for: .normal)

Because the layout is explicit, the behavior stays stable across different title lengths and image sizes as long as the padding values make sense for the design.

When Insets Are Enough

If the requirement is less strict and you only want the content to appear more balanced, you can sometimes get away with content and edge insets. That is a lighter solution, but it is harder to make truly centered text survive dynamic type, localization, and image-size changes.

For simple fixed-width buttons, insets may be acceptable. For reusable components, custom layout is usually more reliable.

Things to Watch in Real Apps

Buttons with localized titles, right-to-left languages, or large content-size categories need extra testing. A hard-coded layout that looks correct in one language can clip or drift in another.

That does not mean the custom approach is wrong. It means the layout values should be treated as part of the component design and tested under realistic UI conditions.

Interface Builder Versus Code

If the button is created in Interface Builder, keep the visual styling there if you want, but put the layout logic in code so it stays deterministic. Alignment rules that depend on image width, title length, and padding are much easier to maintain when they live in one custom subclass instead of being split across storyboard tweaks and runtime adjustments.

Common Pitfalls

• Using contentHorizontalAlignment = .left and expecting the title to stay centered independently of the image.
• Relying only on edge insets for a layout that really requires custom positioning logic.
• Forgetting to test longer localized titles and larger accessibility text sizes.
• Positioning the title across the full button width and letting it overlap the image.
• Assuming UIButton's default content layout is designed for independently aligned image and text.

Summary

• A default UIButton treats image and title as one content block.
• For a true left-image, centered-title layout, custom positioning is usually the cleanest solution.
• A subclass with layoutSubviews() gives predictable control.
• Insets can work for simpler fixed designs, but they are less robust.
• Test the button with localization and dynamic type before treating the layout as finished.