Our icons are carefully designed to be as simple as possible, in a minimalistic style without unnecessary details. They serve a purely functional purpose and assist With clear and direct navigation.
The icons are based on Nucleo, a third-party library of symbols for iOS, Android and web projects. By adding a set of customized icons specially designed for If, we created a generic yet personal icon library.
Table of ContentsEdit this section, Opens in new window
The If icon library uses outlined icons to match the typeface, If Sans. The icons have a stroke value of 1.5 PX.Cap and corner
All If icons have Sharp caps and corners.Icon grid
The icons use a 32 PX grid to get a minimal and simple expression With few, carefully chosen details. Icons are adjusted individually for a consistent optical volume over the whole icon family.
The If icon library is divided into four categories. Three descriptive categories - products, coverages and symbols - and one for UI.
The sizing of icons is context based. We use 16px and upwards based on the context. As long as the size of the icon adheres to the baseline grid (4px/8px), any size is useable, depending on contect.
Stroke, line width
In some occasions the icons need to amend the stroke width manually, based on the placement and context of the icon.
Icons help the user find a desired action or piece of information relevant to their task. Icons can be used to mark a type of notification, status or validation, an action link or button, a type of insurance or sometimes (but rarely) an action button.
The icon should speak for itself and the user should understand what the icon means without reading the supporting text. Icons help the user scan to the correct action without reading text.
Do not use icons just for the sake of using an icon, or for decoration. We don't want to clutter the user interface with anything that is not absolutely necessary or beneficial to the user.