diff --git a/stylesheets/_avatar.scss b/stylesheets/_avatar.scss
index 3f3fd2eda..5cad1f342 100644
--- a/stylesheets/_avatar.scss
+++ b/stylesheets/_avatar.scss
@@ -123,3 +123,10 @@
     bottom: 0px;
   }
 }
+
+.module-avatar-clickable {
+  transition: $session-transition-duration;
+  &:hover {
+    opacity: $session-subtle-factor;
+  }
+}
diff --git a/stylesheets/_session_constants.scss b/stylesheets/_session_constants.scss
index 11aeab0e6..19f1a3e54 100644
--- a/stylesheets/_session_constants.scss
+++ b/stylesheets/_session_constants.scss
@@ -153,8 +153,10 @@ $session-font-h4: 16px;
   color: subtle($color);
 }
 
+$session-subtle-factor: 0.6;
+
 @function subtle($color) {
-  @return rgba($color, 0.6);
+  @return rgba($color, $session-subtle-factor);
 }
 
 // //////////////////////////////////////////////
diff --git a/ts/components/Avatar.tsx b/ts/components/Avatar.tsx
index 6fdbbcb0a..f6249fb35 100644
--- a/ts/components/Avatar.tsx
+++ b/ts/components/Avatar.tsx
@@ -106,13 +106,15 @@ export class Avatar extends React.PureComponent<Props, State> {
     ) {
       throw new Error(`Size ${size} is not supported!`);
     }
+    const isClickable = !!this.props.onAvatarClick;
 
     return (
       <div
         className={classNames(
           'module-avatar',
           `module-avatar--${size}`,
-          hasImage ? 'module-avatar--with-image' : 'module-avatar--no-image'
+          hasImage ? 'module-avatar--with-image' : 'module-avatar--no-image',
+          isClickable && 'module-avatar-clickable'
         )}
         onClick={e => {
           this.onAvatarClickBound(e);