Design

Icons and images

Updated: Mar 21, 2026

Icons are a universal visual language, communicating complex ideas, actions, and objects at a glance. They are compact, efficient, and, when used effectively, can transcend language barriers. In an immersive interface, where the user is surrounded by the environment, icons serve as crucial signposts that guide navigation and clarify interaction.

Unlike traditional 2D interfaces, icons in a 3D space must be instantly recognizable from multiple distances and viewing angles. They must stand out against both virtual and real-world backgrounds without creating visual clutter. A successful iconography system brings clarity and confidence to the user experience. A well-considered icon strategy serves to:

Provide instant recognition for actions and objects

Draw attention to important information

Reinforce spatial navigation and orientation

Save valuable screen real estate

Meta Horizon OS icons in outline and filled variations

Best practices

Below are our recommended practices for icons and images in an immersive experience.

Design icons with simplicity

Simplify icons for greater clarity and legibility, even at small sizes. Avoid using complex icons with intricate details or delicate, thin stroke weights that may be difficult to understand or distinguish from other icons.

Simplified icons are clearer and more legible at small sizes

DO Design icons with simplicity.

DON'T Avoid using complex or intricate details that may make the icon difficult to understand or distinguish from other icons.

Use filled icons for immersive experiences

For fully immersive experiences, use filled icons for readability purposes. For mobile and web, use outlined icons. Avoid using both filled and outlined icons in the same environment to maintain a consistent visual language.

DO Use filled icons in fully immersive experiences.

UI with a mix of filled and outlined icons

DON'T Use both filled and outlined icons in the same environment.

Maintain a consistent visual foundation

Use a consistent grid, keyline shapes, and padding to ensure a cohesive and visually balanced icon set. The core shapes of squares, rectangles, and circles serve as the foundation, helping to maintain visual proportion across the icon suite. While the content of an icon should generally be constrained to the live area, it may bleed into the padding in some cases but should not extend outside the artboard.

Grid

The grid
We use a 24x24 dp grid, but build the icons on a 192x192 pixel grid. This is to ensure that we're future-proofing these pixel-perfect icons so that they work well in higher-res headsets.

Angles
Wherever possible, we use angles in 45 degree increments.

Keyline shapes
We use the core shapes of square, horizontal/vertical rectangles, and circle as our foundation. This helps us maintain a consistent visual proportion across the icon suite.

Padding
The content of the icon should be constrained to the 20x20 live area inside the 2x2 padding. In some cases, the icon may bleed into the padding area. It should not, however, extend outside of the artboard.

Anatomy

Icons aim to adhere to these basics as closely as possible. This ensures consistency within the set, pixel-perfect designs, and also works well with our typography system in terms of sizes, alignment, and weight.

Diagram show icon stroke termials and stroke width

Use opacity to indicate status

To indicate the status of icons such as battery level or Wi-Fi signal strength, you can subtly modify the appearance of the icon by applying opacity. Apply 30% opacity to the relevant part of the icon to convey its status. Avoid applying opacity to the entire icon to maintain clarity and legibility.

Icons and images on Quest

Icons and images are rendered differently on Quest headsets compared to traditional monitors. It is important to design and test them with the unique properties of the hardware in mind.

Build icons on a pixel-perfect grid

The icons use a 24x24 dp grid but are built on a 192x192 pixel grid. This ensures that these pixel-perfect icons are future-proofed to work well in higher-resolution headsets and maintain their clarity at various distances and scales.

Test your visuals on actual Quest hardware

It is critical to test your icons and images on an actual Quest headset. This is the only way to accurately see how they appear in the intended environment. Iterate on your designs based on how they look inside the headset to ensure clarity and legibility.

Using the Meta Horizon OS UI Set

For a consistent and predictable starting point, we recommend using the official Meta Horizon OS UI Set and its associated icons.

Provide icons at appropriate sizes

Use the defined icon sizes for their intended purpose to create a clear and consistent visual hierarchy.

24dp: The most commonly used size for system icons.

48dp: Use sparingly for things like spot illustrations.

12dp and 16dp: The most commonly used sizes for system status icons.

Icon sizes for system icons, spot illustrations, and status icons

Implementation

Below are our recommended ways to implement icons and images in an immersive experience.

Resources

Design	Open in Figma⁠. Change themes for specific components or entire pages and customize elements to fit your design system.
Unity	Download the Meta Interaction SDK (Unity) to use the Meta Horizon OS UI Set. Elements are customizable and support multiple input modalities.
Meta Spatial SDK	View the UI Set Sample⁠ on GitHub. Includes customizable UI components with icons.