Avatar can be used for displaying image, icon, or character on square or circle shaped elements. Put image, icon, or character into .avatar-display. Look the example below.

Extend default avatar element with .avatar-circle to change its shape to be circular.

If you want to change avatar size, you can use .avatar-{sm|lg} helper classes

Wrap a series of avatar elements into .avatar-group to group the elements. Instead of applying avatar sizing classes to every avatar in a group, just add .avatar-group-{lg|sm} to each .avatar-group

Change avatar color for functionality, check examples below.

Addon can be replaced to top-left or bottom-right of avatar element. Use .avatar-addon and extend with .avatar-addon-{top|bottom} to set placement. You can put badge or marker into avatar addon.