Use purple eye icon

 * square version for add-ons list

 * purple on white version for on-page

Modify sizing and margins to fit the non-square proportions of the
inline version (16x9).

bugzilla/common.js

@@ -33,7 +33,7 @@ function setVisible(visible) {
 
 function icon() {
   const img = document.createElement("img");
-  img.src = browser.runtime.getURL("icon.png");
+  img.src = browser.runtime.getURL("icon-inline.svg");
   img.title = "Blind Reviews";
   img.className = "br-icon";
   return img;

github/blind.css

@@ -14,10 +14,10 @@ body.br-blinded .br-author {
 li.js-notification.br-blind div.AvatarStack::after,
 body.br-blinded span.br-avatar {
   width: 16px;
-  height: 16px;
-  background: url("../icon.png") 0/contain;
+  height: 9px;
+  background: url("../icon-inline.svg") 0/contain;
   display: inline-block;
-  vertical-align: sub;
+  vertical-align: center;
 }
 body.br-blinded div.timeline-comment-avatar > span.br-avatar {
   width: 42px;
@@ -42,14 +42,14 @@ body.br-blinded #br-toggle div>button::before {
 
 #br-toggle > span > button {
   float: left;
-  width: 24px;
-  height: 24px;
-  margin: -1px 1px 0 0;
-  background: url(../icon.png) 0/contain;
+  width: 32px;
+  height: 18px;
+  margin: 2px 2px 0 0;
+  background: url(../icon-inline.svg) 0/contain;
 }
 
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   body.br-blinded span.br-avatar, #br-toggle > span > button {
-    background: url(chrome-extension://__MSG_@@extension_id__/icon.png) 0/contain;
+    background: url(chrome-extension://__MSG_@@extension_id__/icon-inline.svg) 0/contain;
   }
 }

manifest.json

@@ -14,13 +14,14 @@
   },
 
   "icons": {
-    "96": "icon.png"
+    "48": "icon-square.svg",
+    "96": "icon-square.svg"
   },
 
   "permissions": ["storage"],
 
   "web_accessible_resources": [
-    "icon.png"
+    "icon-inline.png"
   ],
 
   "content_scripts": [