Basics of Icon usage in UI design

There are 2 things in Iconography one is Designing the Icon and another is Icon usage. where designers masters the designing process but underestimates the the Icon usage ways.
This may sound like really little thing that who cares the usage but it does specially when someone land on your product page of sees your information on a Infographic and point s the poor design.
Instead of reading the long paras users generally focuses on the Icons and their placement.

Few Examples of the Icons 

Use Labels Whenever Possible

Before continuing further look at 1st Image 

can you Identify what’s point for any of Icons without reading the whole text below?..obviously NO!! Now look at the Image 2nd it take hardly few seconds to relate the point to the Icons.
Icons have been used to give a context to a point but Label or text just hits the point in seconds. So wherever in doubt use labels.

Give icons a background

As you can clearly see the Image 1 has the Icons same as the Image 2 but the difference is 1st one is looking a bit off as seems like the Icons are floating.
While just by giving a Background everything looks so systematic.

Ready to use Free and Open Source SVG Icons Pack JavaScript Library. Vivid.js

Use Colors to Match not to Mismatch (Consistency is the key)

Just at the first glance the icons in the Image is distracting our eyes as there color variation. which is not a good UX where as in image 2 Every thing has been done according to the Design System as it is more consistent and more professional then the Image 1.

Get coolest handpicked gradient colors collection palette for your next project and Icons CoolHue, alternatively copy css or download as image too.

I hope from next time you will feel easy while placing icons in your project.

Thank you for giving your precious time.