{"id":14085,"date":"2016-12-06T16:13:27","date_gmt":"2016-12-06T10:43:27","guid":{"rendered":"http:\/\/blog.resellerclub.com\/?p=14085"},"modified":"2026-02-13T11:33:30","modified_gmt":"2026-02-13T11:33:30","slug":"guide-to-choosing-or-designing-icons-in-web-design","status":"publish","type":"post","link":"https:\/\/www.resellerclub.com\/blog\/guide-to-choosing-or-designing-icons-in-web-design\/","title":{"rendered":"Guide to Choosing or Designing Icons in Web Design"},"content":{"rendered":"

Design is about communication. As a designer, you\u2019ve achieved what you set out for if your visitor finds what he\u2019s looking for on your website with ease. <\/span>In a couple of my earlier blog posts, I\u2019ve covered how to use calls-to-action in your web design<\/a> but icons? Icons can also be calls-to-action but can be effective visual replacements for text.<\/span><\/p>\n

Icons are usually instantly recognizable and already have strong, defined concepts and although they may only be a small part of your website, a failure to nail it, can make your design look tacky and cheap. <\/span><\/p>\n

What separates icons from other images are the fact that icons are universally recognisable and can convey the action without words. Take my icon test with these below and shout out what they represent. Let\u2019s see if you can do it under 5 seconds:<\/span><\/p>\n

\"icons-washroom\"<\/a><\/p>\n

If you said washroom, right answer! Next one..<\/span><\/p>\n

\"icon-danger\"<\/a><\/p>\n

Did I hear you say \u2018Danger\u2019? Bravo! <\/span><\/p>\n

\"icon-left-turn\"<\/a><\/p>\n

\u2018No left turn\u2019? You got it.<\/span><\/p>\n

\"icon-download\"<\/a><\/p>\n

Did you say \u2018Download\u2019?<\/span><\/p>\n

\"icon-photography\"<\/a><\/p>\n

\u2018No photography\u2019 is correct!<\/p>\n

Why was it so simple to identify them? It\u2019s because theses icons have become associated with action or meaning repeatedly and universally.<\/span><\/p>\n

Guidelines to Designing Your Own Icons <\/strong><\/span><\/p>\n

I like how Joel Diaz pens his process of designing an icon to outline 5 Guidelines for Designing Better Icons<\/a>. He talks about 5 important things to keep in mind:<\/span><\/p>\n

    \n
  1. Understand the Problem \u00ad <\/span><\/li>\n
  2. Take a Holistic Approach \u00ad <\/span><\/li>\n
  3. Appreciate That Simple is Better \u00ad <\/span><\/li>\n
  4. Consider Context \u00ad <\/span><\/li>\n
  5. Understand Semiotics<\/span><\/li>\n<\/ol>\n

    1) Understanding the problem<\/strong>: He talks of how the request from his client was to create an icon for a document loading error something like this:<\/span><\/p>\n

    \"icon-joel\"<\/a><\/p>\n

    Joel suggested stripping it back. To make it:<\/span><\/p>\n

    \"icon-joel-2\"<\/a><\/p>\n

    This icon didn\u2019t give any reference and so wasn\u2019t easily understood.<\/span><\/p>\n

    2) Take a holistic approach<\/strong>: After toying with the icon, this came up.<\/p>\n

    \"icon-joel-3\"<\/a><\/p>\n

    This however, as they realised, was also used as a clinical icon. The danger of reusing an icon that is already used to represent something is what you want to avoid. It\u2019s important to have an understanding of a set of icons. <\/span><\/p>\n

    I suggest doing this by reading material and doing your own research. Run your icon designs past a group of people to see if they get it.<\/span><\/p>\n

    3) Appreciate that simple is better<\/strong>: Joel\u2019s client then suggested this one:<\/p>\n

    \"icon-joel-4\"<\/a><\/p>\n

    This was far too complex and the metaphor was confusing.<\/span><\/p>\n

    4) Consider context<\/strong>: They then considered this:<\/p>\n

    \"icon-joel-5\"<\/a><\/p>\n

    This one communicated \u2018danger\u2019 because of the bright colour and bold icon. Light colours like greys and pastels sub-communicate that the problem isn\u2019t very big and things will be fine. A red, big, flashing icon would problem set you off in panic mode as if the issue is already more serious that it really is.<\/span><\/p>\n

    5) Understanding Semiotics<\/strong>: Joel notes that sub-communication is a semiotic language, also important and present in typography. You can have a feminine font, a delicate font and so on (our ‘What the Font<\/a>‘ blog tells you all about this).<\/p>\n

    Ask yourself what your icon is going to communicate. <\/span><\/p>\n

    Joel points out Internet downtime icons like these:<\/span><\/p>\n

    \"icon-joel-7\"<\/a><\/p>\n

    \"icon-joel-6\"<\/a><\/p>\n

    What\u2019s perfect about these icons is the small size, the subtle message that conveys something is wrong and yet a light icon colour indicating a it\u2019s not serious.<\/span><\/p>\n

    Joel and his client eventually settled on this (quite apt) design for a document load error:<\/span><\/p>\n

    \"icon-joel-8\"<\/a><\/p>\n

    More best practices to keep in mind<\/strong><\/span>:<\/span><\/p>\n

      \n
    1. Keep it classy and simple<\/span><\/li>\n
    2. Avoid overloading your design with icons<\/span><\/li>\n
    3. Stick to the overall website design theme even for icons<\/span><\/li>\n<\/ol>\n

      Advantages of Icons<\/strong><\/span><\/p>\n

      Icons are a great way to:<\/span><\/p>\n

      1) Make listicles look interesting<\/span><\/p>\n

      \"icons-listicles\"<\/a><\/p>\n

      2) Increase readability and break the monotony of text<\/span><\/p>\n

      \"icon-reading\"<\/a><\/p>\n

      3) Throw in some personality & fun<\/span><\/p>\n

      \"icons-headers\"<\/a><\/p>\n

      4) Make headers out of icons<\/span><\/p>\n

      \"icons-headers2\"<\/a><\/p>\n

       <\/p>\n

      The Icon Bank<\/strong><\/span><\/p>\n

      We know great icons are the Internet’s gift to web designers or just Webydo<\/a>‘s gift to designers. This site gives you a bunch of free icons that are great for every type of design. Here are a few:<\/p>\n

      Multipurpose Icon Set<\/p>\n

      \"multipurpose-set\"<\/a><\/p>\n

      WorldWide Web Icon Set<\/p>\n

      \"icons-maps\"<\/a><\/p>\n

      MiniCool Icon Set<\/p>\n

      \"minicool\"<\/a><\/p>\n

      You can explore all the sets here<\/a>.<\/p>\n

      If you’re looking for something even better, try IconFinder, the world’s largest collection of premium icons to fit your project perfectly. IconFinder provides millions of designers and developers with over 1 million current icons and over 50,000 new icons added every month. We have a special offer of 50% off on this fantastic design resource. If you’re interested, head over to the page<\/a>.<\/p>\n

      Go on, make your designs stand out with well designed, wisely picked icons.<\/p>\n

      Reseller Club Hosting Services<\/h2>\n

      Reseller Hosting<\/a> | Windows Reseller Hosting<\/a> | Cloud Hosting<\/a> | VPS Hosting<\/a> | Managed VPS Hosting<\/a> | Dedicated Server Hosting<\/a> | Windows Dedicated Server<\/a> | Managed Dedicated Server<\/a> | Linux Shared Hosting<\/a> | Windows Shared Hosting<\/a><\/p>\n

      \n\t\t\t
      \n\t\t\t <\/div><\/div>\n\t\t