diff --git a/resources/www/common/images/icons/file-edit-hover.png b/resources/www/common/images/icons/file-edit-hover.png
new file mode 100644
index 0000000000..376590d59c
Binary files /dev/null and b/resources/www/common/images/icons/file-edit-hover.png differ
diff --git a/resources/www/common/images/icons/file-edit.png b/resources/www/common/images/icons/file-edit.png
index 3dc4964946..3522e518b3 100644
Binary files a/resources/www/common/images/icons/file-edit.png and b/resources/www/common/images/icons/file-edit.png differ
diff --git a/resources/www/common/styles/main.scss b/resources/www/common/styles/main.scss
index ad1e9e34cd..f8ec587305 100644
--- a/resources/www/common/styles/main.scss
+++ b/resources/www/common/styles/main.scss
@@ -38,5 +38,17 @@ $mainMenuLinkBackgroundHoverColor: transparent;
   }
 }
 
+.macroFileEdit {
+  width: 24px;
+  height: 24px;
+  background: url(../images/icons/file-edit.png) no-repeat center;
+  cursor: help;
+  display: inline-block;
+  transition: 0.3s all;
+  &:hover, &:focus {
+    background-image: url(../images/icons/file-edit-hover.png);
+  }
+}
+
 
 
diff --git a/templates/web/prod/WorkZone/Macros.html.twig b/templates/web/prod/WorkZone/Macros.html.twig
index cbb022a8d3..7affd9e30a 100644
--- a/templates/web/prod/WorkZone/Macros.html.twig
+++ b/templates/web/prod/WorkZone/Macros.html.twig
@@ -397,7 +397,7 @@
                                   </td>
                                   <td style="width:25px;">
                                   {% if choice.getNote() != '' %}
-                                       <img style="cursor:help;" src='/assets/common/images/icons/file-edit.png' class="noteTips" title="{{choice.getNote()|nl2br}}" />
+                                      <span class="noteTips macroFileEdit"  title="{{choice.getNote()|nl2br}}">&nbsp;</span>
                                   {% endif %}
                                   </td>
                               </tr>