diff --git a/src/content/themes/default/images/arrdown-hover.svg b/src/content/themes/default/images/arrdown-hover.svg
deleted file mode 100644
index 71753e8..0000000
--- a/src/content/themes/default/images/arrdown-hover.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 16 16">
- <!--<rect x="0" y="0" width="16" height="16" fill="red"/>-->
- <rect x="1" y="2" width="14" height="12" rx="3" fill="#999999"/>
- <polygon points="4 6, 12 6, 8 10" fill="#ffffff"/>
-</svg>
\ No newline at end of file
diff --git a/src/content/themes/default/images/arrdown.svg b/src/content/themes/default/images/arrdown.svg
deleted file mode 100644
index 86aa28e..0000000
--- a/src/content/themes/default/images/arrdown.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 16 16">
-  <polygon points="4 6, 12 6, 8 10" fill="#888888"/>
-</svg>
\ No newline at end of file
diff --git a/src/content/themes/default/images/close.svg b/src/content/themes/default/images/close.svg
deleted file mode 100644
index a7397d3..0000000
--- a/src/content/themes/default/images/close.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-<g stroke-width="1.5" fill="none">
-<path d="M12.0 12.0l-8-8" stroke="#7f7f7f"/>
-<path d="M4.0 12.0l+8-8" stroke="#7f7f7f"/>
-</g>
-</svg>
\ No newline at end of file
diff --git a/src/content/themes/default/images/newtask-ext.svg b/src/content/themes/default/images/newtask-ext.svg
index 9e20fd1..d1c42cc 100644
--- a/src/content/themes/default/images/newtask-ext.svg
+++ b/src/content/themes/default/images/newtask-ext.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" >
 <!--	<rect x="0" y="0" width="16" height="16" fill="lightpink" /> -->
-<g stroke="#7f7f7f" fill="none">
+<g stroke="#000" fill="none">
 	<polyline points="10.5 1, 1 1, 1 15, 13 15, 13 7.5" stroke-width="1.0" stroke-linejoin="round"/>
 	<g stroke-width="1.0" >
 		<polyline points="7 7, 6 10, 9 9, 15 3, 13 1, 7 7, 6 10" />
diff --git a/src/content/themes/default/images/plus.svg b/src/content/themes/default/images/plus.svg
index 82de3b5..dd474c5 100644
--- a/src/content/themes/default/images/plus.svg
+++ b/src/content/themes/default/images/plus.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
- <line x1="3" y1="8" x2="13" y2="8" stroke-width="2" stroke="#333" />
- <line x1="8" y1="3" x2="8" y2="13" stroke-width="2" stroke="#333" />
+ <line x1="2" y1="8" x2="14" y2="8" stroke-width="1.5" stroke="#000" />
+ <line x1="8" y1="2" x2="8" y2="14" stroke-width="1.5" stroke="#000" />
 </svg>
\ No newline at end of file
diff --git a/src/content/themes/default/images/search-cancel.svg b/src/content/themes/default/images/search-cancel.svg
index c4bd453..08b13f7 100644
--- a/src/content/themes/default/images/search-cancel.svg
+++ b/src/content/themes/default/images/search-cancel.svg
@@ -1,7 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path d="m8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm-2.4688 3.4688 2.4688 2.4688 2.4688-2.4688 1.0625 1.0625-2.4688 2.4688 2.4688 2.4688-1.0625 1.0625-2.4688-2.4688-2.4688 2.4688-1.0625-1.0625 2.4688-2.4688-2.4688-2.4688 1.0625-1.0625z" fill="#000"/>
+</svg>
+<!-- source:
 <g stroke-width="1.5" fill="none">
 <circle cx="8" cy="8" r="7" fill="#000"/>
 <path d="M11.0 11.0l-6-6" stroke="#ffffff"/>
 <path d="M5.0 11.0l+6-6" stroke="#ffffff"/>
 </g>
-</svg>
\ No newline at end of file
+-->
diff --git a/src/content/themes/default/images/search.svg b/src/content/themes/default/images/search.svg
index 1afd177..2cc89a8 100644
--- a/src/content/themes/default/images/search.svg
+++ b/src/content/themes/default/images/search.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-<g stroke-width="1.5" stroke="#7f7f7f" fill="none">
+<g stroke-width="1.5" stroke="#000" fill="none">
 <path d="M14 14l-4-4"/>
 <circle cx="7" cy="7" r="4.5"/>
 </g>
diff --git a/src/content/themes/default/images/selectlist2.svg b/src/content/themes/default/images/selectlist2.svg
index 5de3897..746e996 100644
--- a/src/content/themes/default/images/selectlist2.svg
+++ b/src/content/themes/default/images/selectlist2.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-<g fill="none" stroke-width="1.5" stroke="#333" stroke-linecap="round">
+<g fill="none" stroke-width="1.5" stroke="#000" stroke-linecap="round">
  <line x1="2" y1="3" x2="14" y2="3"/>
  <line x1="2" y1="8" x2="14" y2="8"/>
  <line x1="4" y1="13" x2="14" y2="13"/>
diff --git a/src/content/themes/default/style.css b/src/content/themes/default/style.css
index d62fd15..e84cf36 100644
--- a/src/content/themes/default/style.css
+++ b/src/content/themes/default/style.css
@@ -1,6 +1,11 @@
 /*
   This file is a part of myTinyTodo.
-  Copyright 2009-2010,2020 Max Pozdeev <maxpozdeev@gmail.com>
+*/
+
+/*
+  Browsers support:
+  Flexbox layout - https://caniuse.com/flexbox
+  CSS masks from SVG images - https://caniuse.com/mdn-css_properties_mask-image_svg_masks
 */
 
 /*	default style	*/
@@ -84,13 +89,27 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; }
   margin:0; text-decoration:none; white-space:nowrap; color:#333333; display:inline-block; outline:none;
   box-sizing:border-box; height:2.2rem; padding:1px 0.3rem 0 0.3rem; display:flex; align-items:center;
 }
-.mtt-tab a span { display:inline-block; text-align:center; min-width:75px; max-width:195px; cursor:pointer; padding:0; overflow:hidden; padding-left:0.3rem; padding-right:0.3rem;}
-.mtt-tab .list-action { display:none; width:16px; height:16px; background:transparent url(images/arrdown.svg) no-repeat; cursor:pointer; }
-.mtt-tab .list-action:hover, .mtt-tab .list-action.mtt-menu-button-active { background-image:url(images/arrdown-hover.svg); }
+.mtt-tab a:active { outline:0; text-decoration:none; }
+.mtt-tab a>span { display:inline-block; text-align:center; min-width:75px; max-width:195px; cursor:pointer; padding:0; overflow:hidden; padding-left:0.3rem; padding-right:0.3rem;}
+.mtt-tab .list-action { display:none; }
+.mtt-tab .mtt-img-button:hover,
+.mtt-tab .mtt-img-button.mtt-menu-button-active {
+  background-color:#999;
+}
+.mtt-tab .mtt-img-button > span {
+  width: 8px; height: 8px;
+  mask: url(images/arrdown2.svg) no-repeat; -webkit-mask: url(images/arrdown2.svg) no-repeat;
+  background-color: #888;
+  transition: background-color 0.1s ease-in; /* animate together with button background */
+}
+.mtt-tab .mtt-img-button:hover > span,
+.mtt-tab .mtt-img-button.mtt-menu-button-active > span {
+  background-color: #fff;
+}
 .mtt-tab.mtt-tabs-selected .list-action { display:block; }
 .mtt-tab.mtt-tabs-selected { border-color:transparent; background-color:#ededed; }
-.mtt-tab:hover { background-color:#ddd; }
-.mtt-tab.mtt-tabs-selected:hover { background-color:#ededed; }
+.mtt-tab:not(.mtt-tabs-selected):hover { background-color:#ddd; }
+
 .mtt-tabs-hidden { display:none; }
 .mtt-tab-sort-placeholder { background-color:#ddd; border-color:#aaa; }
 
@@ -103,11 +122,19 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; }
 .mtt-tabs-add-button { display:inline-block; margin-top:1px; border:1px solid #ededed; border-bottom:none; border-top-right-radius: 8px; background-color:#fbfbfb;
   padding-left:3px; padding-right:3px;
 }
-.mtt-tabs-add-button span { display:block; width:16px; height:16px; background:url(images/plus.svg) no-repeat; }
+.mtt-tabs-add-button span {
+  display:block;
+  width:16px; height:16px;
+  mask: url(images/plus.svg) no-repeat; -webkit-mask: url(images/plus.svg) no-repeat;
+  background-color: #333;
+}
 .mtt-tabs-add-button:hover { cursor:pointer; background-color:#ddd; }
 #mtt_body.readonly .mtt-tabs-add-button { display:none; }
 
-.mtt-tabs-select-button>span { background:url(images/selectlist2.svg) no-repeat; }
+.mtt-tabs-select-button > span {
+  mask: url(images/selectlist2.svg) no-repeat; -webkit-mask: url(images/selectlist2.svg) no-repeat;
+  background-color: #333;
+}
 
 .mtt-img-button { padding:4px; display:block; border-radius:4px; transition:background-color 0.1s ease-in; cursor:pointer; }
 .mtt-img-button:hover, .mtt-img-button.mtt-menu-button-active { background-color:#efefef; cursor:pointer; }
@@ -119,9 +146,15 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; }
 #toolbar  { padding:8px; border-bottom:1px solid #DEDEDE; background:#ededed; }
 #toolbar .mtt-img-button:hover { background-color:#ddd; }
 
-.arrdown { display:inline-block; height:9px; width:9px; background:url(images/arrdown2.svg) no-repeat; }
-.arrdown2 { display:inline-block; height:7px; width:7px; background:url(images/arrdown2.svg) no-repeat; }
-
+.arrdown, .arrdown2  {
+  display: inline-block;
+  height: 9px; width:9px;
+  mask: url(images/arrdown2.svg) no-repeat; -webkit-mask: url(images/arrdown2.svg) no-repeat;
+  background-color: #000;
+}
+.arrdown2 {
+  height:7px; width:7px;
+}
 
 .newtask-n-search-container { display:flex; justify-content:flex-end; }
 
@@ -131,11 +164,25 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; }
 #task { color:#222; background:#fff; height:1.35rem; padding:2px 4px; padding-right:20px; border:1px solid #ccc; border-radius:3px; width:100%; margin-left:-24px; }
 #mtt_body.show-all-tasks .taskbox-c, #mtt_body.readonly .taskbox-c { display:none; }
 
-.mtt-taskbox-icon { width:16px; height:16px; position:absolute; top:50%; margin-top:-8px; }
-.mtt-taskbox-icon { background:url(images/add.svg) no-repeat; opacity:0.45; right:2px; cursor:pointer; transition:opacity .1s ease-in; }
-.mtt-taskbox-icon:hover { opacity:0.7; }
+.mtt-taskbox-icon {
+  width:16px; height:16px;
+  position:absolute;
+  top:50%;
+  right:2px;
+  margin-top:-8px;
+  cursor:pointer;
+  mask: url(images/add.svg) no-repeat; -webkit-mask: url(images/add.svg) no-repeat;
+  background-color: #7f7f7f;
+  transition: background-color 0.1s ease-in;
+}
+.mtt-taskbox-icon:hover {
+  background-color: #4c4c4c;
+}
 #newtask_adv { margin-left:0.5rem; }
-#newtask_adv span { background:url(images/newtask-ext.svg) no-repeat; }
+#newtask_adv span {
+  mask: url(images/newtask-ext.svg) no-repeat; -webkit-mask: url(images/newtask-ext.svg) no-repeat;
+  background-color: #7f7f7f;
+}
 
 
 /* Live Search */
@@ -147,10 +194,21 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; }
 
 .mtt-searchbox { position:relative; padding-left:42px; /*input padding+border*/ }
 .mtt-searchbox-icon { width:16px; height:16px; position:absolute; top:50%; margin-top:-8px; }
-
-.mtt-searchbox-icon.mtt-icon-search { background:url(images/search.svg) no-repeat; left:4px; }
-.mtt-searchbox-icon.mtt-icon-cancelsearch { background:url(images/search-cancel.svg) no-repeat; opacity:0.45; right:4px; cursor:pointer; transition:opacity .1s ease-in; }
-.mtt-searchbox-icon.mtt-icon-cancelsearch:hover { opacity:0.7; }
+.mtt-searchbox-icon.mtt-icon-search {
+  left:4px;
+  mask: url(images/search.svg) no-repeat; -webkit-mask: url(images/search.svg) no-repeat;
+  background-color: #7f7f7f;
+}
+.mtt-searchbox-icon.mtt-icon-cancelsearch {
+  right:4px;
+  cursor:pointer;
+  mask: url(images/search-cancel.svg) no-repeat; -webkit-mask: url(images/search-cancel.svg) no-repeat;
+  background-color: #7f7f7f;
+  transition: background-color 0.1s ease-in;
+}
+.mtt-searchbox-icon.mtt-icon-cancelsearch:hover {
+  background-color: #4c4c4c;
+}
 
 #searchbar { font-size:1rem; font-weight:normal; display:none;  margin-top:0.5rem; }
 #searchbarkeyword { font-weight:bold; }
@@ -173,19 +231,30 @@ a { color:#0000ff; cursor:pointer; text-decoration:underline; }
 }
 .tag-filter-exclude { text-decoration:line-through; }
 .mtt-filter-header { font-weight:bold; margin-right:.33rem; }
-.tag-filter-btn { margin-left:3px; display:inline-block; width:1em; height:1em; /* em! */
-  background:url(images/closetag.svg) no-repeat; background-size:1em 1em; background-position:bottom center;
-  opacity:0.45; transition:opacity .1s ease-in; }
-.tag-filter:hover .tag-filter-btn { opacity:0.7; }
-#mtt-tag-toolbar-close span { background:url(images/close.svg) no-repeat; }
+.tag-filter-btn {
+  margin-left:3px;
+  display:inline-block;
+  width:1em; height:1em; /* em! */
+  mask: url(images/closetag.svg) no-repeat; -webkit-mask: url(images/closetag.svg) no-repeat;
+  background-color: #7f7f7f;
+  transition: background-color 0.1s ease-in;
+}
+.tag-filter:hover .tag-filter-btn {
+  background-color: #4c4c4c;
+}
+#mtt-tag-toolbar-close span {
+  mask: url(images/closetag.svg) no-repeat; -webkit-mask: url(images/closetag.svg) no-repeat;
+  background-color: #7f7f7f;
+}
 
 
 .task-toggle { visibility:hidden; cursor:pointer; width:1rem; height:1rem; display:inline-block; margin-right:2px;
-  background:url(images/note-toggle.svg) no-repeat; background-size:cover; opacity:0.45;
-  transition:transform .1s linear, opacity .1s ease-in;
+  mask: url(images/note-toggle.svg) no-repeat; -webkit-mask: url(images/note-toggle.svg) no-repeat;
+  background-color: #7f7f7f;
+  transition:transform .1s linear, background-color .1s ease-in;
 }
 .task-toggle::after { content:'0'; color:transparent; } /* for baseline */
-.task-toggle:hover { opacity:0.7; }
+.task-toggle:hover { background-color: #4c4c4c; }
 li.task-row.task-has-note .task-toggle { visibility:visible; }
 li.task-row.task-expanded .task-toggle { transform:rotate(90deg); }
 
@@ -260,11 +329,23 @@ li.task-row.task-completed .task-title a { color:#777777; }
  border-radius:5px;
 }
 
-.taskactionbtn { height:1rem; width:1rem; background:url(images/task-menu2.svg) center no-repeat; background-size:1rem; visibility:hidden; /* allocate space */
-  opacity:0.45; transition:opacity .1s ease-in; }
+.taskactionbtn {
+  height:1rem; width:1rem;
+  visibility:hidden; /* allocate space */
+  mask: url(images/task-menu2.svg) no-repeat; -webkit-mask: url(images/task-menu2.svg) no-repeat;
+  background-color: #7f7f7f;
+  transition: background-color 0.1s ease-in;
+}
 .taskactionbtn::after { content:'0'; color:transparent; } /* for baseline */
-li.task-row:hover .taskactionbtn { visibility:visible; }
-.taskactionbtn:hover, .taskactionbtn.mtt-menu-button-active { opacity:0.7; cursor:pointer; visibility:visible; }
+li.task-row:hover .taskactionbtn {
+  visibility:visible;
+}
+.taskactionbtn:hover,
+.taskactionbtn.mtt-menu-button-active {
+  visibility:visible;
+  cursor:pointer;
+  background-color: #4c4c4c;
+}
 
 #tasklist.filter-past  li.task-row,
 #tasklist.filter-today li.task-row,
@@ -355,13 +436,12 @@ li.task-row.task-completed .task-note-block .task-note { text-decoration:line-th
 a.mtt-back-button { font-size:1rem; }
 h3.page-title a.mtt-back-button {
   display:inline-block;
-  width:1.3rem;
-  height:1.3rem;
+  width:1.3rem; height:1.3rem;
   margin-right:0.4rem;
-  background:url(images/back.svg) no-repeat center top;
-  background-size:1.3rem;
   position: relative;
   top:4px;
+  mask: url(images/back.svg) no-repeat; -webkit-mask: url(images/back.svg) no-repeat;
+  background-color: #000;
 }
 
 /* autocomplete */
@@ -403,7 +483,10 @@ h3.page-title a.mtt-back-button {
 #tagcloud .w9 { font-size:170%; }
 
 #tagcloudcancel { float:right; }
-#tagcloudcancel span { background:url(images/close.svg) no-repeat; }
+#tagcloudcancel span {
+  mask: url(images/closetag.svg) no-repeat; -webkit-mask: url(images/closetag.svg) no-repeat;
+  background-color: #7f7f7f;
+}
 
 .ui-datepicker { width:220px; z-index:202; border: 1px solid #cccccc; background: #ffffff; display:none; padding:2px; box-shadow:1px 2px 5px rgba(0,0,0,0.5); border-radius:5px; }
 .ui-datepicker-trigger { cursor:pointer; vertical-align:text-bottom; margin-left:4px; margin-right:4px; width:16px; height:16px; }
@@ -419,8 +502,14 @@ h3.page-title a.mtt-back-button {
 .ui-datepicker-next { position:absolute; right:2px; height:20px; text-decoration:none; }
 .ui-datepicker-title { text-align:center; line-height:20px;  }
 .ui-icon { width:16px; height:16px; text-indent:-99999px; overflow:hidden; }
-.ui-datepicker .ui-icon-circle-triangle-w { display:block; position:absolute; top:50%; margin-top:-8px; left:50%; background:url(images/arr-left.svg) no-repeat; }
-.ui-datepicker .ui-icon-circle-triangle-e { display:block; position:absolute; top:50%; margin-top:-8px; right:50%; background:url(images/arr-right.svg) no-repeat; }
+.ui-datepicker .ui-icon-circle-triangle-w { display:block; position:absolute; top:50%; margin-top:-8px; left:50%;
+  mask: url(images/arr-left.svg) no-repeat; -webkit-mask: url(images/arr-left.svg) no-repeat;
+  background-color: #000;
+}
+.ui-datepicker .ui-icon-circle-triangle-e { display:block; position:absolute; top:50%; margin-top:-8px; right:50%;
+  mask: url(images/arr-right.svg) no-repeat; -webkit-mask: url(images/arr-right.svg) no-repeat;
+  background-color: #000;
+}
 
 .mtt-menu-button {
   user-select: none;
@@ -428,7 +517,8 @@ h3.page-title a.mtt-back-button {
   padding:4px;
   transition:background-color 0.1s ease-in;
 }
-.mtt-menu-button:hover, .mtt-menu-button.mtt-menu-button-active {
+.mtt-menu-button:hover,
+.mtt-menu-button.mtt-menu-button-active {
   background-color:#efefef; border-radius:4px;
 }
 
@@ -470,10 +560,15 @@ h3.page-title a.mtt-back-button {
 .mtt-menu-container li:hover a { color:white; }
 .mtt-menu-container li.mtt-menu-delimiter { height:0px; line-height:0; border-bottom:1px solid #cccccc; margin:2px -1px; padding:0px; font-size:0px; }
 .mtt-menu-container .menu-icon { width:16px; height:16px; position:absolute; left:6px; top:50%; margin-top:-8px; }
-li.mtt-item-checked .menu-icon { background:url(images/checkmark.svg) no-repeat; }
+li.mtt-item-checked .menu-icon {
+  mask: url(images/checkmark.svg) no-repeat; -webkit-mask: url(images/checkmark.svg) no-repeat;
+  background-color: #000;
+}
 li.mtt-menu-indicator .submenu-icon {
   position:absolute; right:6px; top:50%; margin-top:-8px;
-  width:16px; height:16px; background:url(images/arr-right.svg) no-repeat;
+  width:16px; height:16px;
+  mask: url(images/arr-right.svg) no-repeat; -webkit-mask: url(images/arr-right.svg) no-repeat;
+  background-color: #000;
 }
 li.mtt-item-hidden { display:none; }
 
diff --git a/src/includes/mytinytodo.js b/src/includes/mytinytodo.js
index c6e271e..6a9ad04 100644
--- a/src/includes/mytinytodo.js
+++ b/src/includes/mytinytodo.js
@@ -708,13 +708,13 @@ var mytinytodo = window.mytinytodo = _mtt = {
 						tabLists._alltasks = item;
 						ti += '<li id="list_all" class="mtt-tab mtt-tabs-alltasks'+(item.hidden?' mtt-tabs-hidden':'')+'">'+
 							'<a href="'+_mtt.urlForList(item)+'" title="'+item.name+'"><span>'+item.name+'</span>'+
-							'<div class="list-action"></div></a></li>';
+							'<div class="list-action mtt-img-button"><span></span></div></a></li>';
 					}
 					else {
 						tabLists.add(item);
 						ti += '<li id="list_'+item.id+'" class="mtt-tab'+(item.hidden?' mtt-tabs-hidden':'')+'">'+
 							'<a href="'+_mtt.urlForList(item)+'" title="'+item.name+'"><span>'+item.name+'</span>'+
-							'<div class="list-action"></div></a></li>';
+							'<div class="list-action mtt-img-button"><span></span></div></a></li>';
 					}
 				});
 			}