Unlike an illustration, an icon is a sign that carries meaning on its own. In a row, if just one is outlined, or just one is enclosed in a circle, that alone makes the item read as emphasised. Here is what goes wrong when icons from different sources are mixed, and how to avoid it, shown with rows of our own icons.
Do not mix filled and outlined icons
Decide first whether you are using filled icons or outlined ones. They are two different sign systems, and when they are mixed, the filled ones look as if they indicate a state, such as “selected” or “enabled”.
In navigation or a checklist, this misreading turns straight into a wrong action. Pick one and carry it through to the end of the document. Switch only when you are showing a difference in state.
Match the enclosing shape too
Even among filled icons, when some are enclosed in circles, some in squares and some not enclosed at all, the enclosed ones look like buttons.
Settle on one stroke weight per document
When you mix outlined icons with ones from elsewhere, the strongest influence on how they read is stroke weight. If a list of steps mixes thin and thick outlines, the thick ones are taken to be the important steps. It is safer to fix one weight and do your emphasising with colour or placement.
Choose the size from the smallest use
Shrink an icon and the detail collapses; enlarge it and the strokes look 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.
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 works as 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. Trim it to fit a box snugly and the icon collides with whatever sits next to it, which makes it harder to read. When setting an icon beside text, making it slightly smaller than the text height usually settles better.
About Visual Hub icons
All the samples above are our icons. They are drawn as solid single-colour fills; the ones that look like outlines are also made as fills with the inside cut out. For the same shape we provide versions that differ in fill, outline and enclosure, so when you use them side by side, settle on one of them. Colour and size can be set when you download, and you can export either SVG or PNG.