Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more
The use of suitable icons has the potential of elevating the overall visual feel of the design. Historically the use of icons has been observed more in the last few decades. In print media, there was not much prominence of icons. But that changed completely with the onset of digital media. Now almost every designer has to use them.
Icons have, over time, taken over as a substitute for logos as well. If you wish to indicate certain brands or refer back to organizations, then you can use their icons in your design. The widespread use of social media icons in digital marketing is an example of this. When it comes to the world of mobile applications, this is again true. Designers spend a lot of resources in getting their mobile app icon perfect.
With the rising use of infographic design, the need for icons is increasing ever more. While few good resources provide ready-made icons for use, there will be times when you will need to create a customized icon for your design. For this, we have collated some fantastic video tutorials that will help you learn icon design and come up with new creative icons whenever needed.
1. How to Design Simple Icons in Adobe XD
Adobe XD is being widely used for mobile application UI creation. This includes the design of the needed icons. The overall interface of this tool is similar to that of Illustrator. If you are adept in the Adobe suite working, you will not take much time to get a grip on this software. This tutorial is at a fundamental level and hence helps you get familiarised with the tool’s functioning. In this video, we learn how to make basic icons using Adobe XD.
The good part is that simple shapes like squares, circles, and others are used to create the icons. You will first learn how to set up the entire layout for the phone, then how to create icons from scratch. By the end of the 12-minute video, you will be able to design four neat icons for home, search, notifications, and message – the standard four icons we see on the bottom phone screen. Technicality-wise, you will learn to create shapes, subtract and add them to make more complex shapes, and convert them to clean outlines.
2. Glassmorphic Icon Set Design Process (Adobe Illustrator + Xd)
Suppose you are a professional designer and want to get more creative with your icon designing skill set. In that case, this video tutorial is for you. Glassmorphism is a rising trend in graphic design and is being extensively used in the mobile phone world. In the video, you get to learn how to deploy this trend in the icons you design. Both Adobe Illustrator and Adobe XD are used in this tutorial. Illustrator is used for basic icon creation, while XD is used for styling the icons.
The tutorial does not explain the tools too much, so a working knowledge of these tools is needed. It starts by first explaining the concept of Glassmorphism. Then we move on to sketching the icons on paper and developing the concept of the icon set. Then these icons are created in Illustrator and then shifted to XD. This is where the designer completely transforms the icons into a visually beautiful glassmorphic icon set. The tutorial is only 10 minutes long but will help you add a style to your icon design.
3. Icon Design using Grids in Figma
After Adobe Illustrator and XD, designers also prefer Figma for icon design. If you are new to Figma and want to explore this tool, this is a good tutorial. The good part about this tutorial is that it shows the use of a grid for designing pixel-perfect icons. So even if you are familiar with Figma for icon design, this tutorial will teach you a new design approach.
The tutorial is over 17 minutes and may seem long. Still, it is filled with very valuable information and hence worth the watch. The video starts from a clean slate and takes the viewers through creating the icon. This includes taking a new layout, creating grids, using simple shapes to create complex designs. Finally, it touches upon the sizing of the icons, as this is crucial for getting your UI/UX right.
4. Floating Cube Icon Design in Illustrator
Feeling bored with the routine icon designs, then challenge your creative boundaries by designing a 3D super cool icon like the one shown in the tutorial. Tutvid is a reputed name in the design industry for producing resourceful tutorials. This video on 3D icon design is a testimony to it. The video is over 33 minutes long, but it provides highly exhaustive guidance on how to go about icon designing.
First, the tutor shows the icon that we are going to make. By its look, you understand the complexity of the design as this icon is made up of several layered designs. Then one by one, these layers are created using the illustrator tools. In this tutorial, you will learn how to create transparent gradients and use them in the right manner to showcase depth. You will also master the path tools, masks and, more importantly, gather knowledge about how to approach such a complex icon design. After watching this video, you will feel confident about designing even the most complicated icon you have seen.
5. Seven Golden Rules for Icon Design all Designers Must Know
Just like other streams of graphic design, even icon designing is governed by certain rules. You must follow these rules if you want to design stunning icons in a structured manner. This video illustrates the seven golden rules that all designers must know if they want to be good at icon designing. The video is only 6 minutes long and explains each of the rules crisply and clearly.
The good part of the tutorial is that it does not cover the standard tips that you can get on google search. Rather it provides tips that experience designers have gathered with decades of design practice. Some of the tips include using geometric shapes, using preview bounds, extensive use of grids, checking in pixel preview mode, and many more. The way these rules are explained, any designer will understand them. Once you have gone through the video, you will feel more empowered as a designer and will be able to improve on your icon designing process.
6. Corel Draw Icon Design Tutorial
While Illustrator and XD are most preferred for icon design, there are still designers who use Corel Draw for designing the icons. There is absolutely nothing wrong with this, provided you know the tool well enough to complete the design. This small 4-minute video teaches us how to design a complicated bridge icon in Corel. As the tutorial is short, it does not detail how to use the tool. Hence a good working knowledge of Corel is needed for this tutorial.
The tutor first shows the icon that we are aspiring to design. Then the whole process of the design is started. All the steps are shown very quickly. If you cannot understand a certain step, you can pause the video or replay that part to understand it. This also shows the importance of having the design idea ready before using the tool. By the end of the video, you will learn to use basic shapes to create such a complicated and good-looking icon in Corel Draw.
7. Designing and Animating an Icon using Illustrator & After Effects
Now that we have seen how to design icons in multiple tools and the standard rules to follow, we can venture out creatively with icon design. This video tutorial teaches us how to make icons in Illustrator and then animate them in After Effects. You must have come across many such cool applications or websites where icons come on the screen with some animation. If you want to learn how to do that, then this video is for you.
The first part of the video is how to design a simple icon in Illustrator. Using basic shapes, a nice heart icon is designed. First, the outline is created, and then the shape is filled with a gradient color. Once the icon is ready, it is exported and taken to After Effects. Using the basic animation tools, the icon is brought to life by animating the outline, color fill, and background. Though the icon created and used here is not very complex, you can learn the process and use the same for any icon you want.
8. Using Grids to Create Packaging Symbols Icon in Illustrator
The seven golden ratio tutorial above mentioned the importance of using a grid in the icon design process. This tutorial now further expands on its significance and teaches us how to design packaging symbols in Illustrators. As a designer, you will get a variety of work. Such packaging symbols will be part of labeling and packaging design. If you are good at icon design, you can create your custom set of icons and not use the standard designs used by everyone.
Starting from scratch, the tutorial will guide you through creating four packaging icons: This side up, fragile, keep dry and handle with care. The good part is that you already have a fair idea of how these icons look like. The important aspect to focus on in the video is how the tutor creates vertical and horizontal guides and concentric circular guides. This proves to be very useful in designing pixel-perfect icons. The video is almost 18 minutes long, but by the time you are done watching it, you will be able to adopt grid designing in your icon design process.
9. How to Create a 3D Pencil Icon in Illustrator
Suppose you are looking for a highly detailed video tutorial that shows you every step of the icon design and explains the need for it. In that case, you should refer to this video. It is almost 24 minutes long, and with that, you can understand how deep it would be diving into the process of icon design. Furthermore, a visually charming 3D pencil icon is created at the end of the video. Even if you are new to Illustrator, you will not have much problem following this video because the tutor explains the steps.
First, it uses simple basic shapes of squares and circles to create the 2D pencil. Then is starts using gradients to create the 3D effect. This is the amazing part of the video as it focuses a lot on light and shadow. It aims to create a highly realistic pencil and adds a lot of layers to the design. Even at the end, it shows how to create the shadow of the pencil on the ground. This tutorial will help you learn how to create highly detailed icons.
10. The Golden Ratio for Icon Design in Illustrator
This video is a bonus video tutorial on further bettering your icon design knowledge; this video is a must-watch for all designers, no matter at what professional stage you are at. The Golden Ratio is a highly used concept in graphic design. This tutorial explains how to use it for Icon design. You can also use the same concept for logo designs. Illustrator is used as the design tool in the video.
The first part of the tutorial is spent on designing the golden ratio itself. This is an interesting exercise as it involves a lot of precise mathematical calculations. Then in the second half of the video, this ratio is used to design icons or logos. You will be amazed to see how powerful the ratio can be in designing visually stunning graphics. The video is over 17 minutes long but spends a lot of time discussing the golden ratio, its significance, and its use.
Designers are already facing a lot of demand for customized and creative icons. Hence it is going to be increasingly difficult to just depend on available stock icon sets. Therefore, learning icon design and mastering it will be an important skill that you can develop as a graphic designer. The above video tutorials are free to watch and will go a long way in polishing your icon design skills.
