Skip to content

Avatar

Usage

See design usage guidelines

Avatars are user interface (UI) elements that display textual or visual content to represent a user’s identity.

Examples

Picture Avatar

Solid

html
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="small-avatar" alt="" srcset="">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="avatar" alt="" srcset="">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="large-avatar" alt="" srcset="">

Outlined

html
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="small-avatar avatar-outlined" alt="" srcset="">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="avatar avatar-outlined" alt="" srcset="">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="large-avatar avatar-outlined" alt="" srcset="">

Icon Avatar

Solid

useruseruser
html
<span class="u-icon u-icon-16">user</span>
<span class="u-icon u-icon-24">user</span>
<span class="u-icon u-icon-32">user</span>

Outlined

useruseruser
html
<span class="u-icon u-icon-16 avatar-outlined">user</span>
<span class="u-icon u-icon-24 avatar-outlined">user</span>
<span class="u-icon u-icon-32 avatar-outlined">user</span>

Text Avatar

Solid

GPGPGP
html
<span class="small-avatar-text">GP</span>
<span class="avatar-text">GP</span>
<span class="large-avatar-text">GP</span>

Outlined

GPGPGP
html
<span class="small-avatar-text avatar-outlined">GP</span>
<span class="avatar-text avatar-outlined">GP</span>
<span class="large-avatar-text avatar-outlined">GP</span>

Usage Guidelines