diff --git a/src/app/atoms/avatar/Avatar.jsx b/src/app/atoms/avatar/Avatar.jsx
index 6120e55..fc46c25 100644
--- a/src/app/atoms/avatar/Avatar.jsx
+++ b/src/app/atoms/avatar/Avatar.jsx
@@ -10,16 +10,16 @@ import RawIcon from '../system-icons/RawIcon';
 import ImageBrokenSVG from '../../../../public/res/svg/image-broken.svg';
 import { avatarInitials } from '../../../util/common';
 
-function Avatar({
+const Avatar = React.forwardRef(({
   text, bgColor, iconSrc, iconColor, imageSrc, size,
-}) {
+}, ref) => {
   let textSize = 's1';
   if (size === 'large') textSize = 'h1';
   if (size === 'small') textSize = 'b1';
   if (size === 'extra-small') textSize = 'b3';
 
   return (
-    <div className={`avatar-container avatar-container__${size} noselect`}>
+    <div ref={ref} className={`avatar-container avatar-container__${size} noselect`}>
       {
         imageSrc !== null
           ? (
@@ -50,7 +50,7 @@ function Avatar({
       }
     </div>
   );
-}
+});
 
 Avatar.defaultProps = {
   text: null,