A user profile image component.
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.
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:
background-color: var(--color-contrast-low); // icon background color
color: var(--color-bg); // icon stroke color
fill: transparent; // icon fill color