Icons play a vital role in website appearance and appeal. There are different types of visual cues that indicate various actions, which provide a unique identity for your website or product. All to often, designers download the same icon sets which in response, make every website look more or less the same.
Website Icons and Customization
Your website should present something uniquely accustomed to your web design and appeal. In order to address this most common issue, Toptal has created a guide to help designers add visual depth to their icons and make them unique to the product they represent. This tutorial is largely inspired by the influential Google Material design.
Steps That Can Help Turn Your Website Icons into a Masterpeice
1. Using Geometric Shapes and Bold Colors
The flat design trend inspired Material Design, which is also based on basic flat shapes. Carefully select which shape best represents the element that the icon is portraying.
2. Adding Depth With Subtle Shadowing
Using a drop shadow give a sense of depth to your design and it stimulates the effect of light being cast on an object.
3. Replacing Drop Shadows by Using Color Shades
To show visual depth, each color is used in multiple shades. The example above shows different shades of red that are used for the shape of the M, and a darker shade of gray is used below the envelope lid.
How You Can Do it Too: Step-by-step Demos
We’ll apply a simplified version of the Material Design style, and for each icon, we’ll only use three shades of the same color and keep the shadows flat and short, instead of the common “long shadow” effect.