---
title: Avatars
layout: default
description: A page showcasing different avatar styles and examples.
permalink: /avatars.html
page-menu: base.avatars
page-header: Avatars
---

<div class="row row-cards">
	<div class="col-4">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Default avatar</h2>
				{% include "ui/avatar.html" %}
			</div>
		</div>
	</div>
	<div class="col-4">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Avatar with icon</h2>

				{% assign icon-icons = "user,settings,car,balloon,users,users-group,apps,ghost" | split: "," %}
				<div class="avatar-list">
					{% for icon in icon-icons %}
					{% include "ui/avatar.html" icon=icon %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
	<div class="col-4">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Avatar with icon</h2>

				<div class="avatar-list">
					{% for color in site.colors %}
					{% include "ui/avatar.html" icon="user" color=color[0] %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
	<div class="col-4">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Simple avatar</h2>
				<div class="avatar-list">
					{% for person in people limit: 8 -%}
					{% include "ui/avatar.html" person=person %}
					{%- endfor %}
				</div>
			</div>
		</div>
	</div>
	<div class="col-4">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Avatar placeholder</h2>
				<div class="avatar-list">
					{% for person in people limit: 8 %}
					{% assign placeholder = person.full_name | first_letters %}
					{% include "ui/avatar.html" placeholder=placeholder %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
	<div class="col-4">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Avatar shapes</h2>
				<div class="avatar-list">
					{% include "ui/avatar.html" %}
					{% include "ui/avatar.html" class="rounded-circle" %}
					{% include "ui/avatar.html" class="rounded-0" %}
				</div>
			</div>
		</div>
	</div>
	<div class="col-6">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Avatar sizes</h2>
				<div class="row">
					<div class="col-6">
						<div class="avatar-list">
							{% include "ui/avatar.html" size="xxs" %}
							{% include "ui/avatar.html" size="xs" %}
							{% include "ui/avatar.html" size="sm" %}
							{% include "ui/avatar.html" size="md" %}
							{% include "ui/avatar.html" size="lg" %}
							{% include "ui/avatar.html" size="xl" %}
						</div>
					</div>
					<div class="col-6">
						<div class="avatar-list">
							{% include "ui/avatar.html" placeholder="PK" size="xxs" %}
							{% include "ui/avatar.html" placeholder="PK" size="xs" %}
							{% include "ui/avatar.html" placeholder="PK" size="sm" %}
							{% include "ui/avatar.html" placeholder="PK" size="md" %}
							{% include "ui/avatar.html" placeholder="PK" size="lg" %}
							{% include "ui/avatar.html" placeholder="PK" size="xl" %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-6">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Avatar lists</h2>
				<div class="row g-3">
					{% assign sizes = "xxs,xs,sm,md,lg" | split: "," %}
					{% for size in sizes %}
					<div class="col-6">
						<div class="avatar-list avatar-list-stacked avatar-list-{{ size }}">
							{% for person in people limit: 5 %}
							{% include "ui/avatar.html" person=person %}
							{% endfor %}
							{% include "ui/avatar.html" icon="plus" link %}
						</div>
					</div>
					<div class="col-6">
						<div class="avatar-list avatar-list-stacked avatar-list-{{ size }}">
							{% for person in people limit: 5 %}
							{% include "ui/avatar.html" person=person class="rounded-circle" %}
							{% endfor %}
							{% include "ui/avatar.html" icon="plus" link class="rounded-circle" %}
						</div>
					</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
	<div class="col-4">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Avatar placeholder</h2>
				{% assign sizes = "xxs,xs,sm,md,lg,xl,2xl" | split: "," %}
				{% for size in sizes %}
				{% include "ui/avatar-upload.html" size=size %}
				{% endfor %}
			</div>
		</div>
	</div>
	<div class="col-4">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Avatar statuses</h2>
				{% assign colors = "red,green,blue,yellow,secondary" | split: "," %}
				{% for color in colors %}
				{% include "ui/avatar.html" person-id=forloop.index class="rounded-circle" status=color %}
				{% endfor %}
			</div>
		</div>
	</div>
	<div class="col-4">
		<div class="card">
			<div class="card-body">
				<h2 class="card-title">Avatar brands</h2>
				{% assign brands = "netflix,amazon,messenger,figma,twitch" | split: "," %}
				{% for brand in brands %}
				{% include "ui/avatar.html" person-id=forloop.index brand=brand %}
				{% endfor %}
			</div>
		</div>
	</div>
</div>