Dynamic icon

Shows a small animated status, like a calculation running or a score's strength. For an indefinite wait, use Spinner.

Calculating the forecastRefreshing the pipeline chartEngaged in the last 30 daysLikely to convertWin rate up 4 points since last quarter

Installation

pnpm dlx shadcn@latest add @wisty/dynamic-icon

The CLI installs the Radix or Base UI file to match your project.

If your project doesn't have Wisty UI's theme yet, add it once with npx shadcn@latest add @wisty/cosmos. Until then, components keep shadcn's default look. Installation has the details.

Create an app with Dynamic iconBuild in Wisty to publish inside Salesforce in minutes. Nothing to deploy.Open in Wisty

When to use

Use it

Something runs in the background, like a field calculation or an Einstein score being worked out. Use DynamicIconEllie.
A graph or a feed is refreshing, or a recording is in progress. Use DynamicIconEq, and stop it with playing={false}.
A record is marked good or bad in one small dot, like an engagement or fit score. Use DynamicIconScore.
A signed score from -3 to 3, like an Einstein prediction's strength or a password's. Use DynamicIconStrength.
A value moved up, down or stayed level, like a forecast score since last week. Use DynamicIconTrend.
It replaces lightning-dynamic-icon, apart from its waffle.

Don't use it

You're waiting on something to load. Use Spinner.
The status needs words, like Closed Won or Overdue. Use Badge.
A number shows beside its change. Use Metric, whose trend arrow follows the number's sign.
How much of a task is done. Use Progress ring.
Opening the App Launcher. The waffle belongs to the app shell, not here.

Usage

import {
  DynamicIconEllie,
  DynamicIconEq,
  DynamicIconScore,
  DynamicIconStrength,
  DynamicIconTrend,
} from "@/components/wisty/dynamic-icon"

<DynamicIconStrength value={2} label="Strong fit" />

Each glyph is its own export and takes only its own option: playing, value or direction. Ellie has none.
label says what's happening, like "Forecast score is up 2 points". Without it the icon is decorative and screen readers skip it.

Examples

Equalizer

Bars that bounce while a chart refreshes, and stand at rest with `playing={false}` once it's up to date.

Refreshing the pipeline chartPipeline chart is up to date

Score

A filled green dot for `value="positive"` and an empty red ring for `value="negative"`, each before the words that say which.

Engaged in the last 30 daysNo activity in 90 days

Strength

A conversion prediction from `value={3}` to `value={-3}`: green dots above 0, red dots below and three empty dots at 0.

Very likely to convertSomewhat likely to convertNot enough activity to predictSomewhat unlikely to convertVery unlikely to convert

Trend

Up in green, neutral and down in red, each drawing its ring and then its arrow beside the change it stands for.

Win rate up 4 points since last quarterPipeline unchanged since last weekAverage deal size down 8% since last quarter

On its own, with a label

An ellie with no text beside it, so its `label` gives screen readers the words in place of the drawing.

API reference

Part	Built on
`DynamicIconEllie`	`<span>` (opens in a new tab)
`DynamicIconEq`	`<div>` (opens in a new tab)
`DynamicIconScore`	`<div>` (opens in a new tab)
`DynamicIconStrength`	`<div>` (opens in a new tab)
`DynamicIconTrend`	`<div>` (opens in a new tab)

`DynamicIconEllie`

Prop	Type	Default	Description
`label`	`string`		Says what's happening, like "Score is recalculating". Decorative without one.

`DynamicIconEq`

Prop	Type	Default	Description
`label`	`string`		Says what's happening, like "Score is recalculating". Decorative without one.
`playing`	`boolean`	`true`	Bounces the bars. false stops them at rest.

`DynamicIconScore`

Prop	Type	Default	Description
`label`	`string`		Says what's happening, like "Score is recalculating". Decorative without one.
`value`*	`"positive" \| "negative"`		positive draws a filled green dot, negative an empty red one.

`DynamicIconStrength`

Prop	Type	Default	Description
`label`	`string`		Says what's happening, like "Score is recalculating". Decorative without one.
`value`*	`-3 \| -2 \| -1 \| 0 \| 1 \| 2 \| 3`		How many of the three dots fill: green above 0, red below 0.

`DynamicIconTrend`

Prop	Type	Default	Description
`label`	`string`		Says what's happening, like "Score is recalculating". Decorative without one.
`direction`*	`"up" \| "down" \| "neutral"`		Points the arrow: up in green, down in red, neutral straight ahead.

SLDS mapping

Each export is the dynamic icon of the same name: DynamicIconEllie is slds-icon-ellie, DynamicIconEq is slds-icon-eq with three slds-icon-eq__bar, DynamicIconScore is slds-icon-score, DynamicIconStrength is slds-icon-strength and DynamicIconTrend is slds-icon-trend. label is the slds-assistive-text.

Known gaps:

The waffle (slds-icon-waffle) isn't here. It's the App Launcher's button.
slds-is-paused isn't a prop. lightning-dynamic-icon doesn't offer it either.
A strength's dots change color with a fade, as lightning-dynamic-icon draws them, not with SLDS's staggered fill-in on load.

Prop	Value	SLDS	Notes
`playing`	`true` (added)	`slds-icon-eq slds-is-animated`	Default. lightning-dynamic-icon's eq option play.
`playing`	`false` (added)	`slds-icon-eq`	The eq option stop: bars at rest.
`value`	`positive` (added)	`slds-icon-score[data-slds-state=positive]`	DynamicIconScore.
`value`	`negative` (added)	`slds-icon-score[data-slds-state=negative]`	DynamicIconScore.
`value`	`-3 to 3` (added)	`slds-icon-strength[data-slds-strength]`	DynamicIconStrength.
`direction`	`up` (added)	`slds-icon-trend[data-slds-trend=up]`
`direction`	`down` (added)	`slds-icon-trend[data-slds-trend=down]`
`direction`	`neutral` (added)	`slds-icon-trend[data-slds-trend=neutral]`

Accessibility

Pass label when the icon is the only sign of the status. Say what's happening, like "Graph is refreshing", not what it looks like.
Leave label out when visible text beside the icon already says it, so screen readers don't read it twice.
A changed value or direction isn't announced. If people need to hear the change, say it in a live region.

Motion

Ellie pops in after two seconds, then pulses twice and stops. Eq's bars bounce until playing is false. A trend draws its ring and then its arrow when it appears. Score and strength fade to a new value.
With reduced motion, nothing moves: ellie and trend show their last frame, eq's bars stand at rest, and a new score or strength jumps into place.

Rules

Don't use a score, strength or trend icon for good or bad alone. Its color is the only difference, so put the meaning in label or in the text beside it.
Keep each icon its SLDS size. They're drawn at 5 to 16 pixels and don't scale with text.
Never pass asChild or render.