Browse by...
Home Resources Blog

I recently took on the job of updating the iconography for our mobile site – which was starting to look a bit dated, especially in Apple’s shiny new iOS7 UI. Luckily, I love icons… and since I know there’s a few icon-geeks like me out there, I thought I’d share my process for this job and hopefully give some insight into why I thought they were a worthwhile consideration.

Like most projects, this one started with a brief and a quick chat with the designer who looks after the mobile designs – the direction he wanted to take was pretty clear; clean, crisp, iOS7. Usually an iconography project starts with an exploration of themes (visual directions the iconography could take), but since that hard work had already been done, my first job was to do a bit of iOS7 research.

Iconography from iOS7Iconography from iOS7 was a good starting point

This article was a pretty awesome resource on the type of visual style Apple have adopted for their new OS – this, plus some digging around in my iOS7 Beta gave a pretty good idea about the style I’d have to adopt; single-weight lines, no fills (with the exception of active states) and a curved-aesthetic. Seemed pretty straightforward, although directly copying Apple’s style concerned me a little bit.

Lines lack character

Technically speaking, emulating Apple icons is fairly easy, in fact there’s already countless line iconsets already floating around the web waiting to be used. The concern I had was the lack of character – line icons aren’t ownable, they don’t have any kind of personality. So I started looking into ways I could use that same Apple style (above), but add a bit of Campaign Monitor expression.

After trawling through my icon books (The Icon Book is a worthwhile read) and inspiration, I found my muse… a mix of icons from Mads Burcharth (a design-hero of mine) and ‘Dutch Icon’ – both of whom combine single-weight line complexity, curves, angles and negative space to create unique-looking glyphs:

Finally, line icons with character

Get a grid

You’d think the next step would be to start sketching – but for this particular job, I was more worried about the grid… since these icons needed to work in very specific dimensions, not to mention they needed to work on retina as well as regular devices. From past experience I’ve found that setting a grid in Adobe Illustrator is pivotal in creating a consistent set of scalable icons that work in both vector and pixel.

The underlying vector grid

After a bit of trial and error, I found a grid that worked – and since I was working in both Adobe Illustrator and Photoshop, I needed to make sure that grid translated well between vector and pixel without creating weird fuzziness and half-pixels. Without getting too nerdy about it, the best results happened when I snapped to gridlines divisible by 2, and never went below a 2px stroke width.

Sketch. Concept. Repeat

At this point I did a heap of sketching, auditing and doodles (below) – with the intention of getting my head around the best way to represent a certain task in picture form. Sometimes the icon I thought would work best ended up looking totally weird… but for me, sketching is an extremely important part of the process, and by far the quickest way to split the good ideas from the bad.

A few sketches

From here it was about getting stuck into Illustrator, chucking the ideas that didn’t translate too well to screen, and refining the ones that did… periodically stopping for reviews with the designers. The result I was working towards was a complete set of icons that everyone agreed on, worked well as a set, and looked great at all sizes. As a rough guide, it took about 20 concepts for each icon to get to that point. Here are some of the icons that didn’t make the cut:

Some of the discarded iconsSome of the discarded icons (the speedo and glasses were my favourites)


This is the part where I needed to take all the approved icons, and make sure they were all structurally similar, and fit exactly to the grid. Adobe Illustrator zoom level is set to 5825.53% and everything gets all Rainman for a while.

This needed to be done for each icon, which were then placed into two master sets – one in vector format, the other in pixel. At this point, I was pretty relieved I’d done my gridwork earlier.

Getting up-close and personal with Adobe Illustrator

And that’s a wrap!

In total it took about 2 days to draw a set of 20 icons that not only looked at home within iOS7, but had a unique character we could call our own. On a personal level, it’s satisfying to see iconography working well as a set, and at any size – it’s what makes the above process worthwhile.

A selection of the final icons

And that’s the story behind creating something so seemingly simple, but so often overlooked. Props to Adham for doing a lot of the hard work for me on the visual style, and to Mads for this GIF. I’m looking forward to seeing these being used in the app, keep an eye on the blog for more updates on that.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free