Exploring visionOS Fundaments: Creating the App Icon

Whenever you are working with a different Apple platform, you notice that you have to learn how to design a native app icon for it. Whether iOS, macOS, or tvOS, each has unique specifications suited for that particular platform.

visionOS has its requirements to create beautiful, three-dimensional, unique app icons that feel familiar and realistic on the home view.

The icons will appear as square assets with rounded corners for your existing iOS/iPadOS app that is compatible with visionOS.

Multiple Layers

The circular app icon for visionOS can have up to three images with one background layer and one or two layers on top. These images are overlaid on top of each other. The idea of having these flat 1024x1024 images is to create a 3D/parallax effect. It is designed this way to respond dynamically when someone looks at it.

The Safari app has a blue background layer, one middle foreground layer for the dial, and a needle foreground layer on the top. The Files app has a white background layer, and a file icon is the single foreground layer. From the Human Interface Guidelines:

The system enhances an app icon’s visual dimensionality by adding shadows to convey a sense of depth between layers and using the alpha channel of the upper layers to create an embossed appearance.

Asset Catalog

In the Asset catalogue, you can add a new app icon. Unlike traditional icons, visionOS app icons are three-dimensional, giving them a sense of depth and interactivity.

Back Layer

When designing the background layer, create an edge-to-edge full-bleed, non-transparent square image. This ensures that a circular mask properly crops all layers. For example, I export a 512x512 at 2x background with the colour Red Fire (#D4145A - #FBB03B).

Note: Make sure it is a fully opaque image. Otherwise, you may get a warning similar to the following:
The last visionOS App Icon Layer with content, "Back", must be a fully opaque bitmap. The pixel at position (0, 0) has an alpha value of 254.

Middle Layer

For the middle layer, I am going with an artistic look. First, let's look at how the icon will feel in 3D if there are only two layers: one for the background and the other as the middle layer. Remember, it should have a transparent background.

When I preview it in the editor, I can hover over the icon and look at it from different angles. Notice the subtle shadow between the two layers that is automatically added by the system.

Front Layer

Add another layer on top of the middle layer to make the app icon more immersive. I am separating the cloud as the middle layer and the artist tools as the top layer.

While they are not overlapping and are not the best example to demonstrate the truly 3D overlapping effect like the artist tools are slightly elevated compared Safari app, you do notice that to the cloud's elevation, as it is the front or the topmost layer.

Again, remember that the foreground layers should have a transparent background to blend with the background layer seamlessly.

System Doing Magic

Once you have designed your layers, they will automatically be overlaid and enhanced by the system. A glass layer adds subtle depth, highlights, and shadows to the icon. This visual effect makes the icon appear three-dimensional and realistic. Also, as mentioned in the WWDC session on designing for spatial user interfaces, avoid large regions of semitransparent pixels. Layers with reduced opacity will blend with the shadow cast behind them by the system.

Center Align!

When you design your app icon, keep the graphics centred. If they are too close to the edge, they may appear off-centered when expanded.

After selecting a particular layer, you can adjust the Center X and Center Y values as well as the Width and the Height of the image in the inspector.

Conclusion

A beautiful visionOS app icon is about layering and attention to detail with the Human Interface Guidelines as a reference.

Here is a summary to keep in mind for designing them:

• Three-Dimensional Design: Focus on creating a layered, 3D effect for a realistic and interactive appearance.
• Layer Structure: Use up to three layers – a background layer, a middle layer, and a top layer for depth.
• Background Layer: Ensure it's a full-bleed, non-transparent image that fits well within a circular mask.
• Middle Layer: Incorporate elements with a transparent background for depth.
• Top Layer: Add elements that elevate the design, maintaining transparency for seamless blending.
• System Enhancements: The system automatically adds shadows and a glass effect for realism.
• Avoid Semi-Transparency: Large semi-transparent areas should be avoided for clarity.
• Centering and Sizing: Keep graphics centered so when they close to the edge, they do not look off-centered when expanded.

I am working on the "Exploring visionOS". You can pre-order it to support my work! 🕶️