Components

Icons

Icons provide visual context and enhance usability.
Looking for the icons? Go to Resources › Icons.

BaseBase › StandardBase › UtilityBase › ActionBase › DoctypeBase › CustomBasedev ready

Preview

Code

<span class="slds-icon_container slds-icon-standard-account" title="description of icon when needed">
  <svg class="slds-icon" aria-hidden="true">
    <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
  </svg>
  <span class="slds-assistive-text">Description of icon</span>
</span>
  • For action icons, add the .slds-icon_container--circle class to the container (.slds-icon_container), which changes the background shape to a circle.
  • Doctype icons have no background color.
  • Standard and Custom icons have a rounded square shape and use a class on the container for the background color.
  • Utility icons have no background color.

Icon ColorsIcon Colors › BaseIcon Colors › DefaultIcon Colors › WarningIcon Colors › ErrorIcon Colorsdev ready

Preview

Code

<span class="slds-icon_container" title="description of icon when needed">
  <svg class="slds-icon" aria-hidden="true">
    <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#lead"></use>
  </svg>
  <span class="slds-assistive-text">Description of icon</span>
</span>

Icons (.slds-icon) are white by default, and their container (.slds-icon_container) has a transparent background.

Changing the color of an icon

Icon color is changed using the fill CSS property.You may also use these helper classes:

  • .slds-icon-text-default: same as default text
  • .slds-icon-text-warning: yellow
  • .slds-icon-text-error: red

Note on “doctype” icons

Note that doctype icons have specific colors that cannot be changed with the fill CSS property.

Background ColorsBackground Colors › CaseBackground Colors › Log a CallBackground Colors › Custom Icon 25Background Colorsdev ready

Preview

Code

<span class="slds-icon_container slds-icon-standard-case" title="description of icon when needed">
  <svg class="slds-icon" aria-hidden="true">
    <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#case"></use>
  </svg>
  <span class="slds-assistive-text">Description of icon</span>
</span>

Icons (.slds-icon) are white by default, and their container (.slds-icon_container) has a transparent background.

Changing the background of an icon

Change a background color using composed class names:

.slds-icon-[sprite name]-[icon name] {}

Place the class on the .slds-icon_container.

<!-- "account" icon in the "standard" icon set --><div class="slds-icon_container slds-icon-standard-account">  ...</div>

Some icon names have more than one word, separated by _ underscores. Replace underscores with dashes when composing the class name. So log_a_call in the standard icon set becomes .slds-icon-action-log-a-call.

SizesSizes › Extra SmallSizes › SmallSizes › Medium (default)Sizes › LargeSizesdev ready

Preview

Code

Extra-small - (.slds-icon--x-small) - is typically used for small alert icons, with no background color.

<span class="slds-icon_container" title="description of icon when needed">
  <svg class="slds-icon slds-icon-text-warning slds-icon--x-small" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
  </svg>
  <span class="slds-assistive-text">Warning Icon</span>
</span>

Component Overview

Five separate SVG sprites are used to create icons — action, custom, doctype, standard and utility. Link to the icon SVG sprite by targeting the icon’s hash/ID value in the use href attribute. (You can find the values on the icon page.)

When placing the icon code into your page, customize the path in the use attribute of the svg to the proper path and icon name for your specific icon. For example, the case icon in the standard sprite would have a path like this:

<svg aria-hidden="true" class="slds-icon" title="when needed">
  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#case"></use>
</svg>

Note: If an icon has more than one word in the name, it should be included in the use attribute with the underscore separator as shown on the icon page. For example: log_a_call.

Accessibility

Icons require a span with the .slds-icon_container class. This contains both the svg with the base .slds-icon class and, if needed, the description for assistive screen readers inside a span with the .slds-assistive-text class. A title attribute is necessary if the icon sits alone and a sighted user might need to hover for a description. If an icon has visible descriptive text, no title or extra .slds-assistive-text is required.

Note: You must include the SVG sprites to link to them. If you’re using Visualforce, see the Visualforce tutorial. If you’re using Lightning components, see tutorial.

You can access the SVG sprites by downloading the entire CSS Framework or just the icons. To include a sprite in your application, the recommended method is to place it into the page as the first element inside the body element. Alternatively, you can leave the sprite in the assets/icons directory and link to it from your page. To render a sprited icon, add the tiny SVG for Everybody script for Internet Explorer.

When placed into the body, the SVG sprite takes up space in the page. Use either display:none or position:absolute and set both the width and height to zero.

<body>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="position:absolute">
    <symbol id="announcement" viewBox="0 0 24 24">
      <path d="M10.5 21l-.6-.5c-.7-.5-.7-1.4-.7-1.9v-1.3c0-.4-.3-.7-.7-.7H5.8c-.4 0-.7.3-.7.7v3.6c0 1.2.7 2.2 1.9 2.2h2.2c1.4 0 1.5-.9 1.5-.9s.2-.9-.2-1.2zM20.8 8.3V2c0-1.1-1.4-1.4-2.2-.7l-4.1 3.9c-.6.5-1.4.8-2.3.8h-7C2.8 6 .9 8.1.9 10.5v.1c0 2.4 1.9 4.2 4.3 4.2h7c.9 0 1.7.3 2.4.9l4 4c.8.7 2.2.4 2.2-.7v-6.3c1.4 0 2.2-.9 2.2-2.2 0-1.2-.8-2.2-2.2-2.2z" />
    </symbol>
    <!-- follow with the sprited list of svgs -->
  </svg>
  ...

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create different icons.
Class NameUsage
.slds-icon
Applied to:

svg

Outcome:

Defines an svg as an icon

Required:

Required

Comments:

By default icons have a white fill color

.slds-icon-text-default
Applied to:

.slds-icon

Outcome:

Creates a text-colored fill color for utility icons

Required:

No, optional element or modifier

Comments:

--

.slds-icon-text-warning
Applied to:

.slds-icon

Outcome:

Creates a warning colored fill color

Required:

No, optional element or modifier

Comments:

--

.slds-icon--x-small
Applied to:

.slds-icon

Outcome:

Creates a 1rem×1rem icon

Required:

No, optional element or modifier

Comments:

--

.slds-icon--small
Applied to:

.slds-icon

Outcome:

Creates a 1.5rem×1.5rem icon

Required:

No, optional element or modifier

Comments:

--

.slds-icon--large
Applied to:

.slds-icon

Outcome:

Creates a 3rem×3rem icon

Required:

No, optional element or modifier

Comments:

--

.slds-icon_container
Applied to:

outer span

Outcome:

Creates the rounded square background

Required:

Required

Comments:

Used when an icon with a background color is accompanied by .slds-assistive-text and also receives a background-color class

.slds-icon_container--circle
Applied to:

.slds-icon_container

Outcome:

Creates a circular icon shape

Required:

No, optional element or modifier

Comments:

--

.slds-icon__container
Deprecated
Applied to:

Outcome:

Creates the rounded square background

Required:

No, optional element or modifier

Comments:

--

.slds-icon__container--circle
Deprecated
Applied to:

Outcome:

Creates a circular icon shape

Required:

No, optional element or modifier

Comments:

--