diff --git a/docs/src/assets/icons/arrow-left.svg b/docs/src/assets/icons/arrow-left.svg
deleted file mode 100644
index 8fba4141..00000000
--- a/docs/src/assets/icons/arrow-left.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0607 3.93934C10.4749 3.35355 9.52507 3.35355 8.93927 3.93934L1.93927 10.9393C1.35357 11.5251 1.35357 12.4749 1.93927 13.0607L8.93927 20.0607C9.52507 20.6464 10.4749 20.6464 11.0607 20.0607C11.6464 19.4749 11.6464 18.5251 11.0607 17.9393L6.62127 13.5H21C21.8284 13.5 22.5 12.8284 22.5 12C22.5 11.1716 21.8284 10.5 21 10.5H6.62127L11.0607 6.06066C11.6464 5.47487 11.6464 4.52513 11.0607 3.93934Z" fill="black"/>
-</svg>
diff --git a/docs/src/assets/icons/arrow-right.svg b/docs/src/assets/icons/arrow-right.svg
deleted file mode 100644
index 0a748a12..00000000
--- a/docs/src/assets/icons/arrow-right.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9393 3.93934C13.5251 3.35355 14.4749 3.35355 15.0607 3.93934L22.0607 10.9393C22.6464 11.5251 22.6464 12.4749 22.0607 13.0607L15.0607 20.0607C14.4749 20.6464 13.5251 20.6464 12.9393 20.0607C12.3536 19.4749 12.3536 18.5251 12.9393 17.9393L17.3787 13.5H3C2.17157 13.5 1.5 12.8284 1.5 12C1.5 11.1716 2.17157 10.5 3 10.5H17.3787L12.9393 6.06066C12.3536 5.47487 12.3536 4.52513 12.9393 3.93934Z" fill="black"/>
-</svg>
diff --git a/docs/src/assets/icons/close.svg b/docs/src/assets/icons/close.svg
deleted file mode 100644
index 882ddfab..00000000
--- a/docs/src/assets/icons/close.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.3 12.179C14.2767 12.1558 14.2583 12.1282 14.2456 12.0978C14.233 12.0674 14.2266 12.0349 14.2266 12.002C14.2266 11.9691 14.233 11.9366 14.2456 11.9062C14.2583 11.8758 14.2767 11.8482 14.3 11.825L19.563 6.563C19.8443 6.28134 20.0021 5.89948 20.0018 5.50144C20.0016 5.10339 19.8432 4.72176 19.5615 4.4405C19.2798 4.15924 18.898 4.00138 18.4999 4.00166C18.1019 4.00194 17.7203 4.16034 17.439 4.442L12.177 9.7C12.1538 9.72328 12.1262 9.74175 12.0958 9.75435C12.0654 9.76696 12.0329 9.77345 12 9.77345C11.9671 9.77345 11.9346 9.76696 11.9042 9.75435C11.8738 9.74175 11.8462 9.72328 11.823 9.7L6.561 4.442C6.42174 4.30267 6.25639 4.19213 6.07441 4.1167C5.89242 4.04127 5.69736 4.00242 5.50036 4.00237C5.1025 4.00228 4.7209 4.16024 4.4395 4.4415C4.15811 4.72276 3.99997 5.10429 3.99988 5.50214C3.99978 5.9 4.15774 6.2816 4.439 6.563L9.7 11.825C9.72329 11.8482 9.74176 11.8758 9.75436 11.9062C9.76696 11.9366 9.77345 11.9691 9.77345 12.002C9.77345 12.0349 9.76696 12.0674 9.75436 12.0978C9.74176 12.1282 9.72329 12.1558 9.7 12.179L4.43901 17.442C4.29974 17.5813 4.18928 17.7467 4.11393 17.9288C4.03859 18.1108 3.99983 18.3059 3.99988 18.5029C3.99997 18.9007 4.15811 19.2822 4.43951 19.5635C4.57884 19.7028 4.74424 19.8132 4.92626 19.8886C5.10828 19.9639 5.30336 20.0027 5.50036 20.0026C5.89822 20.0025 6.27974 19.8444 6.56101 19.563L11.823 14.3C11.8462 14.2767 11.8738 14.2582 11.9042 14.2456C11.9346 14.233 11.9671 14.2266 12 14.2266C12.0329 14.2266 12.0654 14.233 12.0958 14.2456C12.1262 14.2582 12.1538 14.2767 12.177 14.3L17.439 19.563C17.7203 19.8444 18.1018 20.0025 18.4997 20.0026C18.8975 20.0027 19.2791 19.8448 19.5605 19.5635C19.8419 19.2822 20 18.9007 20.0001 18.5029C20.0002 18.105 19.8423 17.7234 19.561 17.442L14.3 12.179Z" fill="black"/>
-</svg>
diff --git a/docs/src/assets/icons/github.svg b/docs/src/assets/icons/github.svg
deleted file mode 100644
index 60cc1475..00000000
--- a/docs/src/assets/icons/github.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24"><path d="M11.999.5C5.649.5.5 5.648.5 12c0 5.082 3.294 9.392 7.865 10.914.574.103.756-.236.756-.541 0-.274.006-1.037 0-1.997-3.198.694-3.861-1.515-3.861-1.515-.523-1.329-1.275-1.682-1.275-1.682-1.045-.714.077-.699.077-.699 1.153.08 1.762 1.184 1.762 1.184 1.026 1.758 2.691 1.25 3.346.956.106-.742.402-1.251.731-1.536-2.554-.292-5.238-1.277-5.238-5.686 0-1.255.448-2.281 1.184-3.086-.118-.289-.514-1.46.112-3.043 0 0 .967-.309 3.162 1.18a11.011 11.011 0 012.88-.388c.976.005 1.96.132 2.88.388 2.195-1.488 3.159-1.18 3.159-1.18.627 1.583.232 2.754.114 3.043.736.805 1.183 1.831 1.183 3.086 0 4.42-2.689 5.391-5.251 5.674.412.357.787 1.047.787 2.12v3.184c0 .308.186.647.77.536C20.209 21.389 23.5 17.08 23.5 12 23.5 5.648 18.352.5 11.999.5z"></path></svg>
\ No newline at end of file
diff --git a/docs/src/assets/icons/menu.svg b/docs/src/assets/icons/menu.svg
deleted file mode 100644
index 8db03e66..00000000
--- a/docs/src/assets/icons/menu.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M22.5 2.5H1.5C0.947715 2.5 0.5 2.94772 0.5 3.5V4.5C0.5 5.05228 0.947715 5.5 1.5 5.5H22.5C23.0523 5.5 23.5 5.05228 23.5 4.5V3.5C23.5 2.94772 23.0523 2.5 22.5 2.5Z" fill="black"/>
-<path d="M22.5 10.5H1.5C0.947715 10.5 0.5 10.9477 0.5 11.5V12.5C0.5 13.0523 0.947715 13.5 1.5 13.5H22.5C23.0523 13.5 23.5 13.0523 23.5 12.5V11.5C23.5 10.9477 23.0523 10.5 22.5 10.5Z" fill="black"/>
-<path d="M22.5 18.5H1.5C0.947715 18.5 0.5 18.9477 0.5 19.5V20.5C0.5 21.0523 0.947715 21.5 1.5 21.5H22.5C23.0523 21.5 23.5 21.0523 23.5 20.5V19.5C23.5 18.9477 23.0523 18.5 22.5 18.5Z" fill="black"/>
-</svg>
diff --git a/docs/src/components/Btn/style.scss b/docs/src/components/Btn/style.scss
index 39b54648..f1b0fdd3 100644
--- a/docs/src/components/Btn/style.scss
+++ b/docs/src/components/Btn/style.scss
@@ -9,7 +9,6 @@
   text-align: center;
   line-height: 1;
   text-decoration: none;
-
   white-space: nowrap;
 
   &--primary {
@@ -46,6 +45,8 @@
   }
 
   &__icon {
+    transition: opacity 0.2s $ease;
+
     &:first-child {
       margin-right: 0.5rem;
     }
diff --git a/docs/src/components/Icon/index.vue b/docs/src/components/Icon/index.vue
index 29836e84..6978c360 100644
--- a/docs/src/components/Icon/index.vue
+++ b/docs/src/components/Icon/index.vue
@@ -1,3 +1,11 @@
+<template>
+  <div :class="`icon icon--${size}`">
+    <svg>
+      <use :xlink:href="`${require('remixicon/fonts/remixicon.symbol.svg')}#ri-${name}`" />
+    </svg>
+  </div>
+</template>
+
 <script>
 export default {
   name: 'Icon',
@@ -13,25 +21,6 @@ export default {
       default: 'normal',
     },
   },
-
-  render(createElement) {
-    let svgHTML = ''
-    try {
-      svgHTML = require(`!html-loader!@/assets/icons/${this.name}.svg`)
-    } catch (e) {
-      // eslint-disable-next-line
-      console.warn(`Unable to load "${this.name}.svg" icon. Verify it exists in the icons directory.`, e)
-    }
-    return createElement(
-      'div',
-      {
-        class: `icon icon--${this.size}`,
-        domProps: {
-          innerHTML: svgHTML,
-        },
-      },
-    )
-  },
 }
 </script>
 
diff --git a/docs/src/components/Icon/style.scss b/docs/src/components/Icon/style.scss
index 44a905fe..eb582ea1 100644
--- a/docs/src/components/Icon/style.scss
+++ b/docs/src/components/Icon/style.scss
@@ -1,7 +1,16 @@
 .icon {
   display: inline-flex;
-  width: 1rem;
-  height: 1rem;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0 0.4rem;
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
 
   &::v-deep > svg {
     width: 100%;
diff --git a/docs/src/components/PageNavigation/index.vue b/docs/src/components/PageNavigation/index.vue
index 57f161d8..96c1d150 100644
--- a/docs/src/components/PageNavigation/index.vue
+++ b/docs/src/components/PageNavigation/index.vue
@@ -3,7 +3,7 @@
     <btn
       class="page-navigation__previous"
       type="secondary"
-      icon="arrow-left"
+      icon="arrow-left-line"
       icon-position="before"
       :to="previousPage.link"
       v-if="previousPage"
@@ -13,7 +13,7 @@
     <btn
       class="page-navigation__next"
       type="secondary"
-      icon="arrow-right"
+      icon="arrow-right-line"
       :to="nextPage.redirect || nextPage.link"
       v-if="nextPage"
     >
diff --git a/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue b/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue
index 93bb57f0..38c03b49 100644
--- a/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/MenuBar.vue
@@ -153,7 +153,7 @@ export default {
 <style lang="scss" scoped>
 .divider {
   width: 2px;
-  height: 1.5rem;
+  height: 1.25rem;
   background-color: rgba($colorBlack, 0.1);
   margin-left: 0.5rem;
   margin-right: 0.75rem;
diff --git a/docs/src/docPages/overview/upgrade-guide.md b/docs/src/docPages/overview/upgrade-guide.md
index c0491f49..bce937c5 100644
--- a/docs/src/docPages/overview/upgrade-guide.md
+++ b/docs/src/docPages/overview/upgrade-guide.md
@@ -46,7 +46,7 @@ new Editor({
     Paragraph,
     Text,
     // all your other extensions
-  ]
+  ],
 })
 ```
 
diff --git a/docs/src/layouts/App/index.vue b/docs/src/layouts/App/index.vue
index b2f642fc..201691ad 100644
--- a/docs/src/layouts/App/index.vue
+++ b/docs/src/layouts/App/index.vue
@@ -16,6 +16,7 @@
 
         <div class="app__menu">
           <span class="app__menu-item">
+            <icon name="search-line" />
             Search
             <div class="app__search-docsearch" />
           </span>
@@ -28,14 +29,14 @@
           @click="menuIsVisible = true"
           v-if="!menuIsVisible"
         >
-          <icon name="menu" />
+          <icon name="menu-fill" />
         </button>
         <button
           class="app__close-icon"
           @click="menuIsVisible = false"
           v-if="menuIsVisible"
         >
-          <icon name="close" />
+          <icon name="close-fill" />
         </button>
       </div>
       <div class="app__mobile-menu" v-if="menuIsVisible">
@@ -54,11 +55,13 @@
       </main>
 
       <portal :to="menuPortal">
-        <g-link class="app__menu-item" to="/installation">
-          Documentation
+        <g-link class="app__menu-item" to="/installation" v-if="$route.name === 'home'">
+          <icon name="book-3-line" />
+          <span>Documentation</span>
         </g-link>
         <g-link class="app__menu-item" to="https://github.com/ueberdosis/tiptap-next">
-          GitHub
+          <icon name="github-fill" />
+          <span>GitHub</span>
         </g-link>
       </portal>
 
diff --git a/docs/src/layouts/App/style.scss b/docs/src/layouts/App/style.scss
index 6ab0de2f..e821aebd 100644
--- a/docs/src/layouts/App/style.scss
+++ b/docs/src/layouts/App/style.scss
@@ -46,7 +46,8 @@ $menuBreakPoint: 800px;
   }
 
   &__menu-item {
-    display: block;
+    display: flex;
+    align-items: center;
     overflow: hidden;
     position: relative;
     font-weight: 500;
@@ -59,6 +60,12 @@ $menuBreakPoint: 800px;
         margin-right: 0;
       }
     }
+
+    svg {
+      width: 1rem;
+      height: 1rem;
+      margin: 0 0.25rem;
+    }
   }
 
   &__content {
diff --git a/docs/src/pages/index.vue b/docs/src/pages/index.vue
index a4318f20..e84e6935 100644
--- a/docs/src/pages/index.vue
+++ b/docs/src/pages/index.vue
@@ -9,12 +9,12 @@
           tiptap gives you full control about every single aspect of your text editor experience. It’s customizable, comes with a ton of extensions, is open source, has an extensive documentation, and is simply a joy to use. Join our welcoming community and start building cool things!
         </p>
         <btn-wrapper>
-          <btn type="primary" icon="arrow-right" to="/installation">
+          <btn type="primary" icon="arrow-right-line" to="/installation">
             Get Started
           </btn>
           <btn
             type="secondary"
-            icon="github"
+            icon="github-fill"
             icon-position="before"
             to="https://github.com/ueberdosis/tiptap-next"
           >
@@ -38,13 +38,13 @@
             It’s headless and comes without any CSS. You are in full control over markup, styling and behaviour.
           </p>
           <div>
-            <btn type="tertiary" icon="arrow-right" to="/guide/styling">
+            <btn type="tertiary" icon="arrow-right-line" to="/guide/styling">
               Styling
             </btn>
           </div>
         </feature-item>
 
-        <feature-item icon="file-copy-fill">
+        <feature-item icon="reactjs-fill">
           <h3 class="is-h2">
             Framework-agnostic
           </h3>
@@ -52,7 +52,7 @@
             Out of the box, tiptap works with Vanilla JavaScript and Vue.js, but it’s also possible to use it in <g-link to="/installation/react">React</g-link>, <g-link to="/installation/svelte">Svelte</g-link> and others.
           </p>
           <div>
-            <btn type="tertiary" icon="arrow-right" to="/installation">
+            <btn type="tertiary" icon="arrow-right-line" to="/installation">
               Installation
             </btn>
           </div>
@@ -66,7 +66,7 @@
             TypeScript helps to find bugs early and gives you a nice autocomplete for the API on top of the extensive human written documentation.
           </p>
           <div>
-            <btn type="tertiary" icon="arrow-right" to="/guide/typescript">
+            <btn type="tertiary" icon="arrow-right-line" to="/guide/typescript">
               TypeScript
             </btn>
           </div>
@@ -80,7 +80,7 @@
             Real-time collaboration, syncing between different devices and working offline isn’t hard anymore. Keep everything in sync with the magic of <g-link to="https://github.com/yjs/yjs">Y.js</g-link>.
           </p>
           <div>
-            <btn type="tertiary" icon="arrow-right" to="/guide/collaborative-editing">
+            <btn type="tertiary" icon="arrow-right-line" to="/guide/collaborative-editing">
               Collaborative editing
             </btn>
           </div>
@@ -94,7 +94,7 @@
             There’s so much content shared, so many people helping out in issues and a ton of community extensions, you’ll be surprised how much that all can help.
           </p>
           <div>
-            <btn type="tertiary" icon="arrow-right" to="https://github.com/ueberdosis/tiptap-next">
+            <btn type="tertiary" icon="arrow-right-line" to="https://github.com/ueberdosis/tiptap-next">
               GitHub
             </btn>
           </div>
@@ -133,7 +133,7 @@
 &lt;/html&gt;</prism>
         <!-- eslint-enable -->
         <div>
-          <btn type="tertiary" icon="arrow-right" to="/installation">
+          <btn type="tertiary" icon="arrow-right-line" to="/installation">
             Learn more
           </btn>
         </div>
@@ -193,7 +193,7 @@
           /> -->
         </logo-list>
         <div>
-          <btn type="tertiary" icon="arrow-right" to="https://github.com/ueberdosis/tiptap/network/dependents?package_id=UGFja2FnZS0xMzE5OTg0ODc%3D">
+          <btn type="tertiary" icon="arrow-right-line" to="https://github.com/ueberdosis/tiptap/network/dependents?package_id=UGFja2FnZS0xMzE5OTg0ODc%3D">
             And many more
           </btn>
         </div>