diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css
index 7d4239985f..c0d5991e0b 100644
--- a/scripts/system/html/css/SnapshotReview.css
+++ b/scripts/system/html/css/SnapshotReview.css
@@ -125,36 +125,21 @@ input[type=button].naked:active {
     font-family: Raleway-SemiBold;
     font-size: 14px;
     color: white;
-    width: 60px;
+    width: 75px;
     height: 100%;
-    margin-right: 10px;
-    margin-bottom: 15px;
+    margin-bottom: 0px;
+}
+.showShareButtonsButtonDiv.active:hover {
+    background-color: rgba(0, 0, 0, 0.45);
+    background-size: 2px;
 }
 .showShareButtonsButtonDiv > label {
     text-shadow: 2px 2px 3px #000000;
-    margin-bottom: -10px;
+    margin-bottom: -14px;
     margin-left: 12px;
 }
-.showShareButton.active {
-    border-color: #00b4ef;
-    border-width: 3px;
-    background-color: white;
-}
-.showShareButton.active:hover {
-    background-color: #afafaf;
-}
-.showShareButton.active:active {
-    background-color: white;
-}
-.showShareButton.inactive {
-    border-width: 0;
-    background-color: white;
-}
-.showShareButton.inactive:hover {
-    background-color: #afafaf;
-}
-.showShareButton.inactive:active {
-    background-color: white;
+.showShareButtonsButtonDiv:hover > label {
+    text-shadow: none;
 }
 .showShareButtonDots {
     display: block;
@@ -164,56 +149,44 @@ input[type=button].naked:active {
     font-size: 60px;
     position: absolute;
     left: 6px;
-    bottom: 42px;
+    bottom: 32px;
     color: white;
     pointer-events: none;
 }
 .shareButtons {
     display: flex;
-    align-items: center;
-    margin-left: 0;
-    margin-bottom: 15px;
-    height: 100%;
+    align-items: flex-end;
+    height: 40px;
     width: calc(100% - 60px);
+    margin-bottom: 25px;
+    margin-left: 0;
+}
+.shareButtons img {
+    width: 40px;
+    height: 40px;
+}
+.shareButton {
+    width: 40px;
+    height: 40px;
+    display: inline-block;
 }
 .blastToConnections {
-    text-align: left;
-    margin-right: 20px;
-    height: 29px;
+    background-image: url(../img/fb_logo.png);
 }
 .shareWithEveryone {
     background: #DDDDDD url(../img/shareToFeed.png) no-repeat scroll center;
-    border-width: 0px;
-    text-align: left;
-    margin-right: 8px;
-    height: 29px;
-    width: 30px;
-    border-radius: 3px;
-}
-.facebookButton {
-    background-image: url(../img/fb_logo.png);
-    width: 29px;
-    height: 29px;
-    display: inline-block;
-    margin-right: 8px;
-}
-.twitterButton {
-    background-image: url(../img/twitter_logo.png);
-    width: 29px;
-    height: 29px;
-    display: inline-block;
-    margin-right: 8px;
-    border-radius: 3px;
 }
 .shareControlsHelp {
     height: 25px;
     line-height: 25px;
     position: absolute;
     bottom: 0;
-    left: 65px;
+    left: 73px;
     right: 0;
     font-family: Raleway-Regular;
-    font-weight: 400;
+    font-weight: 500;
+    padding-left: 8px;
+    color: white;
 }
 /*
 // END styling of share overlay
diff --git a/scripts/system/html/img/blast_icon.svg b/scripts/system/html/img/blast_icon.svg
new file mode 100644
index 0000000000..31df8e7f53
--- /dev/null
+++ b/scripts/system/html/img/blast_icon.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M39.3,25.9c1.6,4.2,3.2,8.4,4.8,12.5c0.1,0.3,0.2,0.6,0,0.9c-0.3,0.3-0.6,0.3-1,0.2c-4-0.8-8.1-1.7-12.1-2.5
+	c-0.5-0.1-1-0.1-1.5,0.1c-0.5,0.2-1,0.4-1.5,0.6c-0.8,0.3-0.9,0.7-0.4,1.4c2.1,2.7,4.2,5.5,6.3,8.2c0.1,0.2,0.2,0.3,0.3,0.5
+	c0.2,0.4,0.1,0.7-0.3,1c-0.1,0.1-0.3,0.2-0.5,0.2c-1.5,0.6-3,1.1-4.4,1.7c-0.8,0.3-1,0.3-1.5-0.4c-2.3-3-4.6-5.9-6.9-8.9
+	c-0.5-0.6-0.6-0.6-1.3-0.4c-0.3,0.1-0.6,0.2-0.8,0.3c-1,0.3-2-0.1-2.3-1.1c-1.2-3.2-2.5-6.5-3.7-9.7c-0.4-1.1,0-2,1.1-2.5
+	c0.9-0.4,1.9-0.7,2.8-1.1c2.7-1,5.3-2,8-3c0.5-0.2,0.9-0.5,1.2-0.9c2.4-3.3,4.9-6.6,7.4-9.9c0.2-0.3,0.4-0.5,0.8-0.5
+	c0.4,0,0.5,0.4,0.7,0.7C36.1,17.5,37.7,21.7,39.3,25.9z"/>
+<path class="st0" d="M38.2,15.6c-0.2,0-0.4-0.1-0.6-0.2c-0.6-0.3-0.7-1.1-0.4-1.6l3.7-6.1C41.3,7.1,42,7,42.6,7.3
+	c0.6,0.3,0.7,1.1,0.4,1.6l-3.7,6.1C39,15.4,38.6,15.6,38.2,15.6z"/>
+<path class="st0" d="M53.1,36.7c-0.1,0-0.2,0-0.3,0l-7.4-1.6c-0.6-0.1-1-0.8-0.9-1.4c0.1-0.6,0.8-1,1.4-0.9l7.4,1.6
+	c0.6,0.1,1,0.8,0.9,1.4C54.1,36.4,53.6,36.7,53.1,36.7z"/>
+<path class="st0" d="M42.5,24.8c-0.4,0-0.9-0.3-1.1-0.7c-0.3-0.6,0-1.3,0.6-1.6l7.5-3.5c0.6-0.3,1.3,0,1.6,0.6
+	c0.3,0.6,0,1.3-0.6,1.6L43,24.7C42.8,24.8,42.7,24.8,42.5,24.8z"/>
+</svg>
diff --git a/scripts/system/html/img/fb_icon.svg b/scripts/system/html/img/fb_icon.svg
new file mode 100644
index 0000000000..6d67d17bb2
--- /dev/null
+++ b/scripts/system/html/img/fb_icon.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M22.3,32c1.9,0,3.8,0,5.8,0c0.4,0,0.4,0,0.4,0.4c0,6,0,12.1,0,18.1h7.8c0-6,0-12.1,0-18.1c0-0.4,0-0.4,0.4-0.4
+	c1.9,0,3.8,0,5.8,0c0.3,0,0.3,0,0.4-0.3c0.2-1.2,0.3-2.5,0.5-3.7c0.1-1.2,0.3-2.3,0.4-3.5h-7.4c0-0.1,0-0.2,0-0.3c0-1.6,0-3.3,0-4.9
+	c0-0.4,0.1-0.8,0.2-1.2c0.3-1.1,1-1.7,2.1-1.9c0.5-0.1,1.1-0.1,1.6-0.1c1.1,0,2.3,0,3.4,0c0.3,0,0.3-0.1,0.3-0.3c0-2,0-4.1,0-6.1
+	c0-0.2-0.1-0.3-0.3-0.4c-2-0.2-4-0.3-6-0.2c-2.2,0.1-4.2,0.7-6,2.1c-1.5,1.3-2.4,2.9-2.8,4.8c-0.3,1-0.3,2.1-0.3,3.2
+	c0,1.7,0,3.4,0,5v0.4h-0.3c-2,0-3.9,0-5.9,0c-0.3,0-0.3,0.1-0.3,0.3c0,2.3,0,4.6,0,6.9C22,32,22,32,22.3,32z"/>
+</svg>
diff --git a/scripts/system/html/img/fb_logo.png b/scripts/system/html/img/fb_logo.png
deleted file mode 100644
index 1de20bacd8..0000000000
Binary files a/scripts/system/html/img/fb_logo.png and /dev/null differ
diff --git a/scripts/system/html/img/fb_logo72.png b/scripts/system/html/img/fb_logo72.png
deleted file mode 100644
index 8e3a2370dd..0000000000
Binary files a/scripts/system/html/img/fb_logo72.png and /dev/null differ
diff --git a/scripts/system/html/img/hifi_icon.svg b/scripts/system/html/img/hifi_icon.svg
new file mode 100644
index 0000000000..acbb98a3b3
--- /dev/null
+++ b/scripts/system/html/img/hifi_icon.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M12,52.3c6.5,0,13.2,0,20.2,0c6.5,0,13.4,0,20.6,0c3.5,0,5-1.6,5-5.6c0-10.2,0-20.5,0-30.7c0-4-1.3-5.5-5-5.5
+	c-4.8,0-9.6,0-14.4,0l-5.9,0c-2,0-4,0-6,0c-4.8,0-9.7,0-14.5,0c-3.5,0-4.9,1.5-4.9,5.5c0,10.3,0,20.6,0,30.9
+	C7.1,50.6,8.6,52.3,12,52.3z M41.9,43.3C41.9,43.3,41.9,43.3,41.9,43.3c0.1-0.1,0.1-0.1,0.1-0.2c1.4-1.5,2.8-3,4.3-4.6l0.8-0.9
+	c0.6,0.6,1.1,1.2,1.7,1.8c1.8,1.9,3.7,3.9,5.4,6c0.2,0.3,0.3,1.2,0,2.7c-0.1,0.1-0.5,0.2-1.5,0.4c-4.4,0.9-7.7-0.6-10.2-4.5
+	C42.4,43.8,42.2,43.5,41.9,43.3z M54.5,32.1c0,2.7,0,5.5,0,8.2L53.3,39c-1.4-1.5-2.8-3-4.2-4.4c-1.7-1.8-2.3-1.8-3.9,0
+	c-1.4,1.5-2.8,3-4.2,4.5l-1.5,1.6l-3.4-3.6c-3.4-3.7-6.8-7.3-10.2-10.9c-1.1-1.2-1.8-1.8-2.4-1.8c-0.6,0-1.3,0.6-2.4,1.8
+	c-2.6,2.8-5.4,5.5-8.1,8.4l-3,2.9v-4.4c0-1.6,0.2-3.2,0.2-4.8c0-4.1,0.1-8.4,0.1-12.5c0-0.7,0.1-1.1,0.3-1.3
+	c0.2-0.2,0.6-0.3,1.2-0.3c13.7,0,27.3,0,41.2,0c0.5,0,1,0,1.2,0.3c0.1,0.2,0.2,0.5,0.2,0.9C54.5,20.9,54.5,26.6,54.5,32.1z
+	 M12.7,40.2c2.7-2.7,5.2-5.4,7.9-8.3c0.9-1,1.9-2.1,2.9-3.1L42,48.5c-0.2,0-0.4,0-0.6,0c-9.6,0-19.3,0-28.9,0c-0.8,0-1.5,0-1.7-0.2
+	c-0.2-0.2-0.2-1-0.3-2l0-0.1C10.2,43.7,10.9,42,12.7,40.2z"/>
+<path class="st0" d="M37,23.7c0,2.1,1.4,3.8,3.3,3.8c1.9,0,3.4-1.6,3.4-3.7c0-2.1-1.4-3.8-3.3-3.8C38.5,19.9,37,21.6,37,23.7z"/>
+</svg>
diff --git a/scripts/system/html/img/shareIcon.png b/scripts/system/html/img/shareIcon.png
deleted file mode 100644
index 0486ac9202..0000000000
Binary files a/scripts/system/html/img/shareIcon.png and /dev/null differ
diff --git a/scripts/system/html/img/shareToFeed.png b/scripts/system/html/img/shareToFeed.png
deleted file mode 100644
index f681c49d8f..0000000000
Binary files a/scripts/system/html/img/shareToFeed.png and /dev/null differ
diff --git a/scripts/system/html/img/twitter_icon.svg b/scripts/system/html/img/twitter_icon.svg
new file mode 100644
index 0000000000..0393d963f2
--- /dev/null
+++ b/scripts/system/html/img/twitter_icon.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M13.1,43.9c4.5,0,8.2-0.9,11.8-3.6c-3.7-0.7-6.2-2.3-7.6-5.5c0.9-0.2,1.7-0.3,2.9-0.6c-3.6-1.7-5.8-4-6.2-7.9
+	c1.1,0.2,2,0.4,3.6,0.8c-3.3-3.5-4.5-6.9-2.5-11.1c4.8,4.9,10.2,8.2,16.6,8.5c0.7-2.3,1-4.6,2-6.4c2.2-3.9,7.4-5.2,11-2.6
+	c2,1.4,3.6,1.2,5.5,0.4c0.4-0.2,0.7-0.2,1.7-0.5c-1.1,1.5-1.8,2.5-2.7,3.8c1.1-0.1,2-0.3,2.9-0.4c0,0.2,0.1,0.3,0,0.4
+	c-2.6,3.4-2.9,4-3.8,8.9c-3.1,15.7-19.7,23.9-34,16.7C14.2,44.6,13.9,44.4,13.1,43.9z"/>
+</svg>
diff --git a/scripts/system/html/img/twitter_logo.png b/scripts/system/html/img/twitter_logo.png
deleted file mode 100644
index 59fd027c2a..0000000000
Binary files a/scripts/system/html/img/twitter_logo.png and /dev/null differ
diff --git a/scripts/system/html/img/twitter_logo72.png b/scripts/system/html/img/twitter_logo72.png
deleted file mode 100644
index 862f245228..0000000000
Binary files a/scripts/system/html/img/twitter_logo72.png and /dev/null differ
diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js
index 5045f1a5e9..117e0d568f 100644
--- a/scripts/system/html/js/SnapshotReview.js
+++ b/scripts/system/html/js/SnapshotReview.js
@@ -90,7 +90,7 @@ function selectImageToShare(selectedID, isSelected) {
         imageContainer.style.outline = "4px solid #00b4ef";
         imageContainer.style.outlineOffset = "-4px";
 
-        shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
+        shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.45)";
 
         shareButtonsDiv.style.visibility = "visible";
         shareBarHelp.style.visibility = "visible";
@@ -136,11 +136,11 @@ function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled
         '</div>' +
         '<div class="shareButtons" id="' + shareButtonsDivID + '" style="visibility:hidden">';
     if (canBlast) {
-        shareBarInnerHTML += '<input type="button"' + (blastButtonDisabled ? ' disabled' : '') + ' class="blastToConnections blueButton" id="' + blastToConnectionsButtonID + '" value="BLAST TO MY CONNECTIONS" onmouseover="shareButtonHovered(\'blast\', ' + parentID + ')" onclick="blastToConnections(' + parentID + ', ' + isGif + ')" />';
+        shareBarInnerHTML += '<div class="shareButton blastToConnections' + (hifiButtonDisabled ? ' disabled' : 'enabled') + '" id="' + blastToConnectionsButtonID + '" onmouseover="shareButtonHovered(\'blast\', ' + parentID + ')" onclick="blastToConnections(' + parentID + ', ' + isGif + ')"><img src="img/blast_icon.svg"></div>';
     }
-    shareBarInnerHTML += '<input type="button"' + (hifiButtonDisabled ? ' disabled' : '') + ' class="shareWithEveryone" id="' + shareWithEveryoneButtonID + '" onmouseover="shareButtonHovered(\'hifi\', ' + parentID + ')" onclick="shareWithEveryone(' + parentID + ', ' + isGif + ')" />' +
-            '<a class="facebookButton" id="' + facebookButtonID + '" onmouseover="shareButtonHovered(\'facebook\', ' + parentID + ')" onclick="shareButtonClicked(\'facebook\', ' + parentID + ')"></a>' +
-            '<a class="twitterButton" id="' + twitterButtonID + '" onmouseover="shareButtonHovered(\'twitter\', ' + parentID + ')" onclick="shareButtonClicked(\'twitter\', ' + parentID + ')"></a>' +
+    shareBarInnerHTML += '<div class="shareButton shareWithEveryone' + (hifiButtonDisabled ? ' disabled' : 'enabled') + '" id="' + shareWithEveryoneButtonID + '" onmouseover="shareButtonHovered(\'hifi\', ' + parentID + ')" onclick="shareWithEveryone(' + parentID + ', ' + isGif + ')"><img src="img/hifi_icon.svg"></div>' +
+            '<a class="shareButton facebookButton" id="' + facebookButtonID + '" onmouseover="shareButtonHovered(\'facebook\', ' + parentID + ')" onclick="shareButtonClicked(\'facebook\', ' + parentID + ')"><img src="img/fb_icon.svg"></a>' +
+            '<a class="shareButton twitterButton" id="' + twitterButtonID + '" onmouseover="shareButtonHovered(\'twitter\', ' + parentID + ')" onclick="shareButtonClicked(\'twitter\', ' + parentID + ')"><img src="img/twitter_icon.svg"></a>' +
         '</div>';
 
     shareBar.innerHTML = shareBarInnerHTML;
@@ -214,16 +214,16 @@ function showUploadingMessage(selectedID, destination) {
     var socialIcon = document.createElement("img");
     switch (destination) {
         case 'blast':
-            socialIcon.src = "img/shareIcon.png";
+            socialIcon.src = "img/blast_icon.svg";
             break;
         case 'hifi':
-            socialIcon.src = "img/shareToFeed.png";
+            socialIcon.src = "img/hifi_icon.svg";
             break;
         case 'facebook':
-            socialIcon.src = "img/fb_logo72.png";
+            socialIcon.src = "img/fb_icon.svg";
             break;
         case 'twitter':
-            socialIcon.src = "img/twitter_logo72.png";
+            socialIcon.src = "img/twitter_icon.svg";
             break;
     }
     uploadingMessage.appendChild(socialIcon);
@@ -330,20 +330,34 @@ function shareButtonHovered(destination, selectedID) {
     if (selectedID.id) {
         selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
     }
-    var shareBarHelp = document.getElementById(selectedID + "shareBarHelp");
+    var shareBarHelp = document.getElementById(selectedID + "shareBarHelp"),
+        shareButtonsDiv = document.getElementById(selectedID + "shareButtonsDiv").childNodes,
+        itr;
+
+    for (itr = 0; itr < shareButtonsDiv.length; itr += 1) {
+        shareButtonsDiv[itr].style.backgroundColor = "rgba(0, 0, 0, 0)";
+    }
 
     switch (destination) {
         case 'blast':
             shareBarHelp.style.backgroundColor = "#EA4C5F";
+            shareBarHelp.innerHTML = "Blast to my connections";
+            document.getElementById(selectedID + "blastToConnectionsButton").style.backgroundColor = "#EA4C5F";
             break;
         case 'hifi':
             shareBarHelp.style.backgroundColor = "#1FC6A6";
+            shareBarHelp.innerHTML = "Share in Snapshots Feed";
+            document.getElementById(selectedID + "shareWithEveryoneButton").style.backgroundColor = "#1FC6A6";
             break;
         case 'facebook':
             shareBarHelp.style.backgroundColor = "#3C58A0";
+            shareBarHelp.innerHTML = "Share on Facebook";
+            document.getElementById(selectedID + "facebookButton").style.backgroundColor = "#3C58A0";
             break;
         case 'twitter':
             shareBarHelp.style.backgroundColor = "#00B4EE";
+            shareBarHelp.innerHTML = "Share on Twitter";
+            document.getElementById(selectedID + "twitterButton").style.backgroundColor = "#00B4EE";
             break;
     }
 }