diff --git a/client/src/components/helpers/avatar-renderer.tsx b/client/src/components/helpers/avatar-renderer.tsx
index 1c7d598795..fb847c83f9 100644
--- a/client/src/components/helpers/avatar-renderer.tsx
+++ b/client/src/components/helpers/avatar-renderer.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Image } from '@freecodecamp/react-bootstrap';
 import DefaultAvatar from '../../assets/icons/default-avatar';
 import { defaultUserImage } from '../../../../config/misc';
@@ -19,9 +19,22 @@ function AvatarRenderer({
   isTopContributor
 }: AvatarRendererProps): JSX.Element {
   const { t } = useTranslation();
+  const [isPictureValid, setIsPictureValid] = useState(true);
   const borderColor: string = borderColorPicker(isDonating, isTopContributor);
+  const onImageLoad = () => setIsPictureValid(true);
+  const onImageError = () => setIsPictureValid(false);
+
+  useEffect(() => {
+    const validationImage = document.createElement('img');
+    validationImage.src = picture;
+    validationImage.onload = onImageLoad;
+    validationImage.onerror = onImageError;
+  }, [picture]);
+
   const isPlaceHolderImage =
-    /example.com|identicon.org/.test(picture) || picture === defaultUserImage;
+    !isPictureValid ||
+    /example.com|identicon.org/.test(picture) ||
+    picture === defaultUserImage;
 
   return (
     <div className={`avatar-container ${borderColor}`}>