How to render a visionOS icon in a view?

Question

I want to include an about page in my visionOS App, and this should include the App icon. However, the image of the icon does not render.

I have tried using the image statement as suggested in this SO answer and also in this excellent blog, but the icon does not appear.

Example code:

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
            if let imageiOS = UIImage(named: "AppIcon") {
                Label(
                    title: { Text("Works") },
                    icon: { Image(systemName: "sun.max.fill")}
                )
                Image(uiImage: imageiOS)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .clipShape(RoundedRectangle(cornerRadius: 8))
                    .frame(width: 100, height: 100)
            }
         
        }
        .padding()
    }
}

This works with iOS, but not VisionOS.

iOS simulation - icon rendered

visionOS simulation - no icon rendered

I can see in the visionOS simulator that the 3D icon resource is interpreted correctly when used as a home-screen Icon.

icon rendered correctly in visionOS homescreen

visionOS icon in Xcode

Answer 1

I tested a rendering of a multilayer visionOS icon in a full immersive space. As you can see, everything works fine. In your case, the problem could arise if you used a volumetric window, since the icon could be outside the volume. Also, to get to the desired layer, you should specify a correct path (for instance: "AppIcon/Layer/Content").

import SwiftUI

@main struct YourApp : App {
    var body: some Scene {
        ImmersiveSpace() {
            ContentView()
        }
        .immersionStyle(selection: .constant(.full), in: .full)
    }
}

import SwiftUI import RealityKit

struct ContentView : View {
    var body: some View {
        VStack {
            Image(systemName: "camera.circle.fill")
                .imageScale(.large)
            
            Label(title: { Text("It really works") },
                   icon: { Image(systemName: "lightbulb.max.fill") })
            
            ZStack {
                Image("AppIcon/Back/Content")
                    .resizable()
                    .frame(width: 150, height: 150)
                Image("AppIcon/Middle/Content")
                    .resizable()
                    .frame(width: 150, height: 150)
                Image("AppIcon/Front/Content")
                    .resizable()
                    .frame(width: 150, height: 150)
            }               
            Text("visionOS icon")
        }
        .offset(z: -2000)              // move along the -Z axis
        .padding(.bottom, 2500)        // move along the +Y axis
    }
}