Dynamic Icon

lightning:dynamicIcon

Represents various animated icons with different states. This component requires API version 41.0 and later.

For Aura components only. For LWC development, use lightning-dynamic-icon.

For Use In

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

A lightning:dynamicIcon component visually displays an event that's in progress, such as a graph that's loading.

This component implements styling from dynamic icons in the Lightning Design System.

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

The following options are available.

  • Use the type="ellie" attribute to show 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.
  • Use the type="eq" attribute to show an animated graph with three bars that rise and fall randomly. This icon is great for a graph that’s refreshing.
  • Use the type="score" attribute to show a green filled circle or a red unfilled circle. This icon is great for showing positive and negative indicators.
  • Use the type="strength" attribute to show three animated horizontal circles that are colored green or red. This icon is great for Einstein calculations or indicating password strengths.
  • Use the type="trend" attribute to show animated arrows that point up, down, or straight. This icon is great for showing movement of a value from one range to another, like a forecast score.
  • Use the type="waffle" attribute to show 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 alternativeText attribute to describe the dynamicIcon.

Sometimes a dynamicIcon is decorative and doesn’t need a description. However, on smaller screens and windows the dynamicIcon can also be informational. In this case, include alternativeText. If you don’t include alternativeText, check smaller screens and windows to ensure that the dynamicIcon is only decorative on all formats.