The Power of Symbols in Illustrator

Why should I be using symbols?

Symbols are a powerful tool in Illustrator that let you create graphic elements for logo design, infographics, and website design that can be reused and updated simultaneously. Using multiple copies of an icon? Use symbols to keep them all in sync! Symbols can be used in so many ways to streamline the design process in a design agency and keep or assets organized.

What can symbols be useful for?

Symbols have a wide variety of applications; they can be used in more ways than just keeping multiples of an icon the same.

 

Maps

While this is one of the most classic examples of symbols, using them on map design and infographics can prove to be a huge time-saver. Multiple attractions of the same category can be represented with a reused symbol (and of course, edited all at once!). More complex map designs can become much easier to manage with symbols. Having 5 different categories with 10 pins each can become frustrating to maneuver as separate objects.

 

Infographic design

Depending on the scale of an infographic system, using symbols can relieve the complexity of having tons of similar objects—just like the maps. For example, if you need to add multiple labels to a graph with the same style, you can create a symbol for a label template and then modify the text in each instance to communicate the values necessary.

 

Artwork and illustration

Symbols don’t have to be used for traditional efficiency purposes! As long as they are used multiple times, it saves time to set them up as symbols. Creating a piece of vector artwork of a skyscraper? Using symbols, you can make all the windows reference one symbol so a restyle is just a click away.

 

Logo Variations

Say you need to conceptualize different variations of a logo design while reusing the same glyph or icon—make the icon a symbol and reuse it in each variation!

Infinite possibilities

Symbols are an extraordinarily versatile tool. Having a feature in Illustrator like symbols can be applied to so many different design projects, especially since it’s endless what you can put inside a symbol—you can even nest symbols within symbols to create multiple layers of self-updating assets.

Read more Tips & Tricks

Using icons on websites

Iconography on websites has become a standard.

Once you pay attention while browsing your favorite websites, you will find icons in different sizes, weights, and styles everywhere. They are a great visual tool to consistently identify content of a certain category. Done well, they also help users scanning your webpage get a quick overview of the information.

Icons on websites should support the user experience without drawing too much attention to them. They should support the information or action they stand with. Here are a few things to keep in mind when adding icons:

Place icons judiciously

The most successful use cases limit icons to buttons, sections, actions, and elements that need to be quickly glanceable or clickable. The visual element of the icon grabs attention, supports the users’ understanding, and emphasizes the action.

Placement of text with icons

Typically, if an icon is placed in line with text, it should be optically centered vertically with its neighboring typography. It should also be designed to have the same visual weight as your selected typeface. For example:

icons - text with icon
With this button, the Wi-Fi icon is technically centered correctly on the vertical axis. However, it appears that it sits a bit low when looking at it, in the visual appearance. Since the symbol has a strong downward point to its shape, it needs to be optically adjusted to account for that.
icon - text with icon baseline corrected
Raising the symbol up to be higher than its technical center makes it appear more level and aligned with the ‘Connect’ text.

A fun example of icons we created and paired with text can be found on the MIT Chemistry website.

Shared visual characteristics create consistency and build your brand

An icon series can help you build your brand. By creating icons that share visual characteristics, you create an icon library that feels cohesive. Examples of how to do that are using the same line weight, color palette, and corner radious. By repeating the same visual elements, the user recognizes icons as part of your brand.

icon design - icon and text button exampleThis button has a vibrant color, simple shape, and geometric typeface. To match this, the heart icon has a similar monoline thickness and geometric structure.

One successful approach can be contrasting styles of icon style and typography. However, matching the line weight and style of your icons to the weight and classification of type can create a relationship that successfully ties it all together.

icon design - illustrative exampleIn this case, the tone of the icon is organic, fluid, and hand-drawn. Noticing that the typeface has a modulated thickness as opposed to the monoline appearance from the previous example, a more natural and gestural icon is fitting.

Keep in mind the level of detail and scalability of icons when using icons on websites

The pen and hand icon can’t be scaled down to very small sizes because of the level of detail in the drawing. The ‘Like’ and ‘Connect’ buttons can be scaled to smaller sizes because the icons are much simpler. With a higher level of detail, shrinking icons too small would reduce clarity and legibility, making the smaller details indistinguishable. If this icon was needed in smaller sizes, it could be redrawn with fewer details to make sure it still communicates clearly.

Well-designed icons can make a big difference in creating a great, intuitive user experience in website design.

Read more about icons