Our guide to icon design and animation

Want to earn some money on the side by selling vector icon packs? Or do you want to specialize as an icon designer? You need to internalize the basics of iconography.

This guide defines icons and uncovers their history. We’ll look at the different icon types you can choose from, and the essential icon design principles you need to follow.

Follow our easy step-by-step tutorial at the end of this article to help you transform a drawing into a scalable vector icon using Linearity Curve.

Are icons different from images?

The word ‘icon’ in the dictionary describes a sign or a representation of an object by its resemblance or analogy.

Consider how a 'trash can' icon indicates where all your deleted files go. This icon means basically the same thing in any language, culture, and to all ages and genders.

So, if you think about it, an icon is part of the most universal language in the world.

The history of icons

In Latin, the word eikṓn means “likeness,” or “image.” The modern form of the word dates back to 1565.

It’s mind-blowing how much information icons can contain and how quickly they deliver it. That’s why icons have been used for centuries to communicate.

But as we approached the millennium, icons became increasingly prominent as we started using and needing to communicate with computers and devices. Icons define user interfaces and are integral to the development of User Experience (UX) design.

The 11 different types of icons

Icons come in various styles, each offering advantages for specific contexts. Here's a breakdown of some popular icon styles and when they might be most suitable:

1. Flat icons

2. Outlined icons

3. Dimensional icons (neumorphism)

4. Filled icons

5. Pictograms

6. Ideograms

7. Hand-drawn icons

8. Skeuomorphic icons

9. Glyph icons

10. Material design icons

11. Animated icons

Essential icon design principles

The creation process is the most exciting, and we’ll get there. But first, we must cover a few basic principles that icon designers usually follow to create a memorable icon.

1. Pixel perfection

It's not enough to design eye-catching icons. You need to make your icons scalable, responsive, and suitable for actual devices. Position your icons on a pixel grid to ensure they don't blur.

If you are rescaling your icon for various applications, you might need to change the design slightly for every size so you’re not left with half pixels that can bring blurriness to your design. This will help you maintain pixel perfection.

2. Geometric shapes

Use geometric shapes as often as possible to design your icons. This will give your icons a more powerful, compelling, and organic shape and increase their legibility.

3. Angles

Unless it's a straight angle, try to stick to 45-degree angles in most cases. The result will be crisp, and the perfect diagonal is an easily recognized pattern.

4. Corners

A 2px radius is very common in icon design. It's large enough to clearly define your rounded corners but doesn’t soften them so much that your design takes on a whole new aesthetic. But it all depends on the personality you want to give your design.

A thinner stroke of just one pixel will look pointier, while three pixels make a very rounded shape. A 0dp Corner Radius gives you very sharp icons.

5. Keep it simple

Your icon needs to convey its message at one glance—that is its purpose. It can’t be too abstract or too complex, or it will lose its meaning.

This also applies to its composition—try not to get into too much detail. An effective icon design should be readable in small sizes or big sizes.

Strip your icons of any unnecessary details that don’t help to communicate its concept. Instead, make it heavy and noisy.

6. White space

In the same vein, use white space to give your design more room to breathe. That will help your icon convey its meaning faster.

7. Perspective

Perspective is hard to read on something as small as an icon. Always try to view the objects of your design straight ahead.

8. Keep icons consistent

Icon packs need to look consistent throughout, so check that the stroke weights, stroke corners, color palette, level of complex details, spacing, and style elements remain the same throughout the icon set.

So, if you use a 2px stroke for your first icon, you need to keep using it throughout your icon set.

Visual weight is the notion that certain common elements can appear to be heavier than others. Like a dark element feels heavier than a light one. It's not an exact science, and it has much to do with individual perception.

Therefore, there are no instruments to measure these forces. Trust your eyes and intuition when you align your icons in a lineup.

9. Personality

Give your icon set a personality. What distinguishes your icons from other stock icons on the web? There are many professional icon sets out there, and your designs need to stand out. You can do that with your own drawing style or a particular color palette.

Avoid obsolete metaphors, like representing film with an old-school reel camera. The exception is, of course, when that is what the project requires. Stay modern, and don't just repeat what others have done without thinking.

Now that we've covered all the principles, let's go through the five steps to create an icon.

Step 1: research

The basis of any creative project, isn’t it? You need to figure out what icon to design to represent a certain idea. 

First of all, you need to understand the purpose of your icon. Where it will be used and what it should represent. You have to think of your icon as a character.

Is it meant for a children’s app, a university, or a corporate company? Your design needs to convey that.

But an icon is also a metaphor. So, you also need to focus on which icons require more imagination regarding their representation and which are just alternatives to their real-life counterparts.

‍If you need to create an icon that represents the object itself, it’s fairly easy. But what if you need to create an abstract icon that represents ‘routine’? This is where you need to put your thinking cap on and brainstorm the possible symbols you can use.

Use a dictionary, a thesaurus, word associations, or a Google search to better understand what you need to depict and get inspiration. You need to simplify the idea of an abstract concept into common objects that relay the meaning in an instant.

Try to draw your icon ideas out. It’s easier to decide between them this way. Don’t be discouraged if you can’t find a way to represent the concept of your icon straight off the bat. There are many icon designs platforms and resources out there that can provide you with the much-needed visual stimulus or inspiration.

Step 2: define your style

Designing icons is so much fun, and the fact that there are so many styles to choose from makes it even more enjoyable.

Do you consider yourself a minimalist, a flat designer, or a lover of skeuomorphic design? No matter your preference, there’s an icon style with your name on it.

But you may need to go beyond your own personal style when designing icons. Your decision depends on the general requirements for the type of interface your icons will be displayed on (for example, Apple iOS or Google Material) and the stylistic choice of the particular UI layout you are designing.

Decisions, decisions.

Step 3: sketch

All designs, simple or complex, start with the simplest shapes.

When sketching, understand what major shapes you need to use to create your icon content. To understand these basic shapes, you can use a reference image or simply start sketching out the main components of your icon in ample strokes.

So, if we are sketching out an ice cream icon, for example, we know that we will use a triangle for the cone and oval shapes for the scoops and drips.

You can choose to sketch in your own paper notebook, or use raster drawing apps like Procreate for pixel-based illustration.

You can import Procreate files directly into Linearity Curve, where you’ll vectorize your image and give life to your icon.

Another option is to sketch your icon design using the Brush or Pencil Tools in Linearity Curve. These tools enable you to sketch vector shapes freehand. You can adjust the Smoothing based on the level of detail you prefer.

At this stage, you can also pick a color scheme that represents the character of your icon or the theme of your icon series. We have an entire article explaining how to create a unique color palette that defines your style as an artist. But here are the basics:

• Make sure that your color stays consistent throughout your icon pack.
• Check if every color is visible both on a light and dark background.
• Check if your colors contrast each other. You can verify that by converting your icon to grayscale. If the colors contrast in greyscale, they will contrast in any other environment.
• Color theory is your friend. Choose warm vs cold hues to tell a story.
• Use colors to define the visual hierarchy by choosing one base color and a few accent colors.

Step 4: refine your vector icon

After you finish your sketch, it’s time to vectorize your icon. In case you didn’t know, all icons are vectors.

Build up your vector layers

Our top tip is to create a new layer for any new graphic elements you bring into your piece. Are you adding a shape or line? Make a new layer. 

Reducing the transparency of the vector layer helps when you’re tracing your sketch to make it easier to see your underlying work.

Set up a grid

Some artists may find them overrated, but grids are useful in a few situations. If you create a set of icons, a grid will help you maintain consistency.

Another scenario in which this is helpful is when you’re creating icons for platforms (iOS or Android) that already have a grid. 

In Linearity Curve, go to the Action Bar > Quick Settings and toggle on the Grid. You can also toggle on Snap to Grid.

To adjust the Grid type and size, tap on the Settings and adjust the settings.

Use the Shape Builder Tool

Like your sketch, your vector art won’t fall far from the tree. It’s also going to be made of the same basic shapes.

You can easily build different shapes by using Linearity Curve's Shape Builder Tool. You can change the number of sides of your polygon by using the slider that appears once the shape is selected. Access it via the Quick Action menu after the shape is drawn.

There’s also the matter of rounding corners, which is the Corner Radius function. Also available via the slider or the Quick Actions menu.

To keep the aspect ratio of your shape, simply hold the canvas with an extra finger when working on an iPad or pressing down the Shift key on Mac.

Use the Pen Tool

The Pen Tool is essential in vector design. It works especially well for drawing smooth, curved vector lines.

To do so, just tap the canvas at the point where you want to start the curve and drag your pen or mouse until the two handles associated with the point achieve the length you want. Then tap and drag again to see how the curve takes shape.

These instructions sound strange if you’ve never used the Pen Tool before. But once you try, you’ll know what we mean. And if you haven’t watched the video at the top of this article yet, ensure you do so. All these steps are explained better visually.

Use Auto Trace

You can also use our AI-enhanced Auto Trace function. Auto Trace uses a powerful algorithm to instantly convert your sketches and photos into crisp vector graphics.

You don't have to spend hours with the Shape Builder or Pen Tool. Auto Trace does the heavy lifting so you can focus on what matters: fine-tuning your design by adding or removing details, adjusting colors, and bringing your vision to life.

Step 5: export to SVG

Naturally, the final step is exporting your icon artwork.

You might ask yourself what size your icon should be. That’s really less important. A vector is high-quality, no matter the size. One of the main rules to obey when creating icons is that they must fit into a square.

Do you feel more comfortable working with a very specific size? You can use any of these default icon sizes:

• 16 x 16px
• 24 x 24px
• 32 x 32px
• 48 x 48px
• 64 x 64px
• 96 x 96px
• 128 x 128px
• 256 x 256px
• 512 x 512px

Go to File name > Export, and select a vector graphics file type like SVG. You’ll now have a brand new original icon ready to meet the world.

Bonus step: animate your icons

Linearity Move makes animating your icons easy—check out our step-by-step tutorial on icon animation. Here are the three main steps to bring your vector creations to life:

1. Design your icon in Linearity Curve. Curve is seamlessly integrated with Linearity Move.
2. Break down the animation into steps. Think about the key moments of your animation and create a separate Artboard for each one in Curve. For instance, if you want an eye to blink, you'd have one Artboard for the open eye and another for the closed eye.
3. Let Linearity Move do the magic. Once you've imported your Artboards into Move, Linearity's Auto Animate feature will analyze the changes between them and automatically create smooth transitions.

Another quick and effective way to animate your icon is to simply open the Curve file in Move and use the Timeline Playhead to add Animation Presets at different points.

Icon design trends

Icons play a vital role in marketing and branding by acting as more than just visual aids. By designing a well-crafted icon set, you can transform them into recognizable symbols that embody your brand's personality and values.

When these icons consistently align with your overall brand language, they contribute to a unified user experience, solidifying your brand identity in the minds of your audience.

In the world of icon design, trends are moving towards subtle embellishments that enhance user experience and visual appeal.

Here's a glimpse into what might lie ahead:

• Voice-activated icons: Imagine icons that dynamically change or respond to voice commands. This could involve highlighting relevant icons as you speak or using audio cues to reinforce their function.
• Multimodal interaction: Icon design might integrate with other sensory inputs like touch or spatial gestures. For example, hovering your hand over an icon in AR could reveal additional information or trigger an animation.
• Context-aware icons: Icons can adapt to the user's situation and environment. Imagine weather app icons that change based on the real-time forecast or navigation icons that adjust based on your location in AR.
• Simplification for AR integration: Complex icons might not translate well to AR overlays on real-world surfaces. The future might favor simpler, more abstract iconography for seamless integration with the physical environment.
• The rise of micro-interactions: Subtle animations and micro-interactions within icons might become even more important in conveying information.

Design beyond icons

As simple as the end product looks, icons aren’t as easy to design. By understanding the different styles, trends, and best practices, you can create icons that look great and effectively communicate and enhance user experience.

Ready to take your icon designs to the next level? Using Linearity’s powerful vector design and animation platform can streamline your workflow and easily create stunning icons.

Whether you're a seasoned designer or just starting out, Linearity can help you bring your icon ideas to life. Get started for free below, or check out our Pro and Org pricing for professionals and teams.

Frequently asked questions