Designing iOS7 style icons

By Buzz on 2nd October 2013

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 iOS7

Iconography 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 icons

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

Artwork!

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.

16 Comments

  • Tom Durkin
    2nd October

    These Icons are bad-ass! great work…and some useful tips here too!

  • Rick Waalders
    2nd October

    Love the glasses icon! Too bad they’re discarded :)

  • Sarah Jane Robertson
    2nd October

    These are so stylish. Love them. Will be sharing the blog as a point of inspiration with the team

  • Scott Dixon
    2nd October

    Great to read the process. Nice work.

  • Evan Dinsmore
    3rd October

    Nice guide, but I wonder if as designers we should be discouraging others from following Apple’s lead and instead designing with users in mind. This is a good read: https://medium.com/design-ux/a93647e5a44b

  • Mathew Patterson
    3rd October

    Thanks for the feedback all! @Evan, that’s an interesting read, though light on useful references. It’s interesting to compare it to this Boxes and Arrows article which had different findings.

  • Nicki Snoblin
    3rd October

    Interesting and helpful - thanks!

  • Sandy Hathaway
    3rd October

    Beautiful work and very well timed. We are converting to flat design right now, and what has been disturbing me is that everything is starting to blend together. My eye has trouble grabbing onto the right icon for the brand I’m thinking of when I want to open it. As a branding specialist, this concerns me very much. Your icons with personality are really the right kind of thinking for evolving this design trend and extending it’s life.

  • HeroWP
    22nd October

    Super duper cool icons. Thank you for the info.

  • Joshua thatcher
    3rd November

    How can I get the icons

  • Ros Hodgekiss
    5th November

    Hi there Joshua, I don’t think we’ll be giving away the icons this time around, but if you’re after a set with a similar style, you might want to look into The Noun Project (http://thenounproject.com). Best of luck!

  • Shaun Lewis
    12th November

    Any chance you could offer up the grid for download as an AI file? If not, what size are you starting design at? 512x512? Just curious. This was very helpful, by the way. I appreciate the time you took to explain what your process looked like.

  • Buzz
    12th November

    Glad you liked the post Shaun! The starting point was actually a 50x50 artboard (I find it easier to work at smaller sizes), but an even grid makes it easy to scale up or down from there. You can download the original grid at http://campaignmonitor.com/assets/download/IconGrid.zip

  • Rob V
    7th December

    I must still be holding onto my 1980’s mindset by preparing camera-ready artwork at larger than final use.
    For Iconography I never thought that by working at a smaller-than-final size, the artificially coarse grid that results forces styling a certain beneficial way. I just tried it and found its easier to make decisions about fine-tuning the variations-per-size when coming from the smaller end

    Live and learn they say. I just lived.

  • 電動バウンサー
    11th March

    japan can help every one of us by integrating a lot of distinctive features and attributes. It is a unvaluable item for every supporter of japan.

  • Chris Heath
    10th September

    Great icons! By the way, Apple’s iOS icon grid is a proportional grid that you can use for buttons as well as app icons. This means you can work at any scale, e.g., 1024 x 1024 or even higher. The thickness of line for the button circle and your linework can be determined geometrically.

    If you are interested in using proportional grids, check out my ibook: Icon Design, available on iBooks. https://itunes.apple.com/us/book/icon-design/id873778893

Sign up for free.
Then send campaigns for as little as $9/month

Create an account