Design

Fonts and Icons

Updated: Dec 9, 2025

Iconography

We use iconography to communicate common actions, navigation, and objects. Icons make it easier for people to scan and understand content. Meta Horizon OS icons aim to adhere to these guidelines 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.

Grid of various Meta Horizon OS icons in outline and filled variations

Resources

Download the Meta Horizon OS UI Set in Figma or Unity to start building with customizable, production-ready components.

Design	Open in Figma. Change themes for specific components or entire pages and customize elements to fit your design system.
Implementation	Download the Meta Interaction SDK (Unity) to use the Meta horizon OS UI Set. Elements are customizable and support multiple input modalities.

Overview

We have both outlined and filled versions for most of the icons. For fully immersive experiences, we strongly recommend that you use filled icons (for readability purposes). For mobile and web, use outlined.

Sizes

24dp: This size is the most commonly used size for system icons.

48dp: This size is rarely used. We use them sparingly for things like spot illustrations.

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

Basics

Use grid, key lines, and safe space to ensure a consistent iconography.

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

Using opacity

To indicate certain status of icons such as battery status and Wi-Fi signal strength, we use opacity to subtly modify the appearance of the icon. Apply 30% opacity to the relevant part of the icon graph to convey this status. Avoid applying opacity to the entire icon, to ensure clarity and legibility.

Best practices

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.

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.

Typography

The Meta Horizon OS typographic system consists of a set of type styles that are used across the UI. Using the correct style is important for maintaining hierarchy, readability, and consistency.

The Meta Horizon OS type system

The Meta Horizon OS Type System consists of a set of type styles that help make the UI organized and easy to understand. The key aspects to know are the typefaces, type sizes and weight we use.

Typefaces

We use Optimistic Display for anything in the headset and the mobile companion app.

Type sizes

The type size should be chosen in careful consideration with the hierarchy of content (type size / line height). Use the following type sizes for these elements and their common use cases:

Headline 1 (32/36dp): the title of the surface or content.

Headline 2 (24/28dp): the title of a smaller surface or content.

Headline 3 (20/24dp): the title of a section header. For example, it’s used for the title of a dialog or a navigation.

Body 1 (14/20dp): primary body copy content, including app titles, names, and/or descriptions.

Body 2 (11/16dp): supplementary content, such as secondary information on an image card or a text form validation message.

Type weights

A headline in strong and regular weights

Strong: commonly used for emphasis on titles and labels.

Regular: commonly used for body copy and captions.

Using color in type

The contrast ratio between the type and the background communicates the hierarchy and importance of the content. The “Primary Text” color style is used for main content, and the ‘Secondary Text’ color style is used for supplementary content.

Type in various colors on light and dark backgrounds

Colors other than the default colors (grays) in type are usually used to communicate feedback. Colors should be chosen based on their meaning and purpose, such as green for positive feedback, red for negative feedback, and orange for warnings. Additionally, it’s important to use colors consistently to avoid confusion and ensure that users can easily understand the meaning behind each color.

It’s important to provide sufficient contrast and not to use color alone to communicate meanings. Instead, colors should be used together with visual elements like icons, or patterns to significantly enhance usability for everyone, including those who cannot distinguish certain colors.