diff --git a/css/main.css b/css/main.css
index 7cc05f2..434d9d5 100644
--- a/css/main.css
+++ b/css/main.css
@@ -483,15 +483,6 @@ nav ul li ul li a {
   background-color: green;
 }
 
-.mdi-twitter {
-  color: #2196f3;
-}
-
-.mdi-email {
-  color: #f32821;
-}
-
-
 #mapButton {
   background-color: yellow;
   color: black;
diff --git a/index.html b/index.html
index fe7eaab..a6e9b6b 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,6 @@
     <link rel="icon" href="img/Logo-invert.png" type="image/gif">
     
 		<link rel="stylesheet" type="text/css" href="css/main.css">
-		<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.0.45/css/materialdesignicons.min.css">
     <link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
     
 		<script src="js/main.js"></script>
@@ -48,13 +47,13 @@
             <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
             <ul class="nav-list">
               <li>
-                <a href="https://fosc.space/"><i class="mdi mdi-home"></i>Home</a>
+                <a href="https://fosc.space/"><span class="iconify" data-icon="mdi:home"></span> Home</a>
               </li>
               <li>
-                <a href="https://blog.fosc.space"><i class="mdi mdi-notebook"></i>Blog</a>
+                <a href="https://blog.fosc.space"><span class="iconify" data-icon="mdi:notebook"></span> Blog</a>
               </li>
               <li>
-                <a href="#!"><i class="mdi mdi-cogs"></i>Services</a>
+                <a href="#!"><span class="iconify" data-icon="mdi:cogs"></span></i> Services</a>
                 <ul class="nav-dropdown">
                   <li>
                     <a href="https://cloud.fosc.space">Cloud</a>
@@ -77,13 +76,13 @@
                 </ul>
               </li>
               <li>
-                <a href="https://gallery.fosc.space"><i class="mdi mdi-image"></i>Gallery</a>
+                <a href="https://gallery.fosc.space"><span class="iconify" data-icon="mdi:image"></span> Gallery</a>
               </li>
               <li>
-                <a href="https://download.fosc.space"><i class="mdi mdi-download"></i>Downloads</a>
+                <a href="https://download.fosc.space"><span class="iconify" data-icon="mdi:download"></span> Downloads</a>
               </li>
               <li>
-                <a href="#contact"><i class="mdi mdi-account"></i>Contact</a>
+                <a href="#contact"><span class="iconify" data-icon="mdi:account"></span> Contact</a>
               </li>
             </ul>
           </nav>
@@ -333,8 +332,8 @@
           <hr>
           
           <div class="contact_methods">
-            <p><i class="mdi mdi-twitter"></i> <a href="https://twitter.com/foscupct">Contact us on Twitter</a></p>
-            <p><i class="mdi mdi-email"></i> <a href="mailto:contact@fosc.space">Send us an email</a></p>
+            <p><span class="iconify" data-icon="mdi:twitter" style="color: #2196f3"></span> <a href="https://twitter.com/foscupct">Contact us on Twitter</a></p>
+            <p><span class="iconify" data-icon="mdi:email" style="color: #f32821;"></span> <a href="mailto:contact@fosc.space">Send us an email</a></p>
           </div>
 
           <div class="button">
@@ -363,6 +362,8 @@
       </div>
     </footer>
 
+    <!-- With the DOM ready, swap all icons -->
+    <script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>
   </body>
 
 </html>