diff --git a/documentation/content/Connecting With Your Readers/social-profiles-sidebar-svg.md b/documentation/content/Connecting With Your Readers/social-profiles-sidebar-svg.md
index fc82be2a..f36981bd 100644
--- a/documentation/content/Connecting With Your Readers/social-profiles-sidebar-svg.md	
+++ b/documentation/content/Connecting With Your Readers/social-profiles-sidebar-svg.md	
@@ -17,8 +17,8 @@ social media profiles; inviting readers to engage with them else where on the
 web too. Most social widgets are loud and obtrusive. Their colors and placement
 takes away readers' attention from the actual content.
 
-<img class="align-right" style="width: 179px; height: 202px"
-src="{static}/images/social-profiles-sidebar-default-2019-08-12.png" alt="Social
+<img class="align-right" style="width: 35%;"
+src="{static}/images/social-profiles-sidebar-svg-default.png" alt="Social
 Profiles in the Sidebar" />
 
 Elegant understands the importance of readers engagement but it makes sure
@@ -26,20 +26,19 @@ not to push author's _"online social karma"_ down readers' throats.
 
 Elegant displays the widget in the sidebar. Each icon is a link to a social
 media profile with an optional title attribute. Icons use muted color which
-changes when user hovers over them.
+changes when user hovers over them. On hover, icon is also scaled up in size.
 
 Here is an example of hovering over
 LinkedIn <!-- yaspeller ignore -->
 icon.
 
-<img style="width: 177px; height: 201px"
-src="{static}/images/social-profiles-sidebar-hover-linkedin-2019-08-12.png" alt="Hover over LinkedIn in the Sidebar" />
+<img style="width:35%;"
+src="{static}/images/social-profiles-sidebar-svg-hover-linkedin.png" alt="Hover over LinkedIn in the Sidebar" />
 
-Following image shows what each of them look like when user hovers over them.
+Following image shows these icons in color.
 
-<img style="width: 177px; height: 205px"
-src="{static}/images/social-profiles-sidebar-hover-2019-08-12.png" alt="Hover over all Social
-Profiles in the Sidebar" />
+<img style="width:35%;"
+src="{static}/images/social-profiles-sidebar-svg-hover.png" alt="Social Profiles in color" />
 
 These SVG icons are [Super Tiny](https://github.com/edent/SuperTinyIcons). Most of them have sizes less than 500 bytes, and none of them exceeds 1 K bytes in size. This gives you increased website speed.
 
diff --git a/documentation/content/images/social-profiles-sidebar-default-2019-08-12.png b/documentation/content/images/social-profiles-sidebar-default-2019-08-12.png
deleted file mode 100644
index f48ae566..00000000
Binary files a/documentation/content/images/social-profiles-sidebar-default-2019-08-12.png and /dev/null differ
diff --git a/documentation/content/images/social-profiles-sidebar-hover-2019-08-12.png b/documentation/content/images/social-profiles-sidebar-hover-2019-08-12.png
deleted file mode 100644
index c40ce8c7..00000000
Binary files a/documentation/content/images/social-profiles-sidebar-hover-2019-08-12.png and /dev/null differ
diff --git a/documentation/content/images/social-profiles-sidebar-hover-linkedin-2019-08-12.png b/documentation/content/images/social-profiles-sidebar-hover-linkedin-2019-08-12.png
deleted file mode 100644
index ffa1d9c1..00000000
Binary files a/documentation/content/images/social-profiles-sidebar-hover-linkedin-2019-08-12.png and /dev/null differ
diff --git a/documentation/content/images/social-profiles-sidebar-svg-default.png b/documentation/content/images/social-profiles-sidebar-svg-default.png
new file mode 100644
index 00000000..2d6c935c
Binary files /dev/null and b/documentation/content/images/social-profiles-sidebar-svg-default.png differ
diff --git a/documentation/content/images/social-profiles-sidebar-svg-hover-linkedin.png b/documentation/content/images/social-profiles-sidebar-svg-hover-linkedin.png
new file mode 100644
index 00000000..e6664f82
Binary files /dev/null and b/documentation/content/images/social-profiles-sidebar-svg-hover-linkedin.png differ
diff --git a/documentation/content/images/social-profiles-sidebar-svg-hover.png b/documentation/content/images/social-profiles-sidebar-svg-hover.png
new file mode 100644
index 00000000..fce4d29c
Binary files /dev/null and b/documentation/content/images/social-profiles-sidebar-svg-hover.png differ
diff --git a/static/css/elegant.css b/static/css/elegant.css
index b1f0f4c7..e8b0c68e 100644
--- a/static/css/elegant.css
+++ b/static/css/elegant.css
@@ -306,15 +306,20 @@ ul.articles-timeline .previous-article {
 }
 div#sidebar-social-link a svg {
   filter: saturate(0%) brightness(0.7);
-  height: 30px;
-  width: 30px;
-  margin-right: 4px;
+  height: 20px;
+  width: 20px;
+  margin-right: 3px;
+  transition: all 0.2s ease-in-out;
+  z-index: 0;
+  position: relative;
 }
 div#sidebar-social-link a {
   text-decoration: none;
 }
 div#sidebar-social-link a svg:hover {
   filter: none;
+  transform: scale(2.5);
+  z-index: 1;
 }
 ul.multi-parts-list a {
   color: black;