Avatar generator
User photos, initials fallbacks and record images across list views and headers all use lightning-avatar. Style the fallback background, shape and ring so it works whether or not a photo is available.
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-avatar
initials="JD"
variant="circle"
size="medium"
fallback-icon-name="standard:user"
class="studio-avatar"
></lightning-avatar>
</template>Design tips for avatars
- Design the initials fallback first — most rows in a real org will not have a photo.
- Use circle for people, rounded-square for non-person records (accounts, assets) to keep the two visually distinct.
- Keep initials to two characters maximum for legibility at small sizes.