Icon generator
Status glyphs, section markers and inline indicators all run through lightning-icon. Pick a glyph, a filled or bare container, and a size that matches the text sitting next to it.
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>
<span class="studio-icon-container">
<lightning-icon
icon-name="utility:success"
variant="inverse"
size="small"
class="studio-icon"
></lightning-icon>
</span>
</template>Design tips for icons
- Filled (inverse) containers work well as small status markers; bare icons blend better inline with text.
- Match icon color to your semantic palette — green for success, red for error — so meaning is instant.
- Keep icon size proportional to the adjacent text; oversized icons compete with the content around them.