Correct icon size for Big Sur preference panels

Question

When building my app for macOS Big Sur, and switching my preference panel toolbar style to .preference, the icons just don't seem to size correctly.

No matter if I use @1x/@2x PNG variants, or universal PDF vector images with a single scale, my icons always turn out larger and blurry compared to using a SF Symbol icon.

Now that my app needs to be backwards compatible with 10.13 I can't use symbol images.

Here is what my toolbar looks like

What is the correct way to get properly sized icons in a preference panel toolbar?

Do I need to include a margin in my vector assets? If so, what is the correct point size?

Answer 1

Vector images don't seem to go well with NSToolbar. I created an NSImage extension for them to manually create a toolbar friendly image.

extension NSImage {

    convenience init?(namedVectorToolbarImage name: String) {
        guard let image = NSImage(named: name) else {
            return nil
        }

        self.init()

        let small = image.resized(to: .init(width: 24, height: 24))
        let regular = image.resized(to: .init(width: 32, height: 32))
        let reps = regular.representations + small.representations

        isTemplate = true

        reps.forEach {
            addRepresentation($0)
        }
    }

The resize() method here is just another extension for producing a resized image. On top of that I set NSToolbar.sizeMode to small if the system is not (below) macOS 11.0.