InVision eBook Icons

How to draw hundreds of incredible icons, not go insane, and make it look easy.

Mark Johnson
From the Residents
Published in
3 min readMar 1, 2017

--

Drawing a hundreds of consistently good and interesting looking icons doesn’t necessarily mean we were creative. It means we were smart.

When InVision came to us asking for some help creating some icons for a series of eBooks they were working on — we were pumped. We’d known of InVision and had been using it quite a bit! And now their wonderful design and marketing team was talking to us. We were humbled and excited.

We started off with a phase of research and brainstorming with a designer from their team. They had an idea of what they wanted to do, and how they wanted things to look from a high level. We got some moodboards from them, and sent them some of our own. Eventually had a direction to play with.

The tricky bit wasn’t actually the selecting of a direction — but figuring out how we’d be able to do this for 10+ books. To do this we decided to create some constraints. We knew a few things — which helped a lot.

  1. There’d be a bunch of books.
  2. Each book would have about 20+ icons.
  3. Each chapter would have an icon.
  4. We knew which colors we were going to be using.
  5. Look like they were part of a family on mobile, tablet, and web.
  6. Feel like they’re part of the same family regardless of book number
  7. They’d need to be able to create a background pattern with them

With all of this known, we started by defining a few rules. We created a grid, and a set of rules which the illustrations needed to adhere to. Things like setting a minimum corner radius, consistent line weight, etc.

Besides giving us a consistent system to work with, it gave us a fun constraint to challenge. While each book would vary with content, we’d have a guiding light in our system to work back towards.

Why is there a Pizza Icon? Check the notes from Chapter 3, Book 1

We took what seemed like an intimidating task, “Would you like to create hundreds of icons?” And made it as easy as pie.

--

--