How to add a logo in SwiftUI navigation bar / toolbar?

This should be simple to achieve, right?

That’s what I thought too, but you wouldn’t be here if that were the case.

Let’s start with the obvious solution that actually works (sometimes).

As you can see, this works, but it doesn’t look as good as system images. It’s too big and the bottom padding is missing. Not the end of the world, applying a padding fixes the problem for the most part.

We’re done, right? Let’s try applying the same technique for our child view.

Where is the logo? Is it simply missing? The answer is no, it is just too big to see it.

This seems to be fixed in iOS 16 / Xcode 14 beta 5

Quite an easy fix, but if you’re like me, hardcoding the frame values doesn’t feel right, so I started searching for another way.

It actually took me way more time to come up with the next solution than I am willing to admit. I tried going back to UIKit, generating variants of the logo appropriate for each device, using CoreGraphics to resize the image at runtime. This felt like a lot of work for something so minuscule and honestly I wanted a solution that would work on any platform.

So how to we fix this for good?

We know that the toolbar can handle text and system images very well. Then let’s use this as the container for our view.

We pick a string or a system image that is similar enough in proportions with our logo and we overlay it.

As you can see, everything looks great now and I am pretty confident in this workaround. We just have to make sure we don’t compromise on accessibility by using the correct modifiers.

Here you can find the full source code: https://gist.github.com/StephenCosimo/ad788f712f71003bee8d104ea05814ca.js