Color play: Exploring icons beyond default palette

Color increases brand recognition by up to 80%.

Color for icons is no exception. It makes icons more distinguishable and keeps them visually aligned to brand. Problem is, most icons come with only default color. Another problem: it's not always the brand color.

There’s no uniqueness in default mode. And here’s how you can fix that in different ways that no other brands can imagine.


So, how does a default look like?

Most line and solid icons come in black as default. While filled and flat usually come in shades of grey, blue, purple, or any other color.

However, for this article, we’ll set our default to black (#000000) and grey (#c9c9c9) just so we could have the same idea about how a ‘default’ looks like.

From this point on, we're going to give these icons a glow up! ✨

Different ways to color icons

Same like resizing icons and adjusting their strokes, tweaking colors can happen if the icons are editable.

So, make sure you have what it take first. At the very basic, you will need SVG icons to be able to recolor them, either you want to do it the simplest way or take it to the next level.


1. The simplest way of coloring icons

Coloring icons can be done as simple as changing default color into new colors from a different palette.

This option will especially work when you're using single-colored style like Line or Solid. It’s a fast, easy, and simple way to infuse brand color to icons.

Whether you're designing for Gryffindor or Slytherin, a simple color tweak would be an effective way to match default icons with their visual styles.

Here's the simple palette that we use on the icons above.

Notice how lively the icons are after we give them colors? That's what we're talking about!

Normally you'd have to use vector graphic editing softwares like Figma or Illustrator to change icon colors. But on Streamline app, you can do it the easy and quick way without having to open any other graphic editing tools.

See how it's done 👇🏽

0:00
/0:31

The hassle free way of coloring icons on Streamline app.


2. Add another color and duotone is born

The second simplest way of coloring is done using a duotone palette that consists of only two shades of colors.

You’re going to need a shade as the primary color, and another one as the secondary. Occasionally, on filled style, you may also need the presence of white to complement the two shades.

Compared to the single color version, duotone icons have a more lively look.

Two contrasting shades of the same colors that we use on icons above, with the lighter shades as the primary color.

Duotone gives line icon unique characters without losing their simple look.

And duotone colors soften solid icon, making it an alternative to flat.

Combination of darker strokes with light fills makes duotone filled more noticeable.

And it gives flat style a soul.

Same like single color icons, you can also instantly tweak the duotone filled and flat icons on our app without having to use additional vector graphic softwares.

0:00
/0:30

Simple way of changing duotone colors on Streamline app.


3. Enter gradient the slick and stylish

Gradient gives your icons a splash that can’t go unnoticed. Instead of a solid color, it creates a smooth blend between colors. It’s the stuff of the latest trend.

You can use two and more colors to create gradients. But even two can be tricky, more is definitely trickier. Even for us designers, gradient is always a test for aesthetic sense and taste.

Unlike solid color, gradients make your icons standout even more.

A palette of gradients that we created based on the palette from first section.

The boring default icons doped with gradient's vibrant energy.

4. What if we mix gradient and duotone?

Now, we're talking. A mix between duotone and gradient will definitely give your icons a unique look.

You’re no longer just using two colors together, but you’re combining color with gradient. You’re using the same technique that gives you duotone to get a new result with a totally different aesthetic.

Instead of a lighter shades, you can use gradients as primary ‘color’ and black as secondary.

Gradient will be less visible on thin strokes, so adjust thickness necessarily to ensure its visibility.

I'm having an icon-sequential crisis, does it still solid if it's no longer looking like solid?

Meanwhile on filled icons, thick strokes could block out the gradient fill. So, reduce the stroke width to make the gradient more noticeable.

A mix of black and gradient effortlessly gives flat icon an elegant look.

5. The more the merrier

We’re talking about multi-colors and and multi-gradients. Because, well, why not? If you want some fun and eye-catching icons, more colors is a valid answer.

This trick work very effectively when the icons have more than two separate parts. Give those parts different and harmonious colors or gradients, and you're all set to ditch the boring default.

Different icon styles polished with multiple colors and gradients.

Vibrant and subtle shades of colors and gradients inspired by Mondrian palette.

Turning default icons into multi-color and multi-gradient have similar essential steps. So, in this part, we're combining them together with more emphasize on the multi-gradient.

Vibrant colors bring life to line icon, giving it a more dynamic character and making it easily distinguishable.

At some point, we'd have to agree that colorful solid is basically flat icon with gaps and is a decent example of Gestalt Principle at work.

Colorful strokes and fills turn the icon into some kind of a small illustration.

On flat icon, colorful palette increases its level of playfulness.

6. Blend it all the way

It's the next level of multi-color and multi-gradient icons. Instead of only using different colors for different parts of the icons, now you get to blend them too.

This trick only work on icons that have overlapping parts. Colors of those parts mix with each others, creating a new blend of colors.

Blend mode only change the look of overlapping parts, it won't have any effect on solid icons whose parts are separated by gaps instead of overlapping.

'Multiply' mode darken overlapping objects and create new color from the blend which becomes more visible on wider objects.

Color blend and transparency create a unique look of transparent plastic.

Blending mode becomes more apparent on flat style as the icon is made of bigger chunk of objects.

Colorful icons and where to use them

Colors are effective for capturing attention, but what makes them good can also turn them into distraction. It’s an element that must be used in moderations.

You want your icons to be beautifully displayed, complementing other elements. Not robbing the attention away from important parts of your design.

1. The minimal and subdued

What we considered minimal and subdued is either 1, 2, or 3 less intense colors in a single icon.

Icons with this palettes are more versatile. And it’s this versatility that give them a wider range of uses. They can be more noticeable but not too flashy to be disruptive to the elements around them.

Such icons can be subtly used on navigational interfaces, prominently used as menu items or on a website displaying product features. They can also work as illustrative and branding elements on designs that are not interface-related.

Plump Solid icons with matching color to IKEA visual branding from one of our 'unsolicited redesign' experiments.

Minimally colored Core Duo as navigational button on email app interface.

Platinum set with golden shade adds a sense of luxury to an upscale marketplace.

Core Flat with pastel color used to visualize the feature of an app.

Micro Solid with different colors visualizing different information in a chart.

2. The rich and vibrant

While it’s true that rich and vibrant icons look more appealing, it also has a trade-off: their colors end up limiting their uses on navigational interface as their striking look becomes too distracting for other UI elements. But that's not a bad thing.

The main uses of colorful icons isn't for common navigational interfaces. Their eye-catching look makes them more recognizable, and that’s a useful advantage for for capturing viewers attention by making important information more noticeable.

Icons with vibrant colors can be more prominently used on covers for content, social media posts, charts and data visualization, product design, on ads or marketing elements, or on a website visualizing product features.

Colorful Freehand icons on podcast cover illustrating topics of different episodes while giving the same aesthetic touch.

Kameleon icons with blending colors to catches viewers' attention on a presentation slide.

Flex Solid illustrating the features of photo editor app with an artistic touch of colorful gradient.

Plump Flat icons infused with vibrant gradients used as custom buttons on a Stream Deck.

Sharp Flat with color-gradient mix as illustrative elements on social media post.

P.S.

Experiment is the backbone of creative work. You can’t create pretty icons without trying to get it right first through countless ugly results. Practice makes anything better.

If you want to try making your own colorful icons, no need to start from zero. We've compiled the palettes and some samples used in this article on a Figma Community file. Get them now to spruce up your project.

Colors and gradients

Free palettes + samples to get you inspired.

Download palettes