diff --git a/docs/src/pages/components/icons/FontAwesome.js b/docs/src/pages/components/icons/FontAwesome.js
index 813809db8c77fb..6cda13ae1aa36b 100644
--- a/docs/src/pages/components/icons/FontAwesome.js
+++ b/docs/src/pages/components/icons/FontAwesome.js
@@ -1,8 +1,7 @@
 import React from 'react';
-import clsx from 'clsx';
 import { loadCSS } from 'fg-loadcss';
 import { makeStyles } from '@material-ui/core/styles';
-import { red } from '@material-ui/core/colors';
+import { green } from '@material-ui/core/colors';
 import Icon from '@material-ui/core/Icon';
 
 const useStyles = makeStyles(theme => ({
@@ -11,12 +10,6 @@ const useStyles = makeStyles(theme => ({
       margin: theme.spacing(2),
     },
   },
-  iconHover: {
-    margin: theme.spacing(2),
-    '&:hover': {
-      color: red[800],
-    },
-  },
 }));
 
 export default function FontAwesome() {
@@ -34,13 +27,9 @@ export default function FontAwesome() {
       <Icon className="fa fa-plus-circle" />
       <Icon className="fa fa-plus-circle" color="primary" />
       <Icon className="fa fa-plus-circle" color="secondary" />
-      <Icon className="fa fa-plus-circle" color="action" />
-      <Icon
-        className={clsx(classes.iconHover, 'fa fa-plus-circle')}
-        color="error"
-        style={{ fontSize: 30 }}
-      />
-      <Icon className="fa fa-plus-circle" color="disabled" fontSize="large" />
+      <Icon className="fa fa-plus-circle" style={{ color: green[500] }} />
+      <Icon className="fa fa-plus-circle" fontSize="small" />
+      <Icon className="fa fa-plus-circle" style={{ fontSize: 30 }} />
     </div>
   );
 }
diff --git a/docs/src/pages/components/icons/FontAwesome.tsx b/docs/src/pages/components/icons/FontAwesome.tsx
index 94b4f7cfe6e3fb..c1a48a7c274738 100644
--- a/docs/src/pages/components/icons/FontAwesome.tsx
+++ b/docs/src/pages/components/icons/FontAwesome.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import clsx from 'clsx';
 import { loadCSS } from 'fg-loadcss';
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
-import { red } from '@material-ui/core/colors';
+import { green } from '@material-ui/core/colors';
 import Icon from '@material-ui/core/Icon';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -12,12 +11,6 @@ const useStyles = makeStyles((theme: Theme) =>
         margin: theme.spacing(2),
       },
     },
-    iconHover: {
-      margin: theme.spacing(2),
-      '&:hover': {
-        color: red[800],
-      },
-    },
   }),
 );
 
@@ -36,13 +29,9 @@ export default function FontAwesome() {
       <Icon className="fa fa-plus-circle" />
       <Icon className="fa fa-plus-circle" color="primary" />
       <Icon className="fa fa-plus-circle" color="secondary" />
-      <Icon className="fa fa-plus-circle" color="action" />
-      <Icon
-        className={clsx(classes.iconHover, 'fa fa-plus-circle')}
-        color="error"
-        style={{ fontSize: 30 }}
-      />
-      <Icon className="fa fa-plus-circle" color="disabled" fontSize="large" />
+      <Icon className="fa fa-plus-circle" style={{ color: green[500] }} />
+      <Icon className="fa fa-plus-circle" fontSize="small" />
+      <Icon className="fa fa-plus-circle" style={{ fontSize: 30 }} />
     </div>
   );
 }
diff --git a/docs/src/pages/components/icons/Icons.js b/docs/src/pages/components/icons/Icons.js
index bef05ee10c9e44..9415d93b4dd751 100644
--- a/docs/src/pages/components/icons/Icons.js
+++ b/docs/src/pages/components/icons/Icons.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { red } from '@material-ui/core/colors';
+import { green } from '@material-ui/core/colors';
 import Icon from '@material-ui/core/Icon';
 
 const useStyles = makeStyles(theme => ({
@@ -9,11 +9,6 @@ const useStyles = makeStyles(theme => ({
       margin: theme.spacing(2),
     },
   },
-  iconHover: {
-    '&:hover': {
-      color: red[800],
-    },
-  },
 }));
 
 export default function Icons() {
@@ -24,13 +19,9 @@ export default function Icons() {
       <Icon>add_circle</Icon>
       <Icon color="primary">add_circle</Icon>
       <Icon color="secondary">add_circle</Icon>
-      <Icon color="action">add_circle</Icon>
-      <Icon className={classes.iconHover} color="error" style={{ fontSize: 30 }}>
-        add_circle
-      </Icon>
-      <Icon color="disabled" fontSize="large">
-        add_circle
-      </Icon>
+      <Icon style={{ color: green[500] }}>add_circle</Icon>
+      <Icon fontSize="small">add_circle</Icon>
+      <Icon style={{ fontSize: 30 }}>add_circle</Icon>
     </div>
   );
 }
diff --git a/docs/src/pages/components/icons/Icons.tsx b/docs/src/pages/components/icons/Icons.tsx
index d6a18120a0ac8b..9fa7e8f7338f7b 100644
--- a/docs/src/pages/components/icons/Icons.tsx
+++ b/docs/src/pages/components/icons/Icons.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
-import { red } from '@material-ui/core/colors';
+import { green } from '@material-ui/core/colors';
 import Icon from '@material-ui/core/Icon';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -10,11 +10,6 @@ const useStyles = makeStyles((theme: Theme) =>
         margin: theme.spacing(2),
       },
     },
-    iconHover: {
-      '&:hover': {
-        color: red[800],
-      },
-    },
   }),
 );
 
@@ -26,13 +21,9 @@ export default function Icons() {
       <Icon>add_circle</Icon>
       <Icon color="primary">add_circle</Icon>
       <Icon color="secondary">add_circle</Icon>
-      <Icon color="action">add_circle</Icon>
-      <Icon className={classes.iconHover} color="error" style={{ fontSize: 30 }}>
-        add_circle
-      </Icon>
-      <Icon color="disabled" fontSize="large">
-        add_circle
-      </Icon>
+      <Icon style={{ color: green[500] }}>add_circle</Icon>
+      <Icon fontSize="small">add_circle</Icon>
+      <Icon style={{ fontSize: 30 }}>add_circle</Icon>
     </div>
   );
 }
diff --git a/docs/src/pages/components/icons/SvgIcons.js b/docs/src/pages/components/icons/SvgIcons.js
deleted file mode 100644
index 113a2a86abaf6b..00000000000000
--- a/docs/src/pages/components/icons/SvgIcons.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { blue, red } from '@material-ui/core/colors';
-import SvgIcon from '@material-ui/core/SvgIcon';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    '& > svg': {
-      margin: theme.spacing(2),
-    },
-  },
-  iconHover: {
-    '&:hover': {
-      color: red[800],
-    },
-  },
-}));
-
-function HomeIcon(props) {
-  return (
-    <SvgIcon {...props}>
-      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
-    </SvgIcon>
-  );
-}
-
-export default function SvgIcons() {
-  const classes = useStyles();
-
-  return (
-    <div className={classes.root}>
-      <HomeIcon />
-      <HomeIcon color="primary" />
-      <HomeIcon color="secondary" />
-      <HomeIcon color="action" />
-      <HomeIcon className={classes.iconHover} color="error" style={{ fontSize: 30 }} />
-      <HomeIcon color="disabled" fontSize="large" />
-      <HomeIcon
-        color="primary"
-        fontSize="large"
-        component={svgProps => {
-          return (
-            <svg {...svgProps}>
-              <defs>
-                <linearGradient id="gradient1">
-                  <stop offset="30%" stopColor={blue[400]} />
-                  <stop offset="70%" stopColor={red[400]} />
-                </linearGradient>
-              </defs>
-              {React.cloneElement(svgProps.children[0], {
-                fill: 'url(#gradient1)',
-              })}
-            </svg>
-          );
-        }}
-      />
-    </div>
-  );
-}
diff --git a/docs/src/pages/components/icons/SvgIcons.tsx b/docs/src/pages/components/icons/SvgIcons.tsx
deleted file mode 100644
index c1c48d2d8cae98..00000000000000
--- a/docs/src/pages/components/icons/SvgIcons.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
-import { blue, red } from '@material-ui/core/colors';
-import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      '& > svg': {
-        margin: theme.spacing(2),
-      },
-    },
-    iconHover: {
-      '&:hover': {
-        color: red[800],
-      },
-    },
-  }),
-);
-
-function HomeIcon(props: SvgIconProps) {
-  return (
-    <SvgIcon {...props}>
-      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
-    </SvgIcon>
-  );
-}
-
-export default function SvgIcons() {
-  const classes = useStyles();
-
-  return (
-    <div className={classes.root}>
-      <HomeIcon />
-      <HomeIcon color="primary" />
-      <HomeIcon color="secondary" />
-      <HomeIcon color="action" />
-      <HomeIcon className={classes.iconHover} color="error" style={{ fontSize: 30 }} />
-      <HomeIcon color="disabled" fontSize="large" />
-      <HomeIcon
-        color="primary"
-        fontSize="large"
-        component={(svgProps: SvgIconProps) => {
-          return (
-            <svg {...svgProps}>
-              <defs>
-                <linearGradient id="gradient1">
-                  <stop offset="30%" stopColor={blue[400]} />
-                  <stop offset="70%" stopColor={red[400]} />
-                </linearGradient>
-              </defs>
-              {React.cloneElement(
-                (svgProps.children as React.ReactNodeArray)[0] as React.ReactElement,
-                {
-                  fill: 'url(#gradient1)',
-                },
-              )}
-            </svg>
-          );
-        }}
-      />
-    </div>
-  );
-}
diff --git a/docs/src/pages/components/icons/SvgIconsColor.js b/docs/src/pages/components/icons/SvgIconsColor.js
new file mode 100644
index 00000000000000..e54e1e0e37df3a
--- /dev/null
+++ b/docs/src/pages/components/icons/SvgIconsColor.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { green } from '@material-ui/core/colors';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& > svg': {
+      margin: theme.spacing(2),
+    },
+  },
+}));
+
+function HomeIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+    </SvgIcon>
+  );
+}
+
+export default function SvgIconsColor() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <HomeIcon />
+      <HomeIcon color="primary" />
+      <HomeIcon color="secondary" />
+      <HomeIcon color="action" />
+      <HomeIcon color="disabled" />
+      <HomeIcon style={{ color: green[500] }} />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/icons/SvgIconsColor.tsx b/docs/src/pages/components/icons/SvgIconsColor.tsx
new file mode 100644
index 00000000000000..1cd02d0fa8717b
--- /dev/null
+++ b/docs/src/pages/components/icons/SvgIconsColor.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { green } from '@material-ui/core/colors';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      '& > svg': {
+        margin: theme.spacing(2),
+      },
+    },
+  }),
+);
+
+function HomeIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+    </SvgIcon>
+  );
+}
+
+export default function SvgIconsColor() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <HomeIcon />
+      <HomeIcon color="primary" />
+      <HomeIcon color="secondary" />
+      <HomeIcon color="action" />
+      <HomeIcon color="disabled" />
+      <HomeIcon style={{ color: green[500] }} />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/icons/SvgIconsSize.js b/docs/src/pages/components/icons/SvgIconsSize.js
new file mode 100644
index 00000000000000..d5d78711bc457f
--- /dev/null
+++ b/docs/src/pages/components/icons/SvgIconsSize.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& > svg': {
+      margin: theme.spacing(2),
+    },
+  },
+}));
+
+function HomeIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+    </SvgIcon>
+  );
+}
+
+export default function SvgIconsSize() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <HomeIcon fontSize="small" />
+      <HomeIcon />
+      <HomeIcon fontSize="large" />
+      <HomeIcon style={{ fontSize: 40 }} />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/icons/SvgIconsSize.tsx b/docs/src/pages/components/icons/SvgIconsSize.tsx
new file mode 100644
index 00000000000000..9c946bf381e647
--- /dev/null
+++ b/docs/src/pages/components/icons/SvgIconsSize.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      '& > svg': {
+        margin: theme.spacing(2),
+      },
+    },
+  }),
+);
+
+function HomeIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+    </SvgIcon>
+  );
+}
+
+export default function SvgIconsSize() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <HomeIcon fontSize="small" />
+      <HomeIcon />
+      <HomeIcon fontSize="large" />
+      <HomeIcon style={{ fontSize: 40 }} />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/icons/icons.md b/docs/src/pages/components/icons/icons.md
index b5fef3f966b2c8..bc02e572d2ed6a 100644
--- a/docs/src/pages/components/icons/icons.md
+++ b/docs/src/pages/components/icons/icons.md
@@ -15,7 +15,7 @@ Material-UI provides icons support in three ways:
 
 ## Material Icons
 
-Material Design has standardized over 1,000 official icons, each in five different "themes" (see below). For each SVG icon, we export the respective React component from the `@material-ui/icons` package. You can search the full list of these icons in our [built-in search page](/components/material-icons/).
+Material Design has standardized over 1,000 official icons, each in five different "themes" (see below). For each SVG icon, we export the respective React component from the @material-ui/icons package. You can [search the full list of these icons](/components/material-icons/).
 
 ### Usage
 
@@ -38,30 +38,64 @@ The safest is Option 1 but Option 2 can yield the best developer experience.
 Make sure you follow the [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the second approach.
 The configuration of a Babel plugin is encouraged.
 
-Each icon also has a "theme": `Filled` (default), `Outlined`, `Rounded`, `Two tone` and `Sharp`. If you want to import the icon component with a "theme" different than default, append the "theme" name to the icon name. For example `@material-ui/icons/Delete` icon with:
+Each icon also has a "theme": Filled (default), Outlined, Rounded, Two tone and Sharp. If you want to import the icon component with a theme other than default, append the theme name to the icon name. For example `@material-ui/icons/Delete` icon with:
 
-- `Filled` "theme" (default) is exported as `@material-ui/icons/Delete`,
-- `Outlined` "theme" is exported as `@material-ui/icons/DeleteOutlined`,
-- `Rounded` "theme" is exported as `@material-ui/icons/DeleteRounded`,
-- `Two tone` "theme" is exported as `@material-ui/icons/DeleteTwoTone`,
-- `Sharp` "theme" is exported as `@material-ui/icons/DeleteSharp`.
+- Filled theme (default) is exported as `@material-ui/icons/Delete`,
+- Outlined theme is exported as `@material-ui/icons/DeleteOutlined`,
+- Rounded theme is exported as `@material-ui/icons/DeleteRounded`,
+- Twotone theme is exported as `@material-ui/icons/DeleteTwoTone`,
+- Sharp theme is exported as `@material-ui/icons/DeleteSharp`.
 
-Note: The Material Design specification names the icons using "snake_case" naming (for example `delete_forever`, `add_a_photo`), while `@material-ui/icons` exports the respective icons using "PascalCase" naming (for example `DeleteForever`, `AddAPhoto`). There are three exceptions to this naming rule: `3d_rotation` exported as `ThreeDRotation`, `4k` exported as `FourK`, and `360` exported as `ThreeSixty`.
+> Note: The Material Design specification names the icons using "snake_case" naming (for example `delete_forever`, `add_a_photo`), while `@material-ui/icons` exports the respective icons using "PascalCase" naming (for example `DeleteForever`, `AddAPhoto`). There are three exceptions to this naming rule: `3d_rotation` exported as `ThreeDRotation`, `4k` exported as `FourK`, and `360` exported as `ThreeSixty`.
 
 {{"demo": "pages/components/icons/SvgMaterialIcons.js"}}
 
 ## SvgIcon
 
-If you need a custom SVG icon (not available in Material Icons) you should use the `SvgIcon` wrapper.
-The `SvgIcon` component takes the SVG `path` element as its child and converts it to a React component that displays this SVG icon, and allows the icon to be styled and respond to mouse events.
-SVG elements should be scaled for a 24x24px viewport.
+If you need a custom SVG icon (not available in the Material Icons [default set](/components/material-icons/)) you can use the `SvgIcon` wrapper.
+This component extends the native `<svg>` element:
 
-The resulting icon can be used as is,
-or included as a child for other Material-UI components that use icons.
-By default, an Icon will inherit the current text color.
-Optionally, you can set the icon color using one of the theme color properties: `primary`, `secondary`, `action`, `error` & `disabled`.
+- It comes with built-in accessibility.
+- SVG elements should be scaled for a 24x24px viewport, so the resulting icon can be used as is, or included as a child for other Material-UI components that use icons. (This can be customized with the `viewBox` attribute).
+- By default, the component inherits the current color.
+Optionally, you can apply one of the theme colors using the `color` prop.
+
+```jsx
+function HomeIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+    </SvgIcon>
+  );
+}
+```
+
+### Color
+
+{{"demo": "pages/components/icons/SvgIconsColor.js"}}
+
+### Size
 
-{{"demo": "pages/components/icons/SvgIcons.js"}}
+{{"demo": "pages/components/icons/SvgIconsSize.js"}}
+
+### Component prop
+
+You can use the `SvgIcon` wrapper even if your icons are saved the `.svg` format.
+[svgr](https://github.com/smooth-code/svgr) has loaders to import svg files and use them as React components. For instance, with webpack:
+
+**webpack.config.js**
+```js
+{
+  test: /\.svg$/,
+  use: ['@svgr/webpack'],
+}
+```
+
+```jsx
+import StarIcon from './star.svg';
+
+<SvgIcon component={StarIcon} viewBox="0 0 600 476.6" />
+```
 
 ### Libraries