How to Modify the Avatar in Bio Pages

Bio pages render the avatar as a perfect circle by default. A few lines of CSS in the Settings → Custom CSS box let you resize it, square it off, or give it gently rounded corners.

The default avatar

By default, bio pages present the avatar image as a circle. With some CSS tweaking — just a few lines in your Custom CSS box, inside the Settings tab of your bio page — you can change its size, its shape, or both. Every snippet below goes in the same place: open the bio page editor, click Settings, scroll down to Custom CSS, and paste the code.

Make the avatar bigger

The avatar is controlled by its width and height properties. Keep both at the same value so the proportions stay correct — otherwise the image stretches.

.avatar {
  width: 220px !important;
  height: 220px !important;
}

Adjust 220px up or down to suit your design. The !important tag is needed so the override beats the platform's default.

Make it square

To remove the circular shape and show the avatar as a plain square, override the border radius:

.avatar {
  width: 220px !important;
  height: 220px !important;
  border-radius: 0% !important;
}

Final touches — rounded corners on a square avatar

A square with softly rounded corners often looks cleaner than either extreme. Combine size + a small border radius:

.avatar {
  width: 220px !important;
  height: 220px !important;
  border-radius: 8px !important;
}

Try values between 4px and 24px to match the rounding of the other elements on your page (buttons, cards, etc.).

About the preview window

The preview window in the bio page editor will not show all these modifications. You can only see the modifications once you hit the Update button and view the live page. Don't worry if the editor preview looks wrong — the published page will reflect every CSS change correctly.