Skip to content

Sizing Image in SwiftUI with imageScale

iOS, Swift1 min read

I've been using SwiftUI for a while now - I actually use it a lot more than I use Flutter these days. Up until recently I had been sizing my Image views with the frame modifier but this post is about using the imageScale modifier instead.

I realized a couple of weeks back that some of the Buttons in my app's toolbar were kind of hard to tap. I did some searching on Google and realized that there is actually preset sizes you can use for Image. You don't need to use the frame or resizable modifiers either. It won't be viable for all use cases but it makes things more concise and easier to read in my opinion. Here's an example of an Image I'm now using in a custom back button:

1Image(systemName: "chevron.backward").imageScale(.large)

The imageScale modifier accepts three different options: .large, .medium and .small.

1HStack(spacing: 20) {
2 Image(systemName: "chevron.backward").imageScale(.large)
3 Image(systemName: "chevron.backward").imageScale(.medium)
4 Image(systemName: "chevron.backward").imageScale(.small)

Image with .imageScale examples

I think .large is intended for stuff like buttons and .medium/.small are more for icon use cases. I did end up using .medium in a couple of different places for buttons - maybe it works best for buttons in the toolbar. Like I said it won't be viable for all cases - for example sometimes .small wasn't small enough for my taste - but I would say I was able to replace a lot of code with this. Around 90% of my Image views now use imageScale for sizing. I wish I had stumbled upon this one sooner!