An avatar is a graphical representation of a user or the user's character. It may take either a two-letter abbreviation or an image. This avatar is built with an abbr-tag and an img-tag.
Without image, using abbr-tag:
Wrapped in a list, using data-tooltip instead of abbr-tag.
For demo-purposes, tab-index has been added in order to show :focus-visible-styles.
Based on the initials — the innerText of the abbr-tag — a background-color is set using strToRGB.