UI Icons

UI icons are small graphical representations of a functionality or concept. They provide users with quick and recognisable visual cues that are easy to understand. As part of a consistent icon system, users quickly learn to associate certain icons with certain actions over time.

Best practice

Don’t scale up icons: The default size of m—wise Loyalty Cloud icons is 24px, but they can be scaled between 16px and 32px and still look clean, consistent and professional. When they’re scaled larger than this, however, it can look messy:

Scaling icons above their intended size can quickly look messy and amateur because the icons weren’t designed with the level of detail necessary for larger sizes. In this example, 48px looks chunky/thick and comically large, because the icon wasn’t designed to scale to that size. At 48px, the stroke weight is 4px which looks heavy and unbalanced.

Icon states

List of icon states and interactions for the new m—wise Loyalty Cloud:

Build

npm run build

Publish

npm publish