Resizing UImage when using SF Symbols - UIImage(systemName:)

Question

I have the following pre-packaged, system SF image:

UIImage(systemName: "location.fill")

It may seem trivial, but how can I resize it to make it bigger? Thank you.

Answer 1

You can instantiate a UIImage.SymbolConfiguration. For example, you can specify a point size:

let configuration = UIImage.SymbolConfiguration(pointSize: 24)
let image = UIImage(systemName: "location.fill", withConfiguration: configuration)

Or UIFont.TextStyle:

let configuration = UIImage.SymbolConfiguration(textStyle: .title1)
let image = UIImage(systemName: "location.fill", withConfiguration: configuration)

With the latter approach, it will honor the accessibility text size settings on the device.

Answer 2

The code below provides two methods:

1. The UIKit suggested way (see developer.apple.com/documentation). Here you treat the SF Symbol image like a font and apply a point size to it.

2. A SwiftUI way. The button (and, in the example, some associated text) scale to the frame provided.

       import UIKit
       import SwiftUI
   
       class SwiftUIButton : ObservableObject {
   
             @Published var state : Bool = true { didSet { buttonDidChange(state) } }
   
             private lazy var viewController = UIHostingController(rootView: SwiftCustomButton(delegate: self))
             var view : UIView { guard let view = viewController.view else {
                   preconditionFailure("*Fatal Error* Could not create SwiftUI button") }
                   return view
             }
   
             typealias typeForAction = () -> Void
             var action : typeForAction?
   
             func buttonDidChange(_ state : Bool) {
                   guard let action = action else {
                         return
                   }
                   action()
             }
       }
   
       struct SwiftCustomButton : View {
   
             @ObservedObject var delegate : SwiftUIButton
   
             var body : some View {
                   VStack() {
                         Button(action: {
                               self.delegate.state = !self.delegate.state
                         }) { Image(systemName: "gear")
                               .resizable()
                               .aspectRatio(contentMode: .fit)
                         }
   
                         Text(delegate.state ? "Hello" : "Goodbye")
                   }
             }
       }
   
   
       class ViewController: UIViewController {
   
             override func viewDidLoad() {
                   super.viewDidLoad()
   
                   let button = SwiftUIButton()
                   button.action = { print("In the ViewController the button has changed to: \(button.state)")}
                   button.view.frame = CGRect(x: 200, y: 200, width: 80, height: 80)
                   view.addSubview(button.view)
   
                   let image = UIImage(systemName: "gear")
                   let symbolConfiguration = UIImage.SymbolConfiguration(pointSize: 64.0)
   
                   let adjustedImage = image?.applyingSymbolConfiguration(symbolConfiguration)
   
                   let uButton = UIButton(type: .custom)
                   uButton.setImage(adjustedImage , for: .normal)
                   uButton.frame = CGRect(x: 20, y: 200, width: 80, height: 80)
                   uButton.target(forAction: #selector(self.buttonAction), withSender: uButton)
                   view.addSubview(uButton)
   
                   self.view = view
             }
   
             @objc func buttonAction() {
                   print("UIButton pressed")
             }
       }
   

Answer 3

Rob's answer is great and you can set up with inspector

Answer 4

SF Symbol images are maintained as text so that it can be added inside a text as well. For that reason you can use Font methods to adjust the size. For example:

let resizedImage = UIImage(systemName: "house", withConfiguration: UIImage.SymbolConfiguration(font: .systemFont(ofSize: 64.0)))

This will give an UIImage of house with 64.0 size.

You will also find this here: Apply a specific appearance to a symbol image