Skip to content

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

Edit this section

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

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

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

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

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.

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>

The element used needs to be a block element, with a set size. If the size is anything other than 16px, you also need to set the correct background-size.

Visit the Icon component section for how to use the icons.
Edit this section

Accessibility

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 aria-hidden="true" attribute.

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.

Edit this section

Contact us