Dynamic Icon

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.

1<template>
2    <lightning-dynamic-icon
3        type="ellie"
4        alternative-text="Your calculation is running."
5    >
6    </lightning-dynamic-icon>
7</template>

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.

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.

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.