diff --git a/app/components/SimpleEditor/elements/icons/comment.png b/app/components/SimpleEditor/elements/icons/comment.png
deleted file mode 100644
index 7acc02982143c001900b6bb6f4734d09cdf8734c..0000000000000000000000000000000000000000
Binary files a/app/components/SimpleEditor/elements/icons/comment.png and /dev/null differ
diff --git a/app/components/SimpleEditor/elements/icons/note.png b/app/components/SimpleEditor/elements/icons/note.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae968ce8483c5d719dc7634f4caba7f427c6b468
Binary files /dev/null and b/app/components/SimpleEditor/elements/icons/note.png differ
diff --git a/app/components/SimpleEditor/elements/note/note.scss b/app/components/SimpleEditor/elements/note/note.scss
index dbf475f9d72e19ccc3d50bab6cc0314acb7fa1b3..e36349084ee8c42230f626886dda1ce52ba85708 100644
--- a/app/components/SimpleEditor/elements/note/note.scss
+++ b/app/components/SimpleEditor/elements/note/note.scss
@@ -1,5 +1,5 @@
 $gray: #eee;
-$red: #591818;
+$white: #fff;
 
 .sc-prose-editor {
   counter-reset: note;
@@ -9,17 +9,24 @@ $red: #591818;
   }
 
   .sc-note {
-    color: $red;
+    background-image: url('./elements/icons/note.png');
     display: block;
-    font-weight: bold;
+    height: 20px;
+    position: relative;
+    top: 8px;
     user-select: initial;
+    width: 20px;
   }
 
   .sc-note::after {
-    content: '['counter(note)']';
+    bottom: 12px;
+    color: $white;
+    content: ''counter(note)'';
     counter-increment: note;
     font-size: 11px;
     font-style: italic;
-    font-weight: 400;
+    font-weight: normal;
+    left: 7px;
+    position: relative;
   }
 }