diff --git a/css/icons.css b/css/icons.css
index 090046f..d9dbe07 100644
--- a/css/icons.css
+++ b/css/icons.css
@@ -294,21 +294,51 @@ body {
   height: 21px;
 }
 
-.menu.icon:after {
+.filter.icon:after {
   content: '';
   position: absolute;
   top: 5px;
-  left: 0;
+  left: 2px;
+  width: 7px;
+  height: 1px;
+  background-color: currentColor;
+}
+
+.filter.icon:before {
+  content: '';
+  position: absolute;
+  top: -5px;
+  left: -3px;
   width: 17px;
   height: 1px;
   background-color: currentColor;
 }
 
+.filter.icon {
+  color: #000;
+  position: absolute;
+  margin-left: 4px;
+  margin-top: 10px;
+  width: 11px;
+  height: 1px;
+  background-color: currentColor;
+}
+
+.menu.icon:after {
+  content: '';
+  position: absolute;
+  top: 5px;
+  left: 2px;
+  width: 7px;
+  height: 1px;
+  background-color: currentColor;
+}
+
 .menu.icon:before {
   content: '';
   position: absolute;
   top: -5px;
-  left: 0;
+  left: -3px;
   width: 17px;
   height: 1px;
   background-color: currentColor;
@@ -12437,4 +12467,4 @@ body {
   top: -2px;
 }
 
-/*# sourceMappingURL=icons.css.map */
\ No newline at end of file
+/*# sourceMappingURL=icons.css.map */
diff --git a/css/icons/filter/after.css b/css/icons/filter/after.css
new file mode 100644
index 0000000..3b3f68b
--- /dev/null
+++ b/css/icons/filter/after.css
@@ -0,0 +1,9 @@
+.filter.icon:after {
+  content: '';
+  position: absolute;
+  top: 5px;
+  left: 2px;
+  width: 7px;
+  height: 1px;
+  background-color: currentColor;
+}
diff --git a/css/icons/filter/before.css b/css/icons/filter/before.css
new file mode 100644
index 0000000..03155f6
--- /dev/null
+++ b/css/icons/filter/before.css
@@ -0,0 +1,9 @@
+.filter.icon:before {
+  content: '';
+  position: absolute;
+  top: -5px;
+  left: -3px;
+  width: 17px;
+  height: 1px;
+  background-color: currentColor;
+}
diff --git a/css/icons/filter/i-after.css b/css/icons/filter/i-after.css
new file mode 100644
index 0000000..e69de29
diff --git a/css/icons/filter/i-before.css b/css/icons/filter/i-before.css
new file mode 100644
index 0000000..e69de29
diff --git a/css/icons/filter/i.css b/css/icons/filter/i.css
new file mode 100644
index 0000000..e69de29
diff --git a/css/icons/filter/main.css b/css/icons/filter/main.css
new file mode 100644
index 0000000..9f5dd03
--- /dev/null
+++ b/css/icons/filter/main.css
@@ -0,0 +1,9 @@
+.filter.icon {
+  color: #000;
+  position: absolute;
+  margin-left: 4px;
+  margin-top: 10px;
+  width: 11px;
+  height: 1px;
+  background-color: currentColor;
+}
diff --git a/js/cssicon.json b/js/cssicon.json
index 5c2fcb7..0271e60 100644
--- a/js/cssicon.json
+++ b/js/cssicon.json
@@ -159,6 +159,17 @@
       "x"
     ]
   },
+  {
+    "id": 2001,
+    "name": "filter",
+    "classNames": "filter",
+    "style": "line",
+    "htmlChildMarkup": false,
+    "cssHidden": "",
+    "tag": [      
+      "filter"
+    ]
+  },
   {
     "id": 7,
     "name": "menu",
@@ -1970,4 +1981,4 @@
     "cssHidden": "",
     "tag": []
   }
-]
\ No newline at end of file
+]
diff --git a/npm-debug.log b/npm-debug.log
new file mode 100644
index 0000000..20765cf
--- /dev/null
+++ b/npm-debug.log
@@ -0,0 +1,24 @@
+0 info it worked if it ends with ok
+1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'grunt' ]
+2 info using npm@3.10.3
+3 info using node@v6.7.0
+4 verbose stack Error: missing script: grunt
+4 verbose stack     at run (/usr/local/lib/node_modules/npm/lib/run-script.js:151:19)
+4 verbose stack     at /usr/local/lib/node_modules/npm/lib/run-script.js:61:5
+4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:356:5
+4 verbose stack     at checkBinReferences_ (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:320:45)
+4 verbose stack     at final (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:354:3)
+4 verbose stack     at then (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:124:5)
+4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:311:12
+4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:78:16
+4 verbose stack     at tryToString (fs.js:455:3)
+4 verbose stack     at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:442:12)
+5 verbose cwd /Users/ITTEN/Documents/Project/Fork/cssicon
+6 error Darwin 16.0.0
+7 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "grunt"
+8 error node v6.7.0
+9 error npm  v3.10.3
+10 error missing script: grunt
+11 error If you need help, you may report this error at:
+11 error     <https://github.com/npm/npm/issues>
+12 verbose exit [ 1, true ]
diff --git a/scss/icons.scss b/scss/icons.scss
index c290b7c..e4a7ad1 100644
--- a/scss/icons.scss
+++ b/scss/icons.scss
@@ -13,7 +13,7 @@ body {
     content: '';
     position: absolute;
   }
-  i { 
+  i {
     position: absolute;
     &:before {
       content: '';
@@ -35,6 +35,7 @@ body {
 @import 'icons/minify-solid/*';
 @import 'icons/close/*';
 @import 'icons/menu/*';
+@import 'icons/filter/*';
 @import 'icons/arrow-left/*';
 @import 'icons/arrow-right/*';
 @import 'icons/arrow-up/*';
@@ -114,18 +115,18 @@ body {
 @import 'icons/right-align/*';
 @import 'icons/indent/*';
 @import 'icons/outdent/*';
-@import 'icons/mouse/*'; 
-@import 'icons/mouse-solid/*'; 
-@import 'icons/keyboard/*'; 
-@import 'icons/keyboard-solid/*'; 
-@import 'icons/left-double-quote/*'; 
-@import 'icons/left-double-quote-solid/*'; 
-@import 'icons/right-double-quote/*'; 
-@import 'icons/right-double-quote-solid/*'; 
-@import 'icons/left-single-quote/*'; 
-@import 'icons/left-single-quote-solid/*'; 
-@import 'icons/right-single-quote/*'; 
-@import 'icons/right-single-quote-solid/*'; 
+@import 'icons/mouse/*';
+@import 'icons/mouse-solid/*';
+@import 'icons/keyboard/*';
+@import 'icons/keyboard-solid/*';
+@import 'icons/left-double-quote/*';
+@import 'icons/left-double-quote-solid/*';
+@import 'icons/right-double-quote/*';
+@import 'icons/right-double-quote-solid/*';
+@import 'icons/left-single-quote/*';
+@import 'icons/left-single-quote-solid/*';
+@import 'icons/right-single-quote/*';
+@import 'icons/right-single-quote-solid/*';
 @import 'icons/mustache/*';
 @import 'icons/mustache-solid/*';
 @import 'icons/eye/*';
@@ -333,15 +334,15 @@ body {
     width: 2px;
     height: 1px;
     border: 1px solid transparent;
-    box-shadow: 
-       0   9px 0 -1px currentColor, 
-      -4px 9px 0 -1px currentColor, 
+    box-shadow:
+       0   9px 0 -1px currentColor,
+      -4px 9px 0 -1px currentColor,
        4px 9px 0 -1px currentColor,
-       0   6px 0 -1px currentColor, 
-      -4px 6px 0 -1px currentColor, 
+       0   6px 0 -1px currentColor,
+      -4px 6px 0 -1px currentColor,
        4px 6px 0 -1px currentColor,
-       0   3px 0 -1px currentColor, 
-      -4px 3px 0 -1px currentColor, 
+       0   3px 0 -1px currentColor,
+      -4px 3px 0 -1px currentColor,
        4px 3px 0 -1px currentColor;
   }
   &.filled {
@@ -352,15 +353,15 @@ body {
       border-right: solid 2px #333333;
     }
     &:after {
-      box-shadow: 
-         0   9px 0 -1px white, 
-        -4px 9px 0 -1px white, 
+      box-shadow:
+         0   9px 0 -1px white,
+        -4px 9px 0 -1px white,
          4px 9px 0 -1px white,
-         0   6px 0 -1px white, 
-        -4px 6px 0 -1px white, 
+         0   6px 0 -1px white,
+        -4px 6px 0 -1px white,
          4px 6px 0 -1px white,
-         0   3px 0 -1px white, 
-        -4px 3px 0 -1px white, 
+         0   3px 0 -1px white,
+        -4px 3px 0 -1px white,
          4px 3px 0 -1px white;
     }
   }
@@ -379,15 +380,15 @@ body {
     height: 5px;
     border-left: solid 1px currentColor;
     border-right: solid 1px currentColor;
-    box-shadow: 
-       0   12px 0 -2px currentColor, 
-      -4px 12px 0 -2px currentColor, 
+    box-shadow:
+       0   12px 0 -2px currentColor,
+      -4px 12px 0 -2px currentColor,
        4px 12px 0 -2px currentColor,
-       0   9px 0 -2px currentColor, 
-      -4px 9px 0 -2px currentColor, 
+       0   9px 0 -2px currentColor,
+      -4px 9px 0 -2px currentColor,
        4px 9px 0 -2px currentColor,
-       0   6px 0 -2px currentColor, 
-      -4px 6px 0 -2px currentColor, 
+       0   6px 0 -2px currentColor,
+      -4px 6px 0 -2px currentColor,
        4px 6px 0 -2px currentColor;
   }
   &:after {
@@ -400,15 +401,15 @@ body {
   &.filled {
     background-color: currentColor;
     &:before {
-      box-shadow: 
-         0   12px 0 -2px white, 
-        -4px 12px 0 -2px white, 
+      box-shadow:
+         0   12px 0 -2px white,
+        -4px 12px 0 -2px white,
          4px 12px 0 -2px white,
-         0   9px 0 -2px white, 
-        -4px 9px 0 -2px white, 
+         0   9px 0 -2px white,
+        -4px 9px 0 -2px white,
          4px 9px 0 -2px white,
-         0   6px 0 -2px white, 
-        -4px 6px 0 -2px white, 
+         0   6px 0 -2px white,
+        -4px 6px 0 -2px white,
          4px 6px 0 -2px white;
     }
     &:after {
@@ -459,11 +460,11 @@ body {
       &:after {
         background-color: white;
       }
-    } 
+    }
     &.contact i{
       &:before {
         border-color: white;
-      } 
+      }
       &:after {
         border-color: white;
       }
@@ -565,7 +566,7 @@ body {
     height: 4px;
     border: solid 1px currentColor;
     border-radius: 50% 50% 0 50%;
-  }  
+  }
   &:after {
     left: 3px;
     top: -6px;
@@ -573,7 +574,7 @@ body {
     height: 4px;
     border: solid 1px currentColor;
     border-radius: 50% 50% 50% 0;
-  } 
+  }
   i {
     &:before {
       left: -6px;
@@ -582,7 +583,7 @@ body {
       height: 4px;
       border: solid 1px currentColor;
       border-radius: 50% 0 50% 50%;
-    }  
+    }
     &:after {
       left: 3px;
       top: 3px;
@@ -590,7 +591,7 @@ body {
       height: 4px;
       border: solid 1px currentColor;
       border-radius: 0 50% 50% 50%;
-    } 
+    }
   }
 }
 .option.icon {
@@ -815,10 +816,10 @@ body {
   }
   &.filled {
     &:before {
-      background-color: currentColor;  
+      background-color: currentColor;
     }
     &:after {
-      background-color: currentColor;  
+      background-color: currentColor;
     }
   }
 }
@@ -1332,7 +1333,7 @@ body {
     i:after {
       background-color: currentColor;
     }
-    
+
   }
 }
 .shop.icon {
@@ -1446,10 +1447,10 @@ body {
     border: solid 1px currentColor;
     border-radius: 2px;
   }
-  &:before { 
+  &:before {
     top: -6px;
   }
-  &:after { 
+  &:after {
     top: 4px;
   }
   i {
@@ -1546,7 +1547,7 @@ body {
     background-color: currentColor;
     right: 0;
     bottom: 0;
-  } 
+  }
   i {
     width: 2px;
     height: 2px;
@@ -1566,7 +1567,7 @@ body {
       transform: rotate(45deg);
     }
   }
-  &.filled { 
+  &.filled {
     i {
       width: 3px;
       height: 3px;
@@ -3122,7 +3123,7 @@ body {
     border-bottom: solid 1px currentColor;
     border-left: solid 1px currentColor;
   }
-  i { 
+  i {
     width: 17px;
     height: 15px;
     &:before {
@@ -3162,7 +3163,7 @@ body {
     border-top: solid 1px currentColor;
     border-left: solid 1px currentColor;
   }
-  i { 
+  i {
     width: 15px;
     height: 17px;
     &:before {
@@ -3449,14 +3450,14 @@ body {
   height: 6px;
   border: 1px solid currentColor;
   border-radius: 50%;
-  box-shadow: 
-    -8px 0 0 -3px currentColor, 
-    8px 0 0 -3px currentColor, 
-    0 -8px 0 -3px currentColor, 
-    0 8px 0 -3px currentColor, 
-    -6px -6px 0 -3px currentColor, 
-    -6px 6px 0 -3px currentColor, 
-    6px -6px 0 -3px currentColor, 
+  box-shadow:
+    -8px 0 0 -3px currentColor,
+    8px 0 0 -3px currentColor,
+    0 -8px 0 -3px currentColor,
+    0 8px 0 -3px currentColor,
+    -6px -6px 0 -3px currentColor,
+    -6px 6px 0 -3px currentColor,
+    6px -6px 0 -3px currentColor,
     6px 6px 0 -3px currentColor;
   &.filled {
     background-color: currentColor;
@@ -3477,14 +3478,14 @@ body {
   height: 6px;
   border: 1px solid currentColor;
   border-radius: 50%;
-  box-shadow: 
-    -8px 0 0 -3px currentColor, 
-    8px 0 0 -3px currentColor, 
-    0 -8px 0 -3px currentColor, 
-    0 8px 0 -3px currentColor, 
-    -6px -6px 0 -3px currentColor, 
-    -6px 6px 0 -3px currentColor, 
-    6px -6px 0 -3px currentColor, 
+  box-shadow:
+    -8px 0 0 -3px currentColor,
+    8px 0 0 -3px currentColor,
+    0 -8px 0 -3px currentColor,
+    0 8px 0 -3px currentColor,
+    -6px -6px 0 -3px currentColor,
+    -6px 6px 0 -3px currentColor,
+    6px -6px 0 -3px currentColor,
     6px 6px 0 -3px currentColor;
   &:before {
     left: 3px;
@@ -3520,11 +3521,11 @@ body {
   border: 1px solid currentColor;
   border-bottom: solid 1px transparent;
   border-radius: 50%;
-  box-shadow: 
-    -8px 0 0 -3px currentColor, 
-    8px 0 0 -3px currentColor, 
-    0 -8px 0 -3px currentColor, 
-    -6px -6px 0 -3px currentColor, 
+  box-shadow:
+    -8px 0 0 -3px currentColor,
+    8px 0 0 -3px currentColor,
+    0 -8px 0 -3px currentColor,
+    -6px -6px 0 -3px currentColor,
     6px -6px 0 -3px currentColor;
   &:before {
     left: -6px;
@@ -3850,7 +3851,7 @@ body {
   margin-top: 3px;
   width: 17px;
   height: 15px;
-  &:before {    
+  &:before {
     content: "C";
     font-family: Arial, sans-serif;
     font-size: 17px;
@@ -3871,7 +3872,7 @@ body {
   margin-top: 3px;
   width: 16px;
   height: 15px;
-  &:before {    
+  &:before {
     content: "F";
     font-family: Arial, sans-serif;
     font-size: 17px;
@@ -4389,7 +4390,7 @@ body {
                 0px 12px 0 0 white,
                 6px 12px 0 0 white,
                 12px 12px 0 0 white;
-    
+
   }
   &.filled {
     &:after {
@@ -4481,7 +4482,7 @@ body {
     width: 2px;
     height: 2px;
     border-radius: 50%;
-    border: solid 1px currentColor; 
+    border: solid 1px currentColor;
   }
   &:before {
     top: 4px;
@@ -4517,7 +4518,7 @@ body {
   margin-top: 4px;
   width: 17px;
   height: 14px;
-  &:before {   
+  &:before {
     width: 2px;
     height: 2px;
     border-radius: 50%;
@@ -4550,7 +4551,7 @@ body {
     width: 2px;
     height: 2px;
     border-radius: 1px;
-    border: solid 1px currentColor; 
+    border: solid 1px currentColor;
   }
   &:before {
     top: 4px;
@@ -4586,7 +4587,7 @@ body {
   margin-top: 4px;
   width: 17px;
   height: 14px;
-  &:before {   
+  &:before {
     width: 2px;
     height: 2px;
     border-radius: 1px;
@@ -4618,7 +4619,7 @@ body {
   border-radius: 50%;
   border: solid 1px currentColor;
   background-color: white;
-  &:before, 
+  &:before,
   &:after {
     width: 4px;
     height: 1px;
@@ -4662,7 +4663,7 @@ body {
   border-radius: 50%;
   border: solid 1px currentColor;
   background-color: white;
-  &:before, 
+  &:before,
   &:after {
     width: 4px;
     height: 1px;
@@ -4708,9 +4709,9 @@ body {
     left: 1px;
     top: 5px;
     background-color: currentColor;
-    box-shadow: 
-      6px 0 0 0 currentColor, 
-      12px 0 0 0 currentColor, 
+    box-shadow:
+      6px 0 0 0 currentColor,
+      12px 0 0 0 currentColor,
       14px 0 0 0 currentColor;
   }
   &:after {
@@ -4719,8 +4720,8 @@ body {
     left: 3px;
     top: 5px;
     background-color: currentColor;
-    box-shadow: 
-      6px 0 0 0 currentColor, 
+    box-shadow:
+      6px 0 0 0 currentColor,
       15px 0 0 0 currentColor;
   }
 }
@@ -4733,15 +4734,15 @@ body {
     left: 1px;
     top: 5px;
     background-color: currentColor;
-    box-shadow: 
-      2px 0 0 0 currentColor, 
-      3px 0 0 0 currentColor, 
-      6px 0 0 0 currentColor, 
-      8px 0 0 0 currentColor, 
-      9px 0 0 0 currentColor, 
-      12px 0 0 0 currentColor, 
-      14px 0 0 0 currentColor, 
-      17px 0 0 0 currentColor, 
+    box-shadow:
+      2px 0 0 0 currentColor,
+      3px 0 0 0 currentColor,
+      6px 0 0 0 currentColor,
+      8px 0 0 0 currentColor,
+      9px 0 0 0 currentColor,
+      12px 0 0 0 currentColor,
+      14px 0 0 0 currentColor,
+      17px 0 0 0 currentColor,
       18px 0 0 0 currentColor;
   }
   &:after {
@@ -4750,15 +4751,15 @@ body {
       left: 1px;
       top: 14px;
       background-color: currentColor;
-      box-shadow: 
-        2px 0 0 0 currentColor, 
-        3px 0 0 0 currentColor, 
-        6px 0 0 0 currentColor, 
-        8px 0 0 0 currentColor, 
-        9px 0 0 0 currentColor, 
-        12px 0 0 0 currentColor, 
-        14px 0 0 0 currentColor, 
-        17px 0 0 0 currentColor, 
+      box-shadow:
+        2px 0 0 0 currentColor,
+        3px 0 0 0 currentColor,
+        6px 0 0 0 currentColor,
+        8px 0 0 0 currentColor,
+        9px 0 0 0 currentColor,
+        12px 0 0 0 currentColor,
+        14px 0 0 0 currentColor,
+        17px 0 0 0 currentColor,
         18px 0 0 0 currentColor;
   }
 }
@@ -4936,7 +4937,7 @@ body {
   }
   &.filled {
     background-color: currentColor;
-    &:before, 
+    &:before,
     &:after {
       background-color: currentColor;
     }
@@ -5006,13 +5007,13 @@ body {
   margin-left: 8px;
   margin-top: 9px;
   width: 3px;
-  height: 3px; 
+  height: 3px;
   border-top: solid 1px currentColor;
   border-radius: 50%;
   border-right: solid 1px transparent;
   border-bottom: solid 1px transparent;
   border-left: solid 1px transparent;
-  &:before, 
+  &:before,
   &:after {
     width: 6px;
     height: 6px;
@@ -5022,20 +5023,20 @@ body {
   }
   &:before {
     left: -7px;
-    box-shadow: 
-      -4px 0 0 -3.5px currentColor, 
-      -4.5px 0 0 -3.5px currentColor, 
+    box-shadow:
+      -4px 0 0 -3.5px currentColor,
+      -4.5px 0 0 -3.5px currentColor,
       -5px 0 0 -3.5px currentColor;
   }
   &:after {
     right: -7px;
-    box-shadow: 
-      4px 0 0 -3.5px currentColor, 
-      4.5px 0 0 -3.5px currentColor, 
+    box-shadow:
+      4px 0 0 -3.5px currentColor,
+      4.5px 0 0 -3.5px currentColor,
       5px 0 0 -3.5px currentColor;
   }
-  &.filled {   
-    &:before, 
+  &.filled {
+    &:before,
     &:after {
       background-color: currentColor;
     }
@@ -5045,9 +5046,9 @@ body {
   margin-left: 9px;
   margin-top: 8px;
   width: 3px;
-  height: 1px; 
+  height: 1px;
   background-color: currentColor;
-  &:before, 
+  &:before,
   &:after {
     width: 8px;
     height: 6px;
@@ -5062,8 +5063,8 @@ body {
     border-radius: 2px 3px 4px 6px;
     right: -9px;
   }
-  &.filled {   
-    &:before, 
+  &.filled {
+    &:before,
     &:after {
       background-color: currentColor;
     }
@@ -5105,7 +5106,7 @@ body {
   border-right: solid 2px transparent;
   border-bottom: solid 11px currentColor;
   border-left: solid 2px transparent;
-  &:before { 
+  &:before {
     top: 12px;
     left: -2px;
     width: 0;
@@ -5153,7 +5154,7 @@ body {
   border-right: solid 2px transparent;
   border-bottom: solid 11px currentColor;
   border-left: solid 2px transparent;
-  &:before { 
+  &:before {
     top: 12px;
     left: -2px;
     width: 0;
@@ -5229,7 +5230,7 @@ body {
     height: 13px;
     border: double 3px white;
     background-color: currentColor;
-    &:before, 
+    &:before,
     &:after {
       border: solid 1px white;
     }
@@ -5298,9 +5299,9 @@ body {
     border-radius: 50%;
     left: 6px;
     top: 6px;
-    box-shadow: 
-      -7px 0 0 -1px currentColor, 
-      0 -7px 0 -1px currentColor, 
+    box-shadow:
+      -7px 0 0 -1px currentColor,
+      0 -7px 0 -1px currentColor,
       7px 0 0 -1px currentColor;
   }
   &.filled {
@@ -5310,11 +5311,11 @@ body {
     }
     &:after {
       border-color: white;
-      box-shadow: 
-        -7px 0 0 -1px white, 
-        -8px 0 0 -1px white, 
-        0 -7px 0 -1px white, 
-        0 -8px 0 -1px white, 
+      box-shadow:
+        -7px 0 0 -1px white,
+        -8px 0 0 -1px white,
+        0 -7px 0 -1px white,
+        0 -8px 0 -1px white,
         7px 0 0 -1px white,
         8px 0 0 -1px white;
     }
@@ -5346,9 +5347,9 @@ body {
     border-radius: 50%;
     left: 6px;
     top: 6px;
-    box-shadow: 
-      -7px 0 0 -1px currentColor, 
-      0 -7px 0 -1px currentColor, 
+    box-shadow:
+      -7px 0 0 -1px currentColor,
+      0 -7px 0 -1px currentColor,
       7px 0 0 -1px currentColor;
   }
   &.filled {
@@ -5358,11 +5359,11 @@ body {
     }
     &:after {
       border-color: white;
-      box-shadow: 
-        -7px 0 0 -1px white, 
-        -8px 0 0 -1px white, 
-        0 -7px 0 -1px white, 
-        0 -8px 0 -1px white, 
+      box-shadow:
+        -7px 0 0 -1px white,
+        -8px 0 0 -1px white,
+        0 -7px 0 -1px white,
+        0 -8px 0 -1px white,
         7px 0 0 -1px white,
         8px 0 0 -1px white;
     }
@@ -5394,9 +5395,9 @@ body {
     border-radius: 50%;
     left: 6px;
     top: 6px;
-    box-shadow: 
-      -7px 0 0 -1px currentColor, 
-      0 -7px 0 -1px currentColor, 
+    box-shadow:
+      -7px 0 0 -1px currentColor,
+      0 -7px 0 -1px currentColor,
       7px 0 0 -1px currentColor;
   }
   &.filled {
@@ -5406,11 +5407,11 @@ body {
     }
     &:after {
       border-color: white;
-      box-shadow: 
-        -7px 0 0 -1px white, 
-        -8px 0 0 -1px white, 
-        0 -7px 0 -1px white, 
-        0 -8px 0 -1px white, 
+      box-shadow:
+        -7px 0 0 -1px white,
+        -8px 0 0 -1px white,
+        0 -7px 0 -1px white,
+        0 -8px 0 -1px white,
         7px 0 0 -1px white,
         8px 0 0 -1px white;
     }
@@ -5446,7 +5447,7 @@ body {
   &.filled {
     &:before {
       background-color: currentColor;
-    } 
+    }
     &:after {
       background-color: currentColor;
     }
@@ -5518,7 +5519,7 @@ body {
   &.filled {
     &:before {
       background-color: currentColor;
-    } 
+    }
     &:after {
       background-color: currentColor;
     }
@@ -5554,7 +5555,7 @@ body {
   &.filled {
     &:before {
       background-color: currentColor;
-    } 
+    }
     &:after {
       background-color: currentColor;
     }
@@ -5590,7 +5591,7 @@ body {
   &.filled {
     &:before {
       background-color: currentColor;
-    } 
+    }
     &:after {
       background-color: currentColor;
     }
@@ -5626,7 +5627,7 @@ body {
   &.filled {
     &:before {
       background-color: currentColor;
-    } 
+    }
     &:after {
       background-color: currentColor;
     }
@@ -5634,7 +5635,7 @@ body {
 }
 .hammerFilled.icon {
   margin-left: 4px;
-  margin-top: 0px; 
+  margin-top: 0px;
   width: 13px;
   height: 13px;
   border-radius: 50%;
@@ -5659,7 +5660,7 @@ body {
 }
 .hammer.icon {
   margin-left: 4px;
-  margin-top: 0px; 
+  margin-top: 0px;
   width: 11px;
   height: 11px;
   border-radius: 50%;
@@ -5714,20 +5715,20 @@ body {
 }
 .wrenchFilled.icon {
   margin-left: 5px;
-  margin-top: 0px; 
+  margin-top: 0px;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background-color: currentColor;
   transform-origin: center 10.5px;
   transform: rotate(-45deg);
-  &:after { 
+  &:after {
     width: 0;
     height: 0;
     border-radius: 0 0 1px 1px;
     background-color: currentColor;
     border-left: solid 1px transparent;
-    border-right: solid 1px transparent;   
+    border-right: solid 1px transparent;
     border-top: solid 1px white;
     border-bottom: solid 1px transparent;
     left: 4px;
@@ -5746,14 +5747,14 @@ body {
 }
 .wrench.icon {
   margin-left: 5px;
-  margin-top: 0px; 
+  margin-top: 0px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   border: solid 1px currentColor;
   transform-origin: center 10.5px;
   transform: rotate(-45deg);
-  &:before { 
+  &:before {
     top: -1px;
     left: 2px;
     width: 2px;
@@ -6165,7 +6166,7 @@ body {
     }
     &:after {
       background-color: white;
-      
+
     }
   }
 }
@@ -6483,5 +6484,3 @@ body {
     top: -2px;
   }
 }
-
-
diff --git a/scss/icons/filter/after.scss b/scss/icons/filter/after.scss
new file mode 100755
index 0000000..2d5d4cf
--- /dev/null
+++ b/scss/icons/filter/after.scss
@@ -0,0 +1,11 @@
+@import '../../mixin';
+.filter.icon {
+  &:after {
+    @include pseudo();
+    top: 5px;
+    left: 2px;
+    width: 7px;
+    height: 1px;
+    background-color: currentColor;
+  }
+}
diff --git a/scss/icons/filter/before.scss b/scss/icons/filter/before.scss
new file mode 100755
index 0000000..8d90dc5
--- /dev/null
+++ b/scss/icons/filter/before.scss
@@ -0,0 +1,11 @@
+@import '../../mixin';
+.filter.icon {
+  &:before {
+    @include pseudo();
+    top: -5px;
+    left: -3px;
+    width: 17px;
+    height: 1px;
+    background-color: currentColor;
+  }
+}
diff --git a/scss/icons/filter/i-after.scss b/scss/icons/filter/i-after.scss
new file mode 100755
index 0000000..e69de29
diff --git a/scss/icons/filter/i-before.scss b/scss/icons/filter/i-before.scss
new file mode 100755
index 0000000..e69de29
diff --git a/scss/icons/filter/i.scss b/scss/icons/filter/i.scss
new file mode 100755
index 0000000..e69de29
diff --git a/scss/icons/filter/main.scss b/scss/icons/filter/main.scss
new file mode 100755
index 0000000..9f5dd03
--- /dev/null
+++ b/scss/icons/filter/main.scss
@@ -0,0 +1,9 @@
+.filter.icon {
+  color: #000;
+  position: absolute;
+  margin-left: 4px;
+  margin-top: 10px;
+  width: 11px;
+  height: 1px;
+  background-color: currentColor;
+}