SketchCasts is closing. Read the announcement and what the future holds. Read more
Loading video..

Get access to 150+ videos on design and code to boost your skills

become a member
love watch later
8 minutes | 03 Aug 2018

Recreating the New Firefox Logo in Sketch

Recently, Mozilla decided to evolve their brand identity to reflect their values and organize all their different products under the same design system.
To this effect they came up with 2 different approaches to their iconic Firefox logo design that most people know. So as of today, Mozilla has presented 2 design systems on their blog.
And they detail how each system masterbrand affects their other products.

What's also interesting about this is that Mozilla is asking the community for feedback. All of these icons are not final and they will be revised in the following weeks but it's interesting to see how Mozilla will handle the response from their user community and what direction will the brand evolve to. Which one do you prefer?

Anyway, in this video we're going to replicate the system 1 Icon in Sketch and we'll probably do another one on the System 2 Icon. Special thanks to Inês Oliveira for helping out with this video.

  • Login to see the download links.

Pedro Sousa

Developer and Designer Hybrid



Material Theme Editor for Sketch

Material Theme Editor for Sketch

13 minutes *free
Quick tip: Using real data in Sketch

Quick tip: Using real data in Sketch

2 minutes *free
Mac Icon Design Workflow

Mac Icon Design Workflow

10 minutes