Icons

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.

Resources

Table of Contents

Edit this section, Opens in new window

Style overview

Outlined design style

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.

Outlined design style with a stroke value of 1.5px
Sharp caps and corners
Edit this section, Opens in new window

Categories

The If icon library is divided into four categories. Three descriptive categories - products, coverages and symbols - and one for UI.

Product icons
  1. Represent our products and services. Help customers to find the right product or service in lists and menus.
  2. Reinforce the meaning of a text. Should always be used together with a text label and never as a standalone.
Coverage icons
  1. Represent our coverages and claim types. Help customers to find the right coverage or claim.
  2. Reinforce the meaning of a text. Should always be used together with a text label and never as a standalone.
Symbol icons
  1. Represent actions, tools and general content.
  2. Help customers to find information and take actions, such as order, report and manage products and services.
  3. Reinforce the meaning of a text. Should always be used together with a text label and never as a standalone.
UI icons
  1. Represent generic content with a functional purpose, such as guiding and navigating.
  2. Can be used as a standalone without a text label.
Edit this section, Opens in new window

Color and background

BE 1. (BL 1)
BE 1. (BR 1)
BE 1. (LB 1)
BR 1. (BE 5)
BE 2. (BL 1)
BE 2. (BR 1)
BE 2. (LB 1)
LB 1. (BE 5)
BE 3. (BL 1)
BE 3. (BR 1)
BE 3. (LB 1)
BL 1. (BE 5)
BE 4. (BL 1)
BE 4. (BR 1)
BE 4. (LB 1)
BE 5. (BL 1)
BE 5. (BR 1)
BE 5. (LB 1)
General text color principles are applied to icons. The chart shows the color combinations that are allowed.

BR 1, BROWN on any beige background.

BL 1, BLUE on any beige background.

LB 1, LIGHT BROWN on any beige background.

LB 1, LIGHT BROWN 30% on any beige background. NOTE: Only for disabled buttons/controls!

BE 5, LIGHTEST BEIGE

Edit this section, Opens in new window

Sizes

Context based

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.

Edit this section, Opens in new window

Usage

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.

Visit the Icon component section for how to use the icons.
Edit this section, Opens in new window
Contact us, Opens in new window