diff --git a/layouts/default.vue b/layouts/default.vue
index 1c9ce2d2..0717ce1d 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -53,7 +53,7 @@
               <div v-if="$auth.user" ref="mobileMenu" class="dropdown">
                 <button class="control">
                   <img :src="$auth.user.avatar_url" class="user-icon" />
-                  <span class="caret"></span>
+                  <DropdownIcon class="caret" />
                 </button>
                 <ul class="content card" @click="removeFocus">
                   <li>
@@ -290,6 +290,7 @@ import MoonIcon from '~/assets/images/utils/moon.svg?inline'
 
 import SunIcon from '~/assets/images/utils/sun.svg?inline'
 import PlusIcon from '~/assets/images/utils/plus.svg?inline'
+import DropdownIcon from '~/assets/images/utils/dropdown.svg?inline'
 import LogOutIcon from '~/assets/images/utils/log-out.svg?inline'
 import HeartIcon from '~/assets/images/utils/heart.svg?inline'
 
@@ -316,6 +317,7 @@ export default {
     ShieldIcon,
     ModerationIcon,
     PlusIcon,
+    DropdownIcon,
     HeartIcon,
   },
   directives: {
@@ -577,10 +579,10 @@ export default {
                 width: 2rem;
               }
 
-              .caret::after {
-                content: '\23F7';
+              .caret {
                 color: inherit;
                 margin-left: 0.25rem;
+                width: 1rem;
               }
             }