About Icons#

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

Accessibility#

Icons require a containing element for two reasons:

• If assistive text is required, the containing element should contain both the icon and a <span> with hidden assistive text describing the icon using the slds-assistive-text class.
• If the icon is used without a visible, descriptive label, a title attribute is needed on the containing element. The title should describe the icon.

If an icon has a visible label that describes what the icon represents, no title or hidden assistive text is required.

The containing element must have the slds-icon_container class.

Default#

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

Structure and Implementation#

An icon must have a containing element with the class slds-icon_container for accessibility support. Inside the container, a <svg> with the class slds-icon contains the reference to your icon and a <span> with the class slds-assistive-text contains your hidden assistive text that describes the icon. Be sure to read the accessibility section to know when to use assistive text, the title attribute, or when neither is needed.

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>

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.

You must require SLDS in your application for SVG sprites to work. If you’re using Visualforce, see the Visualforce tutorial. If you’re using Lightning components, see this documentation.

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

Types#

All available SVG sprites fall into one of these five main categories: action, custom, doctype, standard, and utility.

Action#

To view all available action icons, see action icons.

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

Custom#

Custom icons have a rounded square shape and use a class on the container for the background color.

To view all available custom icons, see custom icons.

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

Doctype#

To view all available doctype icons, see doctype icons.

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

Standard#

Standard icons have a rounded square shape and use a class on the container for the background color.

To view all available standard icons, see standard icons.

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

Color#

Default#

To change the fill of an icon to the default text color, add the slds-icon-text-default class to the icon.

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

Current Color#

To change the fill of an icon to match the current color of its parent, add the slds-current-color class to the icon's container. This class utilizes the CSS currentColor value.

<span class="slds-icon_container slds-icon-utility-announcement slds-current-color" title="Description of icon when needed">
  <svg class="slds-icon" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#announcement"></use>
  </svg>

Success#

To change the fill of an icon to the success text color, add the slds-icon-text-success class to the icon.

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

Warning#

To change the fill of an icon to the warning text color, add the slds-icon-text-warning class to the icon.

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

Error#

To change the fill of an icon to the error text color, add the slds-icon-text-error class to the icon.

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

Light#

To change the fill of an icon to the light text color, add the slds-icon-text-light class to the icon.

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

Background Color#

To change a background color for action, custom, or standard icons, use composed class names:

Place the class on the .slds-icon_container.

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

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

Size#

Size modifiers can be added to the slds-icon element on all types of icons.

XX-Small#

To change the size of an icon to xx-small, add the slds-icon_xx-small class to the icon.

<span class="slds-icon_container slds-icon-utility-announcement" title="Description of icon when needed">
  <svg class="slds-icon slds-icon-text-default slds-icon_xx-small" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#announcement"></use>
  </svg>

X-Small#

To change the size of an icon to x-small, add the slds-icon_x-small class to the icon.

<span class="slds-icon_container slds-icon-utility-announcement" title="Description of icon when needed">
  <svg class="slds-icon slds-icon-text-default slds-icon_x-small" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#announcement"></use>
  </svg>

Small#

To change the size of an icon to small, add the slds-icon_small class to the icon.

<span class="slds-icon_container slds-icon-utility-announcement" title="Description of icon when needed">
  <svg class="slds-icon slds-icon-text-default slds-icon_small" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#announcement"></use>
  </svg>

Large#

To change the size of an icon to large, add the slds-icon_large class to the icon.

<span class="slds-icon_container slds-icon-utility-announcement" title="Description of icon when needed">
  <svg class="slds-icon slds-icon-text-default slds-icon_large" aria-hidden="true">
    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#announcement"></use>
  </svg>

Right-to-Left Support#

To horizontally flip an icon to support bidirectionality (reading from right to left), use the slds-icon_flip class with the slds-icon_container class, and setting the dir attribute on any parent container, most often the parent component or on html itself.

<div dir="rtl" style="width:32px">
  <span class="slds-icon_container slds-icon-utility-picklist_type slds-icon_flip" title="List icon">
    <svg class="slds-icon slds-icon-text-default" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#picklist_type"></use>