3 files changed, 61 insertions, 47 deletions
diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less
index b4818ba5d..99aa02a34 100644
--- a/searx/static/themes/simple/src/less/search.less
+++ b/searx/static/themes/simple/src/less/search.less
@@ -16,6 +16,40 @@
     "spacer categories";
 }
 
+.category {
+  display: inline-block;
+  position: relative;
+  margin-right: 1rem;
+  padding: 0;
+
+  input {
+    display: none;
+  }
+
+  label {
+    svg {
+      padding-right: 0.2rem;
+    }
+
+    cursor: pointer;
+    padding: 0.2rem 0;
+    display: inline-flex;
+    text-transform: capitalize;
+    font-size: 0.9em;
+    border-bottom: 2px solid transparent;
+    .disable-user-select;
+
+    div.category_name {
+      margin: auto 0;
+    }
+  }
+
+  input[type="checkbox"]:checked + label {
+    color: var(--color-categories-item-selected-font);
+    border-bottom: 2px solid var(--color-categories-item-border-selected);
+  }
+}
+
 #search_logo {
   grid-area: logo;
   display: flex;
@@ -79,7 +113,7 @@
   border-collapse: separate;
   box-sizing: border-box;
   margin: 0;
-  padding: 8px;
+  padding: 10px;
   background: none repeat scroll 0 0 var(--color-search-background);
   border: 1px solid var(--color-search-border);
   border-radius: 0;
@@ -156,7 +190,6 @@
 
       #categories {
         width: 100%;
-        margin: 0;
         text-align: left;
         overflow-x: scroll;
         overflow-y: hidden;
@@ -188,7 +221,7 @@
   }
 
   .search_box {
-    // hack, should bew 100% ?
+    // hack, should be 100% ?
     width: 99%;
     margin: 0.1em;
     padding: 0 0.1em 0 0;
@@ -219,9 +252,15 @@
   .category {
     display: block;
     width: 100%;
+    margin: 0;
 
     label {
-      padding: 10px !important;
+      padding: 0.8rem !important;
+      margin: 0 !important;
+
+      svg {
+        display: none;
+      }
     }
   }
 }
@@ -239,7 +278,6 @@
 }
 
 #categories {
-  margin: 0 10px 0 0;
   .disable-user-select;
 
   &::-webkit-scrollbar {
@@ -248,33 +286,6 @@
   }
 }
 
-.category {
-  display: inline-block;
-  position: relative;
-  margin: 0 3px;
-  padding: 0;
-
-  input {
-    display: none;
-  }
-
-  label {
-    cursor: pointer;
-    padding: 0.3rem 0.75rem 0.5rem 0.75rem;
-    margin: 0;
-    display: block;
-    text-transform: capitalize;
-    font-size: 0.9em;
-    border-bottom: 2px solid transparent;
-    .disable-user-select;
-  }
-
-  input[type="checkbox"]:checked + label {
-    color: var(--color-categories-item-selected-font);
-    border-bottom: 2px solid var(--color-categories-item-border-selected);
-  }
-}
-
 #categories_container {
   position: relative;
 }
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index b93317fa3..a26c57db1 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -10,7 +10,6 @@
 @import "../../__common__/less/stats.less";
 @import "../../__common__/less/result_templates.less";
 @import (inline) "../../node_modules/normalize.css/normalize.css";
-@import "../generated/ion.less";
 @import "definitions.less";
 @import "mixins.less";
 @import "code.less";
@@ -28,10 +27,23 @@
 @import "search.less";
 
 // ion-icon
-.ion-icon-big {
+.ion-icon {
+  display: inline-block;
+  vertical-align: bottom;
+  line-height: 1;
+  text-decoration: inherit;
+}
+
+.ion-icon-small {
+  width: 1rem;
+  height: 1rem;
   .ion-icon;
+}
 
-  font-size: 149%;
+.ion-icon-big {
+  width: 1.5rem;
+  height: 1.5rem;
+  .ion-icon;
 }
 
 // Main LESS-Code
@@ -530,7 +542,7 @@ article[data-vim-selected].category-social {
 #linkto_preferences {
   position: absolute;
   right: 10px;
-  top: 2rem;
+  top: 2.2rem;
   padding: 0;
   border: 0;
   display: block;
diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less
index f11275576..195cd9af4 100644
--- a/searx/static/themes/simple/src/less/toolkit.less
+++ b/searx/static/themes/simple/src/less/toolkit.less
@@ -121,20 +121,13 @@ div.selectable_url {
 // dialog
 .dialog() {
   position: relative;
-  padding: 1em 1em 1em 2.7em;
+  display: flex;
+  padding: 1rem;
   margin: 0 0 1em 0;
   border: 1px solid var(--color-toolkit-dialog-border);
   text-align: left;
   .rounded-corners;
 
-  &::before {
-    position: absolute;
-    top: 0.5em;
-    left: 0.5em;
-    font-family: "ion"; // stylelint-disable font-family-no-missing-generic-family-keyword
-    font-size: 1.5em;
-  }
-
   .close {
     float: right;
     position: relative;
@@ -177,7 +170,6 @@ div.selectable_url {
   color: var(--color-error);
   background: var(--color-error-background);
   border-color: var(--color-error);
-  .ion-error();
 }
 
 .dialog-warning {
@@ -186,7 +178,6 @@ div.selectable_url {
   color: var(--color-warning);
   background: var(--color-warning-background);
   border-color: var(--color-warning);
-  .ion-warning();
 }
 
 .dialog-modal {