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!

Download

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
Buy Pro Version

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

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
Buy Pro Version

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

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

The icons have a unique hand drawn feeling and look great in color or black and white. The set also includes most social media websites, such as Delicious, Digg and many more.

These icons are completely free for personal and commercial use and they’re being released exclusively to all WDD RSS subscribers.

If you’d like to share these icons, please refer your friends to this page so that they can download them from there.

Here’s a full preview of all 24 icons for quick reference.

All icons are completely free for both personal and commercial use. Resell and distribution is not allowed. The icons are available in 5 different sizes (16px, 32px, 48px, 128px, and 256px) and come as Windows ICO and 32-bit transparent PNG files. The icons are also available in vector format (Adobe Illustrator AI format).

Below are the full preview of this free set.

Download

Siena

These icons are completely free for both personal and commercial use. To download your copy, simply subscribe to Web Designer Depot RSS feed and you’ll find the download link at the bottom of this post (note that this link is only visible in the RSS subscriber feed of this post, it must be viewed through an RSS reader).

If you’d like to share these icons, please refer your friends to this page. Below is a full preview of all 200 icons for quick reference. Enjoy!

Many design would draw these icons by hand and then scan them into the computer, clean up a little bit and use them. Actually, to draw some vector icons in this style is not as complicated as it looks like. Thanks to some distortion functions in Adobe Illustrator. Here we will share some easy steps of drawing an RSS icon and a MP3 file icon. Once you master this technique you can create similar icons for use in other projects like printed brochure layouts.

Step 1

Create a new Illustrator file, basically what we want is a number of same lines in the same direction. Unfortunately, Adobe Illustrator does not have any array tools. However it does have a blend tool which can do the job. Draw a horizontal line, rotate 45 degree and make a copy. Put the two lines at the top left and the right bottom of the art board, respectively.

Click the Blend Tool on the toolbox, the cursor will become a small square with some dots. Move the cursor onto the first line, a small cross will appear on the cursor. Click once, and move to the other line click again when the cursor changes. Now Illustrator will create several lines between the two lines you drew.

You can adjust the stroke weight and the specify the steps between the two lines (double click the blend tool button on the toolbox, the option dialog will pop up) according to your drawing requirements. Basically, when drawing by hand, the more intensive the lines are, the darker colour they represent. So if your icon set are in a single colour scheme, this can be a good way to vary the darkness. Adjust the size so that the lines can cover the art board. Use the command Object>>Expand in the menu to convert the effect into objects which will produce a group of lines.

Step 2

Now, draw a square in the center which be used as the boundary of the RSS icon. Select both the group of lines and the square. Use the Crop command in the pathfinder window to crop the area in the center.

Before doing this, you should make sure the group of lines filled with any colour (NOT None or Transparent). Other wise the crop won’t work. After doing this you probably won’t see the lines but you still can see the selections because the stroke colour has changed. I am not sure why this happens but when you assign the stroke colour you should have the following graph.

Step 3

Apply the Illustrator filter “Tweak” (Menu: Effect>>Distort & Transform>>Tweak…). Set the amount for both horizontal and vertical into 1% relative. The lines will be tweaked a little which is similar to sketch drawing.

Then select the “Twist” filter (Menu: Effect>>Distort & Transform>>Twist…) and set the angle to 3 degree (or any some amount you want). A sketch style fill is ready.

Step 4

Adjust the stroke weight of the lines to meet your desired effect. Draw a square again of the same size you did just now for cropping the lines. Set the stroke weight into 3 to make it thicker. Draw or copy from the standard RSS vector image. Apply the Tweak and Twist filter to the square and RSS icon again to make them the same style. This sketch style RSS icon is ready.

Other Icons

Using this method, we can draw many icons in the sketch style. Here is another example which is a MP3 file icon. We can use the same procedures to produce most parts of this icon. There are something more in this one, the paper and the music notes have some shades on the right. This can be done by using the Blend Tool and the Free Distort filter (Menu: Effect>>Distort & Transform>>Free Distort…)

Download the .AI source file (for Adobe Illustrator CS3)

Have you tried the tutorial? Feel free to leave links to examples created using this as well as any feedback that you may have. Thanks…

All icons in the set are free for all personal use. The following is a full preview of these 80 icons, and the download link can be found HERE.

Download

Raster icons are FREE for all personal use. For professional or commercial use, or for vector icons, please contact us at info@doublejdesign.co.uk for detailed information. The following are the full preview:

Download

In Photoshop there is a function called Angle Gradient which is able to give an easy way to draw a nice stripe of colour spectrum on the CD surface. However, there is no Angle Gradient function in Illustrator which makes drawing a little bit difficult.

I did read some article or tutorial related to how to draw a CD icon using illustrator. But I think they are not simple enough and not good enough. Here we will see some simple steps of drawing an icon of CD.

Step 1

Draw 6 circles from outside to inside. make 2 copies of the 5th circle and use the Pathfinder>>Subtract to create 3 thick rings. Make sure they are in the right order. Then we can now fill these rings.

Step 2

Fill the 3 rings from back to front. The bottom one is filled using grayscale (K=5) and the stroke is 1pt weight and grayscale (K=40). The second one should be filled using the following gradient (grayscale K=25 at both ends and white in the center), the stroke should be the same as the previous ring. The third smaller one in the center has to be filled in grayscale (K=10) and stroke is 1pt, grayscale (K=50). Also for this one, we have to set the opacity into around 50% to obtain a transparent effect.

Step 3

Draw a simple shape like the left one in the following (the angle in the middle is around 15 degree), then copy the second ring in the previous step and set to no fill. Put the ring in the back of the shape we drew just now. Then use Pathfinder>>Intersect shape to get two sectors.

Then make 4 copies of the sectors and fill them with different colours. and rotate them to have the following layout.

Step 4

Select the 5 sector we just made and make them into a group. Use the Radial Blur (Amount:18, Method: Spin, Quality: Good) in the menu (Effect>>Blur>>Radial Blur…) and set the blending option into Overlay.

Step 5

Now the CD is almost ready and the last step we can add some effects to the CD. For 2D style, we can add some simple drop shadow (Effects>>Stylize>>Drop Shadow) or cast shadow (Draw a very thin circle in black and set the opacity to around 30%, then use Effect>>Blur>>Gaussian Blur and set radius to 4.0). Also we can use Effects>>3D>>rotate function in Illustrator to produce a unique vision. The shadow can be drawn in the same way we discussed just now.

Furthermore, you can draw another ring in the same shape of second one in Step 1, fill it in Golden. Blend it on the CD using Multiply method and set opacity to 75%. Put a DVD logo on it. Your DVD icon will be ready.

Download the .AI source file (for Adobe Illustrator CS3)

Have you tried the tutorial? Feel free to leave links to examples created using this as well as any feedback that you may have. Thanks…

The 30 icons in the pack come as Windows ICO format, Mac ICNS format and 32-bit transparent PNG format in 9 different sizes (from 16×16 pixel up to 256×256 pixel). They are all free for your personal use, so download and enjoy!

The additional 10 icons increase the quantity of this icon pack to 30. Below is the full preview of these 30 icons in the following alphabetic order:

Activity Monitor, Address Book, Applications, Calculator, Chess,
Dashboard, Dictionary, DVD Player, Final Cut, Finder,
Home, iCal, iChat, iDisk, iDVD,
Interface Builder, iPhoto, iSych, iTune, iWeb,
Mail, Network, Network Utility, Numbers, QuickTime,
Safari, Stickers, System Performance, TextEdit, Xcode.

Download

For commercial user or print media, please contact us at info@doublejdesign.co.uk for a license or higher resolution version or vector formats.

People there on Webdesigner Depot have given a number of positive feedbacks to these icons. Hopefully, you will enjoy this as well. Download link is available at Webdesigner Depot.

Here is the full preview of all 92 icons.

I am planning to make more (some people told me that some icons they want are missing in this pack.) in the future. Also here, if you want to use these in your print media, I would be happy to provide the vector formats. Please contact me at info@doublejdesign.co.uk for more information.

Here is the full preview.

Download

You can use them for free in all your personal projects. For commercial use, please contact us at info@doublejdesign.co.uk for a license.