Syntelex Web Design Blog


How To Customize Icons for Your Website

How To Customize Icons for Your Website

Website Ubiquity

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

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

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

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.


  • Download the ten icons we’ll be working with here.
  • Check the full free icon set from Google here.

..Continue reading