---
schema_version: "1"
id: c52ec5537319084e985281cbd809fb081e2baa2ec10ec21269d1ea73d6bfe14d
title: Dynamic Icon
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/dynamicIcon/lightning-dynamic-icon.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-dynamic-icon.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: a9b343bb6263cbcc5583391da340d944cc8b6ffc66f57209e95293f860d0674f
products:
  - Lightning Component Reference
---

# Dynamic Icon

**`lightning-dynamic-icon`**

Represents various animated icons with different states.

**For Use In**

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="dynamicIcon" model="lwc" namespace="lightning"}


:::::

:::::tab

A `lightning-dynamic-icon` component visually indicates an event that's in
progress, such as a graph that's loading.

Here's an example of an ellie icon with alternative text.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-dynamic-icon
        type="ellie"
        alternative-text="Your calculation is running."
    >
    </lightning-dynamic-icon>
</template>
```
<!-- prettier-ignore-end -->

## Design

`lightning-dynamic-icon` implements the dynamic icons blueprint in the Salesforce Lightning Design System (SLDS). The dynamic icons adapt to SLDS 1 or SLDS 2 styling based on the org's theme or the container app that you use.

|                | SLDS 1                                                                                                                                | SLDS 2                                                                                                          |
| :------------- | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------- |
| **Design**     | [Dynamic Icons](https://v1.lightningdesignsystem.com/components/dynamic-icons/)                                                       | [Dynamic Icons](https://www.lightningdesignsystem.com/components/dynamic-icons/)                                |
| **For Use In** | Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## Usage Considerations

These `type` options are available.

- `type="ellie"` shows a pulsing blue circle, which pulses and stops after one animation cycle. This icon is great for field calculations or a process that's running in the background.
- `type="eq"` shows an animated graph with three bars that rise and fall randomly. This icon is great for a graph that's refreshing.
- `type="score"` shows a green filled circle or a red unfilled circle. This icon is great for showing positive and negative indicators.
- `type="strength"` shows three animated horizontal circles that are colored green or red. This icon is great for Einstein calculations or indicating password strengths.
- `type="trend"` shows animated arrows that point up, down, or straight. This icon is great for showing the movement of a value from one range to another, like a forecast score.
- `type="waffle"` shows a square made up of a 3x3 grid of circles. This icon animates on hover. This icon is great for app-related items, like the App Launcher in Lightning Experience.

## Accessibility

Optionally, you can use the `alternative-text` attribute to describe the
`lightning-dynamic-icon`.

Sometimes a `lightning-dynamic-icon` is decorative and doesn't need a description.
However, on smaller screens and windows the `lightning-dynamic-icon` can also be
informational. In this case, include `alternative-text`. If you don't include
`alternative-text`, check smaller screens and windows to ensure that the
`lightning-dynamic-icon` is only decorative on all formats.


:::::

:::::tab
::component-specification{component="dynamicIcon" model="lwc" namespace="lightning"}

:::::

::::::