Icon – the Best Visual Clue for your Website Content

Apart from colours and fonts, images also are an important visual aspect of websites. Images are the perfect way to give a visual clue of your content in a clear, concise and aesthetic way. And icons play an important role in this. An icon is a small picture that serves as an intuitive representation of the content of a website. In this article, I will share 4 best ways to incorporate icons effectively and aesthetically into your website.

#1  Menu Icons

You can associate your main menu items with icons. This way you can reuse them to reflect the sections in other parts of your website. I had reviewed a WordPress theme – Engine – a couple of months back. This theme uses some icons for its menu items. These icons are then reused in the Top Stories sections to imply the category of the post.

Engine Theme - Menu Icon

Engine Theme - Menu Icons used to imply Category

You can buy the Engine theme here

#2 List Icons

On a wordy web page, you can use icons to split content  in a meaningful and attractive manner. You can use this to list services or product features. This was used in one of the other WordPress themes I wrote about ages ago called Sector. In the demo of this theme, various services provided by a company are displayed in a visually appealing manner using icons as shown below.

Sector Theme - List Icon for Services

You can buy the Sector theme here

#3 Contact/Share Icons

Social media icons are popular examples for this type of icon usage. Most websites feature icons of Social Media websites that help website visitors connect with the website author or share the website content. But you can use icons for other types of links as well. For example, using an envelope icon so users can email you from the website.

Sahifa is a WordPress theme best suited for a content-rich website. It comes with the Arqam Social Counter Plugin which displays social media icons in a beautiful manner.

Sahifa WordPress Theme - Arqam Social Counter Plugin
Sahifa WordPress Theme – Arqam Social Counter Plugin
You can buy the Sahifa theme here

#4 Post Information Icons

Icons can be used to differentiate categories or post types. Here is an example from Sahifa WordPress theme where icons are used to differentiate post formats (i.e. video, audio, image or text)

Sahifa - Post Format Icon
Sahifa – Post Format Icon

You can also show icons to represent other post information like number of views, number of comments or article date. Here are examples from both Sahifa and Engine themes.

Sahifa Theme - Post Info Icons
Sahifa Theme – Post Info Icons
You can buy the Sahifa theme here
Engine Theme - Post Info Icons
Engine Theme – Post Info Icons
You can buy the Engine theme here.


Check Also

Website Header with HTML5 and CSS3

A Simple Website Header with HTML5 and CSS3

Would you like to see the creation process of a simple website header using just HTML5 and CSS3 - from sketch to HTML page to working prototype?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.