The Safari icon Set

Here’s a Safari icon set that explores new compass concepts for your favorite browser! After months in the making and with a ton of help from people on dribbble and twitter I’m finally releasing this set for everyone to enjoy.


Safari Icon Set

Something that started out as a doodle on my iPad grew into a cascade of late nights studying compass concepts and exchanging ideas with designers and good-folk alike. Sometimes you just stumble upon a fun notion and you gotta run with it, in this case it was as simple as the idea of why the Safari icon always had to depict that one type of Compass. A few months later, and I’m finally wrapping up 10 fun new compass icons for you guys to put in your docks.

doodling safari
Played around with some early rough sketches

I’ve decided to show some more high res artwork and give some justice to the many hours spend by reflecting a bit on each icon below, but if you just want to skip that and get the download, head straight over to the Goodies section and download the set. If you like to look at big icons and read some more words, read on.

Blue Classic Compass
It all started out with a remake of the original Safari icon

The Compasses

First off, I owe a huge thanks to the community for giving me feedback and feeding me ideas for this project. My awesome followers over at twitter has directly inspired several of the icons in this set and sharing the progress over at dribbble was a tremendous motivational boost.

Ancient Mariner Compass
A more dated look for your browser.

So after initially just setting out to create a fresh take on the existing Safari icon, I quickly struck a rich creative vein – the idea that the concept of virtual navigation and browsing the internet didn’t have to be restricted to the representation of just one type of compass. We’ve used, and still use, an abundance of different compasses depending on our situation, so it was time to start browsing the web for compasses.

Army Compass
The concepts quickly became less about realistic objects, and more about creating a theme in each icon – here’s a professional black look, something I imagine a soldier carrying around. I have no idea what he would use a leveler for though.

As with all personal projects, the fun is that there’s only the limits that you set for yourself – which basically meant that if a compass idea started forming, it wasn’t as much about “would this compass exist in real life?”, but more “would this be a fun icon to do?”

Hiking Compass
Started moving away from the original template and playing around with new shapes.

As the low hanging creative fruit started to run out, people started suggesting other types of compasses that pushed the concept further.

Electronic GPS Compass
A GPS-styled (hello Garmin?) navigation.

As if the hundreds of compass pictures that was clogging up my desktop wasn’t enough, I started getting deeper into maps and cartography, using them for backgrounds and getting inspiration. If you haven’t noticed before, mapmaking is such an elegant art, displaying a high level of information in a digestible format. I think most interface designers agree that it’s something we try to achieve every day.

Pirate Compass
Concepts even got a bit silly, like this pirate themed one. I have no idea how the sundial got there, but someone suggested it on twitter and I thought it was fun.

As the compass ideas kept flooding in, I tried to mesh and combine concepts that I thought would be a challenge to do, technically. Common for several of these icons is the attempt at modeling particular textures or obtaining a specific effect.

Gyroscopic Boat Compass
The challenge in this one was to create a larger depth and a higher level of realism in the reflections.

In one icon the challenge would be to create a realistic reflection, in another it was mimicking a particular material, like water in the, truly back to basics, floating needle compass:

Floating Needle Compass
I looked at countless of glasses of water to get the refracting light right

So as I progressed through the set, the reward became setting up a particular challenge, wether it was a texture or just conveying a “mood” and then trying to solve that in something resembling a compass.

Aircraft Compass

For the basic textures I used a slew of Photoshop filters and for some of the more realistic stuff I scoured the web for pictures and references, warping, combining and editing them until I got the result I was looking for.

Safari World Compass

Never stop doing what you love

Even though this project often ended up being pushed aside for a ton of “real” work, I kept coming back to it – sneaking a night here and a few hours there. And it’s personal projects like these that remind me that we can’t loose sight of the things we like doing. Creating something, just for the fun of it, to test your skills and to challenge yourself to collaborate, take inspiration and breathe life into a concept is such a vital part of being a designer. Especially when freelancing or working on large multi-month projects, we tend to forget the thrill of just creating something, letting your ideas run free, safe from a budget restraint or a looming deadline. Cause let’s face it, most of us got into this for that feeling and sense of achievement you get from nurturing an idea, receiving creative input and the stamina to see it through to the end, wherever it takes you.

Go Download them!

Enough talk, I Hope you enjoy these icons just half as much as I enjoyed creating them. Head over to the Downloads section and download the set.