Use Basic Shapes to Create Awesome Icons

Use Basic Shapes to Create Awesome Icons

At times it seems that icons are really complex and hard to create. Guess what — it is easier than you think! When it comes to me, my every other icon is actually made using basic shapes. I rarely use the pen tool, circle and square are my main icon components. Complex icons can be created with simple shapes. You just need to look at them from a different angle. What you should be paying attention to are the main creating blocks of each icon.

basic shapes

basic-shapes-construction

Icons are not redrawn pictures, they carry a specific message, so your job is help transfer this message and make the meaning of the icon bright and clear. You can’t just shrink an image and call it a day. As icons are to transmit a complex idea via a small pictogram, they should be “stripped down” to their essentials. This why working with basic shapes is a great idea. It doesn’t let the icon look more complex than it should.

Also, it’s way easier to create sharp looking icons using basic shapes. The pen tool is not really suitable for making pixel-perfect curved lines. They require lots of adjustments to ensure that all the points are on the pixel grid sharp as a knife. When creating icons using the basic shapes though, you simply place these already created shapes on the pixel grid and look if everything is pixel-perfect.

Look at these amazing animations by Paulius Kairevičius — they are one of the best examples illustrating icons created with basic shapes:

Pin Constructions by Paulius Kairevicius

Eye Constructions by Paulius Kairevicius

Heart Constructions by Paulius Kairevicius

I was completely blown away by how awesome these little presentations are. They are short, simple, and you can learn something just in a few seconds of looking at them. Truth be told, they made me understand that I had been drawing the eye icon wrong my whole life! And it is as simple as overlapping two circles together. These little gifs show how much you can do by simply using basic shapes. I suggest you go and hit that Follow button on Paulius profile. He is one amazing branding designer, and you can learn a lot from his works, take my word.

I know for a fact that as a beginner in icon design, sometimes you struggle when it comes to turning a complex image into a small pictogram using only basic shapes. So how do you begin to notice which parts can be simplified and drawn only using some basic shapes? Practice, of course!

First of all, focus on all main features of your object. Highlighting the key elements in your icons is crucial! Which elements make it what it is? Also, always keep in mind that less is more! Icons should never be over-designed. They must be as simple as possible to deliver the message properly. If there is anything you can remove to make it simpler, yet still delivering a clear meaning and looking great, then remove it.

diamond icon process

Another trick that will help is sketching. Sketch your icons in a grid book using only the basic shapes. Your work process will be fast, you will be able to make changes quickly and understanding the working process with basic shapes will be much easier. Instead of doodling your icon by hand — construct it using geometric shapes. See how they interact with each other and what could be done to increase the identifiability of the icon.

So each time you create a new icon, try to imagine how it would look if constructed using only basic shapes. Deliberately practice creating icons from simple shapes and examine other people’s works to understand how it’s done.

Another great thing you could do right now to improve your icon design skills is to read this article by Scott LewisBetter Icon Design in 6 Easy Steps. It also mentions the importance of the geometric shapes.

However, don’t oversimplify your works. Simple may be the new black, but icons are supposed to deliver the message clearly, so keep an eye on it at all steps. Reach out to your targeted audience from time to time and ask what they think the icon means. It will help you get the important information from the third party, and you will make sure that you are going in the right direction with your icon.

Try these tips on your recent icons right now, and I will talk to you next week!

Stay awesome!

icon-design-guide

Pin It on Pinterest

Share This