Skip to main content

How to insert images into text

About 2 minSwiftSwiftUIArticle(s)bloghackingwithswift.comcrashcourseswiftswiftuixcodeappstore

How to insert images into text 관련

SwiftUI by Example
Back to Home
How to insert images into text | SwiftUI by Example
How to insert images into text

Updated for Xcode 15

SwiftUI lets you combine text views using +, but you can also place images directly into text using a simple Text initializer. This allows you to place images directly inside text, including having the text and images wrap as needed.

For example, this writes “Hello World” with a star image in the middle:

Text("Hello ") + Text(Image(systemName: "star")) + Text(" World!")

Download this as an Xcode projectopen in new window

The text “Hello World!” with a star outline between the two words
The text “Hello World!” with a star outline between the two words

The images inside your text will automatically adjust to match whatever font or foreground color you’ve chosen, but make sure you apply your modifiers to the whole joined text rather than simply the last item.

For example, this will make the whole combined text large and blue:

(Text("Hello ") + Text(Image(systemName: "star")) + Text(" World!"))
    .foregroundStyle(.blue)
    .font(.largeTitle)

Download this as an Xcode projectopen in new window

The text “Hello World!” with an outlined star icon between the two words. The words and icon are in large blue text
The text “Hello World!” with an outlined star icon between the two words. The words and icon are in large blue text

Whereas this – without the extra parentheses – will make only the “World” text large and blue:

Text("Goodbye ") + Text(Image(systemName: "star")) + Text(" World!")
    .foregroundStyle(.blue)
    .font(.largeTitle)

Download this as an Xcode projectopen in new window

The text “Goodbye World!” with an outlined star icon between the two words. Only “World!” is in large blue text
The text “Goodbye World!” with an outlined star icon between the two words. Only “World!” is in large blue text
Similar solutions…
How to use images and other views as a backgrounds | SwiftUI by Example
How to use images and other views as a backgrounds
How to let the user paste data into your app | SwiftUI by Example
How to let the user paste data into your app
How to format text inside text views | SwiftUI by Example
How to format text inside text views
How to show different images and other views in light or dark mode | SwiftUI by Example
How to show different images and other views in light or dark mode
How to disable the overlay color for images inside Button and NavigationLink | SwiftUI by Example
How to disable the overlay color for images inside Button and NavigationLink
이찬희 (MarkiiimarK)
Never Stop Learning.