Picons.me was founded by Morphix Design Studio and is offering premium vector icons since 2009. We do precisely hand-crafted, unique and highly recognisable iconsets for a wide range of users, from graphic designers to developers.
Iconjar is a Mac OS X app that helps you organize, search and use icons the easy way. It is available for free.
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.
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.
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:
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.
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.
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.
We updated our Picons Social icon collection: Google (updated), Google+ (updated), ebay (updated), Snapchat (added), Whatsapp (added), Edge (added), Outlook (added), Medium (updated), Google Play (added) and Apple iCloud (added).
After 7 years we finally took time to do a new website for our design studio. The previous site was revolutionary for that time and got multiple awards and mentions). But it was time for a change. The new site is very simple. It focuses on the design aspects that we do the most - product design & custom icons.