Iconography - Lightning Design System

Icons are symbols used to represent features, functionality, or content. Visit the icon page to see a library of all icons and the component blueprint page for implementation details.

Overview

Five types of icons are used to communicate information within Salesforce, each with variations based on use case and representation. From most to least used, they are:

Utility icons are simple, single-color glyphs that identify labels and actions across form factors. They can be paired with text or used alone, and can be any color. They have no background shape.

Object icons fall into two categories. Standard object icons (e.g., Accounts, Leads, Opportunities, and Cases) come with Salesforce. Custom object icons are a unique set of icons used to create custom objects. Each object icon is made up of a white glyph on a squircle (square + circle = square with rounded corners). Object icons use a specific, limited color palette.

Action icons are touch-device specific icons that appear next to an item—for example, a page header or card—to let users take action in a specific context. Each action icon is made up of a white glyph on a colored circle. Action icons use a specific, limited color palette.

Doctype icons represent document file formats. Each doctype icon is made up of a white glyph representing its file type, on a background resembling a piece of paper with a folded corner.

Product icons represent applications using product logos. On the desktop, they’re used only in the app launcher and at the top left of each Salesforce application window. On mobile-device home screens, they launch the corresponding mobile app. Product icons are full color and use official product color palettes.

Design Principles

Salesforce icon design is a blend of professional and playful. Our icons are simple, approachable, and legible, distinguished by negative space and large rounded corners. Icons should be recognizable and easy to remember.

Accessibility

Screen readers handle the two major icon types differently. Informational icons are read to convey information to users, while decorative icons are ignored. Choose the right icon type for each use case; for informational icons, write preliminary labels for CX review and developer use. For more information on icon accessibility, see the Accessibility section of the Icon blueprint.

Informational Icons

Informational icons—for example, icon buttons and standalone avatars—convey important information that surrounding text doesn’t. Each icon should be accompanied by either assistive text or aria-label (a code string that labels the element). Each image should have an alt description. In the alt description, write what the icon or image does, not what it looks like (e.g., "Upload File" instead of "paperclip").

Informational Icon Example:

Users click the X icon within a toast message to dismiss the message. Screen readers should read this icon as “Close.”

Decorative Icons

Icons and images add no relevant information or functionality. Redundant icons and images, which reinforce adjacent text’s meaning but add no new information, also fall into this category. Screen readers should skip over decorative icons. For images, use an empty alt tag, to force screen readers to skip over them.

Decorative Icon Example:

The following icons are decorative; the visible text next to them reiterates their new information.

Grid System and Keyline Shapes

Icons are based on a 8pt grid system and come in four keyline shapes—circle, square, vertical rectangle, and horizontal rectangle. These shapes are created using business process model and notation diagram (BPMN) conventions.

Mobile Tap Targeting

When designing for mobile, add space around each icon to make it easier to select.

Android minimum tap target at baseline is 48px — On Android, set minimum tap target at baseline to 48px.

iOS minimum tap target at 1x size is 44px — On iOS, set minimum tap target at 1x size to 44px.

showing 8px padding between adjacent icons — Keep 8px padding between adjacent icons.

Icon Categories and Types

Salesforce uses four main icon types: object, utility, action, and doctype. Keep design elements consistent within each icon type. (See Iconography specs for details.)

Object Icons

Object icons are used for both mobile and desktop applications. They consist of white images on colored squares with 4px rounded corners.

Standard icons represent Salesforce objects and entities that come with the product (for example, Account or Contact records).
Custom icons represent custom Salesforce that objects customers create to meet their business needs.

Object icons—task, dashboard, opportunity, knowledge, drafts, and call

Placement of an object icon in the page header

Anatomy

Based on a 60x60px grid
6px stroke weight
6px corner radius
6px negative space

Keyline Shapes

circle keyline shape — Circle (60px diameter)

vertical rectangle keyline shape — Vertical Rectangle (48x60px)

horizontal rectangle keyline shape — Horizontal Rectangle (60x48px)

Artboard

Recommended canvas size for setting up Illustrator or Sketch files: 100x100px
Live area of 60x60px, with 20px padding on each side

Dos and Don’ts

do and don’t for object icons — Do use white icon glyphs in object icons.

do and don’t for business process model and notation diagram — Do use approved business process model and notation diagram (BPMN) keyline shapes.

Utility Icons

Utility icons are simple, single-color images representing UI-specific actions such as closing a dialog, searching, opening a menu, and sharing a feed post. These actions can be either generic or Salesforce specific. Utility icons do not have keyline shape backgrounds.

Utility icons appear in both mobile and desktop environments—including in feeds, Global Header, navigation, Docked Composer, Button Groups, Alerts, and Toasts.

Placement of utility icons in the docked composer

Utility icons can include text describing their functions. Text and image are center aligned.