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 iconstore.co/icons/flatflow-icons

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

Get our monthly recap with the latest CodyHouse news