Icons

Icons provide visual context and enhance usability.

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">
  <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

If an icon has visible descriptive text, nothing more is required. If the icon has no descriptive text, add a span with the .slds-icon__container class. Place both the svg with the base .slds-icon class and the description for assistive screen readers inside a span with the .slds-assistive-text class.

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>
  ...

Basedev ready

Standard icons have a rounded square shape. Utility and doctype icons have no background color. For action icons, add the .slds-icon__container--circle class to the container, which changes the background shape to a circle.

Preview

Code

Colorsdev ready

Icons are created with no background color. The base .slds-icon class sets the fill color to white. You can change the color by changing the CSS fill property value. Use the .slds-icon-text-default class to make a utility icon the same color as the default text. .slds-icon-text-warning creates a yellow warning icon and .slds-icon-text-error can be used to make a red icon.

Note: Doctype icons have specific colors. You can’t change the color with the fill property.

To give a Standard icon a background color, append the sprite name and the icon name to .slds-icon. For example, for the account icon in the standard icon set, the class is .slds-icon-standard-account. Place the class on the .slds-icon__container. In the case of icon names with more than one word (separated by an underscore), use a dash in the class name. So log_a_call in the standard icon set becomes .slds-icon-action-log-a-call.

Preview

Code

Sizesdev ready

The default icon size is 2rem×2rem. To create a very small icon, add the class .slds-icon--x-small to the svg. These icons are usually small alert icons with no background color.

Use .slds-icon--small to create a 1.5rem×1.5rem icon with a background. The .slds-icon--large creates a 3rem×3rem icon.

Preview

Code

Component Overview

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:

No, optional element or modifier

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:

--