Evolving the Firefox Brand

Say “Firefox” and most people think of a web browser on their laptop or phone, period. TL;DR, there’s more to the story now, and our branding needs to evolve.

With the rapid evolution of the internet, people need new tools to make the most of it. So Firefox is creating new types of browsers and a range of new apps and services with the internet as the platform. From easy screen-shotting and file sharing to innovative ways to access the internet using voice and virtual reality, these tools will help people be more efficient, safer, and in control of their time online. Firefox is where purpose meets performance.

Firefox Quantum Browser Icon

As an icon, that fast fox with a flaming tail doesn’t offer enough design tools to represent this entire product family. Recoloring that logo or dissecting the fox could only take us so far. We needed to start from a new place.

A team made up of product and brand designers at Mozilla has begun imagining a new system to embrace all of the Firefox products in the pipeline and those still in the minds of our Emerging Technologies group. Working across traditional silos, we’re designing a system that can guide people smoothly from our marketing to our in-product experiences.

Today, we’re sharing our two design system approaches to ask for your feedback.

 

How this works.

For those who recall the Open Design process we used to craft our Mozilla brand identity, our approach here will feel familiar:

  • We are not crowdsourcing the answer.
  • There’ll be no voting.
  • No one is being asked to design anything for free.

Living by our open-source values of transparency and participation, we’re reaching out to our community to learn what people think. You can make your views known by commenting on this blog post below.

Extreme caveat: Although the products and projects are real, these design systems are still a work of fiction. Icons are not final. Each individual icon will undergo several rounds of refinement, or may change entirely, between now and their respective product launches. Our focus at this point is on the system.

We’ll be using these criteria to evaluate the work:

  • Do these two systems still feel like Firefox?
  • How visually cohesive is each of them? Does each hold together?
  • Can the design logic of these systems stretch to embrace new products in the future?
  • Do these systems reinforce the speed, safety, reliability, wit, and innovation that Firefox stands for?
  • Do these systems suggest our position as a tech company that puts people over profit?

All the details.

The brand architecture for both systems is made up of four levels.

Each system leads with a new Firefox masterbrand icon — an umbrella under which our product lines will live.

The masterbrand icon will show up in our marketing, at events, in co-branding with partners, and in places like the Google Play store where our products can be found. Who knows? Someday this icon may be what people think of when they hear the word “Firefox.”

At the general-purpose browser level, we’re proposing to update our Firefox Quantum desktop icon. We continue to simplify and modernize this icon, and people who use Firefox tell us they love it. Firefox Developer Edition and Firefox Nightly are rendered as color variants of the Quantum icon.


Browsers with a singular focus, such as our Firefox Reality browser for VR applications and our privacy-driven Firefox Focus mobile browser, share a common design approach for their icons. These are meant to relate most directly to the master brand as peers to the Firefox Quantum browser icon.

Finally, the icons for new applications and services signal the unique function of each product. Color and graphic treatment unite them and connect them to the master brand. Each icon shape is one of a kind, allowing people to distinguish among choices seen side by side on a screen.

Still in the works are explorations of typography, graphic patterns, motion, naming, events, partnerships, and other elements of the system that, used together with consistency in the product, will form the total brand experience.

Read along as we refine our final system over the next few months. What we roll out will be based on the feedback we receive here, insights we’re gathering from formal user testing, and our product knowledge and design sensibilities.

With your input, we’ll have a final system that will make a Firefox product recognizable out in the world even if a fox is nowhere in sight. And we’ll deliver a consistent experience from an advertisement to a button on a web page. Thanks for joining us on this new journey.

Madhava Enros, Sr. Director, Firefox User Experience

Tim Murray, Creative Director, Mozilla

2,212 comments on “Evolving the Firefox Brand”

  1. PetrL wrote on

    I like system 1 brand logo, but I hope all other system logos are going to be improved.

  2. Flavio wrote on

    System 1 for sure. I also appreciate the colurful vein of icons for new apps and services from System 2.

  3. don murray wrote on

    system 2 set logos good, the logos in colour but the system icons should be 1 colour, and or black and white ans they are confusing as they are, what are they?? not clear enough, what symbol means what, what is home page for example

  4. Adam Wells wrote on

    System 2 looks awesome!

  5. Bruno wrote on

    I prefer system 2

  6. María Fernanda Medina wrote on

    I love the group 2, all of him.

  7. carlos mirros wrote on

    I don’t like them at all.
    I like the actual Firefox Quantum logo.

  8. Rob wrote on

    System 1 with System 2’s browser icons.

  9. Kevin Pevey wrote on

    System 1 with System 2 Browser icons.

  10. Andrew wrote on

    For the overall icon I like the System 2 icon over the System 1 icon. The circle and the flames make the icon stand out a bit more than a fox face.

    For the general purpose browser icons I like the circular design in System 2 but I like the details with coloring from System 1

    For the singularity icons I like the System 2 a bit more but feel like the representation of the functions with the icon could be better. The System 1 icons are a bit too similar to Google icons (especially the far left one, which is very similar to Google photos.

    For the new apps and services I like the simple designs in System 2 but like the colors from System 1.

    I look forward to seeing further iterations of the designs.

  11. Neratex wrote on

    I think Group 1 is better than Group 2 because Group 2 looks cheaper

  12. Alpha wrote on

    I’d say system 1 rather than system 2 even if both seem great :)

    My personal choice would be system 1 but with system 2 proposal for the browser icons.

    I’d be in favour of system 1 mostly because of the “filled in” aspect of the icons but most importantly because there is no big change in the colour tone between each of the app icons. In the sense that if you were to take one of the blue or green icon from system 2 on its own I’m not sure everyone will be able to say that this is a Firefox brand app.

  13. William Martin wrote on

    Definitely the system 1.

  14. Alex wrote on

    Nice logos. Just notice that more & more companies are going for that rainbow look & feel.

    Just curious as to why

  15. Walter wrote on

    Group 1 with Master Brand 2

  16. Amphy wrote on

    System 1 all the way!
    But I would love to see more variety in the other service icons.

    Maybe have the option to choose which browser icon? Since I see so many people are in favor of System 2’s icons

    I personally prefer System 1’s browser icons

  17. Kim wrote on

    System 1

  18. Vicki wrote on

    They’re both gorgeous. I love the fox head, but gotta go with group 2!

  19. T3chr wrote on

    System 1.
    Masterbrand logo on left (in system 1) have more personality than shape on the right.
    Desktop browser icon should be a blend of two, if it’s possible (with tail from system one and body from the right), but booth are looking good.
    Rest of the icons looks better on the left, but color pallet on last 5 icons is debatable (lack of the blue|purple complementary color).

  20. armando wrote on

    System 2 at the masterbrand an general purpose levels, the remaining could be System 1

  21. slawek wrote on

    In all honesty – the amount of colors and tiny nuances in these makes them look amateurish. Icon should read well even in tiny size – these look like are planned for some closeups more then for functionality. In System 1 shapes are cool but all that colors man… Pardon my french but it looks like rainbow vomit. Too much colors, too little contrast between them and shapes could use some negative space. In System 2 that shading on icons and again sooo many colors are unnecessary. It will all be irrelevant in tiny size – no need for It really looks like made by some 15 years old kid with passion but who dont know where to stop and is not a fan of “less is more”.
    I will still use FF even with not best icons ;) But PLEASE consider at least less colors. on them…
    The only one that I really dig is the main from system 1. That one I am buying as it is.

  22. Nicholas Fazzolari wrote on

    I’m liking system 1 across all categories. System 1 (to me a long time ff user) retains the Moz brand more closely, which I personally prefer.

    The cross browser options look nice and full. Same goes for the application specific logos. System 2 is too light for my tatstes and the icons are unclear in their meaning.

  23. Flo wrote on

    System 2

  24. Luis wrote on

    System 1 is a total revolution of what I think that Firefox UI is. I love it

  25. Kumar McMillan wrote on

    I like system 2 but only because the Firefox logo looks great. I don’t like the other logos in system 2.

  26. Aloisia wrote on

    Absolutely System 1!

  27. Melody wrote on

    Joining the call for group 1 with group 2 browser icons!! Love the geometric fox face, the browser icons of group 1 just look a bit clunky.

  28. Otto Richter wrote on

    I think it’s a terrible idea to move from the widely known and accepted firefox-in-a-circle icon. I’d go for system 1 otherwise (apart from the firefox browser icons), but please stick to the classic icon for firefox and avoid that flat masterbrand icon from system 1- it’s not firefox anymore!!!

  29. Mohamed wrote on

    system 2 all the way

  30. Tim wrote on

    System 2 master brand and browser to maintain coninuity with the fox logo, with system 1 for the random icons. The system 2 random icons look like samsung designed them and are not related in any way to the mainbranding.

    I agree with earlier comments that the system 1 masterbrand is incredibly similar to the gitlab logo

  31. John Renner wrote on

    I absolutely love the firefox icons from the first group. The fox head icon, looks like a straight copy of gitlab though.

    The secondary icons from both feel very sterile and abstract. Group 1 looks like unrecognizable icons from Google’s B-tier services. And Group 2 looks like a bunch of Javascript library logos. At the very least, the gray gradiated backgrounds would have to go.

  32. Don Albertson wrote on

    I know people who still refer to Firefox as Mozilla. I’m not sure whether that’s germane or not, but if there are people who don’t recognize Firefox as a distinct item produced by Mozilla, then I doubt that changing logos will be useful to them.

    As for me, I loathe change for change’s sake. Is Apple going to come up with a different logo? I doubt it. However, if there is a real new item or feature (eg. Firefox Focus) it deserves its own logo.

    Ting ting blo mi, tasol.

  33. sadler_designs wrote on

    I like Version 2. It’s different, I love that shapes and the colors. I like how the big icon looks better than the geometric fox head.

  34. Seb wrote on

    I like system 1! Feels like a fresh new start maintaining the spirit of the firefox identity. Good work!

  35. Sushanth wrote on

    I like a combination of both the system, both are excellent.
    1. For the masterbrand: system 2
    2. For general purpose: system 2
    3. For focused browser: system 1
    4. For new apps and services: system 1

  36. benjamin wrote on

    Iam commenting without seeing other comments so i dont write something biased.

    The system 1 icons looks more like a natural successor of the classic firefox icons and I think that are more pleasing to tap (or click or whatever), but it is easier to “read” what the system 2 icons represent.

  37. YamiYukiSenpai wrote on

    I honestly hope they’ll go for System 2.

    The masterbrand icon on system 1 looks way too similar to GitLab’s. System 2’s masterbrand icon retains the familiar Firefox we know and love.

    System 1’s Firefox Focus icon will confuse Firefox Focus with a camera app.

    The general purpose icon for both systems are good, IMO.

  38. merfy wrote on

    I think abstracting to the fire symbol, rather than the fox, offers more tools for design. Having that fox head be the overall unifying brand symbol doesn’t make much sense as it doesn’t thematically fit the rest.

    I like System 1’s origami-figure approach, but I fear there’s not enough contrast and the symbols are visually very noisy with all the gradients. I think some of the symbols could be simplified quite a bit, e.g. removing the corner circles from the photos icon would remove some distraction and make a stronger statement.

    System 2’s line approach, in comparison, is much cleaner and seems like it would scale better, but I’m not a fan of the interrupted lines. The orange row after the Firefox icons is particularly well done, with well-defined white space that makes the icon, well, iconic.

    As far as the Firefox icons: the ones in System 2 look empty without a globe behind them. I’ve always thought the fox’s pose was a little stiff and inorganic. The shorter snout looks better though; System 1 looks a little weasel-y.

    I do wish the design would move away from, or at least simplify, the gradients a bit. They appear a little dated and juvenile in a world of minimalist design.

  39. Stefano Tarquini wrote on

    I like the system1 firefox masterbrand icon because it had to be different for the icon of the web browser; it is more compact and simmetric icon also to using in information campaign on media. For the web broser i like system 2 general purpose browser icon, more stylish and modern icons. I prefer System 2 singularly focused browser icons becuase i like theese kind of icons for the bar in an application or web broser… they are clear and minimalistic: coloured line on white background. At he end i don’t like nor the system1 nor the system2 icons for new apps and services. I like plain and solid icon, fully coloured but they clearly and rapidly identify the app/service. In my previous exeprience with firefox OS i didn’t like much the icons. I want that each icon show own brand.

  40. Cassie wrote on

    1. Do these two systems still feel like Firefox?

    Master Icon & General-purpose browser icons:
    System 1: master icon is quite disconnected from the rest of the icons, and it feels detached from the Firefox heritage. General Purpose icons: shapes are too detailed, hard to read at small scale.
    System 2: master icon has a closer link to the Firefox heritage. General purpose icons work quite well both on large and small scales. However, colour can be differentiated better.

    Singularity-focused icons and new apps & services:
    Icons for these two specific groups in both sets feel a bit generic.

    2. How visually cohesive is each of them? Does each hold together?

    System 1 is more visually cohesive than system 2. Since system 1 uses colour blocking, and all icons in this set are done the same way. However, the colour system can be expanded for further differentiation between icon groups.

    System 2 deviates at the singularity-focused level. I understand this treatment, as it is trying to separate secondary icons from the primary. However, this introduces an inconsistency in visual language.

    3. Can the design logic of these systems stretch to embrace new products in the future?

    Specifically regarding Singularity-focused and New Apps icons:
    Yes, the design approach for both systems are quite modular. However both face similar issues regarding readability. When viewed at a very small size, System 1’s icons start to look too visually similar. System 2’s icons read better than System 1, however there are too many details regarding shapes as well as colours, which also make them a bit difficult to read. Aesthetically, System 1’s approach is more suitable than System 2. The system just needs to be refined to introduce more unique, differentiating, and contrasting features.

  41. Mauro wrote on

    System 1 for me! :)
    I don’t like very much System 2.

  42. Mark wrote on

    I love the icons from the first group. Especially the main logo, it feels like it would be nice for it to be more unique – such as this – when put next to the Firefox Quantum logo. Keep up the good work!

  43. jinxx wrote on

    What the first commenters wrote: group1 with the group2 browser icons, pls. :)

  44. Wagner Carmona wrote on

    Hi!
    voto
    logo – 02
    Icones System – 01

    Esta nova Logo é muito Feia parece a flechinha do downloads colorida kkkkk

    This new Logo is very Ugly looks like the arrow of color downloads kkk

  45. Thomas Giavarini wrote on

    Systeme 2, because Ramotion is the best company of trending design

  46. Lauren wrote on

    I’d prefer group 1, with the browser icons from group 2

  47. johnny wrote on

    System 1

  48. Nat Green wrote on

    Icons seem cohesive in both cases – I like the bold simplicity of the 1st set. The 2nd set is really nice artistically but the details in the folding ribbons get a little lost at smaller scale.

    Would print both sets and hang em on my wall lol.

    Excited to see what’s next!

  49. Victor wrote on

    Group 1

  50. KO wrote on

    System 2 for me. The fox wrapped around the circle is so iconic. What a shame to lose it. I think System 1 main brand icon is way to abstract and will cause confusion with the gitlab logo.

More comments: 1 36 37 38 39 40 41