Icons

Icons can be a great tool to support the message of text. This, however, only works when we know an icons 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 icons meaning.

Usage

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

import DownloadIcon from "@finanzchef24gmbh/design-system/Icons/DownloadIcon";

<DownloadIcon />;

Scales

Priority

Color

In rare cases you might need to change the color to be either the brand color or the accent color. Note that the color can be combined with the priority of the icon. For example a secondary icon with the brand color will be a lighter version of the brand color.

On Dark Backgrounds

In case an icon should be displayed on a dark background there really is no other color that will have a high enough contrast than white. Also, primary and secondary would be hard to distinguish. Thus for dark backgrounds an icon is always plain white.

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 DownloadIcon from "@finanzchef24gmbh/design-system/Icons/DownloadIcon";

// Don't
import { DownloadIcon } from "@finanzchef24gmbh/design-system/Icons";

Handover

It is critical that all icons follow the same template with regards to size and color:

• All icons should be 48 x 48px, but this could vary a little depending on the shape.

• No icons should have hardcoded colors. Either a designer should provide the icons without any fill or stroke attributes or developers must replace hardcoded colors with currentColor as needed. This is from the svg spec and it will inherit the color from its parent.

Some icons contain paths that are grouped and some may assign currentColor to the stroke attribute rather than the fill attribute.

For example:

Others only render correctly when the paths are outlines so that currentColor can be applied to the fill attribute rather than the stroke attribute.

For example:

Designers should determine which approach is best based on similar icons already in the design system.

All Icons