How to adjust an UIButton's imageSize?

Question

How can I adjust the image size of the UIButton? I am setting the image like this:

[myLikesButton setImage:[UIImage imageNamed:@"icon-heart.png"] forState:UIControlStateNormal];

However this fills up the image to the full button, how do I make the image smaller?

Historic note:

For this now 10+ yr old question, you now typically just set the point size using setPreferredSymbolConfiguration

@CodaFi is right, you should generally provide assets at the right size as it reduces any work for the CPU, uses less memory and will most likely look better as you do not potentially introduce any scaling artefacts... — Paul.s, May 14 '12 at 01:53
Also you can make the button to the size of image (or vice-versa).Why have have a big button ...with a small image in it.Simply add the image you want , that's what custom buttons are for or you can explain the logic you want to implement for others to have a clear idea. — Abhishek Singh, May 14 '12 at 02:27

score 276 · Accepted Answer · edited Jan 25 '21 at 12:15

276

If I understand correctly what you're trying to do, you need to play with the buttons image edge inset. Something like:

myLikesButton.imageEdgeInsets = UIEdgeInsets(top: 30, left: 30, bottom: 30, right: 30)

edited Jan 25 '21 at 12:15

liudasbar

173
4
11

answered May 14 '12 at 01:49

Tim C

2,920
1
15
4

1

just fyi, it will not change the real width of an uibutton's imageview, so, it will not make fix problem with buttons where you need title and image – Zaporozhchenko Oleksandr Jul 29 '21 at 09:22
10

This method is deprecated in iOS 15. Refer https://stackoverflow.com/questions/68328038/imageedgeinsets-was-deprecated-in-ios-15-0 – Bhanuka Manesha Sep 25 '21 at 23:50
imagePadding is the padding beside the image and the button text, totally unrelated. – Pedro Paulo Amorim May 18 '23 at 14:44
Also it's slightly deprecated, read the documentation. It says "This property is ignored when using UIButtonConfiguration". – Pedro Paulo Amorim May 18 '23 at 14:46

score 120 · Answer 2 · edited May 23 '17 at 12:18

120

Tim's answer is correct, however I wanted to add another suggestion, because in my case there was a simpler solution altogether.

I was looking to set the UIButton image insets because I didn't realize that I could set the content mode on the button's UIImageView, which would have prevented the need to use UIEdgeInsets and hard-coded values altogether. Simply access the underlying imageview on the button and set the content mode:

myButton.imageView.contentMode = UIViewContentModeScaleAspectFit;

See UIButton doesn't listen to content mode setting?

Swift 3

myButton.imageView?.contentMode = .scaleAspectFit

edited May 23 '17 at 12:18

Community

1
1

answered Nov 21 '14 at 19:57

Kyle Clegg

38,547
26
130
141

1

how to do same for backgroundImage? – Sergey Sahakyan Sep 22 '16 at 19:40
@Andrea.Ferrando `button.backgroundImageView.contentMode` doesn't work – Seong Lee Nov 12 '17 at 11:32
1

Save yourself some time and make sure you are setting image not background image! @SeongLee is correct you can't manipulate background image with contentMode or EdgeInserts – redPanda Aug 15 '19 at 12:07
1

This doesn't work for me – Xys Jun 21 '22 at 13:30

score 97 · Answer 3 · edited Jul 05 '23 at 23:55

97

Swift :

button.setImage(UIImage(named: "checkmark_white"), for: .normal)
button.contentVerticalAlignment = .fill
button.contentHorizontalAlignment = .fill
button.imageEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

edited Jul 05 '23 at 23:55

stackich

3,607
3
17
41

answered May 05 '17 at 18:39

Josh O'Connor

4,694
7
54
98

11

This worked beautifully for me. I created a PDF icon within Inkscape and the `contentVerticalAlignment/contentHorizontalAlignment` options got enabled me to scale it the way I was hoping to. Thank you for posting this. – Adrian May 08 '18 at 15:36
5

setting `contentHorizontalAlignment` and `contentVerticalAlignment` did the trick – Tom Knapen Nov 14 '18 at 13:20
2

This solution works great when using PDF assets for icons. Thank you! – Eneko Alonso Jun 16 '20 at 20:42
contentVerticalAlignment and contentHorizontalAlignment did work to me, whose UIImageView was too small in UIButton. – KoreanXcodeWorker Jan 05 '21 at 14:27
...thus also working perfectly fine for System Icons / SF Symbols – thanks! – emmics Feb 02 '21 at 07:12

ovo · Answer 4 · 2020-12-03T01:08:32.353

63

Here is the other solution to scale an imageView of UIButton.

button.imageView?.layer.transform = CATransform3DMakeScale(0.8, 0.8, 0.8)

edited Dec 03 '20 at 01:08

answered Jul 16 '19 at 07:38

ovo

1,904
13
26

7

You saved my day. I just wanted to scale my image inside a button. No insets no nothing, thanks! – Pedro Antonio Jun 23 '20 at 18:14
Manually setting image insets caused problems when sizing my button/text. This solution worked best dynamically. – Andrew Feb 16 '21 at 22:08
1

Thank you very very much. I think this is a best answer. – Dmitriy Grachev Sep 23 '21 at 13:11
1

Oh my, that really helped! I tried all the solutions above this one. Thank you! – Tristan Newman Nov 24 '21 at 15:48
Its working, explain how exactly CATransform3DMakeScale works.. – Tamil Arasu Apr 25 '22 at 07:40
Genius! Simplest and easiest solution ever! – Thet Htun Oct 07 '22 at 03:37

score 48 · Answer 5 · answered Nov 14 '16 at 10:05

48

You can also do that from inteface builder like this.

I think it's helpful.

answered Nov 14 '16 at 10:05

Milos Mandic

1,046
2
13
19

score 45 · Answer 6 · edited Dec 10 '18 at 21:35

45

If your image is too large (and you can't/don't want to just made the image smaller), a combination of the first two answers works great.

addButton.imageView?.contentMode = .scaleAspectFit
addButton.imageEdgeInsets = UIEdgeInsetsMake(15.0, 15.0, 15.0, 5.0)

Unless you get the image insets just right, the image will be skewed without changing the contentMode.

edited Dec 10 '18 at 21:35

Forge

6,538
6
44
64

answered Feb 07 '17 at 19:16

iosjillian

2,118
1
14
8

.imageEdgeInsets is deprecated. UIButton.Configuration should be used. – maxmitz Jan 02 '23 at 13:06

score 24 · Answer 7 · answered Aug 16 '13 at 19:18

you can use imageEdgeInsets property The inset or outset margins for the rectangle around the button’s image.

 [self.btn setImageEdgeInsets:UIEdgeInsetsMake(6, 6, 6, 6)];

A positive value shrinks, or insets, that edge—moving. A negative value expands, or outsets, that edge.

score 16 · Answer 8 · answered Nov 07 '15 at 08:25

16

Heres the Swift version:

myButton.imageEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

answered Nov 07 '15 at 08:25

Esqarrouth

38,543
21
161
168

just fyi, it will not change the real width of an uibutton's imageview, so, it will not make fix problem with buttons where you need title and image – Zaporozhchenko Oleksandr Jul 29 '21 at 09:20

score 11 · Answer 9 · answered Oct 13 '21 at 11:13

11

If you are using symbolic images for the button, then this solution is better:

button.setPreferredSymbolConfiguration(UIImage.SymbolConfiguration(pointSize: 48), forImageIn: .normal)

answered Oct 13 '21 at 11:13

Alexander Volkov

7,904
1
47
44

iOS 15, XCode 14.2 this worked great! – Jevon718 Jan 09 '23 at 20:17
Awesome thx! iOS 16 Xcode 14.2 – devjme Mar 15 '23 at 22:14

score 11 · Answer 10 · answered Dec 02 '21 at 16:19

11

Insetting the image works for me, but I also needed the button Type to be Custom and the button Style to be Default. The defaults for a button added in Xcode 13 are System for Type and Plain for Style.

self.imageEdgeInsets = UIEdgeInsets(top: 3.0, left: 3.0, bottom: 3.0, right: 3.0)

answered Dec 02 '21 at 16:19

trishcode

3,299
1
18
25

1

That work perfect ... – Ucdemir Mar 15 '22 at 12:44
It's rather tricky to set the TYPE and STYLE ***in code***. Refer to https://stackoverflow.com/q/72913591/294884 – Fattie Sep 15 '22 at 17:15

score 9 · Answer 11 · answered Mar 13 '18 at 17:51

9

Swift 4

You would need to use these two lines of code, in this specific order. All you need is to change the top and bottom value of the edge insets.

addButton.imageView?.contentMode = .scaleAspectFit
addButton.imageEdgeInsets = UIEdgeInsetsMake(10.0, 0.0, 10.0, 0.0)

answered Mar 13 '18 at 17:51

Van Du Tran

6,736
11
45
55

These caused an `EXC_BAD_ACCESS` error when called from `override func layoutSubviews()`. – Andrew Kirna May 18 '19 at 21:26

score 7 · Answer 12 · edited May 23 '17 at 12:34

With the help of Tim C's answer, I was able to create an extension on UIButton using Swift that allows you to specify the image frame by using the .setImage() function with an extra frame parameter

extension UIButton{

    func setImage(image: UIImage?, inFrame frame: CGRect?, forState state: UIControlState){
        self.setImage(image, forState: state)

        if let frame = frame{
            self.imageEdgeInsets = UIEdgeInsets(
                top: frame.minY - self.frame.minY,
                left: frame.minX - self.frame.minX,
                bottom: self.frame.maxY - frame.maxY,
                right: self.frame.maxX - frame.maxX
            )
        }
    }

}

Using this, if you wanted to set the frame of a UIButton to CGRectMake(0, 0, 64, 64), and set the image of it to myImage with a frame of CGRectMake(8, 8, 48, 48), you could use

let button: UIButton = UIButton(frame: CGRectMake(0, 0, 64, 64))
button.setImage(
    myImage,
    inFrame: CGRectMake(8, 8, 48, 48),
    forState: UIControlState.Normal
)

You should `if let` instead of checking if `frame` is `nil` and then [force unwrapping a zillion times](https://i.imgflip.com/utfq7.jpg). — fpg1503, Apr 07 '16 at 19:49

Borys T · Answer 13 · 2018-05-04T23:03:09.503

When changing icon size with UIEdgeInsetsMake(top, left, bottom, right), keep in mind button dimensions and the ability of UIEdgeInsetsMake to work with negative values as if they are positive.

Example: Two buttons with height 100 and aspect 1:1.

left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)
right.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)

left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)
right.imageEdgeInsets = UIEdgeInsetsMake(45, 0, 45, 0)

left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)
right.imageEdgeInsets = UIEdgeInsetsMake(60, 0, 60, 0)

Examples 1 and 3 are identical since ABS(100 - (40 + 40)) = ABS(100 - (60 + 60))

skantus · Answer 14 · 2020-03-08T08:05:26.213

5

Updated for Swift > 5

set the size:

button.frame = CGRect(x: 0, y: 0, width: 44, height: 44)

set margins:

button.imageEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

edited Mar 08 '20 at 08:05

answered Mar 08 '20 at 07:55

skantus

943
10
21

Crashalot · Answer 15 · 2018-03-27T19:57:00.607

One approach is to resize the UIImage in code like the following. Note: this code only scales by height, but you can easily adjust the function to scale by width as well.

let targetHeight = CGFloat(28)
let newImage = resizeImage(image: UIImage(named: "Image.png")!, targetHeight: targetHeight)
button.setImage(newImage, for: .normal)

fileprivate func resizeImage(image: UIImage, targetHeight: CGFloat) -> UIImage {
    // Get current image size
    let size = image.size

    // Compute scaled, new size
    let heightRatio = targetHeight / size.height
    let newSize = CGSize(width: size.width * heightRatio, height: size.height * heightRatio)
    let rect = CGRect(x: 0, y: 0, width: newSize.width, height: newSize.height)

    // Create new image
    UIGraphicsBeginImageContextWithOptions(newSize, false, 0)
    image.draw(in: rect)
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    // Return new image
    return newImage!
}

score 2 · Answer 16 · answered Sep 08 '17 at 19:20

Swift 3

I set myButton width and height to 40 and my padding from EdgeInsetsMake is 15 all sides. I suggest to add a background color to your button to see the actual padding.

myButton.backgroundColor = UIColor.gray // sample color to check padding
myButton.imageView?.contentMode = .scaleAspectFit
myButton.imageEdgeInsets = UIEdgeInsetsMake(15, 15, 15, 15)

iAj · Answer 17 · 2017-08-19T06:17:26.693

1

Updated for Swift 3

yourButtonName.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)

edited Aug 19 '17 at 06:17

answered Aug 19 '17 at 05:27

iAj

3,787
1
31
34

Balázs Vincze · Answer 18 · 2022-08-15T09:12:50.140

If you don't want to play around with image insets and you are using auto layout (which I assume you do), another solution is to add size constraints to the image view. Make sure the constraints have a priority of 999, otherwise auto layout will complain.

guard let imageView = button.imageView else { return }

let size = CGSize(width: 20, height: 20)
let sizeConstraints = [
    imageView.widthAnchor.constraint(equalToConstant: size.width),
    imageView.heightAnchor.constraint(equalToConstant: size.height)
]
imageView.translatesAutoresizingMaskIntoConstraints = false
sizeConstraints.forEach { $0.priority = UILayoutPriority(rawValue: priority) }
NSLayoutConstraint.activate(sizeConstraints)
imageView.contentMode = .scaleAspectFit

score -6 · Answer 19 · answered May 14 '12 at 05:51

i think, your image size is also same as button size then you put image in background of the button like :

[myLikesButton setBackgroundImage:[UIImage imageNamed:@"icon-heart.png"] forState:UIControlStateNormal];

you mast have same size of image and button.i hope you understand my point.

How to adjust an UIButton's imageSize?

19 Answers19

Linked