Icons are an integral part of our designs and can have a considerable impact on the overall look and feel of a product. They act as visual cues, communicating different functions and behaviours, and can even be used to create a unique brand identity. Unfortunately, it is all too common for us to simply download the same icon sets and make every icon look the same, instead of taking the time to create something more meaningful. This approach does not do justice to the importance of icons in design.
In order to address this problem, I have created a comprehensive guide to help designers add a heightened level of visual detail to their symbols and make them more identifiable with the products they represent. The widely-used Google Material Design was a critical source of inspiration when creating this guide.
The principles of Google’s Material Design
According to Google, Material Design is a metaphor that develops a unified visual language from signals from the real world, improving the appeal and usability of interfaces. By utilising the concepts of Material Design, interfaces can be improved immediately.
Use images with bold, simple geometric shapes
Material Design, which is based on fundamental flat forms, was inspired by the growing trend of flat design. When creating an icon, it is important to choose a shape which accurately depicts the element being depicted.Incorporate Depth Using Light Shadowing
A drop shadow can be used to create the illusion of light being projected onto an object, providing the design with a sense of depth. This technique can be extremely effective in deceiving the eye and making the design appear more three-dimensional.
Take note of the fact that natural light is often shown as coming from the top, left corner.Substitute colour shades for drop shadows
In order to create the illusion of depth in a design, it is often beneficial to incorporate multiple shades of each hue. As an example, a darker shade of grey is used beneath the envelope lid in the Gmail logo, and various hues of red are used to form the letter ‘M’.
How to Do It Yourself: Step-by-Step Examples
For each icon, we will be utilising only three shades of the same hue and instead of utilising the common “long shadow” effect, we will be employing short, flat shadows. This is a simplified version of the Material Design style which has been popularised in recent years.
Resources
Check out Google’s whole free icon collection here.
Let’s begin
Bolt Icon
Divide the symbol into two parts, the top section appearing to be elevated. To achieve the desired effect, you may want to add a shadow at the point of contact between the two shapes. Use a gradient of yellow shades, with the darkest hue added to the shadow.Chat Emoticon
If you want to make a shadow like the one in the original symbol, you should do it in the space between the two bubbles.
Choose a point on the lower shape that forms a right angle at the opening, and then move it up and to the left so that the resulting shape has a right angle in its top-left corner.
Duplicate the top bubble and move it downwards and to the right. Utilise the “Pathfinder” to separate the duplicate and the bottom bubble, leaving only the intersection between them.
If you use three different tones of blue, the lightest should go on top, the middle should be the darkest, and the darkest should go on the bottom.Indicator Checkbox
To do this, we’ll fold paper to make an impression.
Create a copy of the icon, then cut it in half by erasing the two points at the top right and bottom left.
Make a copy of the fold on the left and stack it on top of the one on the right.
Create an intersecting shadow by combining the two forms together. Utilise three distinct colours, with the darkest shade assigned to the shadow, a medium shade for the middle, and the lightest hue for the top.Symbol of Flag
Beginning with a rounded outline, remove the flag’s bottom.
Draw two intersecting diagonal lines to create a folding effect. Utilise a pathfinder to distinguish between the form of the flag, allowing for the addition of three distinct shades of green against a grey backdrop.Icon of a Heart
Make a copy of the love symbol.
Take only the left side of the figure out. Starting in the top right corner, draw a slanted line down.
If you would like to eliminate the shadow form, you can achieve this by overlapping the generated shape with the heart and then moving it to the right. Then, add three different shades of pink to complete the look.Icon of Mountains
The absence of the old icon’s shadow suggests a suitable location for one.|
Make two triangles out of the selections.
A shadow form may be produced by shifting a duplicate of the smaller shape to the right and then cutting off the junction.
For the huge triangle, use three different shades of brown, starting with the lightest tone on the left side, the centre having the medium tone, and the darkest tone for the shadow. To give the triangle a softer look, the corners should be slightly rounded off.Iconic Person
By selecting a lower body part from the individual on the left, you can create a duplicate and place it next to the individual on the right. To separate the three intersecting shapes, utilise the “Divide” tool in the “Pathfinder” panel. Finally, complete the image by adding colour.Icon of a Square That Floats
Pick the lowest one and raise the central point so it forms a diamond.
Make a duplicate of the diamond shape in the top left and slide it down the page by 10 or 20 pixels.
To divide the two forms at the bottom, select them both and use the “Divide” tool in the Pathfinder panel.
Once the forms have intersected, cut out everything except the bottom two.
To finish, I used three different colours of red, with the deepest one placed in the centre.Icon of the Letter
Select the second highest point of the envelope using the “Direct Selection Tool (A)”.
Using the “Pen Tool,” add a point to the segment’s right end.
By raising the two highest points and shifting them to the left and right, you can create the shape of a piece of paper, as demonstrated in the illustration. This is made possible by the addition of an extra point.
Next, utilise the “Pathfinder” panel to divide the chosen items. Carefully cut the top paper form away from the envelope, and then trace the envelope section onto the top of the paper in order to create a shadow shape.Symbol of a Cake
Remove and replicate the base of the cake.
Reduce its footprint by bringing the left and right sides closer together.
Place the new form on top of the previous symbol, then stretch the upper points so that they overhang the icing.
Using the “Pathfinder,” make a split in the overlapping form, then cut away the surplus points from the sides of the tall cake.
To complete the decorating of your cake, apply a lighter shade of orange to the icing and candle, a darker shade to the base, and a deeper shade yet to the flame shape and shadow edge.
Boost the Visual Appeal of Your Icon Library
Creating icons according to Material Design’s specifications is a straightforward process requiring only the implementation of a well-crafted drop shadow, a few bold colour choices, and a few carefully considered geometric shapes. With these elements, you can easily craft icons that meet the guidelines of this popular design system.
The excellent news is that you do not have to create every symbol from scratch as we demonstrated in this guide. If you are looking to get going right away, you can take advantage of the freely available, flat icons that can be found online and use the processes we have just discussed.
Share your thoughts with us! Please share your ideas, suggestions, and comments below.
