chore: replace svg imports with components

It allows me to control the colors of each SVG paths.

23 files changed, 588 insertions, 281 deletions

diff --git a/src/assets/images/icon-articles.svg b/src/assets/images/icon-articles.svg
index e8141d6..acf5c64 100644
--- a/src/assets/images/icon-articles.svg
+++ b/src/assets/images/icon-articles.svg
@@ -16,139 +16,57 @@
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg"><defs
-   id="defs81" /><sodipodi:namedview
-   id="namedview79"
-   pagecolor="#ffffff"
-   bordercolor="#666666"
-   borderopacity="1.0"
-   inkscape:pageshadow="2"
-   inkscape:pageopacity="0.0"
-   inkscape:pagecheckerboard="0"
-   showgrid="false"
-   inkscape:zoom="10.100958"
-   inkscape:cx="53.757279"
-   inkscape:cy="56.826295"
-   inkscape:window-width="1920"
-   inkscape:window-height="1019"
-   inkscape:window-x="0"
-   inkscape:window-y="33"
-   inkscape:window-maximized="1"
-   inkscape:current-layer="Layer_1" />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-<g
-   id="g48"
-   transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)">
-</g>
-<g
-   id="g50"
-   transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)">
-</g>
-<g
-   id="g52"
-   transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)">
-</g>
-<g
-   id="g54"
-   transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)">
-</g>
-<g
-   id="g56"
-   transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)">
-</g>
-<g
-   id="g58"
-   transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)">
-</g>
-<g
-   id="g60"
-   transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)">
-</g>
-<g
-   id="g62"
-   transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)">
-</g>
-<g
-   id="g64"
-   transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)">
-</g>
-<g
-   id="g66"
-   transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)">
-</g>
-<g
-   id="g68"
-   transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)">
-</g>
-<g
-   id="g70"
-   transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)">
-</g>
-<g
-   id="g72"
-   transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)">
-</g>
-<g
-   id="g74"
-   transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)">
-</g>
-<g
-   id="g76"
-   transform="matrix(0.19762846,0,0,0.19762846,-140.17831,-7.1525574e-7)">
-</g>
-<path
-   id="rect920-3-6"
-   style="fill:#f6f8f8;stroke:#000000;stroke-width:2.96443;fill-opacity:1"
-   d="M 28.992096,1.4822128 H 90.770752 V 82.312253 H 28.992096 Z" /><path
-   id="rect920-3"
-   style="fill:#f6f8f8;stroke:#000000;stroke-width:2.96443;fill-opacity:1"
-   d="m 19.110672,8.992094 h 61.778656 v 80.83004 H 19.110672 Z" /><path
-   id="rect920"
-   style="fill:#f6f8f8;stroke:#000000;stroke-width:2.96443;fill-opacity:1"
-   d="m 9.229248,17.687748 h 61.778656 v 80.83004 H 9.229248 Z" /><path
-   id="rect1194"
-   style="fill:#1d8fc9;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1"
-   d="M 18.149242,74.65544 H 33.375246 V 90.194215 H 18.149242 Z" /><path
-   id="rect1194-7"
-   style="fill:#1d8fc9;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1"
-   d="M 18.142653,24.858688 H 62.094499 V 35.908926 H 18.142653 Z" /><path
-   id="rect1338"
-   style="fill:#00080c;stroke-width:1.56766"
-   d="m 17.618576,41.908926 h 45 v 2 h -45 z" /><path
-   id="rect1338-5"
-   style="fill:#00080c;stroke-width:1.56766"
-   d="m 17.618576,49.908926 h 45 v 2 h -45 z" /><path
-   id="rect1338-5-3"
-   style="fill:#00080c;stroke-width:1.56766"
-   d="m 17.618576,57.908926 h 45 v 2 h -45 z" /><path
-   id="rect1338-5-3-5"
-   style="fill:#00080c;stroke-width:1.56766"
-   d="m 17.618576,65.908926 h 45 v 2 h -45 z" /><path
-   id="rect1338-5-3-5-6"
-   style="fill:#00080c;stroke-width:1.06543"
-   d="m 41.833105,73.424828 h 20.785471 v 2 H 41.833105 Z" /><path
-   id="rect1338-5-3-5-6-2"
-   style="fill:#00080c;stroke-width:1.06543"
-   d="m 41.833105,81.424828 h 20.785471 v 2 H 41.833105 Z" /><path
-   id="rect1338-5-3-5-6-2-9"
-   style="fill:#00080c;stroke-width:1.06543"
-   d="m 41.833105,89.424828 h 20.785471 v 2 H 41.833105 Z" /></svg>
+     id="defs81" /><sodipodi:namedview
+     id="namedview79"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="7.331491"
+     inkscape:cx="41.464963"
+     inkscape:cy="38.600607"
+     inkscape:window-width="1920"
+     inkscape:window-height="1019"
+     inkscape:window-x="0"
+     inkscape:window-y="33"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><path
+     id="rect920-3-6"
+     style="fill:#f6f8f8;stroke:#000000;stroke-width:2.96443;fill-opacity:1"
+     d="M 28.992096,1.4822128 H 90.770752 V 82.312253 H 28.992096 Z" /><path
+     id="rect920-3"
+     style="fill:#f6f8f8;stroke:#000000;stroke-width:2.96443;fill-opacity:1"
+     d="m 19.110672,8.992094 h 61.778656 v 80.83004 H 19.110672 Z" /><path
+     id="rect920"
+     style="fill:#f6f8f8;stroke:#000000;stroke-width:2.96443;fill-opacity:1"
+     d="m 9.229248,17.687748 h 61.778656 v 80.83004 H 9.229248 Z" /><path
+     id="rect1194"
+     style="fill:#1d8fc9;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1"
+     d="M 18.149242,74.65544 H 33.375246 V 90.194215 H 18.149242 Z" /><path
+     id="rect1194-7"
+     style="fill:#1d8fc9;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;fill-opacity:1"
+     d="M 18.142653,24.858688 H 62.094499 V 35.908926 H 18.142653 Z" /><path
+     id="rect1338"
+     style="fill:#00080c;stroke-width:1.56766"
+     d="m 17.618576,41.908926 h 45 v 2 h -45 z" /><path
+     id="rect1338-5"
+     style="fill:#00080c;stroke-width:1.56766"
+     d="m 17.618576,49.908926 h 45 v 2 h -45 z" /><path
+     id="rect1338-5-3"
+     style="fill:#00080c;stroke-width:1.56766"
+     d="m 17.618576,57.908926 h 45 v 2 h -45 z" /><path
+     id="rect1338-5-3-5"
+     style="fill:#00080c;stroke-width:1.56766"
+     d="m 17.618576,65.908926 h 45 v 2 h -45 z" /><path
+     id="rect1338-5-3-5-6"
+     style="fill:#00080c;stroke-width:1.06543"
+     d="m 41.833105,73.424828 h 20.785471 v 2 H 41.833105 Z" /><path
+     id="rect1338-5-3-5-6-2"
+     style="fill:#00080c;stroke-width:1.06543"
+     d="m 41.833105,81.424828 h 20.785471 v 2 H 41.833105 Z" /><path
+     id="rect1338-5-3-5-6-2-9"
+     style="fill:#00080c;stroke-width:1.06543"
+     d="m 41.833105,89.424828 h 20.785471 v 2 H 41.833105 Z" /></svg>
diff --git a/src/assets/images/icon-close.svg b/src/assets/images/icon-close.svg
index 58dd3a9..f108234 100644
--- a/src/assets/images/icon-close.svg
+++ b/src/assets/images/icon-close.svg
@@ -1,54 +1,42 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
-   viewbox="0 0 40 40"
-   style="stroke: #000;  stroke-width: 5;  stroke-linecap: round;"
-   version="1.1"
-   id="svg4"
    sodipodi:docname="icon-close.svg"
    width="100"
    height="100"
-   viewBox="0 0 100.00005 100.00005"
+   viewBox="0 0 100 100"
    inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
+   version="1.1"
+   id="svg825"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:dc="http://purl.org/dc/elements/1.1/">
-  <metadata
-     id="metadata10">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
+   xmlns:svg="http://www.w3.org/2000/svg">
   <defs
      id="defs8" />
   <sodipodi:namedview
      id="namedview6"
-     inkscape:zoom="3.0499873"
-     inkscape:cx="13.442679"
-     inkscape:cy="79.672463"
+     inkscape:zoom="2.729418"
+     inkscape:cx="-18.318924"
+     inkscape:cy="74.374829"
      inkscape:window-width="1920"
      inkscape:window-height="1019"
      inkscape:window-x="0"
      inkscape:window-y="33"
      inkscape:window-maximized="1"
-     inkscape:current-layer="svg4"
      pagecolor="#ffffff"
      bordercolor="#666666"
      borderopacity="1.0"
      inkscape:pageshadow="2"
      inkscape:pageopacity="0.0"
      inkscape:pagecheckerboard="0"
-     showgrid="false" />
+     showgrid="false"
+     inkscape:current-layer="svg825" />
+  <path
+     id="rect843"
+     style="fill:#1d8fc9;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     d="m 3.6465459,3.6465457 c 2.8785908,-2.87859094 7.5134341,-2.87859094 10.3920251,0 L 96.353457,85.96143 c 2.878587,2.878591 2.878587,7.513434 0,10.392025 -2.878597,2.878591 -7.513432,2.878591 -10.392029,0 L 3.6465449,14.038571 C 0.76795398,11.15998 0.76795398,6.5251366 3.6465459,3.6465457 Z" />
   <path
-     style="color:#000000;fill:#1d8fc9;stroke:#010304;stroke-width:3;stroke-linecap:butt;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     d="m 9.1489631,1.5 a 7.659573,7.6587251 0 0 0 -5.4155577,2.2437671 7.659573,7.6587251 0 0 0 0,10.8299149 L 39.168904,50.005259 3.7334054,85.436835 a 7.659573,7.6587251 0 0 0 0,10.829915 7.659573,7.6587251 0 0 0 10.8311146,0 L 50.000019,60.835175 85.435518,96.26675 a 7.659573,7.6587251 0 0 0 10.831115,0 7.659573,7.6587251 0 0 0 0,-10.829915 L 60.831134,50.005259 96.266633,14.573682 a 7.659573,7.6587251 0 0 0 0,-10.8299149 7.659573,7.6587251 0 0 0 -10.831115,0 L 50.000019,39.175343 14.56452,3.7437671 A 7.659573,7.6587251 0 0 0 9.1489631,1.5 Z"
-     id="path2" />
+     id="rect843-3"
+     style="fill:#1d8fc9;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+     d="m 96.353453,3.6465462 c 2.878592,2.8785909 2.878592,7.5134348 0,10.3920258 L 14.03857,96.353457 c -2.878589,2.878587 -7.5134339,2.878587 -10.3920248,0 -2.87859087,-2.878597 -2.87858988,-7.513442 -10e-7,-10.392029 L 85.961428,3.6465462 c 2.878591,-2.87859099 7.513434,-2.87859099 10.392025,0 z" />
 </svg>
diff --git a/src/assets/images/icon-home.svg b/src/assets/images/icon-home.svg
index 11b4f0a..5bfe7f7 100644
--- a/src/assets/images/icon-home.svg
+++ b/src/assets/images/icon-home.svg
@@ -1,76 +1,14 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 
-<svg
-   version="1.1"
-   id="Layer_1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 100 100"
-   xml:space="preserve"
-   sodipodi:docname="icon-home.svg"
-   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
-   width="100"
-   height="100"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"><defs
-     id="defs71" /><sodipodi:namedview
-     id="namedview69"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     showgrid="false"
-     inkscape:zoom="2.9150813"
-     inkscape:cx="7.2039157"
-     inkscape:cy="87.133076"
-     inkscape:window-width="1920"
-     inkscape:window-height="1019"
-     inkscape:window-x="0"
-     inkscape:window-y="33"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="Layer_1" /><rect
-     style="fill:#f6f8f8;fill-opacity:1;stroke:#000000;stroke-width:3.25598;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     id="wall"
-     width="81.442894"
-     height="82.338066"
-     x="9.2669392"
-     y="15.413749" /><rect
-     style="fill:#000203;fill-opacity:1;stroke:#000000;stroke-width:3.25598;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     id="indoor"
-     width="21.594872"
-     height="31.91539"
-     x="39.190941"
-     y="65.836418" /><rect
-     style="fill:#1d8fc9;fill-opacity:1;stroke:#000000;stroke-width:3.25598;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     id="door"
-     width="21.594872"
-     height="31.91539"
-     x="39.190941"
-     y="65.836418" /><path
-     id="roof"
-     style="fill:#1d8fc9;fill-opacity:1;stroke:#000000;stroke-width:3.25598"
-     d="M 4.8219096,11.719266 H 94.720716 l 3.47304,33.365604 H 1.7830046 Z"
-     sodipodi:nodetypes="ccccc" /><rect
-     style="fill:#f6f8f8;fill-opacity:1;stroke:#000000;stroke-width:3.25598;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     id="chimney"
-     width="12.538733"
-     height="20.388027"
-     x="70.41848"
-     y="2.2481852" /><rect
-     style="fill:#080808;fill-opacity:1;stroke:none;stroke-width:3.25598;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     id="line1"
-     width="57.049389"
-     height="3.2935634"
-     x="3.9536645"
-     y="19.342648" /><rect
-     style="fill:#080808;fill-opacity:1;stroke:none;stroke-width:3.25598;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     id="line2"
-     width="57.049389"
-     height="3.2935634"
-     x="38.973709"
-     y="32.057171" /></svg>
+<svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 100 100" xml:space="preserve" sodipodi:docname="icon-home.svg" inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)" width="100" height="100" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+  <defs id="defs71" />
+  <sodipodi:namedview id="namedview69" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" showgrid="false" inkscape:zoom="2.9150813" inkscape:cx="7.2039157" inkscape:cy="87.133076" inkscape:window-width="1920" inkscape:window-height="1019" inkscape:window-x="0" inkscape:window-y="33" inkscape:window-maximized="1" inkscape:current-layer="Layer_1" />
+  <path id="wall" style="fill:#f6f8f8;stroke:#000000;stroke-width:3.25598" d="M 9.2669392,15.413749 H 90.709833 V 97.751815 H 9.2669392 Z" />
+  <path id="indoor" style="fill:#000203;stroke:#000000;stroke-width:3.25598" d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z" />
+  <path class="door" style="fill:#1d8fc9;stroke:#000000;stroke-width:3.25598" d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z" />
+  <path id="roof" style="fill:#1d8fc9;fill-opacity:1;stroke:#000000;stroke-width:3.25598" d="M 4.8219096,11.719266 H 94.720716 l 3.47304,33.365604 H 1.7830046 Z" sodipodi:nodetypes="ccccc" />
+  <path id="chimney" style="fill:#f6f8f8;stroke:#000000;stroke-width:3.25598" d="M 70.41848,2.2481852 H 82.957212 V 22.636212 H 70.41848 Z" />
+  <path id="line1" style="fill:#080808;stroke-width:3.25598" d="M 3.9536645,19.342648 H 61.003053 v 3.293563 H 3.9536645 Z" />
+  <path id="line2" style="fill:#080808;stroke-width:3.25598" d="m 38.973709,32.057171 h 57.049389 v 3.293563 H 38.973709 Z" />
+</svg>
diff --git a/src/assets/images/icon-search.svg b/src/assets/images/icon-search.svg
index 796283d..cbb1860 100644
--- a/src/assets/images/icon-search.svg
+++ b/src/assets/images/icon-search.svg
@@ -1,6 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
 <svg
    version="1.1"
    x="0px"
@@ -29,24 +27,20 @@
      inkscape:window-x="0"
      inkscape:window-y="33"
      inkscape:window-maximized="1"
-     inkscape:zoom="4.5358955"
-     inkscape:cx="18.959872"
-     inkscape:cy="47.179217"
+     inkscape:zoom="2.3129303"
+     inkscape:cx="-62.258686"
+     inkscape:cy="27.670527"
      inkscape:current-layer="svg3545"
      showgrid="false" /><path
      id="rect1408"
-     style="fill:#14578a;stroke:#000000;stroke-width:2;fill-opacity:1"
-     transform="matrix(0.71477987,0.69934951,-0.69963223,0.71450315,0,0)"
-     d="m 67.137863,3.0622735 h 7.476434 V 20.929606 h -7.476434 z" /><path
+     style="fill:#14578a;fill-opacity:1;stroke:#000000;stroke-width:2"
+     d="m 45.39268,48.064692 5.611922,4.307881 -10.292886,13.414321 -5.611923,-4.307882 z" /><path
      id="path1246"
      style="fill:#1d8fc9;stroke:#000000;stroke-width:2"
-     transform="matrix(0.96592978,0.2588043,-0.2588338,0.96592187,0,0)"
-     d="M 103.36876,11.53057 A 29.302338,29.300789 0 0 1 74.066422,40.831359 29.302338,29.300789 0 0 1 44.764084,11.53057 29.302338,29.300789 0 0 1 74.066422,-17.770219 29.302338,29.300789 0 0 1 103.36876,11.53057 Z" /><path
+     d="M 90.904041,28.730105 A 27.725691,27.730085 0 0 1 63.17835,56.46019 27.725691,27.730085 0 0 1 35.45266,28.730105 27.725691,27.730085 0 0 1 63.17835,1.00002 27.725691,27.730085 0 0 1 90.904041,28.730105 Z" /><path
      id="path1246-5"
-     style="fill:#e4ffff;stroke:#000000;stroke-width:1.5;fill-opacity:1"
-     transform="matrix(0.96592978,0.2588043,-0.2588338,0.96592187,0,0)"
-     d="M 94.422329,11.53057 A 20.355907,20.35483 0 0 1 74.066422,31.8854 20.355907,20.35483 0 0 1 53.710514,11.53057 20.355907,20.35483 0 0 1 74.066422,-8.8242598 20.355907,20.35483 0 0 1 94.422329,11.53057 Z" /><path
+     style="fill:#e4ffff;fill-opacity:1;stroke:#000000;stroke-width:1.5"
+     d="M 82.438984,28.730105 A 19.260633,19.263685 0 0 1 63.17835,47.99379 19.260633,19.263685 0 0 1 43.917716,28.730105 19.260633,19.263685 0 0 1 63.17835,9.4664203 19.260633,19.263685 0 0 1 82.438984,28.730105 Z" /><path
      id="rect1408-3"
      style="fill:#1d8fc9;stroke:#000000;stroke-width:2;stroke-linejoin:round"
-     transform="matrix(0.71477987,0.69934951,-0.69963223,0.71450315,0,0)"
-     d="m 67.075075,19.587082 h 7.662958 c 1.329636,0 2.400065,1.070429 2.400065,2.400064 v 40.068158 c 0,1.329635 -1.070429,2.400064 -2.400065,2.400064 h -7.662958 c -1.329636,0 -2.400064,-1.070429 -2.400064,-2.400064 V 21.987146 c 0,-1.329635 1.070428,-2.400064 2.400064,-2.400064 z" /></svg>
+     d="m 35.826055,60.434903 5.75193,4.415356 c 0.998045,0.766128 1.184879,2.186554 0.418913,3.184809 L 18.914717,98.117182 c -0.765969,0.998256 -2.186094,1.185131 -3.18414,0.418997 L 9.9786472,94.120827 C 8.9806032,93.354698 8.7937692,91.934273 9.5597392,90.936014 L 32.641919,60.853903 c 0.765967,-0.998254 2.186091,-1.185129 3.184136,-0.419 z" /></svg>
diff --git a/src/components/Buttons/ButtonSearch/ButtonSearch.tsx b/src/components/Buttons/ButtonSearch/ButtonSearch.tsx
index a2635aa..be5a9bc 100644
--- a/src/components/Buttons/ButtonSearch/ButtonSearch.tsx
+++ b/src/components/Buttons/ButtonSearch/ButtonSearch.tsx
@@ -1,5 +1,4 @@
-import CloseIcon from '@assets/images/icon-close.svg';
-import SearchIcon from '@assets/images/icon-search.svg';
+import { CloseIcon, SearchIcon } from '@components/Icons';
 import { t } from '@lingui/macro';
 import { SetStateAction } from 'react';
 import styles from '../Buttons.module.scss';
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index a043649..fb93d5a 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -82,10 +82,10 @@
 }
 
 .search {
-  display: flex;
-  place-content: center;
+  display: block;
   width: var(--btn-size);
   height: var(--btn-size);
+  padding: 0;
   background: none;
   border: none;
   font-size: var(--font-size-md);
@@ -103,7 +103,10 @@
 
 .front,
 .back {
-  display: block;
+  display: flex;
+  place-content: center;
+  width: var(--btn-size);
+  height: var(--btn-size);
   position: absolute;
   top: 0;
   right: 0;
diff --git a/src/components/Icons/Blog/Blog.module.scss b/src/components/Icons/Blog/Blog.module.scss
new file mode 100644
index 0000000..d5c2639
--- /dev/null
+++ b/src/components/Icons/Blog/Blog.module.scss
@@ -0,0 +1,23 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+  display: block;
+  margin: auto;
+  width: var(--icon-size, #{fun.convert-px(40)});
+}
+
+.lines {
+  fill: var(--color-fg);
+  stroke-width: 4;
+}
+
+.picture {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-border);
+}
+
+.background {
+  fill: var(--color-bg);
+  stroke: var(--color-border);
+  stroke-width: 4;
+}
diff --git a/src/components/Icons/Blog/Blog.tsx b/src/components/Icons/Blog/Blog.tsx
new file mode 100644
index 0000000..bd32111
--- /dev/null
+++ b/src/components/Icons/Blog/Blog.tsx
@@ -0,0 +1,62 @@
+import styles from './Blog.module.scss';
+
+const BlogIcon = () => {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.icon}
+    >
+      <path
+        className={styles.background}
+        d="M 28.992096,1.4822128 H 90.770752 V 82.312253 H 28.992096 Z"
+      />
+      <path
+        className={styles.background}
+        d="m 19.110672,8.992094 h 61.778656 v 80.83004 H 19.110672 Z"
+      />
+      <path
+        className={styles.background}
+        d="m 9.229248,17.687748 h 61.778656 v 80.83004 H 9.229248 Z"
+      />
+      <path
+        className={styles.picture}
+        d="M 18.149242,74.65544 H 33.375246 V 90.194215 H 18.149242 Z"
+      />
+      <path
+        className={styles.picture}
+        d="M 18.142653,24.858688 H 62.094499 V 35.908926 H 18.142653 Z"
+      />
+      <path
+        className={styles.lines}
+        d="m 17.618576,41.908926 h 45 v 2 h -45 z"
+      />
+      <path
+        className={styles.lines}
+        d="m 17.618576,49.908926 h 45 v 2 h -45 z"
+      />
+      <path
+        className={styles.lines}
+        d="m 17.618576,57.908926 h 45 v 2 h -45 z"
+      />
+      <path
+        className={styles.lines}
+        d="m 17.618576,65.908926 h 45 v 2 h -45 z"
+      />
+      <path
+        className={styles.lines}
+        d="m 41.833105,73.424828 h 20.785471 v 2 H 41.833105 Z"
+      />
+      <path
+        className={styles.lines}
+        d="m 41.833105,81.424828 h 20.785471 v 2 H 41.833105 Z"
+      />
+      <path
+        className={styles.lines}
+        d="m 41.833105,89.424828 h 20.785471 v 2 H 41.833105 Z"
+      />
+    </svg>
+  );
+};
+
+export default BlogIcon;
diff --git a/src/components/Icons/CV/CV.module.scss b/src/components/Icons/CV/CV.module.scss
new file mode 100644
index 0000000..448bac6
--- /dev/null
+++ b/src/components/Icons/CV/CV.module.scss
@@ -0,0 +1,53 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+  display: block;
+  margin: auto;
+  width: var(--icon-size, #{fun.convert-px(40)});
+}
+
+.lock {
+  fill: var(--color-bg);
+  stroke: var(--color-border);
+  stroke-width: 3;
+}
+
+.lines {
+  stroke-width: 4;
+}
+
+.seal-top {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-border);
+  stroke-width: 2;
+}
+
+.seal-bottom {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-border);
+  stroke-width: 2;
+}
+
+.diploma {
+  fill: var(--color-bg);
+  stroke: var(--color-border);
+  stroke-width: 4;
+}
+
+.top {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-border);
+  stroke-width: 4;
+}
+
+.handle {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-border);
+  stroke-width: 3;
+}
+
+.bottom {
+  fill: var(--color-primary);
+  stroke: var(--color-border);
+  stroke-width: 4;
+}
diff --git a/src/components/Icons/CV/CV.tsx b/src/components/Icons/CV/CV.tsx
new file mode 100644
index 0000000..0672ac4
--- /dev/null
+++ b/src/components/Icons/CV/CV.tsx
@@ -0,0 +1,58 @@
+import styles from './CV.module.scss';
+
+const CVIcon = () => {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.icon}
+    >
+      <path
+        className={styles.bottom}
+        d="M 0.72670447,42.521138 H 77.467597 v 54.36591 H 0.72670447 Z"
+      />
+      <path
+        className={styles.handle}
+        d="m 22.263958,32.886587 c 12.6493,-1.81512 21.613185,-1.732794 33.666442,0 l 1.683339,10.99517 h -5.891624 v -5.474639 c -7.949741,-2.722434 -16.311959,-2.706359 -25.249837,0 v 5.474639 h -5.891625 z"
+      />
+      <path
+        className={styles.top}
+        d="M 0.72670447,42.521138 H 77.467597 V 73.884317 H 0.72670447 Z"
+      />
+      <path
+        className={styles.diploma}
+        d="M 44.217117,1.106205 H 98.921356 V 36.610421 H 44.217117 Z"
+      />
+      <path
+        className={styles['seal-bottom']}
+        d="m 84.933665,34.721635 h 6.957554 v 10.216808 l -3.478793,-3.767744 -3.478761,3.767744 z"
+      />
+      <path
+        className={styles['seal-top']}
+        d="m 93.326919,30.779639 a 4.914472,4.9188584 0 0 1 -4.914493,4.918858 4.914472,4.9188584 0 0 1 -4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914493,4.918858 z"
+      />
+      <path
+        className={styles.lines}
+        d="m 54.53557,14.438273 h 34.067282 v 1.515453 H 54.53557 Z"
+      />
+      <path
+        className={styles.lines}
+        d="m 54.53557,21.384062 h 34.067282 v 1.515453 H 54.53557 Z"
+      />
+      <path
+        className={styles.lines}
+        d="m 54.53557,28.329927 h 17.563315 v 1.515454 H 54.53557 Z"
+      />
+      <path
+        className={styles.lines}
+        d="m 63.495911,7.4924218 h 16.146628 v 1.515452 H 63.495911 Z"
+      />
+      <path
+        className={styles.lock}
+        d="M 34.048314,65.601104 H 44.145988 V 80.557785 H 34.048314 Z"
+      />
+    </svg>
+  );
+};
+
+export default CVIcon;
diff --git a/src/components/Icons/Close/Close.module.scss b/src/components/Icons/Close/Close.module.scss
new file mode 100644
index 0000000..235991c
--- /dev/null
+++ b/src/components/Icons/Close/Close.module.scss
@@ -0,0 +1,13 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+  display: block;
+  margin: auto;
+  width: var(--icon-size, #{fun.convert-px(40)});
+}
+
+.line {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-border);
+  stroke-width: 3;
+}
diff --git a/src/components/Icons/Close/Close.tsx b/src/components/Icons/Close/Close.tsx
new file mode 100644
index 0000000..0e7dab7
--- /dev/null
+++ b/src/components/Icons/Close/Close.tsx
@@ -0,0 +1,22 @@
+import styles from './Close.module.scss';
+
+const CloseIcon = () => {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.icon}
+    >
+      <path
+        className={styles.line}
+        d="m 3.6465459,3.6465457 c 2.8785908,-2.87859094 7.5134341,-2.87859094 10.3920251,0 L 96.353457,85.96143 c 2.878587,2.878591 2.878587,7.513434 0,10.392025 -2.878597,2.878591 -7.513432,2.878591 -10.392029,0 L 3.6465449,14.038571 C 0.76795398,11.15998 0.76795398,6.5251366 3.6465459,3.6465457 Z"
+      />
+      <path
+        className={styles.line}
+        d="m 96.353453,3.6465462 c 2.878592,2.8785909 2.878592,7.5134348 0,10.3920258 L 14.03857,96.353457 c -2.878589,2.878587 -7.5134339,2.878587 -10.3920248,0 -2.87859087,-2.878597 -2.87858988,-7.513442 -10e-7,-10.392029 L 85.961428,3.6465462 c 2.878591,-2.87859099 7.513434,-2.87859099 10.392025,0 z"
+      />
+    </svg>
+  );
+};
+
+export default CloseIcon;
diff --git a/src/components/Icons/Contact/Contact.module.scss b/src/components/Icons/Contact/Contact.module.scss
new file mode 100644
index 0000000..cf4b03e
--- /dev/null
+++ b/src/components/Icons/Contact/Contact.module.scss
@@ -0,0 +1,29 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+  display: block;
+  margin: auto;
+  width: var(--icon-size, #{fun.convert-px(40)});
+}
+
+.envelop {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-border);
+  stroke-width: 4;
+}
+
+.lines {
+  fill: var(--color-border);
+}
+
+.background {
+  fill: var(--color-shadow-dark);
+  stroke: var(--color-border);
+  stroke-width: 4;
+}
+
+.paper {
+  fill: var(--color-bg);
+  stroke: var(--color-border);
+  stroke-width: 4;
+}
diff --git a/src/components/Icons/Contact/Contact.tsx b/src/components/Icons/Contact/Contact.tsx
new file mode 100644
index 0000000..19295d0
--- /dev/null
+++ b/src/components/Icons/Contact/Contact.tsx
@@ -0,0 +1,54 @@
+import styles from './Contact.module.scss';
+
+const ContactIcon = () => {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.icon}
+    >
+      <path
+        className={styles.background}
+        d="M 1.5262527,42.535416 H 98.473747 V 98.371662 H 1.5262527 Z"
+      />
+      <path
+        className={styles.envelop}
+        d="m 49.999985,1.6283075 c 2.855148,0 48.473753,40.8563885 48.473753,40.8563885 H 1.5262359 c 0,0 45.6186001,-40.8563885 48.4737491,-40.8563885 z"
+      />
+      <path
+        className={styles.paper}
+        d="M 8.3434839,28.463842 H 91.656465 V 97.348661 H 8.3434839 Z"
+      />
+      <path
+        className={styles.envelop}
+        d="M 49.999985,63.571925 98.473738,98.371692 H 1.5262359 Z"
+      />
+      <path
+        className={styles.lines}
+        d="m 24.562439,37.640923 h 50.875053 v 1.5 H 24.562439 Z"
+      />
+      <path
+        className={styles.lines}
+        d="m 24.562439,45.140923 h 50.875053 v 1.5 H 24.562439 Z"
+      />
+      <path
+        className={styles.lines}
+        d="m 24.562443,52.640923 h 50.875053 v 1.5 H 24.562443 Z"
+      />
+      <path
+        className={styles.lines}
+        d="M 24.562447,60.140923 H 75.4375 v 1.5 H 24.562447 Z"
+      />
+      <path
+        className={styles.envelop}
+        d="M 39.93749,70.965004 1.5262559,43.55838 v 54.813242 z"
+      />
+      <path
+        className={styles.envelop}
+        d="M 60.0625,70.965004 98.473738,43.55838 v 54.813242 z"
+      />
+    </svg>
+  );
+};
+
+export default ContactIcon;
diff --git a/src/components/Icons/Hamburger/Hamburger.module.scss b/src/components/Icons/Hamburger/Hamburger.module.scss
index 1ae01bb..5916e8c 100644
--- a/src/components/Icons/Hamburger/Hamburger.module.scss
+++ b/src/components/Icons/Hamburger/Hamburger.module.scss
@@ -6,17 +6,17 @@
   &,
   &::before,
   &::after {
-    background: var(--color-primary);
+    background: var(--color-primary-lighter);
     background-image: linear-gradient(
       to right,
       var(--color-primary-light) 0%,
-      var(--color-highlight) 100%
+      var(--color-primary-lighter) 100%
     );
     border: fun.convert-px(1) solid var(--color-border);
     border-radius: fun.convert-px(3);
     display: block;
     width: var(--btn-size, fun.convert-px(50));
-    height: fun.convert-px(6);
+    height: fun.convert-px(7);
     margin: auto;
     transition: all 0.25s ease-in-out 0s, transform 0.4s ease-in 0s;
   }
@@ -25,6 +25,7 @@
   &::after {
     content: "";
     position: absolute;
+    left: fun.convert-px(-1);
   }
 
   &::before {
diff --git a/src/components/Icons/Home/Home.module.scss b/src/components/Icons/Home/Home.module.scss
new file mode 100644
index 0000000..2e1df3a
--- /dev/null
+++ b/src/components/Icons/Home/Home.module.scss
@@ -0,0 +1,42 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+  display: block;
+  margin: auto;
+  width: var(--icon-size, #{fun.convert-px(40)});
+}
+
+.wall {
+  fill: var(--color-bg);
+  stroke: var(--color-border);
+  stroke-width: 4;
+}
+
+.indoor {
+  fill: var(--color-shadow);
+  stroke: var(--color-border);
+  stroke-width: 4;
+}
+
+.door {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-border);
+  stroke-width: 4;
+}
+
+.roof {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-border);
+  stroke-width: 4;
+}
+
+.chimney {
+  fill: var(--color-bg);
+  stroke: var(--color-border);
+  stroke-width: 4;
+}
+
+.lines {
+  fill: var(--color-border);
+  stroke-width: 4;
+}
diff --git a/src/components/Icons/Home/Home.tsx b/src/components/Icons/Home/Home.tsx
new file mode 100644
index 0000000..11c0c8c
--- /dev/null
+++ b/src/components/Icons/Home/Home.tsx
@@ -0,0 +1,42 @@
+import styles from './Home.module.scss';
+
+const HomeIcon = () => {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.icon}
+    >
+      <path
+        className={styles.wall}
+        d="M 9.2669392,15.413749 H 90.709833 V 97.751815 H 9.2669392 Z"
+      />
+      <path
+        className={styles.indoor}
+        d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z"
+      />
+      <path
+        className={styles.door}
+        d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z"
+      />
+      <path
+        className={styles.roof}
+        d="M 4.8219096,11.719266 H 94.720716 l 3.47304,33.365604 H 1.7830046 Z"
+      />
+      <path
+        className={styles.chimney}
+        d="M 70.41848,2.2481852 H 82.957212 V 22.636212 H 70.41848 Z"
+      />
+      <path
+        className={styles.lines}
+        d="M 3.9536645,19.342648 H 61.003053 v 3.293563 H 3.9536645 Z"
+      />
+      <path
+        className={styles.lines}
+        d="m 38.973709,32.057171 h 57.049389 v 3.293563 H 38.973709 Z"
+      />
+    </svg>
+  );
+};
+
+export default HomeIcon;
diff --git a/src/components/Icons/Search/Search.module.scss b/src/components/Icons/Search/Search.module.scss
new file mode 100644
index 0000000..5016ae1
--- /dev/null
+++ b/src/components/Icons/Search/Search.module.scss
@@ -0,0 +1,31 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+  display: block;
+  margin: auto;
+  width: var(--icon-size, #{fun.convert-px(40)});
+}
+
+.big-handle {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-border);
+  stroke-width: 3;
+}
+
+.glass {
+  fill: var(--color-bg-opacity);
+  stroke: var(--color-border);
+  stroke-width: 2;
+}
+
+.upright {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-border);
+  stroke-width: 3;
+}
+
+.small-handle {
+  fill: var(--color-primary);
+  stroke: var(--color-border);
+  stroke-width: 2;
+}
diff --git a/src/components/Icons/Search/Search.tsx b/src/components/Icons/Search/Search.tsx
new file mode 100644
index 0000000..abb7b53
--- /dev/null
+++ b/src/components/Icons/Search/Search.tsx
@@ -0,0 +1,30 @@
+import styles from './Search.module.scss';
+
+const SearchIcon = () => {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.icon}
+    >
+      <path
+        className={styles['small-handle']}
+        d="m 45.39268,48.064692 5.611922,4.307881 -10.292886,13.414321 -5.611923,-4.307882 z"
+      />
+      <path
+        className={styles.upright}
+        d="M 90.904041,28.730105 A 27.725691,27.730085 0 0 1 63.17835,56.46019 27.725691,27.730085 0 0 1 35.45266,28.730105 27.725691,27.730085 0 0 1 63.17835,1.00002 27.725691,27.730085 0 0 1 90.904041,28.730105 Z"
+      />
+      <path
+        className={styles.glass}
+        d="M 82.438984,28.730105 A 19.260633,19.263685 0 0 1 63.17835,47.99379 19.260633,19.263685 0 0 1 43.917716,28.730105 19.260633,19.263685 0 0 1 63.17835,9.4664203 19.260633,19.263685 0 0 1 82.438984,28.730105 Z"
+      />
+      <path
+        className={styles['big-handle']}
+        d="m 35.826055,60.434903 5.75193,4.415356 c 0.998045,0.766128 1.184879,2.186554 0.418913,3.184809 L 18.914717,98.117182 c -0.765969,0.998256 -2.186094,1.185131 -3.18414,0.418997 L 9.9786472,94.120827 C 8.9806032,93.354698 8.7937692,91.934273 9.5597392,90.936014 L 32.641919,60.853903 c 0.765967,-0.998254 2.186091,-1.185129 3.184136,-0.419 z"
+      />
+    </svg>
+  );
+};
+
+export default SearchIcon;
diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx
index da4e029..b32c3d3 100644
--- a/src/components/Icons/index.tsx
+++ b/src/components/Icons/index.tsx
@@ -1,3 +1,17 @@
+import BlogIcon from './Blog/Blog';
+import CloseIcon from './Close/Close';
+import ContactIcon from './Contact/Contact';
+import CVIcon from './CV/CV';
 import HamburgerIcon from './Hamburger/Hamburger';
+import HomeIcon from './Home/Home';
+import SearchIcon from './Search/Search';
 
-export { HamburgerIcon };
+export {
+  BlogIcon,
+  CloseIcon,
+  ContactIcon,
+  CVIcon,
+  HamburgerIcon,
+  HomeIcon,
+  SearchIcon,
+};
diff --git a/src/components/MainNav/MainNav.module.scss b/src/components/MainNav/MainNav.module.scss
index d732b99..8bd730f 100644
--- a/src/components/MainNav/MainNav.module.scss
+++ b/src/components/MainNav/MainNav.module.scss
@@ -3,6 +3,8 @@
 @use "@styles/abstracts/placeholders";
 
 .wrapper {
+  --icon-size: #{fun.convert-px(25)};
+
   display: flex;
   flex-flow: column nowrap;
   place-items: center;
@@ -17,6 +19,8 @@
     }
 
     @include mix.dimensions("md") {
+      --icon-size: #{fun.convert-px(30)};
+
       width: unset;
       height: unset;
     }
@@ -123,18 +127,6 @@
   }
 }
 
-.icon {
-  display: block;
-  width: fun.convert-px(25);
-  margin: auto;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      width: fun.convert-px(30);
-    }
-  }
-}
-
 .checkbox:not(:checked) {
   ~ .nav {
     opacity: 0;
diff --git a/src/components/MainNav/MainNav.tsx b/src/components/MainNav/MainNav.tsx
index eb44e77..0f5147b 100644
--- a/src/components/MainNav/MainNav.tsx
+++ b/src/components/MainNav/MainNav.tsx
@@ -1,12 +1,14 @@
 import { SetStateAction } from 'react';
 import Link from 'next/link';
 import { t } from '@lingui/macro';
-import { HamburgerIcon } from '@components/Icons';
+import {
+  BlogIcon,
+  ContactIcon,
+  CVIcon,
+  HamburgerIcon,
+  HomeIcon,
+} from '@components/Icons';
 import { mainNav } from '@config/nav';
-import ArticlesIcon from '@assets/images/icon-articles.svg';
-import ContactIcon from '@assets/images/icon-contact.svg';
-import CVIcon from '@assets/images/icon-cv.svg';
-import HomeIcon from '@assets/images/icon-home.svg';
 import styles from './MainNav.module.scss';
 
 const MainNav = ({
@@ -21,7 +23,7 @@ const MainNav = ({
       case 'home':
         return <HomeIcon />;
       case 'blog':
-        return <ArticlesIcon />;
+        return <BlogIcon />;
       case 'contact':
         return <ContactIcon />;
       case 'cv':
@@ -36,7 +38,7 @@ const MainNav = ({
       <li key={item.id} className={styles.item}>
         <Link href={item.slug}>
           <a className={styles.link}>
-            <span className={styles.icon}>{getIcon(item.id)}</span>
+            {getIcon(item.id)}
             <span>{item.name}</span>
           </a>
         </Link>
diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss
index cd66341..441b20c 100644
--- a/src/styles/base/_colors.scss
+++ b/src/styles/base/_colors.scss
@@ -12,7 +12,6 @@
   --color-primary-dark: #{var.$color_blue-dark};
   --color-border: #{var.$color_grey-dark};
   --color-border-light: #{var.$color_grey};
-  --color-highlight: #{var.$color_blue-brighter};
   --color-shadow: #{var.$color_grey-dark-o70};
   --color-shadow-light: #{var.$color_grey-dark-o40};
   --color-shadow-lighter: #{var.$color_grey-dark-o20};