Stryda logo
Framework
v1.0.116

Avatars

Circle
Squircle
Diamond
Hexagon
2x extra large
Extra large
Large
Medium
Small
Extra small
Tiny
Light
Gold
Silver
Bronze
Premium
Online
Disabled
Error
Attention
Info
Radar
No border
Works with any icon
Works with any text
CG
CG
CG
CG
CG
avatar
avatar
avatar
avatar
avatar
avatar
avatar
300
avatar
300
avatar
279
avatar
255
avatar
155
avatar
55
avatar
5
avatar
Normal
35
35
Online
35
35
Offline
35
35

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).
+12
+12
+12
+12