Icon library

Overview

Introduction

Creating icon design style & library for a web platform

Context

Background

Icons are essentially shapes and symbols that conveys message often by deriving meanings from metaphors and imagery. However, they're also one of the most used tool of communication while designing digital interfaces.

In any UX project, icons plays a very crucial role as they reduce the dependency on words while improving the aesthetic appeal. However, like any other language, they do have a proper vocabulary and grammar which we refer as style. So the project was to design an icon design style for UNI.xyz

Project history

During my internship at UNI, there wasn't a central platform for hosting competitions as we have today. So for each competition we used to create a separate website. I also designed website for 2 competitions and both of them had very different visual styles and appeal. The icons I created for them are shared below:

This icon set was created for one of the website (and document) with a mix of line and fill in multi-fill (in shades of grey).

This icon set was created for a different website. At this point I wouldn't even call them icons. They're mini illustrations with all the details including shadows, gradients & multicolor. However this was my first attempt at making icons and this is where I started from.

Task

The brief here was to create icon design system. Inspired from material icons, our self imposed constraint was to adopt soft edge style with outline (stroke) type icons.

My role

During my tenure at UNI, I streamlined icon design process, refined the guidelines and added more than 150 icons to the library. I also was looking after icon management system which you can read about here: this case study

Research

Case study

To understand the nuances of designing an icon, I referred multiple articles, videos, books over internet including Material icons. Apart from understanding nuances of designing an icon, I also researched about their implications, appeal and terminologies.

Process

Approach

After referring Material design guidelines, I started with 24px grid for designing icons however given the complexity of icons we already had, it was near impossible to fit some of the icons to that size.

To combat that, I categorized icons into various groups on basis of usage on the platform and each group had a fixed size of either 24px or 48px.

However it soon became a pain to manage both sizes together and in UI, there were cases where I had to place icons of different categories together. Thus the differences in size (thus thickness) would impact the visuals of the webpage.

Challenges

The biggest challenge was to design an icon which conveys it's meaning to end user. There are many icons which have became industry standard (like dustbin for delete) and changing them wouldn't be a good for users. Also there were some use cases unique to UNI and creating meaningful icons was a challenge.

Process

To overcome the problem of size, I finally took a call to convert all icons into 48px grid. Smaller icons were upscaled, updated and in some cases redrawn to fit. Then I created a group where anyone in team could ask for a specific icon he/she needs and I'd create and add that in the library

Outcome

Final design

We soon felt the need of having different states of these icons (bold, filled) and I added those in the library as well

Impact

Currently we have 150+ icons we use on our platform with every single one crafted with care and love. We also have a developed a visual catalogue for the same. If you haven't read about the asset management system and visual catalogue already, you can find it here:

Iconfont