diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
index 8e650eaff4..547b16e9ad 100644
--- a/res/css/views/messages/_MImageBody.scss
+++ b/res/css/views/messages/_MImageBody.scss
@@ -79,11 +79,17 @@ limitations under the License.
     .mx_HiddenImagePlaceholder_button {
         color: $accent-color;
 
-        img {
+        span.mx_HiddenImagePlaceholder_eye {
             margin-right: 8px;
+
+            background-color: $accent-color;
+            mask-image: url('$(res)/img/feather-customised/eye.svg');
+            display: inline-block;
+            width: 18px;
+            height: 14px;
         }
 
-        span {
+        span:not(.mx_HiddenImagePlaceholder_eye) {
             vertical-align: text-bottom;
         }
     }
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index e89c6d2bc9..640baa1966 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -496,7 +496,7 @@ export class HiddenImagePlaceholder extends React.PureComponent {
         return (
             <div className={className}>
                 <div className='mx_HiddenImagePlaceholder_button'>
-                    <img src={require("../../../../res/img/feather-customised/eye.svg")} width={17} height={12} />
+                    <span className='mx_HiddenImagePlaceholder_eye' />
                     <span>{_t("Show image")}</span>
                 </div>
             </div>