Images

Images can be either pictures from your /Assets/images folder, or one of the built-in icons.

Pictures are shown at their natural size by default; you'll usually want to add the `resizable()` modifier to make them scalable:

Image("/images/photos/rug.jpg", description: "A rug. Not a dog, a rug.")
    .resizable()

Most images should be created with a description value provided, for screen readers.

If you’re working with large images, consider using the lazy() modifier to have them loaded lazily.

Icons

You can also create images from icons. If they are inside Text, they will resize with the font:

let icons = ["airplane", "apple", "arrow-counterclockwise", "award", "balloon", "book", "brightness-high"]

ForEach(Font.Style.allCases) { font in
    Text {
        for icon in icons {
            Image(systemName: icon)
                .margin(.trailing, 20)
        }
    }
    .font(font)
}

Use the foregroundStyle() modifier to recolor your icons, like this:

let colors = [Color.green, .blue, .indigo, .slateGray, .gold, .orange, .tomato, .gray]

Text {
    ForEach(zip(icons, colors)) { icon, color in
        Image(systemName: icon)
            .foregroundStyle(color)
            .margin(.trailing, 20)
    }
}
.font(.title1)

Tip: Make sure your site configuration options enables the built-in icons.

In case you hadn't noticed, this page uses a custom theme that places some random content on the right-hand side.

Read this next…

Sam Swift saves the day

Once upon a time in a land not so far away, nestled between the rolling hills of Silicon Valley, there was a developer named Sam Swift. Sam, as his name might suggest, was not just any developer; he was a Swift developer. A coder of high esteem, known across the land for his quick wit and even quicker compile times.