diff --git a/docs/src/pages/getting-started/templates/blog/Blog.js b/docs/src/pages/getting-started/templates/blog/Blog.js
index a9c5eef7d00d0c..fca9466cc7e4cd 100644
--- a/docs/src/pages/getting-started/templates/blog/Blog.js
+++ b/docs/src/pages/getting-started/templates/blog/Blog.js
@@ -3,6 +3,9 @@ import { makeStyles } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Grid from '@material-ui/core/Grid';
 import Container from '@material-ui/core/Container';
+import GitHubIcon from '@material-ui/icons/GitHub';
+import FacebookIcon from '@material-ui/icons/Facebook';
+import TwitterIcon from '@material-ui/icons/Twitter';
 import Header from './Header';
 import MainFeaturedPost from './MainFeaturedPost';
 import FeaturedPost from './FeaturedPost';
@@ -79,7 +82,11 @@ const sidebar = {
     { title: 'May 1999', url: '#' },
     { title: 'April 1999', url: '#' },
   ],
-  social: ['GitHub', 'Twitter', 'Facebook'],
+  social: [
+    { name: 'GitHub', icon: GitHubIcon },
+    { name: 'Twitter', icon: TwitterIcon },
+    { name: 'Facebook', icon: FacebookIcon },
+  ],
 };
 
 export default function Blog() {
diff --git a/docs/src/pages/getting-started/templates/blog/Sidebar.js b/docs/src/pages/getting-started/templates/blog/Sidebar.js
index df0282df917a85..57bf4c7fc83f40 100644
--- a/docs/src/pages/getting-started/templates/blog/Sidebar.js
+++ b/docs/src/pages/getting-started/templates/blog/Sidebar.js
@@ -41,7 +41,12 @@ export default function Sidebar(props) {
       </Typography>
       {social.map(network => (
         <Link display="block" variant="body1" href="#" key={network}>
-          {network}
+          <Grid container direction="row" spacing={1} alignItems="center">
+            <Grid item>
+              <network.icon />
+            </Grid>
+            <Grid item>{network.name}</Grid>
+          </Grid>
         </Link>
       ))}
     </Grid>