Avatars
The avatar component is designed for clarity, consistency, and adaptability. It supports multiple sizes and fallback options to handle user images, initials, or placeholders — all while remaining responsive, accessible, and visually aligned across your UI.
Avatar Images
Each avatar size is built as a separate component to ensure consistent rendering across breakpoints, as Framer’s support for size-based variants can be unreliable — this approach keeps spacing, alignment, and fallback behavior stable in every layout.
Sizes
Sizes are expressed using the T* keyword. T1 avatars are the smallest while T4 avatars are the biggest.
Avatar Fallbacks
Each avatar fallback size is built as a separate component to ensure consistent rendering across breakpoints, as Framer’s support for size-based variants can be unreliable — this approach keeps spacing, alignment, and fallback behavior stable in every layout.
Sizes
Sizes are expressed using the T* keyword. T1 fallbacks are the smallest while T4 fallbacks are the biggest.
Avatar Groups
Each avatar size is built as a separate component to ensure consistent rendering across breakpoints, as Framer’s support for size-based variants can be unreliable — this approach keeps spacing, alignment, and fallback behavior stable in every layout.
Sizes
Sizes are expressed using the T* keyword. T1 groups are the smallest while T4 groups are the biggest. Avatar group sizes are the same as regular avatar sizes.
Summary
The Avatars collection features multiple size-specific components designed for consistent, clear representation of users or profiles. Each avatar adapts seamlessly to your layout, ensuring visual harmony and accessibility across devices without relying on size-based variants.