8 Ways To Use Hand Drawn Icons & Elements

Posted on - Last Modified on

If you want your project to have that “wow” factor, go for a hand-drawn icon, or some such element that will make your project look authentic, yet awesome. Designers usually go for perfect pixel designs, but it would be an original approach to add some hand-drawn style. Sketched out graphics can be remarkably eye catching; besides the artistic element, using handmade diagrams make your work look interesting, as well as personalized and unique.

Although some designers would prefer not to use hand-drawn elements, simply adding a few individual touches like circles, arrows, lines, graphs or even word balloons would add that personal feel, to show creativity and attract users. It is interesting how these design elements can be customized, so hand-sketched icons can match your brand or presentation style. Using hand-drawn elements or artwork has become quite a popular option for many creators, particularly in web design.

Four types of hand-drawn graphics for your projects

  • Sketched lines and shapes like ovals, arrows, speech balloons, etc.

  • Illustrative icons like people as animated figures

  • Diagrams in the form of charts and graphs

  • Progress index indicating the outline and future plans for your project.

Here are eight tips that will help you incorporate hand-drawn designs, icons or graphics in your project.

1. Create a place for the hand drawn designs

It is very simple to mix and match hand-drawn designs with different forms of visual display. These can be used along with photos or videos, near written text or even in a blank space. It can seem confusing when you make a plan to add hand-drawn elements, but they always tend to fit with the overall pattern. These elements have been used by Digital Visitor to create a separation between content and elements. They are often placed in such a way to make sure the user views the right content. At times, the elements are placed in the center of the page, or as simple dots on the homepage. Sometimes there is a hand drawn favicon or icon placed in multiple locations as you scroll down the page, or at the bottom of the page, to showcase the product or services of the company.

2. Interactive designs

With this design technique, you can incorporate interactive pieces into a design with hand-drawn elements. It could be anything from animated figures to fully interactive pieces, but should be attractive enough to pique the interest of the user. A great example of interactive trends is Stained Glass, a combination of creativity and a trendy website design where the elements are working accurately yet appear to be drawn by hand. Users will be kept involved through precise coloring - but be careful not to color outside the lines, in order to create a polished and eye-catching experience for your visitors.

3. Typography that looks almost hand-drawn

An attractive and engaging element often looks as though it’s been drawn by hand, but is usually not handmade at all. There are several typography styles that resemble handwriting, and are used for display purposes. This is usually done to make sure the letters are easily decipherable, yet have that personal touch. A good example is the Tradewinds Hotel, where the letters are written in a cursive style, but are big enough to be legible and can be read with ease. The typography is simple yet stylish, emphasizing the display, while the typeface keeps everything simple for users. Coca-Cola is another example where letters appear hand-drawn, but are easily comprehensible.

4. Design divots

Sometimes a hand-drawn element is used to create a continuation or flow for a design that might otherwise be difficult to comprehend. These actually just serve as an improvement to the overall visual appeal. Such divots are placed in precise locations all over the design, giving it a fun element. Mother’s Brewing is using this design element with a huge heart placed on the homepage. Small elements of different sizes are visible on every page; some are easily seen, while others are hidden. The most impressive feature is that each button has a hand-drawn ribbon design with other elements appearing and sliding in the background, providing a visually fascinating effect.

5. Setting the mood

Hand-drawn design elements usually take a frivolous and playful tone, giving your project a lighter appeal. If you are using several hand-drawn elements, your project will seem effortless and light. A project that is creative and light, and at the same time encourages interaction of users, is the Signs for Science, an element-packed design making use of colors. The elements used include typography, squiggle underlines and icons to specifically change your mood.

6. Exhibit your creativity

The concept of hand-drawn designs for your website is a great chance to showcase your creative skills. Such creativity gives a more impressive and individualized look to your site, with the elements focusing on the design processes. Logos with hand-drawn elements have given the Feebles site an innovative design and look.

7. Logos and icons

An icon or logo looks great with hand-drawn features. Anything hand-drawn, from squiggles to shapes like circles, are full of imperfections that add a certain charm, in comparison to computer-made shapes that come out perfect every time. The minimal style of hand-drawn icons or logos is quite noticeable, giving it a fun and personal look that a computer-generated, perfectly straight line would simply not provide.

8. Animated features

Hand-drawn animated images on screen certainly have a greater appeal, and are fun to watch. It is undoubtedly entertaining for the user but in the long run, the website owner is the one who stands to gain the most through increased time spent on the site, which might result in more conversions. Long Story Short has used this concept on its homepage, with a hand-drawn topographical style for its logo, followed by a series of fun, hand-drawn animations that last a few seconds.

Design rules for hand-drawn elements

It is very important to consider design consistency whenever you are using some kind of handmade artistic embellishment. So, it is advisable to keep the following points in mind:

  • Ensure there are around two handwritten styles in one presentation. If you are using different fonts, keep to one or two styles as a maximum. Also, use either an ink style element or charcoal, but not a mixture of the two.

  • Leave some white space in margins and slide edges. Do not crowd the page by putting several elements close to each other. Leave some breathing space.

  • There should be perfect alignment so the elements are equally distributed. If you have placed the icons in one direction, either vertical or horizontal, position them in such a way that they don’t look scattered and untidy.

  • Carefully resize all the elements by keeping them in proportion.

Avoid combining several style elements together, as this will result in distracting your audience. Your main aim should be to get your message across through memorable content created specifically for your site.

In case you are having some issues in making your project stand out, you can browse through freelancer.com to learn about hand drawn icons and elements. These will help to make your project shine, and get the attention it deserves.


Attractive hand-drawn elements for design projects, besides adding a personal touch, are also greatly appreciated by users. Such elements reveal your personality and creative traits. It should be noted that not every project requires hand-drawn elements, but it is useful for certain projects in order to hold the attention of visitors. Please have fun using these elements!

Do you think handmade designs could prove beneficial for your project? Tell us what you think, and do remember to share this article with your friends. We would love to read your comments! 

Posted 12 September, 2017


Designer // Writer // Creative

Tom is a Design Correspondent for Freelancer.com. He is currently based in Melbourne and spends most of his non-work moments trying to find the best coffee.

Next Article

100+ MacBook PSD And Vector Mockups Ready For You To Use