Icons
Visual elements representing ideas, objects or actions.
Icons in Salesloft represent an object or a function. They can be pure pictograms, representing a physical item through visual metaphor, or ideograms, representing instead an idea or concept. In either case, the meaning of icons should be quickly evident, allowing for ease in navigation and repeated actions using icons.
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.
Never use icons as clickable elements on their own. If you would like to create a clickable icon, use the icon button component.
Size
There are two sets of nearly identical icons. One set is intended to be used at 16px and the other is intended to be used at 24px. While they may look similar, they are designed to have maximum clarity at the given size.
Do not scale down the icons past their base size. If a larger version of the icon is needed, any multiple of the base size should provide a sharp icon.
Style
Icons follow a fill style unless the shape can only be created with a stroke. Two-tone and other style icons should be avoided.
Keyshapes
Keyshapes provide consistent sizes across the icon set. Designing squares, rectangles and circles at a similar size helps unify the icons across the platform.
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.
Strokes, counter strokes 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. Use a 1.5px stroke for the 16px set. A few exceptions may be made when shapes have a high complexity and require additional detail.
Angles
Use 45° angles when possible. This allows even anti-aliasing, which keeps the icons sharp. When this isn't possible, keep angles in increments of 15°.
Corners
The 16px set defaults to a 1.5px corner radius, while the 24px set defaults to a 2px radius.
Not all shapes need rounded corners. and some may need to be more round. Do not round the interior of a stroke or tips of an arrow.
Simplicity
Good icons communicate their intent with the most basic shapes possible. Remove any artifacts that are not absolutely required.
Avoid dimension. This added unnecessary complexity. Use a vantage point that views the object head-on.
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.
Naming
Icons names should describe the object itself, not the entity within the application it represents. When naming variants follow existing patterns.
Brand-related icons are an exception.