diff --git a/src/themes/default/images/note-toggled.svg b/src/themes/default/images/note-toggled.svg
deleted file mode 100644
index 7648959..0000000
--- a/src/themes/default/images/note-toggled.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"  width="16" height="16">
-  <!--<rect x="0" y="0" width="16" height="16" fill="orange"/>-->
-  <polygon points="2 5, 14 5, 8 11" fill="#888888"/>
-</svg>
\ No newline at end of file
diff --git a/src/themes/default/style.css b/src/themes/default/style.css
index dbf9045..e9bdf97 100644
--- a/src/themes/default/style.css
+++ b/src/themes/default/style.css
@@ -163,9 +163,11 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; }
 .mtt-filter-close { cursor:pointer; position:relative; top:1px; margin-left:3px; display:inline-block; width:10px; height:10px; background:url(images/closetag.svg) no-repeat; }
 
 .task-left { float:left; }
-.task-toggle { visibility:hidden; margin-top:1px; cursor:pointer; width:16px; height:16px; float:left; background:url(images/note-toggle.svg) no-repeat; }
+.task-toggle { visibility:hidden; margin-top:1px; cursor:pointer; width:16px; height:16px; float:left; background:url(images/note-toggle.svg) no-repeat;
+  transition:transform .1s linear; transition:-webkit-transform .1s linear;
+}
 li.task-has-note .task-toggle { visibility:visible; }
-li.task-expanded .task-toggle { background-image:url(images/note-toggled.svg); }
+li.task-expanded .task-toggle { transform:rotate(90deg); -webkit-transform:rotate(90deg); }
 .task-middle { margin-left:40px; margin-right:20px; }
 #tasklist { list-style-type: none; margin: 0; padding: 0;}
 #tasklist li { padding:6px 2px 6px 6px; border-bottom:1px solid #DEDEDE; min-height:18px; margin-bottom:1px; background-color:#fff; }