03

Logos & Usage

Knowing which to choose and use

Parent brand logo and usage

We use the Firefox parent brand logo to represent the entire Firefox ecosystem including browsers, products and services. It appears in places where people encounter all of our offerings, such as web pages covering setting up or signing in to an account with Firefox or events hosted by the Firefox brand.

The parent brand lockup of icon + wordmark is the preferred usage for partnerships, co-branding, and in media articles.

The icon should never be used to represent a single product in the line. Firefox browsers, in particular, have their own unique marks.

The wordmark “Firefox” on its own should only be used with the parent brand icon. Firefox products and services each include a supporting name such as “Firefox Send” or “Firefox Monitor.”

Download the Firefox Parent Brand logo

Link

Logotype

  • The Firefox logomark is a custom mark based on the Firefox Sharp Sans typeface
  • The logotype is always Black or White

The Logomark

  • Refers to Firefox the product company, not Firefox the web browser

The Parent Brand logo (horizontal)

  • The primary logo for the parent brand is the logomark and the logotype together
  • They should always appear in this size relationship
  • Always use the logo files provided in the logo pack
  • Do not recreate

The Parent Brand logo (stacked)

  • The stacked logo is for large scale use, or where horizontal space isn’t available
  • Avoid using it at small sizes
  • Always use the logo files provided in the logo pack
  • Do not recreate

Logo construction and clear space

  • The space between the logomark and the logotype is equal to 20% of the height of the logomark
  • For clear space around the logo, use the uppercase F (or 40% of the height of the logomark) as a guide.

Logos on background colors

  • The full color logos should only be used on very light or very dark backgrounds.
  • Don’t use the full color logo on top of a photograph or gradient unless it sits on a very light or very dark area of the image.

The Parent Brand one-color glyph

  • The full-color logo is our primary logo.
  • In cases where we need a single color glyph, please use only either Black or White for the glyph and the wordmark.

Firefox + Mozilla logos

  • In some cases it may be appropriate for the Firefox logo and the Mozilla logo to appear in the same design
  • In that situation, keep them on the same baseline grid and match the x-height, as shown below
  • The Mozilla logo is 60% as tall as the Firefox logo

Firefox browser logos


Firefox Browser

Link

Firefox Developer Edition

Link

Firefox Nightly

Link

Firefox Beta

Link


Firefox Reality

Link


Firefox logomark

Link

Global guidelines for Firefox products

Product logos

  • Built on the same geometry as the parent brand logo
  • The rules about spacing, text color, background colors, single-color glyphs etc, all stay the same
  • The modifying word is set in Sharp Sans Medium
  • Don’t create your own colorway of the browser logo
  • Don’t use the browser logo where the Parent Brand logo should be used*

Firefox product logos

Firefox Monitor

Link


Firefox Lockwise

Link


Firefox Send

Link