How Jon Hicks Created the Original Firefox Browser Icon

In 2004, the Mozilla Foundation needed a new visual identity for their web browser after trademark issues forced a name change from Firebird to Firefox. This article explores how designer Jon Hicks, in collaboration with the Mozilla visual identity team, conceptualized and illustrated the original Firefox logo. From early sketches inspired by Japanese brushwork to the final rendering in Macromedia Fireworks, the creation of the flaming fox wrapping around a globe was a swift, collaborative process that resulted in one of the most recognizable icons in tech history.

The process began when Steven Garrity was tapped to lead Mozilla's new visual identity team. Because the browser had just been renamed to Firefox, the team needed an icon that represented the new name while conveying speed, global reach, and modern design.

Although a "firefox" is actually another name for a red panda, the design team quickly realized that a red panda did not easily translate into a striking, recognizable symbol at small sizes. Instead, interface designers Stephen Horlander and Daniel Burka brainstormed concepts based on a literal red fox. Burka created the foundational concept sketch: a dynamic red fox with a fiery tail wrapping itself around a blue globe.

Mozilla then brought in freelance designer Jon Hicks to turn Burka’s rough concept into a polished, final icon. Hicks began by refining the anatomy and posture of the fox. For inspiration, he looked at a Japanese Bible he owned that contained traditional woodblock prints and brushwork. The sweeping, fluid lines of Japanese art heavily influenced the final shape of the fox, particularly the jagged, flame-like segments of its tail and the curve of its body.

To illustrate the icon, Hicks made the unconventional choice to use Macromedia Fireworks MX rather than the industry-standard Adobe Illustrator. Fireworks was a hybrid vector and bitmap application designed primarily for web graphics. Hicks preferred it because its vector tools were intuitive, and it allowed him to easily apply live gradients, feathering, and transparency effects to create a three-dimensional, glossy aesthetic. This style was heavily inspired by the "Aqua" user interface design popularized by Apple's Mac OS X at the time.

Hicks constructed the icon by layering vector shapes and applying radial and linear gradients to simulate light and depth. He designed the fox to be looking up and to the right, a compositional technique used to suggest forward motion, optimism, and speed. Only one of the fox's arms was drawn grasping the globe, as adding the second arm cluttered the silhouette when the icon was scaled down.

Finally, Hicks refined the globe itself. To ensure the icon remained clear and legible at tiny sizes, such as a 16x16 pixel browser favicon, he kept the landmass shapes vague. By intentionally avoiding the depiction of any real-world continents, Hicks kept the visual noise to a minimum while simultaneously ensuring the browser felt truly global and not tied to one specific region of the world.