How to Add inline images with text in SwiftUI

HStack

Prior to iOS 14, we use HStack if we want to layout an image alongside any text.

HStack(spacing: 0) {
    Text("Hello, ")
    Image(systemName: "globe")
    Text("!")
}

Styling

But it might be a bit cumbersome if you want to style both text and image. Let's say you want to apply title style and bold weight, you might need to do it like this.

HStack(spacing: 0) {
    Text("Hello, ").font(Font.title.weight(.bold))
    Image(systemName: "globe").font(Font.title.weight(.bold))
    Text("!").font(Font.title.weight(.bold))
}

As you can see, you need to duplicate the same style over text and image, which is repetitive and error-prone.

You can easily support sarunw.com by checking out this sponsor.

Translate your app In 1 click: Simplifies app localization and helps you reach more users.

Try it for Free

String interpolation in iOS 14

In iOS 14 (Xcode 12 beta 3), we can insert images inline with any text with string interpolation.

Text("Hello, \(Image(systemName: "globe"))!")

Style

Styling is as easy as this:

Text("Hello, \(Image(systemName: "globe"))!").font(Font.title.weight(.bold))

You can easily support sarunw.com by checking out this sponsor.

Translate your app In 1 click: Simplifies app localization and helps you reach more users.

Try it for Free

Related Resources

• StringInterpolationProtocol
• appendInterpolation(_:)