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
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
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
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 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
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
There are some exceptions when a shape requires a lighter stroke for detail. Avoid this whenever possible.
Angles
Use 45°angles when possible. This allows even anti-aliasing. When this isn’t possible keep angles in increments of 15°.
Corners
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
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
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
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
