Hi everyone, GeoSn0w here, and today we’re gonna dive into SwiftUI Images for those of you are absolutely total noobs (and skids) and wanna learn iOS app development. That’s right, I pivoted from iOS jailbreak videos to SwiftUI tutorials. Help me.
What Even IS an Image in SwiftUI?
Quite simple actually. an Image in SwiftUI is basically like a frame that renders visual content. It’s not rocket science, but Apple’s documentation makes it seem like you need a PhD to display a freaking picture. You don’t. You can have your first mini iOS app done today! Let me show you.
Three Ways to Load Images in SwiftUI
1. SF Symbols – The Actually Good Way
Apple did something right for once. They gave us SF Symbols – thousands of free vector icons that look crisp on every device. This is what you want to use while learning:
Image(systemName: "heart.fill")
Code language: Swift (swift)Boom. Done. You got a heart. And you can scale them as big as you want. Flaticon would ask for money quite quickly for the privilege. Some icons you can try ones:
"star.fill""house""person.circle""paperplane.fill""lock.shield"
Pro tip: Download the SF Symbols app. Seriously. It’s free and you can browse all of them. Don’t @ me if you spend 3 hours just looking at icons, they’re weirdly addictive. Most of the iOS interface these days uses SF Symbols for icons.
SKID tip: Check the availability of an icon inside the SF Symbols app! Not all icons are available on all iOS versions, with some requiring iOS 17 and later while others iOS 13 and later.
2. Asset Catalog Images
When you want your own images:
- Open Xcode
- Click on
Assets.xcassets - Drag your image in
- Reference it by name but without the extension (.png, .jpg, .webp etc.)
Image("myAwesomeImage")
Code language: Swift (swift)Make sure your image name doesn’t have spaces or special characters. Trust me, save yourself the headache, this is one of the most common issues people learning SwiftUI face. The way something is typed matters! image is not the same Image.
3. Network Images
You sure you wanna ride this train bossman? We’re not touching this today. AsyncImage is a whole other beast. Walk before you run.
Making Images Actually Work in SwiftUI
To put it bluntly, images in SwiftUI are STUPID without modifiers. They’ll either be microscopic or take up your entire screen. You need two things:
Image(systemName: "heart.fill")
.resizable()
.frame(width: 100, height: 100) //Similar to how you scale images in HTML
Code language: Swift (swift)Why?
.resizable()– Tells SwiftUI “hey, this image can actually change size” (because apparently that’s not default behavior…).frame(width: height:)– Sets the actual size
Without .resizable(), your frame does NOTHING. I see people mess this up constantly.
Scaling Images with SwiftUI
// For SF Symbols, this works:
Image(systemName: "heart.fill")
.font(.system(size: 50))
// For everything else:
Image("photo")
.resizable()
.frame(width: 200, height: 200)
Code language: Swift (swift)SF Symbols are special – they’re actually treated as fonts internally (SF stands for San Francisco, like the default macOS font), so you can use .font() modifiers on them.
Critical Info That Will Save Your Life
1. Aspect Ratio can save you
Your images will look TERRIBLE if you don’t preserve aspect ratio. If you find your images are streteched, squished or the app started making expensive sounds when trying to fit the image on the screen, aspectRatio can be a life saver. It make the image look even.
Image("photo")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 300, height: 300)
Code language: Swift (swift).fit– Shows the whole image, might have empty space.fill– Fills the frame, might crop the image
Both are valid. Choose based on what you need.
2. Coloring SF Symbols
SF Symbols can be colored. It’s actually pretty sick. No more hunting for random icons and checking their licenses on icon8 or Flaticon or whatever.
Image(systemName: "heart.fill")
.foregroundStyle(.red)
.font(.system(size: 50))
Code language: Swift (swift)3. MODIFIER ORDER MATTERS
This is particularly important. Messing up the order will break everything:
// CORRECT
Image("photo")
.resizable() // FIRST
.aspectRatio(contentMode: .fit) // THEN
.frame(width: 100, height: 100) // LAST
// WRONG - Won't work properly
Image("photo")
.frame(width: 100, height: 100)
.resizable()
Code language: Swift (swift)SwiftUI applies modifiers in order. If you set a frame BEFORE making it resizable, you’re gonna have a bad time.
Full Working Example (Copy This)
Here’s actual code you can paste right now (don’t be a skid tho, try to understand what you’re pasting):
struct ContentView: View {
var body: some View {
VStack(spacing: 30) {
Text("Image Examples")
.font(.largeTitle)
.bold()
// SF Symbol with font sizing
Image(systemName: "star.fill")
.foregroundStyle(.yellow)
.font(.system(size: 60))
// SF Symbol with frame sizing
Image(systemName: "heart.fill")
.resizable()
.foregroundStyle(.red)
.frame(width: 100, height: 100)
// Custom image (replace with your image name)
Image("yourImageName")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 250, height: 250)
.cornerRadius(20)
.shadow(radius: 10)
}
.padding()
}
}
Code language: Swift (swift)Debugging Common Failures
My image isn’t showing up!
- Triple-check the spelling in
Image("name")without the jpg, png or whatever extension you might be using. - Make sure it’s actually in Assets.xcassets
- For SF Symbols, verify the system name is correct
My image is as small as the remainder of the jailbreak community…
- You forgot
.resizable(). Add it first. - You forgot to set a frame size.
My image looks stretched/compressed/cursed!
- Add
.aspectRatio(contentMode: .fit)or.fill - Make sure your frame dimensions make sense
Xcode is being Xcode
Sometimes Xcode just decides it wants to have a bad day and freezes, stops compiling or just says nothing. No error, no build, nothing. When this happens…
- Clean build folder (Cmd+Shift+K)
- Restart Xcode
- Restart your Mac
- Question your life choices
Quick Reference (Note this down)
// SF Symbol - Small
Image(systemName: "star.fill")
.foregroundStyle(.yellow)
.font(.system(size: 40))
// SF Symbol - Exact Size
Image(systemName: "heart.fill")
.resizable()
.frame(width: 100, height: 100)
.foregroundStyle(.red)
// Custom Asset Image - Proper Way
Image("myPhoto")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 300, height: 300)
.cornerRadius(15)
Code language: Swift (swift)Challenge Time
If you wanna exercise further, here’s some homework for you. Make a view with:
- An SF Symbol of your choice (go wild)
- Color it something that doesn’t hurt your eyes
- Size it to 80×80 points using
.resizable()and.frame() - Add
.cornerRadius(10)and.shadow(radius: 5)to make it fancy
If it doesn’t work, you probably forgot .resizable(). Everyone forgets .resizable() the first time. It’s a rite of passage.
Final Thoughts
SwiftUI images are actually pretty straightforward once you understand the resizable + frame pattern. Start with SF Symbols – they’re perfect for learning and they look professional. Your own images can come later.
And remember: when in doubt, .resizable() first, THEN modify. Alright, that’s it for this guide. If this helped you, you know what to do.
Coming Soon: AsyncImage, custom image modifiers, and why Apple’s documentation is the way it is (spoiler: nobody knows).
And here you have it. Your very first SwiftUI app that shows images and symbols. See you in the next post. Or on YouTube.
