Dynamic Icon generator
lightning-dynamic-icon covers trend arrows, score dots, signal-strength bars and small looping status glyphs (loading, now-playing, app launcher). Style the accent color so these small indicators still match your product’s palette.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-dynamic-icon
type="trend"
option="positive"
alternative-text="Trending up"
class="studio-dynamic-icon"
></lightning-dynamic-icon>
</template>Design tips for dynamic icons
- Reserve red/green trend coloring for genuinely positive/negative metrics — using it decoratively trains users to distrust the color.
- Score and strength icons work best directly inline with a label ("Lead score: •••○○") rather than floating alone.
- The loading and now-playing variants animate automatically in a real org; keep them small (24–32px) so the motion doesn’t distract from surrounding content.