This presentation on icon fundamentals was given to Salesloft’s Product Design team on May 24, 2021. Shortly before the new icon set shipped. This post is an adaptation of that presentation.

Usage

Clickable icons should be used as a button, not on their own.

Icons in Salesloft provide visual cues at a glance. They quickly communicate an idea, status or action to the user. Use icons sparingly as not to burden users with unnecessary cognitive load.

When icons have a universal meaning in other applications and websites, try to follow that same meaning. To avoid confusion, avoid using icons to represent a new concept when they already represent an existing one elsewhere in the app. Note that certain icons may have Salesloft-specific meanings.

Never use icons as clickable elements on their own. If you would like to create a clickable icon, use the icon button component.

Style

Bell icon and a link icon.

Icons follow a fill style unless the illustration can only be created with a stroke. Two-tone and other style icons should be avoided.

Grid and Padding

Compass icon showing grid and padding for a 24px icon and a 16px icon.

Icons should be designed on a 24px x 24px grid. Within that grid the live area is 20px x 20px with 2px of padding surrounding the icon. The smallest set uses a 16px x 16px grid with 1px of padding.

Keyshapes

Keyshapes used for this icon set.

Keyshapes provide consistent sizes across the icon set. While not every icon must adhere exactly to a keyshape, it should serve as a starting point.

Stroke, Counter Stroke and Terminals

Chart icon showing equal stroke and counter-stroke spacing.

For the 24px set use a 2px stroke and counterstroke to ensure the icons have a similar weight. Terminals should be 2px x 2px and are never rounded.

Use a 1.5px stroke for the 16px set.

Stroke Detail

Gift icon highlighting the smaller stroke on the bow.


There are some exceptions when a shape requires a lighter stroke for detail. Avoid this whenever possible.

Angles

Icon showing angles in increments of 15 degrees.

Use 45°angles when possible. This allows even anti-aliasing. When this isn’t possible keep angles in increments of 15°.

Corners

Correct corners for floppy, picture, building and dollar icons.

Corners have a 2px corner radius by default. Never round interior corners.

Some shapes may need to be rounder and while others may need no rounding at all. Avoid rounding corners when it makes the object more difficult to identify.

Arrows

Incorrect example of an arrow with rounded corners and terminals. Correct arrow with hard corners and terminals.

When dealing with directional icons such as arrows, never round corners or terminals. Doing so softens the directional indicator and makes the most important elements less clear.

Letters and Numbers

Example of the AlphaNum Micro font.

Use the custom AlphaNum Micro font when letters or numbers can provide more detail within the icon. AlphaNum Micro is a custom font designed to work in spaces as small as 3px by 5px.

Using text in icons should generally be avoided. However, they can be useful to distinguish elements like file type—JSON, CSV, XML.

Simplicity

Pencil, gauge, flag and trashcan icons approved.

Good icons communicate their intent with the most basic shapes possible. Remove any artifacts that are not absolutely required. Be ruthless.

Avoid dimension. This added unnecessary complexity. Use a vantage point that views the object head-on.

Questions

Help icon.

Leave a Reply

Your email address will not be published.