Unlike an illustration, an icon carries meaning on its own. Put a row of them together and let one be heavier, or filled where the rest are outlined, and that item reads as emphasised. Here is what goes wrong when icons from different sources are mixed, and how to avoid it.
Do not mix filled and outlined icons
Decide first whether you are using filled icons or outlined ones. They are two different sign systems. Mixed together, the filled ones look like they indicate a state — selected, enabled, done. In navigation or a checklist, that misreading turns into a wrong action.
Many icon sets ship both a filled and an outlined version of the same shape. Pick one and carry it through to the end of the document. Switch only when the difference itself represents a change of state.
Settle on one stroke weight per document
With outlined icons, the single strongest influence on how they read is neither colour nor shape but stroke weight. Thin strokes look precise and restrained; thick strokes look plain and forceful. The trouble is that this difference gets read as a difference in meaning.
If a list of steps mixes thin and thick outlines, the thick ones are taken to be the important steps. The real cause may be nothing more than two different sources, but the reader cannot see that. Fix the weight, and do your emphasising with colour or placement instead.
Choose the size from the smallest use
The same icon reads differently small and large. Shrink it and the detail collapses into a blob; enlarge it and the strokes look thin and weak.
If one icon has to serve several sizes in the same document, choose it at the smallest of them. An icon that still reads small will survive being enlarged; the reverse does not hold. When in doubt, scale it down to the size it will actually appear at and look once.
Change colour only when colour means something
Colour an icon only when that colour stands for something. Red for warning, green for complete — as long as the mapping holds across the document, colour is information. Give every icon a different colour as decoration and the reader is left hunting for a distinction that is not there.
Do not trim the surrounding space
The space around an icon is part of its shape. Crop it to fit a box and it starts colliding with whatever sits next to it. When setting an icon beside text, making it slightly shorter than the text height usually settles better than matching it exactly.
About Visual Hub icons
Our icons are drawn as solid single-colour shapes and have no stroke weight at all. The ones that look like outlines are fills with the middle cut out. Because of that they cannot disagree with each other on weight — the section above applies when you mix them with icons from elsewhere.
Colour and size are chosen at download time rather than stored as separate files, so you can decide them once you know the document. Both SVG and PNG are available.
Note: for some shapes we publish a filled and an outlined version as separate assets. When you use them side by side, settle on one of the two.