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: ``` ``` - *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

...

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