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

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!

New Colorful Icons for Your Next Project

We have been quiet for some time but we have been working on amazing new icons all the time. And this is our first (but not last) release after some time.

Picons BasiColor - Color icons

BasiColor is a brand new, colorful, trendy & minimalistic icon set. Each icon is designed to precision on a grid, which ensures 100% consistency. Perfect for Websites, Apps, iOS and Android.

The 274 icons are organized into categories (see the full preview).

The perfect icons
100% scalable, high-quality icons, each created with great passion and expertise, to meet the highest design standards for your next project.

Customizable
We use super trendy and balanced colors. And you can easily change the color to fully fit your UI or brand guidelines.

Easy to search for
With Iconjar all your Picons icon sets will be organized by category, tagged, and the right icon is always at your fingertips.

 

What’s included in the icon set?

File types included in the icon set

  • .AI, .EPS, .PDF vector files
  • .PSD Adobe Photoshop file with icons as vector Smart Objects
  • .Sketch file
  • .PNG‘s: 24px, 48px, 72px, 96px, 120px, 144px
  • .SVG files for using on websites or making your custom web font
  • .EMF Windows Enhanced Metafiles for Microsoft Office (how to use them?)
  • .iconjar Searchable Iconjar archive (read more)

 

Special offer for blog readers

We are giving you a coupon code to get 15% off the regular price ($30). You can get the new Picons BasiColor for only $25.50 (coupon code: “15forbloggers”).

Get the icons now (-15% discount activated)

Using vector icons in PowerPoint

Using Picons vector icons in Powerpoint

A guide on how to import vector icons into PowerPoint presentations — the right way

Want to use vector icons in your next presentation, and to change the color, size and shape of the icons within PowerPoint?

Sure, you can always import icons into a PowerPoint presentation as bitmap images (JPG or PNG), but there are two big disadvantages to this:
– There is a loss of quality when resizing an icon to a bigger size,
– You cannot change the color of an icon or edit it in any way.

Luckily, Microsoft PowerPoint (2010 or newer) supports some of the basic shape manipulation techniques that we know from vector editing software like Adobe Illustrator. However, this comes with a major setback – the behavior is not the same with macOS as it is with Windows.

a) Using Windows

To be inserted into a Microsoft PowerPoint presentation, your icon (or any other vector graphic) needs to be of the Windows Enhanced Metafile format (.EMF). With the latest update, all our vector icons already include the necessary EMF files, which are compatible with Microsoft Office.

1) In PowerPoint, select “Insert pictures” and choose one of the EMF files on your computer.

Insert vector icons in PowerPoint  2) Right-click the imported icon and un-group it. You will then see the following PowerPoint dialogue box asking: “Do you want to convert it to a Microsoft Office drawing object?” Press “Yes.” This will transform the icon into a drawing object, ready to be modified.

Ungroup vector icons in PowerPoint

3) Done! Now you are able to use the icon in your Microsoft PowerPoint presentation. You can modify the vector icon the way you like.

Change color of vector icons in PowerPoint

4) To change the stroke or fill color of an icon or stroke weight, right-click the imported icon and un-group it again. This will break up the icon and let you move or change the color of any individual parts.

Insert vector icons in PowerPoint

Btw: There is a cool free shell extension for Windows users that enables thumbnails and previews for EMF files in Windows File Explorer.

 

b) Using macOS

1) In PowerPoint, select “Insert pictures” and choose one of the EMF files on your computer.

Insert vector graphic in MS PowerPoint

2) Now you can resize and change the color of the icon.

Recolor vector graphic in MS PowerPoint

What’s with changing the shape and color of individual parts of an icon when using macOS? 

Because EMF isn’t a macOS-native file format and normally EPS can’t be un-grouped, the same method does not work if you’re using macOS. PowerPoint on Windows treats EPS in a non-standard way (basically converting it to a Microsoft Office drawing object), which allows it to be un-grouped there, but not with macOS. A lot of people are impatiently waiting for that, though! See update below!

On the other hand, there is an ugly work-around where you have to download and install Apache’s Open Office (free). Start a new presentation in Open Office and import the EMF file (in Presentation mode). Right-click the icon and select Break. Save the Open Office presentation as a PowerPoint presentation. Now you can go to Microsoft PowerPoint and edit it from there.

UPDATE (Jan 25, 2018): The PowerPoint for Mac team just announced that support for SVG and icons is planned and will begin development soon. I will update this article once support for SVG is live.

UPDATE (May 13, 2018): The PowerPoint for Mac team just announced

As of April 2018, Insert Icons and SVG support are now available in Office 2016 for Mac.

To insert an icon in Office 2016 for Mac: Go to the Insert > Insert Icon. Scroll through the icons or jump to a category by clicking the name in the navigation pane at the left. Choose an icon and then click Insert at the lower right. Insert multiple icons at the same time by clicking each of them before clicking Insert. Use the Graphics Tools ribbon to rotate, color, change style or resize your icon.

To insert an SVG file in Office 2016 for Mac: Go to Insert > Pictures > Picture from file to insert your SVG images.