A user profile image component.
All components are based on CodyFrame.
This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.
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