G-Loot logo
Framework
v1.0.80

Avatars

Shapes

Shapes

Circle
Squircle
Diamond
Hexagon

Sizes

Extra large
Large
Medium
Small
Extra small
Tiny

Rank

Light
Gold
Silver
Bronze

Status

Online
Disabled
Error
Attention
Info
Radar

Simple

No border

With icon

Works with any icon

With placeholder

Works with any text
CG
CG
CG
CG
CG

Responsive sizes

You can change the size of the avatar based on the screen size using the following class name: .{xx}:avatar-{xx}.
{xx} can be xs, sm, md, lg, xl.

In this example, the tiny avatar will become small above 768px (md), large above 1024px (lg) and extra large above 1280px (xl).

Avatar group

Avatar group with counter

+12
+12
+12
+12