icons

Icons provide visual context and enhance usability. Looking for the icons? Go to [Resources › Icons](/icons/).

Five separate SVG sprites are used to create icons — [action](/icons/#action),
[custom](/icons/#custom), [doctype](/icons/#doctype), [standard](/icons/#standard)
and [utility](/icons/#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](/icons/).)

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.

##### Changing the background of an icon

Change a background color using composed class names:

```css
.slds-icon-[sprite name]-[icon name]
```

Place the class on the `.slds-icon_container`.

```html

<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](/components/icons?variant=action) icons, add the `.slds-icon_container_circle` class to the container (`.slds-icon_container`), which changes the background shape to a circle.
- [Doctype](/components/icons?variant=doctype) icons have no background color.
- [Standard](/components/icons?variant=standard) and [Custom](/components/icons?variant=custom) icons have a rounded square shape and use a class on the container for the background color.
- [Utility](/components/icons?variant=base) icons have no background color.

#### Changing the fill of an icon using currentColor

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

#### 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 require SLDS in your application for SVG sprites to work.
If you’re using Visualforce, see [the Visualforce tutorial](/platforms/visualforce).
If you’re using [Lightning components, see this documentation](/platforms/lightning).

You can access the SVG sprites by downloading the entire [CSS Framework or
just the icons](/downloads). 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](https://github.com/jonathantneal/svg4everybody)
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>
    
  </svg>
  ...
```

base

icon

Modifier for the icon Avatar in an Avatar Group

action

default

The icon container of icon in a disabled element

custom

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

doctype

standard

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

examples

Changes the icon fill color to match the default state

Changes the icon fill color to match the warning state

Changes the icon fill color to match the success state

Changes the icon fill color to match the error state