Case study: Custom icon design project for Synergis Software

Besides creating own icon collections, I’m also offering custom icon design. And I’m one of the few designers doing custom icons at Iconfinder.

The custom icon project for Synergis Software was complex, as the client asked for a coherent set of 150+ icons to redesign their window-based application (an engineering document management product). The requested style of the icons was black outlines with a little color. A perfect case to use the foundation of the Picons Thin collection and extend it with color.

Synergis Custom icons Examples

So the first steps, after studying the brief, were to define the grid (I’ve choose 24px), corner rounds, stroke weights and color palette, as the basic elements that will define the visual language of the complete icon set.

Custom icons - Style guideline

Larger icon collections require not only to follow a grid but also strict style guidelines that will define the character of a collection. When this fundament is built, creating a large icon set is fun as those design elements get repeated throughout the set to tie all icons together as a whole.

Synergis Custom icons Samples

Our friends at Iconfinder also wrote a blog post about this custom icon project.

Icon examples #1

We are starting a series of great Picons use cases with an app we are very proud of. Ulysses is a macOS and iOS app that just received the Apple Design Award 2016.

No, Ulysses is not just a text editor. It is a writing environment, with a super slick and intuitive interface, where our icons play an essential role for the navigation and organization of writings.

ulysses_1

ulysses_2

Source: Ulysses

Used icons: Picons Thin collection

Updated: Picons Social v3.2

We’ve been adding and updating the set all the time and it is growing and growing.

So what’s new this time? Google Inbox, Periscope, Blackberry, Viber, Facebook Messenger, WeChat, Gmail, Airbnb, AngelList, Uber, Safari, Mozilla Firefox, Opera, Bing, Reddit & ProductHunt. Both in normal and rounded version. Instagram has already been updated just few days ago.

We also added an IconJar archive (read more about Picons + Iconjar).

Picons Social - Updated

Picons Social is a free icon collection of 150+ vector icons of your most favorite social services and applications such as Facebook, Twitter, Instagram, Flickr, Tumblr, Pinterest, Dribbble and many others. You are free to use them on your personal or business websites, interfaces or even other application, but you have to respect their owners rights and guidelines of use. Therefor the Picons.me license agreement doesn’t apply on them.

We’re also very happy to get suggestions for including new icons. If you think we should add an icon – don’t hesitate to mail us: info at picons.me.

Free Download Picons Social v3.2

Searching for Picons with Iconjar

Iconjar is a Mac OS X app that helps you organize, search and use icons the easy way.

It is available for free.

Iconjar + Picons

All our Picons icon collections already work with Iconjar. All you need to do is to import your Picons SVG files into Iconjar and then you can search for the icons based on keywords.

But Iconjar is not only a tool to easily search through all your icons, it also allows you to drag & drop any icon into the app you are working with.

For our biggest vector icon collection Picons Thin, we also added an .iconjar archive, with icons organized by categories, to even easily find your desired icon. The update is free for all Picons Thin customers.

Create your own icon font and how to use it on websites (pros/cons)

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 developement in the recent years. Displaying icons through fonts is the same as using non-standard fonts for titles and paragaphs. 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

step1

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

step2

Step 3: Generate the Font

step3

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

step4

Step 5: Download the generated file

step5

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 easily use Picons.me 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 Picons.me 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 Picons.me iconset, select it and then click “OK”.
  • You can import multiple CSH files. We suggest you import all your Picons.me iconsets.

That’s it.

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

custom_shape_tool

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

Toolbar

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!