🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%


A user profile image component.

View Demo


All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

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


✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us