2 files changed, 13 insertions, 19 deletions
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>