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.
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.
Color and background
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.
All of the icons can be used as background icons, providing the following syntax is used:
<span style="display:block; height: 16px; width: 16px;" aria-hidden="true" class="if icon [ui|symbol|products|coverage] <Icon Name> [white|brown|blue]" ></span>
Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the
If you're creating controls with no other text (such as a
<button> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an
aria-label attribute on the control itself.