Introduction

Scaling a button image in UIKit usually means controlling how the image fits inside the button’s content area, not manually resizing the internal imageView frame. UIButton manages that image view for you, so the reliable approach is to set the image, choose the right content mode, and size the button or image asset appropriately. If you fight the button’s internal layout directly, the result is usually fragile.

Start with the Right Image and Content Mode

For a normal raster image, set the image and make the embedded image view scale proportionally:

1import UIKit
2
3let button = UIButton(type: .system)
4button.setImage(UIImage(named: "icon-star"), for: .normal)
5button.frame = CGRect(x: 40, y: 80, width: 80, height: 80)
6button.imageView?.contentMode = .scaleAspectFit

scaleAspectFit is the safest default because it preserves the image’s aspect ratio. If the image should fill more of the available area and some cropping is acceptable, scaleAspectFill is another option. scaleToFill usually distorts icons and should be used deliberately.

Control the Space with Insets and Button Size

Often the real issue is not the image view itself, but how much room the image gets inside the button. contentEdgeInsets can create padding so the image appears scaled down within the button.

1import UIKit
2
3let button = UIButton(type: .system)
4button.setImage(UIImage(named: "icon-star"), for: .normal)
5button.frame = CGRect(x: 40, y: 80, width: 80, height: 80)
6button.imageView?.contentMode = .scaleAspectFit
7button.contentEdgeInsets = UIEdgeInsets(top: 12, left: 12, bottom: 12, right: 12)

The image has not changed size on disk. Instead, the button now gives it a smaller drawing area inside the same control bounds.

If Auto Layout is in use, size the button with constraints instead of setting a frame manually:

1button.translatesAutoresizingMaskIntoConstraints = false
2
3NSLayoutConstraint.activate([
4    button.widthAnchor.constraint(equalToConstant: 80),
5    button.heightAnchor.constraint(equalToConstant: 80)
6])

SF Symbols Have a Better Scaling Path

If you are using SF Symbols instead of bitmap assets, scale the symbol itself rather than treating it like a generic image.

1import UIKit
2
3let button = UIButton(type: .system)
4let config = UIImage.SymbolConfiguration(pointSize: 28, weight: .medium)
5let image = UIImage(systemName: "heart.fill", withConfiguration: config)
6
7button.setImage(image, for: .normal)
8button.tintColor = .systemRed

This gives a much cleaner result than stretching a symbol image manually because the symbol is rendered at the requested point size.

Avoid Setting the Internal Image View Frame

It is tempting to do something like this:

button.imageView?.frame = CGRect(x: 0, y: 0, width: 20, height: 20)

That usually does not hold up because UIButton recalculates its internal subview layout during state changes and layout passes. The button owns its image view. Your code should influence layout through supported APIs such as content mode, edge insets, constraints, and image selection.

Modern Configuration-Based Buttons

On newer UIKit codebases, UIButton.Configuration can make image sizing and spacing more predictable.

1import UIKit
2
3var config = UIButton.Configuration.plain()
4config.image = UIImage(systemName: "paperplane.fill")
5config.imagePadding = 8
6
7let button = UIButton(configuration: config)
8button.preferredSymbolConfigurationForImage = UIImage.SymbolConfiguration(pointSize: 24)

This approach is especially nice when the button also has text and you want the system to manage the relationship between image, title, and padding.

Common Pitfalls

One common mistake is manually resizing button.imageView?.frame. UIButton manages that subview and can overwrite your manual frame changes during layout.

Another mistake is using a tiny source asset and expecting scaling to invent detail. If the image itself is low quality, layout changes will not fix the visual result.

Developers also sometimes use scaleToFill without realizing it distorts the icon. For most UI assets, scaleAspectFit is the better default.

Finally, if the goal is simply to make the image appear smaller, padding and button sizing are usually more reliable than trying to micromanage the internal image view.

Summary

• Scale button images by controlling content mode, padding, and button size rather than editing the internal image view frame.
• 'scaleAspectFit is the safest default for most button icons.'
• Use contentEdgeInsets and Auto Layout constraints to control how much room the image gets.
• For SF Symbols, prefer symbol configurations over manual raster-style scaling.
• Let UIButton manage its internal layout and influence it through supported APIs.