Designing a custom icon library
By: Parin Ashra
Tags: User Experience, Icons, UX Design, Design, Case Study

Photo by Harpal Singh on Unsplash

Icons are simple yet powerful tools that relay information, a potential action or provide visual context as to what a user can or can’t do. They are used everywhere and they come in many shapes, sizes, design styles and colours. Popular websites such as thenounproject.com, flaticon.com, iconmonstr.com and more host thousands of icons and play as a libraries for websites and platforms.

Utilising icons from websites such as thenounproject.com for example, is extremely simple and easy to do however, there are pros and cons to this.

Pros

You can search for an icon and get hundreds of variations of that one particular icon.

of that one particular icon. You get the flexility of choosing multiple preset sizes and colours .

. They sometimes have icon library’s by the same designer so you can utilise icons that will have some level of consistency in their style.

Cons

These services can cost money and certain functionality to modify the icons to suit your needs can be exclusive to pay walls.

and certain functionality to modify the icons to suit your needs can be exclusive to pay walls. The icons libraries/collections, whilst consistent may not hold all the icons you desire and will only be limited to a select few within that library.

to a select few within that library. Whilst there are many designs in varying shapes, sizes and intricacy, they don’t always cater uniquely to your needs for your product and it’s direction.

My Role

During my time as a UX/UI Designer at Perlego (the world’s online textbook library), as we grew we realised it would have been beneficial to replace our icon library with a custom library. We noticed that some of the most well designed websites/apps or platforms had something that we didn’t yet. A custom designed icon library. A custom designed icon library negates all the cons mentioned above but also comes with all the benefits. With a custom designed icon library, you can create icons in any variation you want, in any colour you want, with a level of consistency that retains throughout the library. Once developed, with the correct guidelines in place, icons can be designed any time a new icon is needed for any purpose. It adds a sense of unique-ness, personality and individuality to your product and platform which can create a huge difference in a user’s experience.

As an in-house UX/UI Designer, I was fortunate to be given the exciting role and brief of designing and aligning icons initially focusing within the e-Reader highlight panel but then expanding across the platform with one unified icon library, unique to the company, retaining brand consistency and ensure scalability for the long term.

Initial challenges and questions

Before starting on this brief, I spent some time thinking about some of the challenges or questions this piece of work could bring. Right off the bat, I already had a couple come to mind:

I had never created an icon before, let alone an icon library. How does it work? What tools do I need? What is the industry standard for icons? What are the guidelines and best practices? At the time, the brand was developing and evolving for the future. To be consistent, further clarity on the brand direction was required in order to ensure the icons embody this direction.

The Process

Which tool to use?

Research suggested many iconographers and designers would use Adobe Illustrator to create icons. I however, decided to create the icons on Sketch as my proficiency is higher at using this application and whilst it may not be the norm, I read many articles and saw many videos where individuals successfully designed beautiful icons in sketch.

Brand direction

I started by trying to understand and clarify the brand direction. The company was growing and evolving and with it, so was its identity. Through discussion within the design team and prior research it was decided that we should come across to users as calm, human, friendly, simple and minimal.

Initial icon research

Next, for the product and website, I made a note of the starting point — what do those icons currently look like and what new icons will we require for implementation?

e-Reader

- The initial main focus was creating icons within the e-Reader.

- Icons to represent additional functionality when highlighting text.

- Icons in the side panel to allow the user to adjust the e-Reader for the personal reading preferences.

Website

- The secondary focus was create icons for the book information page.

- On the book info page, navigational icons such as chevrons for breadcrumbs would be required.

- Icons for displaying additional book information such as page numbers, language, format and additionally functional icons to provide the user the ability to favourite, add book to reading list and share the book would be needed.

I moved forward and researched a few icon libraries to get an idea of how to translate the current and newly required icons. In order to provide the required brand feel feel, the icons should not feel sharp, rough or formal.

Examples of some of the libraries I explored are showcased below.

Material.io

Feather icons

Eva icons

The design grid

Research from Material.io, iOS design and numerous other articles and sites showed that icons work best when designed in sizes 16px, 20px , 24px and 32px. We wanted these icons to be scaleable without compromising the integrity of the icons as it increases or decreases in size to be used in other places. Considering we are aiming for pixel perfect icons that also had to work on mobile, we opted to design icons on 32 x 32px grid.

The 32px grid I used to design icons.

In this grid, the rule was to try and maintain the icon within the blue square which provides the additional white space padding around the icon to let it breath.

Line width & Rounding

After researching these libraries, we noticed platforms such as Airbnb and Apple use icons with 1px line width and whilst the icons they utilised were designed extremely well, a 1px line width would not suit our platform. We wanted something bolder, more visibly accessible and fills the space whilst the white space around the icon allows it to breath.

It also became apparent that by default we should design icons in #000000 (black) and then create other colour variations for other uses afterwards as our platform utilised a white background overall, so the icon could contrast well.

In line with what I mentioned earlier, we needed something with rounding to keep it friendly, but keeping the rounding visible, not overpowering. So we agreed to utilise a 2px line width with a light rounding managed by adjusting bezier points at 0.5px intervals.

Utilising a 2px line width and rounding my manipulating the bezier points at 0.5px increments.

A “delete” icon designed on a 32 x 32px grid.

Creating symbols and naming conventions

In order to ensure these icons could be used as a library in their multiple colour variations by other designers, I had to convert these icons to symbols and when you convert to a symbol, you have to apply a name to the symbol, the perfect opportunity to establish an appropriate naming convention.

Converting shapes to outlines.

As the icons initially are designed as shapes, I had to convert the individual shapes to outlines (command+option+O) and then apply the “union” function in Sketch to merge it all into one combined shape.

When creating the symbol, the naming convention applied would be as follows:

{icon / “name of icon” / 32px / black}

This way, if I was to create another delete icon that is 24px size for example, or white in colour, the icon can be accessed as part of the library under the icon name “delete”.

Once all the icons were created, I uploaded them to the InVision DSM (Design System Manager) which holds all the icons and allows our development team to have access as well as detailed guidelines on how the icons should be used, when it should be used, the rules surrounding which colour variation should be used under what circumstance.

Testing the icons for optimisation

In order for the icons to translate as directly as possible, I ensured testing was done on each icon, especially on those which may have any doubt that it would not translate to users correctly. I did this by approaching individuals on a one to one basis initially, asking them their thoughts on what they thought the icon meant. If they felt it translated to anything other than what I had intended it to be and if so, what was it about the icon that made them think this. That way I could address it or be aware of it for another iteration to not make the same mistake in design.

As the icon library developed, so did the way we tested the icons. We started utilising usabilityhub.com which allowed us to upload images of icons and ask users on a wider scale their thoughts on the design of the icon. This provided valuable feedback as we could get a stronger statistical visual on what the user’s preferences leaned toward.

The end result

Working on this brief was a fantastic learning experience not only from a user research experience, but also a skillset experience.

I was able to design and deliver a set of icons that complimented the visual direction and brand the company was aiming for. The icons themselves were user tested and ensured a positive visual translation per function. They were easy for the user to recognise both within the e-Reader as well as branching out to the book page.