How to Mix & Match Icons Like a Pro

Icons add visual interest to your course. They’re great for making custom buttons, illustrating bulleted lists, and so much more! But unless you have a graphic designer on hand who can craft custom visuals, you’ll need to create or find copyright-free icons yourself. If you’re using Storyline 360 or Studio 360, you’re in luck. With Content Library 360, you have access to loads of icons—all within the apps! 

That solves the first part of the problem—sourcing icons that are free to use—but not the second part—choosing icons that go well together. To illustrate what I mean, take a look at the two groups of icons below:

Group 1	Group 2

See how the icons in Group 1 seem a little mismatched, while those in Group 2 feel like a cohesive set? That’s because when I chose the icons in Group 2, I made sure they shared a few key characteristics. In this article, I’ll walk you through those characteristics so you too can build your own icon sets and no one will be the wiser! Ready? Here we go!

Outlined or Filled-In

When you’re looking at icons, one of the first characteristics you’ll notice is whether an icon is outlined or filled in.

Outlined	Filled-In

As a general rule, it’s best to choose one style and stick to it throughout the course. If you find one icon you like that’s outlined, then make sure all the other icons you choose are also outlined, and vice versa.

Line Thickness

Another thing to pay attention to is the thickness of the lines. Below, you’ll see examples of the same icon—outlined and filled-in—with different thicknesses.

	Thin	Medium	Thick	Extra Thick
Outlined
Filled-In

See how much line thickness impacts the overall look of an icon? That’s why choosing icons with a similar thickness is key if you want them to look like a set.

The good news is that if you find an icon you like, but the line thickness is a little off, you can adjust it! Simply insert your icon and follow the steps in this article: Line Style Formatting.

Square or Rounded Edges

You’ll also want to check whether the icons have square or rounded edges. Sometimes it’s obvious, but other times it’s more subtle, like in the example below:

Square	Rounded

Do you see how the tips of the lines are squared off in the icon on the left, whereas in the icon on the right, they’re more rounded? Your icons will look more cohesive if you ensure they’re all squared or all rounded, instead of a mix.

Level of Detail

As you search for icons, you’ll notice that some are extremely minimal and others are more detailed. Look at the clocks below, for example:

Minimal	Detailed

The clock on the left couldn’t be more minimal, while the one on the right has some more decorative elements. When selecting icons for a set, it’s a good idea to choose options with similar levels of detail. 

Flat or 3D

Flat design has been on trend for so long now that the vast majority of icons available fall into that category, but every now and then I run into some 3D icons.

Flat	3D

Just like with the previous characteristics, it’s best to stick to either all flat icons or all 3D icons to create a sense of uniformity.

Literal or Conceptual

Some icons look like a more literal depiction of the object or concept they’re representing, while others look more conceptual. Below are two examples that illustrate this point:

Literal	Conceptual

As you select icons, decide whether you want to go with literal or conceptual and then stick to that style throughout your course.

Monochrome or Multicolored

This characteristic is pretty straightforward: some icons are all one color and others use several colors.

Monochrome	Multicolored

As with the previous characteristics, you’ll want to decide whether you want to use all monochrome or all multicolored icons for a cohesive look. If you go with multicolored icons, it’s best to use the same colors for all of them.

Hand-Drawn or Precise

Finally, you’ll notice that some icons look like they’ve been drawn by hand— with lines that aren’t completely straight or circles that aren’t perfectly round—while others have a more precise look. 

Hand-Drawn	Precise

Once again, it’s best to choose a style and stay consistent throughout.

More Resources

Hopefully this article opened your eyes to some key characteristics to pay attention to as you’re selecting icons to ensure they feel cohesive. And remember, they don’t have to be exactly the same, just similar enough that people don’t give them a second thought. 

And if you’re looking for pre-packaged icon sets, visit the free icons section of our downloads hub.

Want more graphic design tips? Head on over to these great resources:

• Follow These Tips to Effectively Use Icons in E-Learning
• 5 Graphic Design Mistakes Newbies Make and How to Avoid Them
• 5 Ways to Look Like an E-Learning Design Pro (Even If You’re Not!)
• Guide to Creating Illustrations in PowerPoint for People Who Don’t Know How to Draw

Subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and X (formerly Twitter). And if you have questions, please share them in the comments.