Discovering Elegance and Clarity: The Picons Thin Icon Collection

In the ever-evolving world of digital design, icons have emerged as essential components that enhance the user experience and add visual appeal to various interfaces. Finding the perfect balance between aesthetics and functionality can be a challenging task for designers. Fortunately, Picons, offers an exceptional solution with its Thin Icon Collection.

Embracing Minimalism

Minimalism is a design philosophy that has gained immense popularity due to its clean, uncluttered and ultra-consistent approach. The Thin icon collection perfectly embodies this philosophy with its sleek and refined icons. By removing unnecessary details, these icons communicate concepts with utmost clarity, making them ideal for modern interfaces where simplicity is key.

The icons strike the perfect balance between visual appeal and functionality. These icons not only look elegant but also serve their purpose effectively, allowing users to intuitively understand their meaning and purpose.

A Comprehensive Library

Picons’ Thin Icon Collection offers an extensive library of icons that cover a wide range of categories. From business and technology to lifestyle and travel, designers can find suitable icons for virtually any design project. The collection ensures that designers have access to versatile, high-quality icons that seamlessly integrate into various digital products, including websites, web apps, and mobile apps.

Scalable Vector Icons

One of the standout features of the icons in general is that each icon is available as a scalable vector graphic (SVG). Scalable vector icons ensure that designers can use them across your personal graphic software (Figma, Photoshop, Illustrator, Sketch…) and various screen resolutions without losing image quality. This flexibility is crucial in responsive design, where icons need to adapt to different devices and sizes.

Additionally, the vector format enables designers to customize icons to match their project’s color scheme and design language, ensuring a harmonious and consistent visual experience.

Perfect for Modern UI/UX Design

User interfaces today demand a delicate blend of aesthetics and functionality. The icons are tailor-made for modern UI/UX design, offering icons that resonate with contemporary design trends. Their understated elegance and precision make them a preferred choice for designers seeking a minimalist, yet impactful, visual language.

The Picons Thin Icon Collection stands as a testament to the power of simplicity in design. With its minimalist approach, comprehensive library, and vector scalability, these icons elevate design projects to new heights of elegance and clarity. continues to be a reliable resource for designers seeking high-quality icons that strike the perfect balance between aesthetics and functionality.

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

Create your own icon font and how to use it on websites

I. Basics

There has been many techniques to use vector icons on web sites. From importing bitmap image files (usually transparent PNG’s), to vectorized SVG’s or even using web fonts containing symbols instead of typical characters. All of those have advantages and disadvantages, so the choice is not always easy.

Even though, using non-standard fonts (in general) has became a standard of web development in the recent years. Displaying icons through fonts is the same as using non-standard fonts for titles and paragraphs. Times, where web designers could choose only from 5-10 different fonts, are – luckily – over.

Picons Font

Using icons as web fonts has many advantages:

  • fonts are scalable (no quality loss with different sizes);
  • no need to care about support for Retina displays;
  • easy to apply CSS properties (color, gradient, shadows, etc.) without editing the icon itself;
  • you can use the same icon (shape) in different sizes, colors (saves time and performance);

Nonetheless, icon fonts have also disadvantages. The biggest I see is the unreliable rendering across browsers. The problem can be demonstrated with the following screenshot:

Icon font vs. SVG comparison

The other disadvantage, which is also related to inconsistent rendering, is positioning. It can be tricky to position a tiny icon into center of a circle, so it looks the same in every browser.

If you want to get more deep into this, you can find many articles with pros and cons of using icons as web fonts (Ian Feather’s Article, CSS tricks, SitePoint, etc.).

OK, enough of this. Let’s create an icon font and show how to use it on a website.

II. Creating an icon font

The first thing you need to do is to make your own personal selection of icons. It’s prefered you do that for every project individually, because including all of the icons, even if not used on a project, makes the font file larger. Carrying about loading times is still crucial for the mobile experience.

All Picons icon collections come with included SVG’s of each icon. But, we also have an own icon font with 130 selected icons, if you want to jump the step of creating your own.

There is variety of free and paid tools for creating own fonts. Specialized tools such as icomoon, Fontello, etc. are free and very easy to use. We will show the steps based on comoon’s app.

Step 1: Drag & drop selected SVG’s and create a new set


Step 2: Select all the icons you wish to include in an icon font (you can select them from various sets)


Step 3: Generate the Font


Step 4: Rename all the symbols as you wish and define a unicode character for each (optional)


Step 5: Download the generated file


III. Using the icon font on a website

Your generated icon font consists of various font formats (for cross-browser compatibility) and demo files including HTML and CSS.

Step 1: Copy the CSS code in the included “style.css” to your own CSS file

The included CSS file has a predefined class for each icon, telling your browser which character in the font to use for a specific symbol. You can also apply your own CSS styles to each icon (color, shading, etc…).

Step 2: Copy the folder “fonts” to your website folder

The folder “fonts” includes your generated icon font in different formats (woff, tff, svg, eot). Be sure that the uploaded fonts are linked from the imported CSS. If placed somewhere else than “fonts/”, then correct the link direction accordingly.

@font-face {
 font-family: ‘thin_custom’;
 src:    url('fonts/thin_custom.eot?hpwvww’);
 src:    url('fonts/thin_custom.eot?hpwvww#iefix’) format('embedded-opentype’),
 url('fonts/thin_custom.ttf?hpwvww’) format('truetype’),
 url('fonts/thin_custom.woff?hpwvww’) format('woff’),
 url('fonts/thin_custom.svg?hpwvww#thin_custom’) format('svg’);
 font-weight: normal;
 font-style: normal;

Step 3: Insert the icons

An icon can be inserted with the following HTML code:

<span class=“icon-notebook”></span>

Where the class name “icon-notebook” is generated from the title you gave each icon when creating the icon font. The classes are referred to styling definitions in the included CSS file:

.icon-notebook:before {
 content: “61”;

The styling (size, color, hover, etc) can be applied inline (inside the HTML) or to your style.css.

Your feedback (including questions) is always welcome…

How to use vector icons in Photoshop as vector shapes?

Have all the icons at your fingertips

For those unfamiliar with the custom shape toolbar in Adobe Photoshop, it allows you to insert a vectorized shape with just a click. And it’s not just fast, it’s also a convenient way to have an overview of your icons.

All our iconsets already come with the necessary Custom Shape files (.csh). Personally, I couldn’t live without them.

How to import the Picons into Photoshop’s toolbar?

It’s super easy.

  • In Adobe Photoshop open “Edit” > “Presets” > “Preset Manager…” from the top menu
Photoshop preset manager
  • When the Preset manager pops up, choose “Custom Shapes” from the dropdown on the top
  • Click on “Load” and browse for the .CSH file, which came with your iconset, select it and then click “OK”.
  • You can import multiple CSH files. We suggest you import all your iconsets.

That’s it.

Now, to insert an icon, use the “Custom Shape tool” (see screenshot).


Choose your desired icon (dropdown at the top bar) and draw it as an ordinary shape.


You can color it, resize, transform, apply a stroke, … whatever you like. The icon will be a vector shape object, so you won’t see any quality loss when resizing.

Have a productive time!