The New Etihad Airways Icon System by Picons

Beside crafting new stock icons and custom add-on icons compatible to existing Picons icon collections, such as Basic & Thin, I also design individual icon systems adapting to the client’s brand.

Few years ago, I had the opportunity to create a brand-new icon system for Etihad Airways. For those not familiar with, Etihad Airways is the national airline of the United Arab Emirates with its home in Abu Dhabi.

This was a great challenge and pleasure for me, not just because I was tasked to design 200+ custom icons, but because I could craft a unique icon system for a global audience. Designing airline/airport icons might just be the dream of every (icon) designer out there.

At the end, and over a period of 3 years, we did create more than 400 icons.

I. Feeling the Brand

Designing an individual icon system starts with learning the client’s brief and brand guidelines. The icons, as a part of the corporate identity, play an important role in presenting a consistent image of a powerful and successful brand.

A central role in Etihad’s identity plays the Facets of Abu Dhabi.

The Facet exists in the Etihad wordmark and is drawn from the traditional Islamic design and modern Arabian architecture producing an effect that is precise and aesthetically pleasing. This pattern is found to appear consistently across our home Abu Dhabi as an architectural feature and design pattern, thus subtly adding to a seamless experience.

From the Etihad Brand Guidelines, 2016

II. Exploring the Icon Style

We tried 3 different design approaches, to figure out which one would work the best: outline, glyph and a combination of both.

Style A: Thin outline icon style (consistent stroke weight, round & miter joins combo)
Style B: Glyph icon style with triangular “negative space”
Style C: Outlines (2 stroke weights) + filled shapes combo

The client chose to go on with outlines. The final icon style has adopted the combination of rounded and sharp corners. All icons share the line strength of 1 pixel. And there is the golden facet.

The Facet
When creating an individual icon system for a brand, you just need to implement something unique into them. Icons need to be obvious, that’s why great icons are using well-known metaphors. Although when speaking of the icon style, we don’t want icons to look too generic or special, just for the sake of being special. That’s where the Facet plays an important role. 

Final icon style

Each icon in the system includes a little golden Facet. It is connecting the icons to the brand and let the icons stand out from your everyday stock icons.

III. Defining an Icon System

The Construction
On of the first tasks, after figuring out the icon style, is defining a grid. It is important that the icons sit on the pixel so they are always crisp and sharp (pixel-perfect).

Although pixel-perfect plays no role in print and when used on retina displays, it’s still considered as the best practice for crafting large icon systems.

IV. Showcases

Disclaimer: Images courtesy of Etihad Airways

Picons turned 8

8 years ago…

In Aug 2010, I released my first icon set called Morphix Pictograms. It started as an experiment containing my personal collection of 140 vector icons, I have used for designing websites and apps. There was no big icon market back then and probably just few designers focusing on icons, but I believed there must be a lot of designers with the need for a consistent icon set they could use in their projects. I tried to spread the word and found few enthusiasts that liked the icons. One of them was Veerle Pieters, who bought and mentioned them in her RSS feed.

Veerle’s mention has skyrocket the awareness and gave me the necessary push to invest more time into icons. I practiced a lot and added more and more icons to the collection. The first Picons Basic collection was born under the new brand Picons.me.

In 2013, Apple’s iOS 7 design revolution has instantly triggered a surge for outlined icons. The first Picons Thin collection with 500 icons became a great hit in the design community. The collection has been extended twice since then, and is now containing 1700+ outlined icons.

It is very flattering when prominent design teams around the world start using your icons, but I’m especially thankful for all the freelance designers and one-man-band developers that have bought and used Picons since then. Thank you!

Picons is still there, with a clear goal to become the gold standard for every designers & developers toolkit. Last year we released Picons BasiColor and few months ago a Picons Thin update with 660 new icons. There is a new icon set in the works – a complete redesign of the Basic collection.

Thank you for your support and stay tuned for new icons!

– Gasper

New: Picons Thin 2 – an update to the most popular outline icon set

As already mentioned in the previous post, this update took us more than 2 years. And now it’s ready.

Picons Thin 2 is an extension to the original Picons Thin outline icon set with 663 new icons, sorted into 30 categories: Charts & Analytics, Business, Money & Finance 2, eCommerce, Delivery, Badges, Maps & Navigation 2, Movies 2, Media Controls, Essentials 2, Devices, Architecture & Construction, Print & Papers, School & Learning, Relationship, Pregnancy & Baby, Leisure & Fun 2, Winter Holidays, Food & Cooking 2, Home & Living 2, Wellness & Beauty, SEO & Marketing, Users & People 2, Communication & Messaging 2, Hierarchy, Files & Documents 2, Network & Sharing 2, GUI elements 2, Office, Law Enforcement, and Touch Gestures 2.

Click here for a full icon set preview

The icon set comes with all the usual vector source files (AI, EPS and PDF), a Sketch file, a Photoshop file (PSD) with icons as Custom Shapes, a special CSH file for importing icons into your Custom Shape toolbar, and each icon as transparent a PNG (available in 6 different sizes: 24, 48, 72, 96, 120 and 144 pixels). We are also including an Iconjar archive, SVG files so you can create your own individual icon font, and EMF files to be used in Microsoft Office.

Download Picons Thin 2

Soon: Picons Thin 2 extension with 660+ brand new icons

It’s been more than 3 years, since we released the first Picons Thin icon set. The characteristics of the icons were simple – a coherent outline icon set, build on a 24-pixel grid and fully compatible with Apple’s new icon design guidelines for iOS.

Obviously the icons weren’t only useful for iOS. The new icon trend took over and outline icons became a standard in UI design for the past years. Not surprisingly, Picons Thin has been our best-selling icon set, especially after the immense update in 2015, when we redesigned the complete set and extended it with 500+ new icons.

Now it’s time to announce Picons Thin 2.

For the past 2 years, we have been working hard on a major extension to Picons Thin. We are very lucky to have a great community of designers giving us a lot of feedback and request for new icons. We were listening to your suggestions and made 660+ new icons, sorted into 30 categories.

The themes we cover are: Charts & Analytics, Business, Money & Finance 2, eCommerce, Delivery, Badges, Maps & Navigation 2, Movies 2, Media Controls, Essentials 2, Devices, Architecture & Construction, Print & Papers, School & Learning, Relationship, Pregnancy & Baby, Leisure & Fun 2, Winter Holidays, Food & Cooking 2, Home & Living 2, Wellness & Beauty, SEO & Marketing, Users & People 2, Communication & Messaging 2, Hierarchy, Files & Documents 2, Network & Sharing 2, GUI elements 2, Office, Law Enforcement, and Touch Gestures 2.

Here is a sneak & peek of just few icons:

Considering the immense amount of work put into the extension, we’re delivering it as a new stand-alone icon set – part 2. As always, buyers of Picons Thin will get a very special upgrade option for a significantly reduced price.

Right now, we’re making the “last mile” and preparing all the exports. The icon set will come with all the usual vector source files (AI, EPS and PDF), a Sketch file, a Photoshop file (PSD) with icons as Custom Shapes, a special CSH file for importing icons into your Custom Shape toolbar, and each icon as transparent a PNG (available in 6 different sizes: 24, 48, 72, 96, 120 and 144 pixels). We are also including an Iconjar archive, SVG files so you can create your own individual icon font, and EMF files to be used in Microsoft Office.

If you are already a customer of Picons (any icon set) you will be automatically notified by email on the release day. For others, you are welcome to subscribe to our newsletter.

Stay tuned!

How to export vector icons to multiple sizes and formats in Adobe Illustrator?

Making an icon set with a few hundred icons and exporting them to various sizes and formats can be a Sisyphean task. For me, it took days or even weeks with a lot of manual work: clicking, naming the files, resizing, etc. Imagine you had an icon set with 1000 icons, that needed to be exported to 5 different formats and 8 sizes.

With the release of Illustrator CC 2015.3 in June 2016, Adobe made promising steps to help icon designers exporting icon sets much easier. The new ‘Export for Screens’ feature you can export Artboards and Assets (a group of vector objects – in our case icons) to multiple sizes and formats with just a click. But there is a caveat with Artboards you probably heard about. Illustrator allows you to create only 100 artboards per single document. So, how to export them?

Click here to read the full article I wrote for Iconfinder’s Blog.