UI Icons

UI Icons provide additional information. You can use them when there's no space for a text label to draw attention to important messages and pieces of information.

Size

Icons are available in two sizes to accommodate different environments and their requirements: medium and large.

Small (12px)

Small is the restricted icon size to be used only in specific cases such as badges or tags.

Medium (18px)

Medium is the default size used across all products and platforms.

Large (24px)

The large icon is a complementary icon used when there’s enough space for it and you need to highlight something fundamental. Use it sparingly.

Color

The icon is always solid and monochromatic. The color choice reflects the importance and function of the icon’s action, helping to guide the user.

Default color

The default color is used as a variant without any extra emphasis or meaning.

Interactive color

The interactive color emphasizes the item in a general way.
For most icons, it's used as a default hover state.

Danger color

The danger color emphasizes the item and conveys a sense of danger or error. Use it as a hover state for icons with danger or error meanings.

Warning color

Warning color informs users about changes that can affect their work.

Alignment

There are two types of icon alignment.

By default, icons are aligned in the geometrical center of the icon grid and its boundary box. This type of centering ensures that all icons are correctly aligned when exported and used side-by-side in a line or a row.

In some cases, you may need to center the icons in relation to their optical center because the geometrical center would break the icon design. This is a spot where visual weight is the heaviest. See the example of the comment icon in the picture below: the pink circle represents the geometrical center, but as you can see, the icon is aligned to its visual center, which is slightly above.

Soul Design System by Emplifi

Soul is the heart of Emplifi's effort to design the best CX platform for its customers. The design system collects principles, components, patterns, copywriting guidelines, and more.