Icons

Vandebron has a practical approach to iconography, which means that the icons used need to always be functional rather than decorative. The icon should speak for itself: no accompanying text should be needed.

Icons are contained in a container of 20 x 20 px. All icons has a orginal stroke weight of 1.5 px. The displayed icons below has its stroke outlined. In this way the icon stroke retains its proportion on scale. In some cases the icon is not filling the whole container or aligned to the center, this is done on purpurse to keep different shapes in visual balance and optical alignment.

All icons come in 5 colors: Dark Blue(primary), Blue, Dark Grey, Light Grey and White.

Using icons in your products

Choosing and using icons for your products isn’t an easy task. An excellent icon can extract the most important visual characteristics of a product or idea, making the depiction instantly recognisable.

In this section you’ll find some factors you need to keep in mind when using icons within your interfaces.

How to choose an icon

Abstract icons are more difficult to comprehend than literal icons. Instead of using metaphorical icons, try using those which convey the most basic idea or concept you’re trying to represent.

Pairing colour, text and icons

By default our icons use our primary blue color(color-brand-400), and there's also white and grey variants. However, you can use other colours for icons depending on the context as well. Following our color principles the following colors can be used for icons if you want to highlight something more. Such as yellow warning(color-accentamber-400), red error(color-invalid) or green success(color-promo-400) messages.