Five easy steps to turn an icon into an illustration

Always wanted to enhance your designs with fancy handcrafted illustrations but couldn’t afford a professional? Learn how to create a simple but effective Illustration out of an icon in five easy steps.

This is going to be fun.

Every creative person has probably already been in this situation: A project, be it a website, an app — or as far as I am concerned: often a news story would benefit from an appealing side visual. But neither budget nor time makes it possible to hire an illustrator. Yeah, know this situation, been there and would like to show you a way out in this article. Today you will learn how to conjure a simple but effective illustration from a simplistic icon in only five steps. In Sketch, Illustrator, Figma or literally any design software you can imagine.

Let’s go!

Step 1: Pick your Icon

First, you want to make sure to pick an icon that fits your visual and semantic needs. It’s best to choose a suitable icon from any open source — I usually use the outline icons from material.io. Of course, you can also stick to any other resource you might have access to. For this tutorial, I chose the “subscription” icon of Material Design in the duo-tone variant.

Pro tip: Make sure to download your icon as an SVG to be able to scale it efficiently. Because that is also the first step we are going to perform in order to create our illustration:

Increase the size of your icon and correct possible mistakes or things you don’t like.

The first step is to make your icon big enough to be the star in your illustration later. You can also make some minor tweaks to it at this stage if you like. For instance, in the case of my icon, the two lines in the upper section had some strange offsets to them, so I changed the spacing a little bit after resizing. Beyond that I also wasn’t satisfied with the harsh edges of the two upper bars, so I gave them rounded corners to match the visual style of the bottom window.

If you have more than one element for your icon, make sure that the stroke size is the same throughout your composition, otherwise, it will look unbalanced in the end.

Step 2: Select your Colours

Next, you should choose a colour for your main icon. Vibrant ones are best suited for this. If you work for a company with an existing style guide, you should, of course, use the colours according to the given CI. Otherwise, you can get inspiration from the logo or other design elements of the company. Now, paint the most important elements in your design with this colour. I have chosen a bright red as my main colour for the composition. As a secondary colour, I like to use complementary ones, because it gives the whole piece more vividness. For this project, I’ve chosen a shade of medium blue as an alternative colour.

Picking the right colours for the project is vital, so take your time. We will build on that later on.

If your customer really doesn’t give you any instructions for colour selection or you start a completely new and standalone project, you can use a colour palette generator like this one from Coolors. Smash the Space Bar until you really love a combination and paint your icon accordingly.

Step 3: Add Shapes to your composition

Our icon already looks good now, but for an illustration, there is still a lot of stuff missing. In order to prevent it from floating in a vacuum, we add some shape to our layout. Let’s insert an abstract background shape. I often use simple rectangular or oval forms as a starting point and change them with my pen tool just so that a visually appealing bubble is created.

To make the whole composition even more interesting, we add two floating bubbles and colour them in our two previously chosen shades. To make the whole thing a bit more interesting, I give the two elements an opacity of 60% to let the form that lies behind shine through just slightly. This gives us an adorable, almost glass-like look and adds even more character to the plain icon from the beginning.

Try to experiment with crazy shapes, even if they seem unbalanced at first. You can integrate them later with the help of other elements into the arrangement.

At this stage, it already helps to know where you are going to make use of your gorgeous illustration later on. For example, If you put it in front of a dark background, you may paint the rear bubble in a brighter tone now — if your background is on the lighter side, I would advise you to use a dark colour as the backmost layer. The reason for this is visual contrast, which can never be high enough. Usually, this makes your layouts more striking and visually appealing to your audience.

Step 4: Give your main elements depth

In the fourth step, we add more depth to the elements we already have by creating some shadows. However, we don’t just use drop shadows but take advantage of the fact that we work on vector graphics and can therefore not only change the border size of the elements but also give them different fills. To get a shadow with extra depth, we duplicate our entire icon and re-colour it. But instead of using a regular fill for our duplicate, we use linear gradients to do so.

Give the red elements a red linear gradient leading into transparency and the blue elements a blue gradient leading into transparency. In order to achieve the effect of a physical shadow, we give both the blue and the red colour in the gradient transparency of 40%.

In this step, you can play with the positioning of the shadow element as you like. There is only one rule you should follow: as humans, we are used to the fact that the shadow of objects always goes in the same direction. This is because of a big global light source called “the sun”. In general, we consider everything else to be unusual and strange. So don’t make your audience think and deliver all shadow elements in the same distance to their parent elements.

If you want to do something fancy, try inverting the gradient for one of the two colours, as I did in the example above. This will create the effect as if the eye line of the observer is exactly at the middle height of the icon. With this little technique, you can achieve even more visual depth.

Step 5: Add content-related design elements

Last but not least, you can give free rein to your creativity. Add a few content-related design elements in suitable places within your illustration. I decided to use forward and backward buttons and plus and minus symbols to do so. I tinted them with the help of my already established colour palette and some darker shades of grey matching the background. If that’s not enough, we can use our pencil tool and draw some vertical or horizontal lines and abstract our original icon even more. Even though it’s tempting, don’t go crazy with colouring at this point because otherwise, you will lose your already established visual hierarchy.

E voilà: Our icon is ready and we can finally use it in our projects:

Enhance your project

Now that we have created an illustration from a simple icon in five easy steps, you can use your creation in your layout. To do this, it is best to export it in SVG or PNG format in order to really take advantage of the transparent areas of your illustration and not have to accept any loss of quality.

I hope you enjoy the final result of your artwork and I hope you can incorporate this technique into your projects more often in the future.