Elements of icon design

Elements of icon design

Icons are everywhere.

And the more icons that you see out there, the more you'll start to notice subtle differences. The essentials are still the same. But there's clear variations that make some icons, well, just look better.

Right?

Let's break down the elements that make up an icon. These elements are used as building blocks to create most works of art, icons included. By applying these elements consistently, you'll draw icons that will be united in style.

These elements impact the characteristics of an icon: 

• Line
• Shape
• Form
• Space
• Color
• Value

When it’s time to draw an icon set, you don't need to go crazy with thousands of ways to make your set unique.

You just have to start with to the fundamentals, add your own personality, and you're on your way...


1. Line

Line

Line is considered to have an endless number of uses in the creation of art, and especially in icon design. By changing line, there's unlimited possibilities for varying the look of an icon, each conveying different emotion.

Line controls a viewer’s eye by defining edges or indicating form and movement. It can show value and light source. By using negative space we can imply line, allowing the mind's eye to fill in the gaps.

Simply changing line thickness or texture creates dramatic differences in the appearance of the icon. Heavy, thick lines create a bold look, while thin lines make an icon feel lighter. Many icons have constant line thickness while some will vary the thickness within the icon. 

Many icons have rounded corners which produce a modern look.

Line example


2. Shape

Shape

When lines come together they form a shape. Shape affects composition and balance. All shapes have two dimensions, length and width.

Geometric shapes such as squares are man made and mathematical. Organic shapes don’t follow any rules; they are free flowing and curvilinear and are based on nature. 

Geometry is fun, and many icons can be created by combining these simple geometric shapes:

Shape Example

3. Form

Form

Form is created in art when we add perspective to a drawing. Form differs from shape because it has three dimensions: Length, width and depth. 

So, by adding depth to shapes, they take on form.

Form Example

When drawing icons, choose a perspective and keep it consistent throughout the family. 

It’s common to use a one-point perspective (or limited perspective). There are times however, when one-point perspective doesn’t necessarily work, and occasionally you may want to break the rules.

For the building icon below, drawing it in two-point perspective adds depth, creates interest and helps make it more recognizable.  

Perspective Example


4. Space

Space

Space is the area above, in and around the icon. Space is often categorized as positive or negative, with positive space referring to the subject, and negative space referring to the background around it. Positive/negative space is also known as figure/ground.

By adding space we can create depth and emphasize certain elements. One of the goals of icon design is simplicity, and by using space we can eliminate unnecessary elements in a design. The result provides gestalt.

Using negative is a key element of artistic composition. The human eye fills in the gaps, allowing the viewer to participate in the design. To learn more, read about figure/ground relationships.


5. Color

Color

Color refers to the specific hues used in a work of art. Artwork can be monochromatic, meaning it is made up of one color and it’s shades and tints.

Complementary colors are colors that are found directly across from each other on the color wheel, such as blue and orange. There are also analogous colors, color triads, split complementary, warm colors and cool colors.

Changing the color of an icon can call attention to it or help it to blend in with it’s background. Click here to see the psychological meanings of color.

Color Wheel


6 . Value

Value

Value (or tint) refers to the difference between light and darkness of a color. We see objects because light reflects off them. Then, our mind processes the light and rationalizes what we are seeing.

A monochromatic color scheme uses only one hue (color) and all values (shades or tints) of it for a unifying and harmonious effect.

Limited color palettes are popular in design: Many icons are drawn in one or two colors. This allows icons to compliment their surroundings without being overpowering. Limited palettes also maximize the attractiveness and readability of icons.

Value Example


Vector icons a la carte from only $.99

Samples

Shop from thousands of high quality vector icons, providing a consistent look for your project. No subscriptions. Great prices. And free icon sets too.

Shop For Vector Icons


If you like this, please share!


Leave a comment

Comments will be approved before showing up.


Also in The Icon Blog

What Car Symbols Really Mean...
What Car Symbols Really Mean...

Continue Reading →

Why attractive design works better
Why attractive design works better

It's no secret that people are drawn to attractive things. Keep reading to learn more about why attractive design is so important.

Continue Reading →

Here's what you need to know about brand psychology
Here's what you need to know about brand psychology

Branding is important to any business. So it's important to understand what attracts people. Read on to learn what you should know about brand psychology.

Continue Reading →