Resizing SF Symbols in SwiftUI

To create an SF Symbol in SwiftUI we use Image.init(systemName:) initializer.

When we want to resize a symbol image we shouldn't use resizable() modifier like we do with regular images. As soon as resizable() is used, the image stops being a symbol image. It can affect its layout and how it aligns with text.

Instead, we should use font() modifier to set the right size on the image.

We can use semantic font to set the image size that is right for its context.

Image(systemName: "paperplane")
    .font(.title) 

If we need to be more explicit about the size, we can also set it in points.

Image(systemName: "tray")
    .font(.system(size: 20))

To scale the image relative to its font size, we should use imageScale() modifier. If we don't set the font explicitly, the symbol will get the font from the current environment.

Image(systemName: "doc")
    .font(.body)
    .imageScale(.small)

Check out our book!

Integrating SwiftUI into UIKit Apps

Integrating SwiftUI intoUIKit Apps

UPDATED FOR iOS 17!

A detailed guide on gradually adopting SwiftUI in UIKit projects.

• Discover various ways to add SwiftUI views to existing UIKit projects
• Use Xcode previews when designing and building UI
• Update your UIKit apps with new features such as Swift Charts and Lock Screen widgets
• Migrate larger parts of your apps to SwiftUI while reusing views and controllers built in UIKit