Icons provide visual context and enhance usability. Read more in the Iconography design guideline and for a full list of icons available, visit the Icons page.

Description of icon when needed

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#

Description of icon when needed

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

Description of icon when needed

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

Description of icon when needed

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

Description of icon when needed

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

Description of icon when needed

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

Description of icon when needed

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

Description of icon when needed

<span style="color:purple">
  <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>

Success#

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

Description of icon when needed

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

Description of icon when needed

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

Description of icon when needed

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

Description of icon when needed

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

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.

Description of icon when needed

<span class="slds-icon_container slds-icon-utility-announcement slds-current-color" title="Description of icon when needed">
  <svg class="slds-icon 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.

Description of icon when needed

<span class="slds-icon_container slds-icon-utility-announcement slds-current-color" title="Description of icon when needed">
  <svg class="slds-icon 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.

Description of icon when needed

<span class="slds-icon_container slds-icon-utility-announcement slds-current-color" title="Description of icon when needed">
  <svg class="slds-icon 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.

Description of icon when needed

<span class="slds-icon_container slds-icon-utility-announcement slds-current-color" title="Description of icon when needed">
  <svg class="slds-icon 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.

List icon

<span dir="rtl">
  <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>

Styling Hooks Overview#

Use these CSS Custom Properties as hooks to customize this SLDS component with your own style. For more information, read the technical documentation.

Category	Styling Hook Name	Value Type(s)	Fallback Value
Color	`--slds-c-icon-color-background`	Color	#1b96ff
	`--slds-c-icon-color-foreground`	Color	100, white
	`--slds-c-icon-color-foreground-default`	Color	50, #747474
Radius	`--slds-c-icon-radius-border`	Dimension	0.25rem

Overview of CSS Classes#

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-icon_container`
Summary	Container for icons
Support	dev-ready
Restrict	`span, div`
Variant	True

Selector	`.slds-avatar-grouped__icon`
Summary	Modifier for the icon Avatar in an Avatar Group
Restrict	`.slds-icon_container`
Modifier	True

Selector	`[class*='slds-icon-action-']`
Summary	Action icons
Support	dev-ready
Restrict	`.slds-icon_container, svg, abbr`
Variant	True

Selector	`.slds-icon_container_circle`
Summary	Circle container for icons
Restrict	`.slds-icon_container`

Selector	`.slds-icon`
Summary
Restrict	`.slds-icon_container svg, svg`

Selector	`.slds-icon_xx-small`
Summary
Restrict	`.slds-icon`
Modifier	True

Selector	`.slds-icon_x-small`
Summary
Restrict	`.slds-icon, .slds-button__icon`
Modifier	True

Selector	`.slds-icon_small`
Summary
Restrict	`.slds-icon`
Modifier	True

Selector	`.slds-icon_large`
Summary
Restrict	`.slds-icon`
Modifier	True

Selector	`.slds-icon-text-default`
Summary	Changes the icon fill color to match the default state
Restrict	`.slds-icon`
Modifier	True

Selector	`.slds-is-disabled`
Summary	Changes the icon fill color to match the disabled state
Restrict	`.slds-icon`
Modifier	True

Selector	`.slds-icon-text-warning`
Summary	Changes the icon fill color to match the warning state
Restrict	`.slds-icon`
Modifier	True

Selector	`.slds-icon-text-success`
Summary	Changes the icon fill color to match the success state
Restrict	`.slds-icon`
Modifier	True

Selector	`.slds-icon-text-error`
Summary	Changes the icon fill color to match the error state
Restrict	`.slds-icon`
Modifier	True

Selector	`.slds-icon-text-light`
Summary
Restrict	`.slds-icon, svg`
Modifier	True

Selector	`.slds-current-color`
Summary
Restrict	`.slds-icon_container`
Modifier	True

Selector	`.slds-icon_disabled`
Summary	The icon container of icon in a disabled element
Restrict	`.slds-icon_container`

Selector	`[class*='slds-icon-custom-']`
Summary	Custom icons
Support	dev-ready
Restrict	`.slds-icon_container, svg, abbr`
Variant	True

Selector	`[class*='slds-icon-doctype-']`
Summary	Container for icons
Support	dev-ready
Restrict	`.slds-icon_container, svg`
Variant	True

Selector	`[class*='slds-icon-standard-']`
Summary	Standard icons
Support	dev-ready
Restrict	`.slds-icon_container, svg, abbr`
Variant	True

Icons Release Notes

2.17.0

Removed

Removed outdated documentation about changing background color, as this contradicts current Design System guidelines.

Added
Added slds as the default namespace with sds fallbacks for Styling Hooks.
Added CSS Custom Property reassignments for variants and states

2.15.0

Changed

Changed product_quantity_rules icon's color from light blue to salem green (#04844B)

2.14.0

Removed

Removed hooks for modifying the status states of icons at the component level.

2.13.1

Added

slds-current-color to restricted classes.

2.13.0

Enabled styling hooks for icon. See icon's styling hooks overview table for a full listing of the currently available hooks.

2.9.0

Added

Icon modifier class slds-icon_flip to horizontally flip icons.

2.7.0

Added

Icons can now be filled with the success text color by adding slds-icon-text-success.

Fixed

Fixed issue #228, which was causing x-small and xx-small circular icons to appear as ovals. Contribution made by @geebru.

Sections

About Icons#

Accessibility#

Default#

Structure and Implementation#

Types#

Action#

Custom#

Doctype#

Standard#

Color#

Default#

Current Color#

Success#

Warning#

Error#

Light#

Size#

XX-Small#

X-Small#

Small#

Large#

Right-to-Left Support#

Styling Hooks Overview#

Overview of CSS Classes#

What are these categories?

Icons Release Notes

2.17.0

Removed

Added

2.15.0

Changed

2.14.0

Removed

2.13.1

Added

2.13.0

2.9.0

Added

2.7.0

Added

Fixed