CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

All Projects


A user profile image component.

Copy: View demo


All components are built upon the CodyHouse Framework.

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

How to

The avatar component is a profile image often used in combo with additional elements (e.g., a status element) to provide additional info about a user.

📦 The images in the demo can be downloaded at

To change the size of the component, you can either use one of the size classes or edit the font-size. The width and height of the component will adapt accordingly.

The SVG file in the HTML of the component is the placeholder image (it's visible if no image is available). You can edit its appearance in SCSS:

.avatar__placeholder {
  width: inherit;
  height: inherit;
  background-color: var(--color-contrast-low); // icon background color
  color: var(--color-bg); // icon stroke color
  fill: transparent; // icon fill color


Bug Report & Feedback

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Be the first to know when we ship something cool!

Project duplicated.