Icon Talk: Choosing the Perfect Icons for Your Website

Posted in Icons, Illustration, Tips, Web Design10 months ago • Written by 15 Comments

This thought might be the prevailing philosophy that hides beneath the shroud of web design: that small details sometimes happen to be the most important ones. That the things we think do not matter in our design are, in fact, necessary for the smooth flow and exchange of information.

Sometimes small things tend to have the biggest importance.

One of these small things that are commonly taken for granted are icons. Icons can be considered as a worldwide-understood element of web design. They are apprehended by most people, making the websites benefit from the addition of such. It is in this universality that icons are considered to be one of the most important design elements that have ever walked (figuratively) on the face of the earth.

iconography-02

By Kev Simpson

Icons are good tools of stamping an impression to an audience. They play a vital role in making the viewers understand what the message or the context of the website or application is.

What’s amazing about icons is that, even in their small space they occupy in the pixels of the screen, their role is immense. A lot of websites have invested a lot of effort, creativity and even money just to produce good icons that would suit the needs of their website. The ones created, in turn, reciprocate this by producing more viewers and easy to understand content. However, due to the variety of available icons, it becomes slippery to a point that designers seem to be confused. Iconography is a rather broad field because it encompasses a lot of concepts in fulfilling a lot of roles. As you all know, icons can be used for a lot of purposes, methods, occasions and motifs. Thus, the need to choose the correct and most appropriate icons is heightened.

iconography-01

By Joshua Sortino

As web designers, this lesson will make us more equipped with the ideas on how to choose the right icons.  Most website failures result in poor iconography. This all branch out and eventually lead to the effect that readers find themselves to be out of place, just seeing the website. And how could we evade that situation? Here are a few tips.

Icons should be appealing and readable

Icons should be visually appealing. They should be beautifully designed; thereby, be remembered by ordinary people. When designing or looking for icons for your website, remember that the people’s memory retains for two things: either they are beautiful enough to be remembered, or horrible enough not to be forgotten. If you prefer the former, then you should always look for beautiful icons.

iconography-06

Photo from Mike Clarke

They should be universal

Choose icons that are easily understood by people. These icons should be famous enough that it would not produce confusion. Because you are dealing with imagery and its interpretations, the image that you should produce should always be universal. You need to make every person, at the very least, know what you are talking about. Make your icons be transcendent!

Example, never use a wrench, or a gear icon if you will not going to refer it as a settings link or menu. Of course, the average people, who are so used to seeing gears or wrenches for settings would think of it as a link or menu to the preferences of your website. They will get lost. Think of it as if you are making road signs. If you were the traffic sign manufacturer or installer and you happen to have made a mistake by switching signs, people might get lost, or worse, their cars might stumble with each other and your face will be all over the news.

iconography-04

By Barry Mccalvey

They should be consistent

Ever experience having a nice conversation with a friend and then suddenly, you say something that is out of context, and your friend will pose a besmirched face, with an eyebrow raised and say, “Huh?”

Well, that will happen if you don’t start adding consistency to your icons. It will result into a breakage in the flow of information, and you won’t want that to happen.

For this, you should remember to use the same color or color scheme. Adding a very consistent color theme will make the identity of your icons stable. People will see your website and remember it. Also, you should remember to use, as much as possible, the same shapes. Shapes are also very good memory tools. Third, is that you should style your icons without borders. Borders, shadows, and gradients affect the technical and aesthetic quality of the icons.

iconography-10

From cssauthor.com

It should complement with the motif

The illustrations have to look legit. They need to be visually compatible with the motif of your website. Before choosing the icons, ask yourself, how would my site look like? Will it be comical, formal, creative, flamboyant or plain? The answer to your question, should match the icons that you will use. Like fonts and colors, icons are thematic. They are occasional and prefer to be represented and used in specific occasions.

721

From designyoutrust.com

They should be functional

Icons should be functional. Period. Their quality should not defeat its true purpose. Sometimes, we tend to extravaganize the design by adding unneeded icons. But you should remember to put what you need. Don’t be greedy. Less is more. Lesser is most. The more that you add, the more it becomes visually heavy. So be wise.

iconography-11

From graphicdesignjunction.com

Conclusion

The thing that you need to know in choosing icons for your web design is that you need to be understood and purposive. You have to be so universal that even a simpleton will understand you. You have to apply the purpose and try to achieve it in your design. A great web designer does not stop just because he is tired of looking for good icons. A great web designer will just stop, when he sees it in the website.

Truly, small things tend to have greater roles and those bits of facts can mean a great deal of inspiration. And I bet the icons agree.

Useful links

Any Tips to Share?

79 Written ArticlesWebsiteGoogle+

Rudolph is a geek. He loves reading: books, blogs and even nutrition facts found at the back of products. Since joining 1stwebdesigner last year, Rudolph has written several articles that concerns Typography, Wordpress, Freelance Lifehacks, Graphic Design and Showcase of Beautiful Web Designs. He also write poems, movie reviews and he puts them in his blog together with rants and some daily life updates.

15 Comments Best Comments First
  • Phid

    Wednesday, October 2nd, 2013 10:42

    1

    In the consistency category, I think it’s important not only to stress consistency among the icons themselves, but also the icons with the site logo, fonts, color scheme, and other elements of the site. For example, if the logo is flat, then 3d icons will not work well. If the fonts are minimalist ice and modern, choose an icon set with those same qualities. Doing this provides a holistic unity to the site.

    +3
  • yunrui

    Thursday, October 3rd, 2013 10:15

    3

    Great article, it can help me to improve my design level, thank you!

    +1
  • Vrem

    Monday, October 7th, 2013 12:24

    7

    Awesome guidelines in improving my icon design. Thank you very much for sharing your knowledge on this. This icon subject surely looks simple, but actually many hours spent to design it..

    0
  • Grover

    Tuesday, November 26th, 2013 06:00

    15

    Choosing icons for your website is indeed a very important choice. Because a little thing can make your website look sharp or be a total flop.

    0
  • Siraj Wahid

    Sunday, October 6th, 2013 02:26

    6

    The graphical representation of a website attract audience and compelling icons are the part of the representation. Thanks for the guide buddy :)

    0
  • Sathick

    Saturday, October 5th, 2013 06:23

    5

    Icons are always play major role in any kind of software or website too. Professional looking icons get impressed by users and always remain in mind

    0
  • Michael

    Friday, October 4th, 2013 17:46

    4

    The problem with icons is that most of those I see on Google are watermarked. How much does it usually cost to have one made?

    0
  • jadeed boyi

    Thursday, October 3rd, 2013 09:55

    2

    I like some of the icons used in this article, been trying to access them. You know where i can find these?

    0
  • Nikhil Malhotra

    Tuesday, October 8th, 2013 14:59

    9

    Definately the icons are integragal part of any kind of website oflate.The only fact remains that they should complement the website both from aesthetic and usability point of view.

    Nice topic!!

    0
  • Jack Pitter

    Friday, November 8th, 2013 06:35

    14

    Great article. It is necessary to choose the right and perfect icons as well as logo on website. It helps to create beautiful website design and attracts users.

    0
  • Billig hemsida

    Tuesday, November 5th, 2013 02:43

    13

    I always have a really hard time on deciding what icons to use! Thanks for this helpful guidelines!

    0
  • Robinson

    Sunday, October 20th, 2013 02:54

    12

    Thanks for the share, some really nice icons in here.

    For those interested here a nice collection of awesome free logos: http://logolagoon.com/category/freebies/

    Cheers.

    0
  • André

    Friday, October 11th, 2013 15:40

    10

    I love these icons!

    0
  • Shanmuharajan

    Friday, October 18th, 2013 01:06

    11

    Thanks for sharing information. Really icon is very important for a website. Icon can show the information without reading text.

    0
  • Jeff

    Tuesday, October 8th, 2013 01:44

    8

    Great article and everything sound great. Thanks for sharing.

    -1
  • Grover

    Tuesday, November 26th, 2013 06:00

    15

    Choosing icons for your website is indeed a very important choice. Because a little thing can make your website look sharp or be a total flop.

    0
  • Jack Pitter

    Friday, November 8th, 2013 06:35

    14

    Great article. It is necessary to choose the right and perfect icons as well as logo on website. It helps to create beautiful website design and attracts users.

    0
  • Billig hemsida

    Tuesday, November 5th, 2013 02:43

    13

    I always have a really hard time on deciding what icons to use! Thanks for this helpful guidelines!

    0
  • Robinson

    Sunday, October 20th, 2013 02:54

    12

    Thanks for the share, some really nice icons in here.

    For those interested here a nice collection of awesome free logos: http://logolagoon.com/category/freebies/

    Cheers.

    0
  • Shanmuharajan

    Friday, October 18th, 2013 01:06

    11

    Thanks for sharing information. Really icon is very important for a website. Icon can show the information without reading text.

    0
  • André

    Friday, October 11th, 2013 15:40

    10

    I love these icons!

    0
  • Nikhil Malhotra

    Tuesday, October 8th, 2013 14:59

    9

    Definately the icons are integragal part of any kind of website oflate.The only fact remains that they should complement the website both from aesthetic and usability point of view.

    Nice topic!!

    0
  • Jeff

    Tuesday, October 8th, 2013 01:44

    8

    Great article and everything sound great. Thanks for sharing.

    -1
  • Vrem

    Monday, October 7th, 2013 12:24

    7

    Awesome guidelines in improving my icon design. Thank you very much for sharing your knowledge on this. This icon subject surely looks simple, but actually many hours spent to design it..

    0
  • Siraj Wahid

    Sunday, October 6th, 2013 02:26

    6

    The graphical representation of a website attract audience and compelling icons are the part of the representation. Thanks for the guide buddy :)

    0
  • Sathick

    Saturday, October 5th, 2013 06:23

    5

    Icons are always play major role in any kind of software or website too. Professional looking icons get impressed by users and always remain in mind

    0
  • Michael

    Friday, October 4th, 2013 17:46

    4

    The problem with icons is that most of those I see on Google are watermarked. How much does it usually cost to have one made?

    0
  • yunrui

    Thursday, October 3rd, 2013 10:15

    3

    Great article, it can help me to improve my design level, thank you!

    +1
  • jadeed boyi

    Thursday, October 3rd, 2013 09:55

    2

    I like some of the icons used in this article, been trying to access them. You know where i can find these?

    0
  • Phid

    Wednesday, October 2nd, 2013 10:42

    1

    In the consistency category, I think it’s important not only to stress consistency among the icons themselves, but also the icons with the site logo, fonts, color scheme, and other elements of the site. For example, if the logo is flat, then 3d icons will not work well. If the fonts are minimalist ice and modern, choose an icon set with those same qualities. Doing this provides a holistic unity to the site.

    +3

Comments are closed.

54.83.236.56 - unknown - unknown - US