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.

<template>
    <lightning-dynamic-icon
        type="ellie"
        alternative-text="Your calculation is running."
    >
    </lightning-dynamic-icon>
</template>

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.

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

:::::

::::::