Fonts and Icons
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.
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. |
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.
- 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 & 16dp: These sizes are most commonly used for system status icons.
Use grid, key lines and safe space to ensure a consistent iconography.
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.
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.
To indicate certain status of icons such as battery status and wifi 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.
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.
DON’T Use both filled and outlined icons in the same environment.
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 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.
We use Optimistic Display for anything in the headset and the mobile companion app.
The type size should be chosen in careful consideration with the hierarchy of content (type size / line height):
- Headline 1 (32/36dp): commonly used for the title of the surface or content.
- Headline 2 (24/28dp): commonly used for the title of a smaller surface or content.
- Headline 3 (20/24dp): commonly used for the title of a section header. For example, it’s used for the title of a dialog or a navigation.
- Body 1 (14/20dp): commonly used for primary body copy content, including app titles, names, and/or descriptions.
- Body 2 (11/16dp): commonly used for supplementary content, such as secondary information on an image card or a text form validation message.
- Strong: commonly used for emphasis on titles and labels.
- Regular: commonly used for body copy and captions.
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.
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.
- Don’t overuse the Strong type weight to emphasize text.
- Don’t use Italics because they don’t render well in fully immersive experiences.
