Jon Howell • Selected Work → Meta System Iconography

📝 Case Study

Iconography

Meta System Iconography

A hyper-realistic 3D render of the icons with color applied to them, they include the heart, battery, game controller, and a globe

Design Approach & Methodology

Integration with Meta's Brand System

The first step involved a thorough review of Meta's new brand and their 'Optimistic' typeface. This review helped us get a clear picture of the typeface's features, which guided us in designing icons that blend smoothly with Meta's brand system.

We started with basic design elements inspired by the special characteristics of the 'Optimistic' typeface. These basics were key to making icons that look consistent with both the logo and the font.

The Meta logomark showing the design approach visual illustrating methodology and structure

Icon concept sketch overlayed with Meta “Optimistic” typeface study

Concept development visual — circular and angular icon forms

Conceptual Development

We explored various design concepts, from circular to angular, to ensure the icons not only maintained consistency with the 'Optimistic' typeface but also seamlessly integrated with the brand's overall visual identity. Through extensive testing and evaluating situational mockups, we found one design that worked best for Meta's brand. This design seamlessly brought together the icons, the 'Optimistic' typeface, and Meta's logo.

Creative production workflow schematic for icon set creation

An animated gif showcasing various explorations for how a notification bell with a slash through it can be rendered

Creative Production Framework

We followed a detailed plan for building the icon library, aiming for consistent design and function in various settings. This approach included designing icons in both filled and outlined styles, using a 24x24 pixel grid, and aligning them with a custom grid to keep details clear and ensure uniformity.

Icon grid demonstration with 24×24 pixel structure

Multiple icon design explorations in outline and filled styles

A incredibly exhaustive list of all the icons that were drawn for this project, hundreds if not thousands of icons

An animated gif showing the brightness icon growing and shrinking

An animated gif showing the wifi icon getting stronger and weaker

A blurred out copy of the guidelines for how to create additional icons

Systematic Approach

Systematic Design for Diverse Application

The icon library was designed to be versatile, covering a wide range of metaphors, everything from user activities and emotions to tools used for creation and editing. We followed a careful drawing process to keep the icons consistent, ensuring they work well and look the same on different platforms and user interfaces.

Systematic icon set summary across the fitness category

A collection of smiley faces with different emotions on them, filled in yellow with a pink background

The Oculus interface showing how the icons are applied and being used in the context of Meta products

Icons shown in context across interface mockups

Information

Following 'The Facebook Company's' rebrand as 'Meta’' there was a need for a unified visual system that reflected their renewed focus on human connection. An essential element of this initiative was the creation of an icon set that complemented Meta's new logo and the 'Optimistic' typeface.

My independent design practice, Freelance Studio, was contracted by Counter Brand & Type to work with them on this project in collaboration with the Facebook Reality Labs team.

Completed under the direction of Counter Brand & Type.

Credits

Icon Design → Jon Howell
↳ Brand Strategy / Project Manager → Mike Edwards
↳ Creative Director / Icon Designer → Michael Forrest
↳ Facebook Reality Labs Team Lead → Bonnie Kate Wolf
↳ Contributing Art Director → Michael Cina
↳ Icon Designer → Dmitri Litvinov
↳ Icon Designer → John Bowles
↳ Hero Art → Mirna Pierre