Search…
Search…
Avatars
Live
Avatars are visual representations of users, typically displayed as profile images or icons. They provide a quick way to identify people within an interface, from comments and chat to dashboards and contact lists.
AA
WCAG 2.1 accessibility compliant
Avatars
Live
Avatars are visual representations of users, typically displayed as profile images or icons. They provide a quick way to identify people within an interface, from comments and chat to dashboards and contact lists.
AA
WCAG 2.1 accessibility compliant
Avatars
Avatars are visual representations of users, typically displayed as profile images or icons. They provide a quick way to identify people within an interface, from comments and chat to dashboards and contact lists.
Live in Storybook
Live in Storybook
Live in Storybook
Figma Designs
Figma Designs
Figma Designs
By using avatars, you give users a clear and recognisable way to identify people or profiles at a glance, reducing cognitive load and making navigation more intuitive. When designed thoughtfully, avatars enhance the interface by adding visual context without overwhelming or distracting from the core content.
Do | Don't |
|---|---|
✅ Use a clear image to ensure clarity | ⛔️ Use an image that is distorted/blurred |
✅ Upload images @2x | ⛔️ Upload images @1x |
Variants
By using avatars, you give users a clear and recognisable way to identify people or profiles at a glance, reducing cognitive load and making navigation more intuitive. When designed thoughtfully, avatars enhance the interface by adding visual context without overwhelming or distracting from the core content.
Do | Don't |
|---|---|
✅ Use a clear image to ensure clarity | ⛔️ Use an image that is distorted/blurred |
✅ Upload images @2x | ⛔️ Upload images @1x |
Variants
By using avatars, you give users a clear and recognisable way to identify people or profiles at a glance, reducing cognitive load and making navigation more intuitive. When designed thoughtfully, avatars enhance the interface by adding visual context without overwhelming or distracting from the core content.
Do | Don't |
|---|---|
✅ Use a clear image to ensure clarity | ⛔️ Use an image that is distorted/blurred |
✅ Upload images @2x | ⛔️ Upload images @1x |
Variants
Continue reading
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.