Iconography

Definition

Small image-based glyphs used to communicate additional context in user interface design.

Usage

Icons help our interfaces become clearer, cleaner, and more fun without using up too much screen space. However, there is a fine line between improving experience and overwhelming the user. Icon use should always be accessible and thoughtful, not a space saving shortcut.

  • Keep icons simple and literal.
  • Use standardized icons correctly.
  • Manually scale icons.

FAQs

  1. How do I request an icon?
  2. Can I scale an icon?
  3. Can I convert a desktop icon into a mobile icon and vice versa?
  4. How do I export an icon for an engineer?
  5. Can I design my own icon?

1. How do I request an icon?

For details on how to request an icon, check out this Icon Request Process guide.

2. Can I scale an icon?

We don’t recommend scaling icons at Firefox because each icon is designed with pixel precision that is specific for each platform and size. Scaling icons can cause aliasing as elements can become misaligned on the grid, which will affect the clarity of the icons.

If you need an icon in a different size than what’s available, fill out our icon request form with the details and we can create a new icon and size for you.

3. Can I convert a desktop icon into a mobile icon and vice versa?

Yes! We can convert any icon from one platform to another. Just fill out our icon request form.

4. How do I export an icon for an engineer?

Desktop: In each icon request ticket, an engineering-ready asset will provided. These assets have specific desktop settings applied to it. We discourage manually exporting icons from Figma. In the future, we are planning to add desktop icons into the Acorn Repo.

Mobile: All of Firefox iOS and Android icons are hosted in the Acorn Icon Repository. In each icon request, assets will be uploaded to the repo and links to the engineering-ready assets will be provided in the ticket.

5. Can I design my own icon?

At the moment, we ask the Firefox community to request all icons from the Acorn team as we have a distinct Firefox design styleguide we adhere to.