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.
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.
Icon design, from concept to completion
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.
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—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.”
Warning toast with informational icon