SwiftUI Image View: Dynamic Scaling in SF Symbol

When it comes to dynamic fonts, SF Symbols can observe change and resize based on dynamic type. There are two ways of making your symbol observe these changes.

ImageScale

SF Symbol based images can adopt to resize with imageScale modifier. This allows image to scale with dynamic font setting.

ImageScale can be set to small, medium, or large size as shown below:

struct ImageExample: View {
    var body: some View {
        HStack {
            Image(systemName: "star")
                .imageScale(.small)
            
            Image(systemName: "star")
                .imageScale(.medium)
Image(systemName: "star")
                .imageScale(.large)
Text("DevTechie")
                .bold()
            
            Image(systemName: "star")
                .imageScale(.large)
Image(systemName: "star")
                .imageScale(.medium)
Image(systemName: "star")
                .imageScale(.small)
        }
        .font(.title)
        .foregroundColor(.orange)
    }
}

Let’s run the project and apply dynamic font in simulator by going under Settings -> Accessibility -> Display & Text Size -> Large Text -> enable Large Accessibility Sizes and drag sizing slider at the bottom.

Or you can use Environment Overrides menu option from debug menu

This is how our project will look:

ScaledMetric for SF Symbols

Another way to adopt dynamic font resizing is by the use of ScaledMetricproperty wrapper.

struct ImageExample: View {
    
    @ScaledMetric private var size: CGFloat = 30
    
    var body: some View {
        HStack {
            Image(systemName: "star")
                .font(.system(size: size))
            
            Image(systemName: "star")
                .font(.system(size: size + 5))
Image(systemName: "star")
                .font(.system(size: size + 10))
Text("DevTechie")
                .bold()
            
            Image(systemName: "star")
                .font(.system(size: size + 10))
Image(systemName: "star")
                .font(.system(size: size + 5))
Image(systemName: "star")
                .font(.system(size: size))
        }
        .font(.title)
        .foregroundColor(.orange)
    }
}

With that, we have reached the end of this section. Thank you once again for reading!