MetaContent designer2024

Meta icon library

Naming framework and taxonomy


At a glance

Combine multiple icon libraries from across Meta products into one library with consistent naming and design.

  • ·Each icon library had its own naming conventions
  • ·Each library was owned by a visual systems team that felt strongly about ownership
  • ·Designers had developed shortcuts to deal with using multiple libraries

Create naming framework and process that makes it easy for Meta visual design team to consolidate and manage existing icons, and for designers to find and reuse icons instead of creating duplicates.

  • ·Applied to 6 existing icon libraries, eliminating 256 duplicates
  • ·Reduced visual design team intake by 20%

Process
1

Audit current libraries

2

Identify gaps and overlaps

3

Create naming formula

Use "literal naming convention to make icons as extensible as possible

4

Build template for library

Require designers to include alt text and searchable keywords to make icons accessible and reusable.

5

Define exceptions

Allow for flexibility where it makes sense.

Image showing how differently icons had been named

What shipped

One centralized icon library and creating a solid framework that allows teams to quickly spin up new icons when needed, but reducing the need for duplication.


Impact
  • Applied to 6 existing icon libraries, eliminating 256 duplicates
  • Reduced visual design team intake by 20%