The friendly people at Sephora reached out to craft some custom icons. Sephora is the leader in personal care and beauty products retail, with 2,700 physical stores in 35 countries worldwide.
We started with tap bar navigation icons for the mobile app…
and experimented with mobile app icons and other graphics.
The collaboration has been very successful and over the last 2 years, we created a comprehensive icon system for their online presence.
With more than 200 icons (and counting), the new icon system quickly became a valuable corporate asset.
We took a super sleek and simple solution for the icon system – outlined icons, consistent line weight and curved edges. The icons reflect a friendly visual voice, just like Sephora, and the Picons Thin icon collection.
Although very slow progress on the new icons, Picons is still alive with some fresh icons.
I’m working on two new sets: 1/ the third edition of Picons Thin with additional icons and 2/ a new and completely redesigned Picons Basic icon set. It’s been 11 years (!) since I created my first icons and I’ve learned a lot in the past years. I guess it’s time to finally make a new comprehensive set (new metaphors and consistent icon grid).
But, let’s talk about the next release of Picons Thin first. Picons Thin is a well known and popular icon set, using just consistent thin lines (1 pixel on a 24-pixel grid). This outlined icon style was introduced in 2013, right after Apple showed off the new iOS 7 together with some fresh icons that were thin and just outlined. The new style took over ridiculously fast and found its way into all popular desktop apps and websites.
Until the new Thin edition is completed, you can already see and use some new icons. For now they are only available via Iconfinder.
This icon set covers the following symbols & metaphors: lights, ceiling lights, lightbulb, front door, garage door, window covering, keypad, fingerprint, door lock, security system, heating, cooling, climate, air conditioning, fan, ventilation, solar power, volume, temperature, speakers, video cameras, technician, leaving/coming home, sprinkler, watering socket.
This icon set covers the following symbols & metaphors: coronavirus, virus, avoid handshakes, avoid gatherings, face mask (male, female), sanitizer, disinfection, hand disposer, clean hands, washing hands, vaccine, test, lab results (positive, negative), keep distance (1 m), fever, high temperature, cough, temperature test.
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.
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.
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!
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.