# How We Roll – Chapter 2: Avatars

Welcome to How We Roll! This series is meant to help product owners, developers, and security professionals understand exactly how we implement (or, _roll_) authentication at Clerk.

## Chapter 2: Avatars

We're focusing on avatars early in the series because too many applications treat them as an afterthought. But at the biggest companies in the world – the ones with full-time identity teams working to streamline every aspect of authentication – it's common to see avatars used to "level-up" the user experience.

![Chapter 2: Avatars screenshot](./fbba56b5223a378e591a77fe17f8fa2ee8df4062-3860x2056.png "Google uses avatars within their sign-in flow and as a button throughout their applications.")

At Clerk, we operate like an outsourced identity team, and we _love_ bringing details like these to our customers. We obsess over authentication so our customers can focus on what truly differentiates their business.

Let's dive in to the full feature!

## Choosing avatars

There's an unfortunate reality when dealing with avatars: users don't like uploading their avatar directly. Forcing avatar upload during the sign-up flow would dramatically reduce conversion rates.

Thankfully, "social sign-in" providers like Google and Facebook provide access to the user's avatar through the [OpenID](https://en.wikipedia.org/wiki/OpenID) protocol. Moreover, when social sign-in is available, it's preferred by over 50% of users.

As a result, simply enabling _Sign in with Google_ leads to most users automatically having their choice of avatar.

Of course, should they choose, users can always modify their avatar through Clerk's `<UserProfile/>` component, or developers can build their own flow with the `useUser()` hook.

[View video](./a8da6a5905b920f3c4b0550516ced572d68ad7f1-800x438.mp4)

### Beautiful default avatars

In the event that users do not provide an avatar, directly or indirectly, Clerk generates beautiful default avatars for every user.

We offers a variety of options, with initials or silhouettes in the foreground, and marbling or a solid color in the background. The marbling effect is built with the fantastic open source project [Boring Avatars](https://boringavatars.com).

[View video](./1844a5d838771a58fe7af6ce67e9d4cdd8a51f83-960x596.mp4)

## Avatars for the `<UserButton/>`

The most common place avatars are seen today is the top-right of an application. Clicking it opens a menu to manage account settings or sign out.

Clerk provides this functionality through a component called `<UserButton/>`.

![How We Roll Avatars guide illustration](./d67e359f62393528c1ab5bd353aa8f45d2dc5499-1506x880.png)

To better indicate this is a button without modifying the avatar itself, we allow developers to add a "shimmer" effect on mouseover:

[View video](./bf28fb82892c31507108d24e943230f1875ea962-720x720.mp4)

## Avatars in the sign-in flow

Like Google, Clerk's `<SignIn/>` component displays the user's avatar during the sign-in flow.

This is primarily seen as a benefit to user experience, but it also has benefits in security. The idea is that users will grow accustomed to seeing their avatar during the sign-in process. If they ever see the wrong avatar, it will raise suspicion of a potential phishing attack.

![How We Roll Avatars guide illustration](./db878c278a10709c17dd3cfdd0f4ca7b0b5cf3a7-1298x1084.png)

## Summary

Though avatars may feel like a small feature, they bring a high degree of polish and professionalism to modern applications. Clerk's social sign-in integrations, beautiful default avatars, and prebuilt components all work together to make avatars easier than ever before.

## How We Roll Series Index

- [How We Roll – Chapter 1: Passwords](https://clerk.com/blog/how-we-roll-passwords.md)
- [How We Roll – Chapter 2: Avatars](https://clerk.com/blog/how-we-roll-avatars.md)
- [How We Roll – Chapter 3: Multifactor](https://clerk.com/blog/how-we-roll-multifactor.md)
- [How We Roll – Chapter 4: Email Verification](https://clerk.com/blog/how-we-roll-email-verification.md)
- [How We Roll – Chapter 5: Customization](https://clerk.com/blog/how-we-roll-customization.md)
- [How We Roll – Chapter 6: User Profile](https://clerk.com/blog/how-we-roll-user-profile.md)
- [How We Roll – Chapter 7: JWT Single Sign-On](https://clerk.com/blog/how-we-roll-jwt-sso.md)
- [How We Roll – Chapter 8: Sessions](https://clerk.com/blog/how-we-roll-sessions.md)
- [How We Roll – Chapter 9: Infrastructure](https://clerk.com/blog/how-we-roll-infrastructure.md)
- [How We Roll – Chapter 10: Roundup](https://clerk.com/blog/how-we-roll-roundup.md)