The original logo was gorgeously literal. The current one barely shows the animal at all.

The first Firefox mark — a fiery fox wrapped around a blue globe — was drawn in 2004 by illustrator Jon Hicks for Firefox 1.0, and refined over the years into a flatter, brighter version. Then, in June 2019, Mozilla rolled out a whole parent-brand system: the browser got a simplified flame-fox, and a broader circular “masterbrand” was created to sit above an entire Firefox family of products (not just the browser). That work was led by Mozilla’s internal team with agency Ramotion, shipping in Firefox 70 in October 2019. The trajectory is a modern-branding classic: start with a detailed illustration, then abstract it down until a warm gradient alone can stand in for the whole idea.

The famous 2017 “moz://a” rebrand is often mistaken for a Firefox redesign. It wasn’t.

In January 2017, Mozilla — the non-profit organisation — revealed a new corporate wordmark: moz://a, spelling the name with a protocol slash built right into the letters. It came from design studio johnson banks through Mozilla’s unusually public “open design” process, paired with a brand-new typeface (below). Crucially, this was the Mozilla identity, not the Firefox browser logo — a distinction even design press often blurs. The browser’s own flame system came two years later. It’s a neat illustration of a house-of-brands structure: the parent org and its flagship product each get their own mark, on their own timeline.

A warm sweep from yellow through orange and red into violet. Click a swatch to copy the hex.

Firefox’s palette lives in Mozilla’s Protocol design system, and the warm family is unmistakable: Orange 50 #ff7139 is the signature, running up through reds like #e22850 and into a private-browsing Violet #9059ff, with a link Blue #0060df for interface accents. One honest caveat: Mozilla ships the actual flame logo only as finished, trademarked artwork — it does not publish the icon’s gradient as a tidy list of hex stops, so any “official Firefox gradient” you see online is an eyedropper reconstruction. The named swatches below, though, are straight from Protocol.

A rare thing in corporate branding — a signature typeface anyone can download and use.

The moz://a rebrand introduced Zilla Slab, a friendly slab-serif drawn by Peter Biľak and Nikola Djurek at the Typotheque foundry in 2017. True to Mozilla’s open ethos, it’s released under the SIL Open Font License and lives on Google Fonts — so the specimen here is set in the actual typeface, not a stand-in. A companion cut, Zilla Slab Highlight, is what turns “moz” into the highlighted wordmark. For product and marketing type, Mozilla pairs it with the open-source Metropolis (headlines) and Inter (body) — the same Inter you’re reading now.

The warmth in Firefox’s palette is a strategy: a non-profit-backed browser signalling that it answers to users, not advertisers.

Firefox arrived with a tangled naming history that the brand quietly outgrew. The browser began life in 2002 as Phoenix, was renamed Firebird after a trademark clash, and finally became Firefox in 2004 to avoid confusion with the Firebird database project. The name itself is a small piece of misdirection: ‘firefox’ is another word for the red panda, not a fox at all — which is partly why the mark could drift so far from a literal animal over the years. Through every rename, the constant was Mozilla’s mission: a browser stewarded by a non-profit foundation, built to keep the web open, private and in the hands of people rather than a single platform owner.

That mission is what the visual system is engineered to broadcast. The warm flame gradient and the sturdy, humane Zilla Slab were chosen to feel human rather than corporate — the opposite of a cold, surveillance-driven tech aesthetic. Where rivals lean on clinical blues and silver, Firefox commits to orange, red and violet, colours that read as energy and warmth. The ‘privacy first’ voice runs the same way: plain-spoken, a little idealistic, addressed to a user it treats as a citizen of the web. This is why the identity has endured through shrinking market share and a dozen redesigns — it isn’t selling a feature list, it’s selling a set of values, and a warm gradient is a remarkably efficient way to make a principle feel like something you can see and want to belong to.

Keep Firefox’s warm system on hand — save it to a board in the Made Good inspiration library.