diff --git a/docs/src/pages/components/avatars/FallbackAvatars.js b/docs/src/pages/components/avatars/FallbackAvatars.js
new file mode 100644
index 00000000000000..808c5d3e812632
--- /dev/null
+++ b/docs/src/pages/components/avatars/FallbackAvatars.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+import { deepOrange } from '@material-ui/core/colors';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    '& > *': {
+      margin: theme.spacing(1),
+    },
+  },
+  orange: {
+    color: theme.palette.getContrastText(deepOrange[500]),
+    backgroundColor: deepOrange[500],
+  },
+}));
+
+export default function FallbackAvatars() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Avatar alt="Remy Sharp" src="/broken-image.jpg" className={classes.orange}>
+        B
+      </Avatar>
+      <Avatar alt="Remy Sharp" src="/broken-image.jpg" className={classes.orange} />
+      <Avatar src="/broken-image.jpg" />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/avatars/FallbackAvatars.tsx b/docs/src/pages/components/avatars/FallbackAvatars.tsx
new file mode 100644
index 00000000000000..174e0ee9cb2e96
--- /dev/null
+++ b/docs/src/pages/components/avatars/FallbackAvatars.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+import { deepOrange } from '@material-ui/core/colors';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+      '& > *': {
+        margin: theme.spacing(1),
+      },
+    },
+    orange: {
+      color: theme.palette.getContrastText(deepOrange[500]),
+      backgroundColor: deepOrange[500],
+    },
+  }),
+);
+
+export default function FallbackAvatars() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Avatar alt="Remy Sharp" src="/broken-image.jpg" className={classes.orange}>
+        B
+      </Avatar>
+      <Avatar alt="Remy Sharp" src="/broken-image.jpg" className={classes.orange} />
+      <Avatar src="/broken-image.jpg" />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/avatars/avatars.md b/docs/src/pages/components/avatars/avatars.md
index 6cd169f3f056b5..89cd96648dc56a 100644
--- a/docs/src/pages/components/avatars/avatars.md
+++ b/docs/src/pages/components/avatars/avatars.md
@@ -30,3 +30,13 @@ Icon avatars are created by passing an icon as `children`.
 If you need square or rounded avatars, use the `variant` prop.
 
 {{"demo": "pages/components/avatars/VariantAvatars.js"}}
+
+## Fallbacks
+
+The component will fallback if there is an error loading the avatar image, in this order, to:
+
+- the provided children
+- the first letter of tha `alt` text
+- a generic avatar icon
+
+{{"demo": "pages/components/avatars/FallbackAvatars.js"}}
diff --git a/packages/material-ui/src/Avatar/Avatar.js b/packages/material-ui/src/Avatar/Avatar.js
index bdca45b909cacb..b294fb1cfe0eb9 100644
--- a/packages/material-ui/src/Avatar/Avatar.js
+++ b/packages/material-ui/src/Avatar/Avatar.js
@@ -53,8 +53,8 @@ export const styles = theme => ({
   },
   /* Styles applied to the fallback icon */
   fallback: {
-    width: '80%',
-    height: '80%',
+    width: '75%',
+    height: '75%',
   },
 });
 
@@ -126,7 +126,7 @@ const Avatar = React.forwardRef(function Avatar(props, ref) {
         {...imgProps}
       />
     );
-  } else if (childrenProp) {
+  } else if (childrenProp != null) {
     children = childrenProp;
   } else if (hasImg && alt) {
     children = alt[0];
diff --git a/test/utils/createDOM.js b/test/utils/createDOM.js
index 3b9a8cedf71aa7..4e0abf622a598d 100644
--- a/test/utils/createDOM.js
+++ b/test/utils/createDOM.js
@@ -6,6 +6,7 @@ const whitelist = [
   // required for fake getComputedStyle
   'CSSStyleDeclaration',
   'Element',
+  'Image',
   'HTMLElement',
   'HTMLInputElement',
   'Performance',