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)
Level up your Swift skills!$35
100+ tips to take your Swift code to the next level
Swift Gems
- Advanced Swift techniques for experienced developers bypassing basic tutorials
- Curated, actionable tips ready for immediate integration into any Swift project
- Strategies to improve code quality, structure, and performance across all platforms
Level up your Swift skills!
100+ tips to take your Swift code to the next level
Swift Gems