Alif-Icon-Cover

Alif Icons -  A premium quality cultural icon set for designers and developers

Generating value in the intersection of digital art and culture through design

3 months ago, I set out to invent a repository of icons that captured the culture and tradition of Pakistan. The motivation of creating this collection of icon came from the understanding there was no unified repository that existed that would help assist online businesses and startups represents Pakistan’s identity, culture and traditions on their apps and landing pages.

While thinking about the name, I wanted to make sure all the aspects to be captured in one single word and decided to go with the word: Alif.

Alif-Logo-1

Whats in the name?

Alif, the first letter in the Arabic and Urdu Alphabet --> آ
Alif, resembles the roman numeral, 1. 
Alif, symbolizes the start of a journey whether personal or communal.

Even though the statements above have little to do with design, they perfectly capture how I intend the experience of using the icons to be like: For designers and developers to innovate something new that benefits humans to reach their goals and aspirations.

Punjab-Emblem
Demo-4
Demo-5


The Design Process

Alif icons is inspired by culture, so the formula was to find the right balance of originality and recognizability when designing the set. The set must be made that each icon is individually understood by the audience. 

To ship the icon set fast, I wanted to take an agile approach breaking down the phases into sprints. Sprint 1 consisted of the discovery and identity phase. Sprint 2 would be dedicated to organizing the. The final sprint would involve actively refining the icons, the colors and marketing material before publishing it on various marketplaces.

Alif-Icons-Design-Process-2

Discovery Phase

We kicked off the design process by first brainstorming some of the notable artifacts that are found in Pakistan. This we called the ‘discovery’ phase. We noted down the common icons then proceeded towards more obscure ones. 

We shifted around from writing on sticky notes to a more organized word document to record the names. The document has been useful in creating the change log that we are maintaining for version control. By the end of this phase we locked up on the following styles to draw:

Outline: These icons are blacks and white/transparent.
Accent: These icons have black outlines and a color that fills a core part of the icon.
Colored: This type mimics the real life color of the illustrated icon.

 

Alif-Icons-style

The outline version is built to work for signage, buttons and in mobile navigation bars. 

The accent version have 2 colors at max. They are designed with the intention to pop in marketing content or in websites to describe features of your product. They have an extra layer in the SVG file to 

The colored ones are more detailed and will work best in small format. While some can be labelled as illustrations rather than icons, the style has the versatility to be used for more than just 

We have created the SVG formatted icons to be versatile:

  • Developers have the ability to replace the colors via changing the hex code to make it bold and standout.
  • Designers can import the icons into Figma and change the colors from the fill panel.

Naming Convention followed:

- All names should be in small case letter
- In case of two or more words, a hyphen "-" should be used as a separator.
- For icons of outline type should have a "-outline" postfix next to the name. (e.g book-outline)
- For icons of accent type should have a "-accent" postfix next to the name. (e.g shop-accent, cotton-accent)
- For icons of full-color type should have a "-color" postfix next to the name. (e.g cricket-color, shop-color)

 

Visual Identity

We wanted to figure out what are we representing with these icons. The identity would be the building blocks of how we will advertise the icon set when publishing it on various digital marketplaces. 

Online businesses and individuals who sell products through websites within the Indian subcontinent utilize the same universal icon set in their branding, ones used by companies in Northern America or Europe. To give a perspective online in East Asia is unique and are very much culture driven. Their branding is structured for the local population and similarly not all

Prototyping

Now with the identity formalized, my designer and I established ground rules to start with the more complex icons first because this would allow us to stress test the pixel grid, stroke width and colors along the way while improving the design system over which we create the icons.

Through following this strategy, we were able to accelerate our productivity by 2x as when we started tackling the simpler icons, it was just a matter of taking inspiration from existing 

Rule of thumb to note going into the prototyping phase

  • Make sure the sizes are consistent throughout the set
  • Icons are defined within the pixel grid and
  • Set capacity of 4 colors in the colored icons.
  • Maintain same stroke width across set.

The Pixel Grid

After we had a clear goal, we started our first design sprint in which the designer and myself collaborated in creating rough sketches of the icons. We were quickly able to establish the pixel grid with a bounding box of 36px and 28px over which most of our icons are based on. The grid served as an affirming guideline for us to maintain consistency across the icon collection.

Pixel-Grid

Aside from the grid, we also established what properties and measurements we were to use when designing the icons, such as — stroke weight, stroke color, border radius.

 

Selected Works

Surkhi - Fact checkerProduct Design

Alif IconsIconography

Is your team hiring a product designer? Want to discuss ideas or projects?
Let's connect virtually!

Updated July 2020