Styling Your WordPress Blog with Unique Icons

From the basic terminal operation system to currently very complex graphics user interface, there are some elements playing an important role in our visual – the icons. They illustrate things using image without any language problem. For your blog, icons can give your text a boost in vision. Of course, you can download from plenty of places for open-source web elements including icons. Sometimes or most of time, you do not want to use the same icon set as others. So making your own icon sets can give your blog a brand new style. Here you can find some simple ways and tips to make your own unique icon designs. Thanks to Adobe Illustrator, these designs can be done in minutes.

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”.