Now Origami full set includes over 200 icons which covers almost all the stuff that can be used in web development or design. It is available in vector set and 32 pixels raster format. You can buy the full set or even individual icons at Icondock and enjoy them in your design projects.

Below we present the full preview of the whole icon set and thanks very much again to Nick La that he provided some very nice sample usage of these icons by adding some effects like shadows and reflections.

Please notice that this is a commercial icon set, you need to purchase license before you can use the set in one of your design projects. Licenses can be purchased on Icondock.

The icons are completely free for personal and commercial use and they’re being released exclusively to all WDD RSS subscribers.To download your copy, simply subscribe to WDD RSS feed and you’ll find the current password at the bottom of each post when viewing the RSS feed. And the download link appears at the bottom of this page.

Below you’ll see a full preview of all icons included in this set.  Enjoy!

All icons are completely free for both personal and commercial use. Resell and distribution is not allowed. You can refer this icon set anywhere but a link to this page has to be included. The icons are available in 4 different sizes (32×32 pixels, 48×48 pixels, 64×64 pixel, and 96×96 pixels) and come as 32-bit transparent PNG files. The icons are also available in vector format (Adobe Illustrator CS4 AI format, using older version of Adobe Illustrator might not open the file properly) which means that you can scale up and down to whatever size you want.

If you like this set of icons and want to share them to your friends, please refer your friends to this page so that they can download their copies from here. Below a full preview of all 32 icons included in this set. The download link appears at the bottom. Enjoy!

Download Diagram Free Icon Set Part 2

The icon set includes 16 flags in two differenct style, normal style and rotated style. Raster icons are in three different sizes (32 pixels, 64 pixels and 128 pixels) and in 32-bit transparent PNG format. Also the vector source file is included in the free set (Adobe Illustrator CS4 AI format). The set is completely free for both personal and commercial use. Resell is not allowed. If you want to refer this to your friends or clients, please link them into this page so that they can download the icon set from here. There will be more flag icons in the same styles coming in the future. Please check our website regularly or subscribe to our RSS feeds for any updates.

The download link can be found in the bottom.

Download Free Language Flags Icon Set

All icons are completely free for both personal and commercial use. Resell and distribution is not allowed. The icons are available in 4 different sizes (32×32 pixels, 48×48 pixels, 64×64 pixel, and 96×96 pixels) and come as 32-bit transparent PNG files. The icons are also available in vector format (Adobe Illustrator CS4 AI format, using older version of Adobe Illustrator might not open the file properly) which means that you can scale up and down to whatever size you want.

If you like this set of icons and want to share them to your friends, please refer your friends to this page so that they can download their copy from here. Below you can see a full preview of all 32 icons included in this set. The download link appears at the bottom. Enjoy!

Download Diagram Free Icon Set

All icons in this set are completely free for both personal and commercial use. Resell and distribution is not allowed. The icons are available in 3 different sizes (48×48 pixels, 64×64 pixels and 128×128 pixels) and come as 32-bit transparent PNG files. A number of icons in the same style will come soon later.

If you like this set of icons and want to share them to your friends, please refer your friends to this page so that they can download their copy from here. Below you’ll find a full preview of all icons included in this set. The download link appears at the bottom. Enjoy!

Download Sketchy Free Icon Set

On WDD, The icons are completely free for personal and commercial use and they’re being released exclusively to all our readers. If you’d like to share these icons, please refer your friends to this page so that they can download their copy from here. Thanks a lot WDD for publishing my icon set. It’s been a pleasure to provide the stuff for the site.

Below you’ll find a full preview of all icons included in this set. The download link appears at the bottom. Enjoy!

The icons are provided in both raster and vector formats: The transparent PNG versions are 256×256, and we have also included Illustrator files so that you can resize the icons as needed. The icons are completely free for personal and commercial use and they’re being released exclusively to all WDD readers. The download links can be found in this page.

Below you’ll find a full preview of all icons included in this set. The download link appears at the bottom. Enjoy!

Icons for WordPress

First, you will probably find there are normally several standard icons in a WordPress website.

Common WordPress blog icons include

These are some common icons which will appear in a typical WordPress website. They are all for the basic operations in a WordPress blog. Usually people or companies do like to iconic every main page (i.e. design icons for each single page and put them on the navigation menu such as products, services, downloads, about, etc.). You can draw these icons within minutes using Illustrator or other tools (i.e. Photoshop, Coreldraw) as icons are basically simple shapes which people can understand them by using their common sense. Too complicated shape will mess up the icon without giving more useful information. Actually, based on each of these icons there can be some variations.

Icons Variations

Now let us take a look at the typical WordPress template which includes header, contents, sidebar and footer in a two-column layout style. The default WordPress theme doesn’t contain any icon files in the theme folder. When we put the icons into the theme folder, we need to rewrite the CSS style file to set all icons in the correct position. The quickest way to do this is by setting the left padding into a large value and use the icon as the background for the class in your style file. I highly recommend to place the icons in this way rather than insert icons directly inline into the texts because it can be reused as many as you want and it makes your html files a bit clearer. Sometimes designers replace texts with icons when the icons are very well recognised such as RSS feed, email address, homepage, etc.

Now the WordPress page is looking a bit livelier. Then we can focus on designing and drawing these icons. I recommend drawing all icons in vector format and then converting them into icon or image files. Therefore, Adobe Illustrator is our number one tools for this (or you can use your own favourite, but the following of this article refers to some unique functions in Illustrator which other tools might not have).

Drawing and Styling Your Icons in Illustrator

The most important principle of drawing an icon to me is to keep it as simple as possible. However, you need to give people a clear understanding of what it is about. As shown in the above images, there are several places where icons can be put: date/time, author, categories, comments, RSS feeds, archives, some navigation arrows.

I’m giving some examples here to demonstrate drawing an icon in Illustrate. To draw an icon of date/time, we can use a simplified calendar image which consists of two rectangles, two rounded rectangles on the top and a triangle on the right bottom corner. You can apply colours to the icon (i.e. single colour or fancy colours with shades). However, you need to make sure that when icon is exported to an image file in the standard size (typically 16×16 for small icon, 24×24 for medium one, 32×32 for large one), the icon is still clear to be seen. In this example, the small icon is not so clear. Some people might not recognise that it’s a calendar.

You can now probably draw the rest of the icon set by only a few clicks. A magnifying glass for “Search”, a cabinet for “Archives”, a piece of paper for “Post”, a label for “Category” and so on. You will probably ask why every time we use these shapes for our icons. Of course you can think about some of your own unique elements for the icons. I did see some website of a food somewhere using different fruit as icons (i.e. apple as posts, pineapple as comments, banana as categories, etc.)

When you finish drawing the basic icon elements, you can add some sub elements to make the variations (i.e. Add/Delete/Edit etc). But you need keep each sub-icon in the same area. Normally we use a quarter of the whole icon area for the sub-icon. Also you need to make sure the sub-icon doesn’t block any major shapes of the main icon otherwise, the icon will be not clear in expressing information.

Here are some simple tips of drawing well designed icons:

1. Keep all the icons in the same style

To keep your icons in a same design style, you should keep all the property in a constant value such as stroke weight, stroke type, rounded corner radius, some angles, perspective, etc. If you feel your 2D icons are more or less the same to the others did, and you still want some unique design for your own. You can try to use 3D icons. Illustrator can easily transform your 2D icons into a 3D shape in one second. Make sure all your icons are in their own group, then select all the groups and click Effect->3D->Extrude & Bevel … , set all the parameters (i.e. rotation for each axis, lights, depth, etc), and click OK. Every icon will be transformed in to 3D using the same setting. You can preview the 3D effect in real time when tuning the parameters. It’s that simple!

As a different 3D rotation effect will give a brand new style for all your icons in the set. You can tune some parameters in detail to make some of your icons closer to it should be. For example, the post icon is a piece of paper, using this 3D effect will produce a very thick paper which does not look so good. Therefore, change the depth in the 3D effect will make it much better. Also, the cabinet (archives icon) looks too short in depth. Therefore increase the depth will make it better. After some fine tuning, your icons are looking unique now. You can apply different colour scheme to your icons according to your website theme.

Look at some others’ icon designs, some of them are making mistake in this point. The following icon designs are taken from www.webappers.com. They are all free icon sets.

The Example with Mistakes

This is designed by Smash Magazine. The design is cool, and colours are good. But they are not constant in style. You can clearly see that they are 2D/3D mixed icon set. The Home icon and the Printer icon are 3D while the rest are 2D. Even though, the Home icon is 3D in perspective. The Printer is in non-perspective. Furthermore, some of the icons are not clear in giving information. Take a look at the one between the pencil and the star, is it a fried egg? What information can a fried egg give in a WordPress blog or in an operating system? I have no idea.

The Good Example

The following design is from www.dryicon.com, and to me these icons are very good in the criteria of keeping a constant style. All the icons in this icon set are using rounded corners, a simple underline shade, a 2D front view and gradient fills. Also all the sub-icons are placed in the right bottom quarter.

2. Use the proper size of icons

As mentioned before, there are some standard icon sizes (i.e. 16×16, 24×24, 32X32, etc) for applications. However, for a website, every size is OK as long as the entire layout of the website is well structured. Normally, we use a square image as an icon. If you text font size is around 12px then, the icon beside the text is best to be 16×16. Or you can make them a bit larger (i.e. 18×18 pixel). However, too large in size will make the layout appear to be unbalanced. The following screenshots gave some example of using proper size of icons and the positioning. Middle sized icons can be aligned to vertical centre with texts. Sometimes a horizontal line would be helpful especially for the headings. Large icons also can be positioned into left top and the bottom space can be left blank to emphasis the icons.

Also, when using the small icons, it is better to draw the icon originally in small dimension. Even if using vector drawing tools like Illustrator, when an icon is exported, the vector image will be converted into pixels. Most of time, details in the icon will be lost. Therefore we recommend drawing the small icons separately. The following example shows really good icons in small size without lack of details.

3. Use the proper colour theme

You have to keep all your icons in a good colour theme. Also you have to fit these colours into your whole WordPress website. The following WordPress blog (designed by myself, for someone‘s cake shop). If we add a set of icon in this theme (the icon set is well designed in everything including colours). It’s clearly to see that the colour theme for the icons do not fit the whole site colour theme which is in dark reds. Therefore my original design doesn’t contain any icon in this theme.

Summary

This article gives some tips of how to design and use icons in a WordPress blog site. Also some examples have been given to show how to design unique icons for your sites using Illustrator. Hopefully, this article will be helpful for the people who want to make their site unique. To me It is important to remember four words in designing icons which are “Simple”, “Clear”, “Uniform” and “Unique”.

It’s very nice of Nick (from IconDock) to include my design in this set and specially stated my name and website on their beautiful web icon shop (icondock.com). This vector set is provided in 3 different versions that can complement most of your projects. You can use them separately or combine them together to create mouseover effects. You will receive 307 color vector icons, plus a free set of the solid and grayscale version.

There are also instructions and samples of how to use this icon set in your projects. The following are the full preview and the samples of how to use Blockie Icon Set.

What can you do with the Blockie icons?

The Blockie icons are provided in 3 styles: solid, grayscale, and color. You can use them separately or combine them together. For example, you can combine the grayscale and color icons to make menu hover or mouseover effect. Or you can use them to create on/off states.

The full preview of Blockie Vector Set