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()

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"]

for font in [Font.title1, .title2, .title3, .title4, .title5, .title6, .body] {
    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 {
    for (icon, color) in zip(icons, colors) {
        Image(systemName: icon)
            .foregroundStyle(color)
            .margin(.trailing, 20)
    }
}
.font(.title1)

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