Insurance Icons

Icons can be a great tool to support the message of text. This, however, only works when we know an icon's meaning from a previous experience. And even then we could associate something totally different with the icon.

For this reason one should never rely solely on icons to convey a message as not everybody might know the icon's meaning.

This set of icons has more detail in them than the normal icons and should thus usually be used at larger sizes. On smaller sizes the level of detail actually leads to the icon being less effectice. For this reason these icons are in the big size by default.

Scales

Usage

All icons are available as named imports from the icons component:

import BusinessLiabilityInsuranceIcon from "@finanzchef24gmbh/design-system/InsuranceIcons/BusinessLiabilityInsuranceIcon";

<BusinessLiabilityInsuranceIcon />;

Scales

To render the icon in different sizes there is a scale prop that supports small, medium and big as options.

import BusinessLiabilityInsuranceIcon from "@finanzchef24gmbh/design-system/InsuranceIcons/BusinessLiabilityInsuranceIcon";

<BusinessLiabilityInsuranceIcon scale="small" />;
<BusinessLiabilityInsuranceIcon scale="medium" />;

Bundlesize

In order to keep the bundlesize small you should import the icons directly and not use the named exports from the index file:

// Do
import BusinessLiabilityInsuranceIcon from "@finanzchef24gmbh/design-system/InsuranceIcons/BusinessLiabilityInsuranceIcon";

// Don't
import { BusinessLiabilityInsuranceIcon } from "@finanzchef24gmbh/design-system/InsuranceIcons";

All Icons