diff --git a/src/assets/icons/openverse-logo-text.svg b/src/assets/icons/openverse-logo-text.svg
index c228afff0e..30e4d375f3 100644
--- a/src/assets/icons/openverse-logo-text.svg
+++ b/src/assets/icons/openverse-logo-text.svg
@@ -1,11 +1,15 @@
 <svg
   viewBox="0 0 95 15"
+  width="95"
+  height="15"
   xmlns="http://www.w3.org/2000/svg"
   fill="currentColor"
 >
+  <g id="logo">
   <path
     fill-rule="evenodd"
     clip-rule="evenodd"
     d="M11.0953 6.14123C11.0953 9.02825 8.70687 11.3686 5.76056 11.3686C2.81424 11.3686 0.425781 9.02825 0.425781 6.14123C0.425781 3.25421 2.81424 0.913818 5.76056 0.913818C8.70687 0.913818 11.0953 3.25421 11.0953 6.14123ZM7.89439 6.14122C7.89439 7.29603 6.93901 8.23219 5.76049 8.23219C4.58196 8.23219 3.62658 7.29603 3.62658 6.14122C3.62658 4.98641 4.58196 4.05026 5.76049 4.05026C6.93901 4.05026 7.89439 4.98641 7.89439 6.14122ZM15.59 14.811H11.9299V1.08903H15.5635V2.83027H15.643C16.0409 1.81671 16.9957 0.959089 18.5074 0.959089C20.5231 0.959089 22.4858 2.46643 22.4858 6.07884C22.4858 9.53532 20.6558 11.1986 18.4809 11.1986C17.0487 11.1986 16.0674 10.4449 15.643 9.43136H15.59V14.811ZM17.1283 3.71388C16.1204 3.71388 15.5104 4.59749 15.5104 6.07884C15.5104 7.5342 16.1204 8.4438 17.1283 8.4438C18.1361 8.4438 18.7196 7.56018 18.7196 6.07884C18.7196 4.59749 18.1361 3.71388 17.1283 3.71388ZM33.3253 7.84606C32.9805 9.92514 31.1637 11.2506 28.3391 11.2506C25.0768 11.2506 23.0877 9.3339 23.0877 6.10482C23.0877 3.01218 25.1033 0.959089 28.2595 0.959089C31.3361 0.959089 33.3253 2.90173 33.3253 6.07884V6.91047H26.6947V7.0664C26.6947 8.02798 27.3312 8.72967 28.4186 8.72967C29.1679 8.72967 29.7713 8.41131 29.9835 7.84606H33.3253ZM28.3391 3.47998C27.4439 3.47998 26.7146 4.07122 26.6947 4.93534H29.9569C29.937 4.07772 29.2475 3.47998 28.3391 3.47998ZM37.9187 5.45511C37.9254 4.46754 38.4956 3.86981 39.404 3.86981C40.3256 3.86981 40.8693 4.46754 40.8627 5.45511V11.0686H44.5228V4.70144C44.5294 2.5314 43.1304 0.959089 40.9688 0.959089C39.4703 0.959089 38.2834 1.72575 37.8392 2.9862H37.7331V1.08903H34.2587V11.0686H37.9187V5.45511ZM51.8232 1.08903H55.6689L52.2476 11.0686H48.004L44.5826 1.08903H48.4283L50.0727 7.69013H50.1788L51.8232 1.08903ZM60.7199 11.2506C63.5445 11.2506 65.3613 9.92514 65.7061 7.84606H62.3643C62.1521 8.41131 61.5487 8.72967 60.7995 8.72967C59.7121 8.72967 59.0755 8.02798 59.0755 7.0664V6.91047H65.7061V6.07884C65.7061 2.90173 63.7169 0.959089 60.6403 0.959089C57.4842 0.959089 55.4685 3.01218 55.4685 6.10482C55.4685 9.3339 57.4577 11.2506 60.7199 11.2506ZM59.0755 4.93534C59.0954 4.07122 59.8248 3.47998 60.7199 3.47998C61.6283 3.47998 62.3179 4.07772 62.3378 4.93534H59.0755ZM70.2996 11.0686H66.6395V1.08903H70.1935V2.9862H70.2996C70.6709 1.58281 71.5196 0.959089 72.607 0.959089C72.9253 0.959089 73.2435 1.01107 73.5353 1.09553V4.15568C73.1706 4.03224 72.5606 3.97376 72.1826 3.97376C71.1019 3.97376 70.2996 4.72743 70.2996 5.87093V11.0686ZM83.4846 4.3376C83.3918 2.22603 81.6015 0.959089 78.6575 0.959089C75.7467 0.959089 73.9498 2.12857 73.9631 4.20766C73.9498 5.77997 74.9908 6.78702 77.0662 7.14437L78.8697 7.45623C79.6654 7.59917 80.0234 7.80708 80.0367 8.18391C80.0234 8.59973 79.5394 8.83362 78.8697 8.83362C78.0409 8.83362 77.4574 8.48278 77.3579 7.84606H73.7244C73.9233 9.89266 75.7268 11.2506 78.8432 11.2506C81.6612 11.2506 83.7366 9.90565 83.7498 7.76809C83.7366 6.29324 82.7287 5.43562 80.6467 5.06528L78.578 4.70144C77.8022 4.565 77.5834 4.29212 77.5966 3.99975C77.5834 3.58393 78.1072 3.35004 78.7371 3.35004C79.4598 3.35004 80.0632 3.72687 80.1163 4.3376H83.4846ZM94.4583 7.84606C94.1135 9.92514 92.2968 11.2506 89.4721 11.2506C86.2099 11.2506 84.2207 9.3339 84.2207 6.10482C84.2207 3.01218 86.2364 0.959089 89.3926 0.959089C92.4692 0.959089 94.4583 2.90173 94.4583 6.07884V6.91047H87.8278V7.0664C87.8278 8.02798 88.4643 8.72967 89.5517 8.72967C90.301 8.72967 90.9044 8.41131 91.1165 7.84606H94.4583ZM89.4721 3.47998C88.577 3.47998 87.8477 4.07122 87.8278 4.93534H91.09C91.0701 4.07772 90.3805 3.47998 89.4721 3.47998Z"
   />
+  </g>
 </svg>
diff --git a/src/components/VAudioTrack/VPlayPause.vue b/src/components/VAudioTrack/VPlayPause.vue
index 033c13a210..ee02424298 100644
--- a/src/components/VAudioTrack/VPlayPause.vue
+++ b/src/components/VAudioTrack/VPlayPause.vue
@@ -2,18 +2,18 @@
   <VIconButton
     v-bind="$attrs"
     :tabindex="isTabbable ? 0 : -1"
-    class="play-pause flex-shrink-0 border-dark-charcoal bg-dark-charcoal text-white focus-visible:border-pink focus-visible:shadow-ring focus-visible:outline-none disabled:opacity-70"
+    class="play-pause flex-shrink-0 border-dark-charcoal bg-dark-charcoal text-white focus-visible:border-pink focus-visible:shadow-ring focus-visible:outline-none active:shadow-ring disabled:opacity-70"
     :icon-props="icon === undefined ? undefined : { iconPath: icon }"
     :aria-label="$t(label)"
     :button-props="buttonProps"
     @click.stop.prevent="handleClick"
     @mousedown="handleMouseDown"
   >
-    <template #default="{ iconSizeClasses }">
+    <template #default="{ iconSize }">
       <svg
         v-if="isLoading"
         class="loading p-2"
-        :class="iconSizeClasses"
+        :class="iconSize"
         xmlns="http://www.w3.org/2000/svg"
         overflow="visible"
         viewBox="0 0 12 12"
diff --git a/src/components/VAudioTrack/layouts/VFullLayout.vue b/src/components/VAudioTrack/layouts/VFullLayout.vue
index f9542d5140..65b3561301 100644
--- a/src/components/VAudioTrack/layouts/VFullLayout.vue
+++ b/src/components/VAudioTrack/layouts/VFullLayout.vue
@@ -62,8 +62,7 @@
         <VIcon
           :icon-path="externalIcon"
           :rtl-flip="true"
-          :size="4"
-          class="ms-2 md:h-6 md:w-6"
+          class="h-4 w-4 ms-2 md:h-6 md:w-6"
         />
       </VButton>
     </div>
diff --git a/src/components/VButton.vue b/src/components/VButton.vue
index db20e365ae..497a9c3da6 100644
--- a/src/components/VButton.vue
+++ b/src/components/VButton.vue
@@ -10,7 +10,7 @@
       isActive && $style[`${variant}-pressed`],
       $style[`size-${size}`],
       isPlainDangerous
-        ? ''
+        ? 'border border-tx'
         : 'border border-tx focus-visible:ring focus-visible:ring-pink',
     ]"
     :aria-pressed="pressed"
diff --git a/src/components/VCheckbox/VCheckbox.vue b/src/components/VCheckbox/VCheckbox.vue
index a7779552e2..ba24b671fa 100644
--- a/src/components/VCheckbox/VCheckbox.vue
+++ b/src/components/VCheckbox/VCheckbox.vue
@@ -9,10 +9,9 @@
     />
     <VIcon
       v-show="localCheckedState"
-      class="absolute text-white start-0"
+      class="absolute h-5 w-5 text-white start-0"
       :icon-path="checkmark"
       view-box="0 0 20 20"
-      :size="5"
     />
     <!--  @slot The checkbox label  --><slot />
   </label>
diff --git a/src/components/VContentReport/VContentReportForm.vue b/src/components/VContentReport/VContentReportForm.vue
index 01c0283181..db6c38e19f 100644
--- a/src/components/VContentReport/VContentReportForm.vue
+++ b/src/components/VContentReport/VContentReportForm.vue
@@ -88,7 +88,7 @@
             :href="DMCA_FORM_URL"
           >
             {{ $t('media-details.content-report.form.dmca.open') }}
-            <VIcon :size="4" class="ms-1" :icon-path="icons.externalLink" />
+            <VIcon class="h-4 w-4 ms-1" :icon-path="icons.externalLink" />
           </VButton>
           <VButton
             v-else
diff --git a/src/components/VExternalSearch/VExternalSourceList.vue b/src/components/VExternalSearch/VExternalSourceList.vue
index a3626a43b0..869ea513ce 100644
--- a/src/components/VExternalSearch/VExternalSourceList.vue
+++ b/src/components/VExternalSearch/VExternalSourceList.vue
@@ -53,9 +53,8 @@
           {{ source.name }}
           <VIcon
             :icon-path="icons.externalLink"
-            :size="4"
             :rtl-flip="true"
-            class="ms-2"
+            class="h-4 w-4 ms-2"
           />
         </VButton>
       </div>
diff --git a/src/components/VHeader/VHeaderDesktop.vue b/src/components/VHeader/VHeaderDesktop.vue
index 3dd07d1298..273845f5ad 100644
--- a/src/components/VHeader/VHeaderDesktop.vue
+++ b/src/components/VHeader/VHeaderDesktop.vue
@@ -16,9 +16,12 @@
       size="medium"
       @submit="handleSearch"
     >
-      <VClearButton
+      <VSearchBarButton
         v-show="searchTerm !== ''"
-        class="hidden me-2 group-focus-within:flex"
+        :icon-path="closeIcon"
+        :aria-label="$t('browse-page.search-form.clear')"
+        inner-area-classes="bg-white hover:bg-dark-charcoal-10"
+        class="hidden group-focus-within:flex"
         @click="clearSearchTerm"
       />
       <span
@@ -78,22 +81,24 @@ import { Focus } from '~/utils/focus-management'
 
 import { ensureFocus } from '~/utils/reakit-utils/focus'
 
-import VClearButton from '~/components/VHeader/VSearchBar/VClearButton.vue'
 import VFilterButton from '~/components/VHeader/VFilterButton.vue'
 import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
 import VLogoButton from '~/components/VHeader/VLogoButton.vue'
+import VSearchBarButton from '~/components/VHeader/VHeaderMobile/VSearchBarButton.vue'
 import VSearchGridFilter from '~/components/VFilters/VSearchGridFilter.vue'
 import VSearchTypePopover from '~/components/VContentSwitcher/VSearchTypePopover.vue'
 
+import closeIcon from '~/assets/icons/close-small.svg'
+
 /**
  * The desktop search header.
  */
 export default defineComponent({
   name: 'VHeaderDesktop',
   components: {
-    VClearButton,
     VFilterButton,
     VLogoButton,
+    VSearchBarButton,
     VSearchGridFilter,
     VSearchTypePopover,
     VSearchBar,
@@ -239,6 +244,7 @@ export default defineComponent({
     }
 
     return {
+      closeIcon,
       filterButtonRef,
       searchBarRef,
       isFetching,
diff --git a/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue b/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
index ab52170ae8..d496458453 100644
--- a/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
+++ b/src/components/VHeader/VHeaderMobile/VSearchBarButton.vue
@@ -14,8 +14,9 @@
           :icon-path="iconPath"
           :rtl-flip="rtlFlip"
           class="pointer-events-none"
-          :size="iconSize"
+          :class="iconSize"
         />
+        <!--  @slot The element that can show a notification label for the button, can be absolutely positioned  -->
         <slot name="notification" />
       </span>
     </template>
@@ -27,22 +28,41 @@ import { defineComponent, PropType } from '@nuxtjs/composition-api'
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VIconButton from '~/components/VIconButton/VIconButton.vue'
 
+/**
+ * The buttons placed inside the mobile search bar in the header.
+ * They are based on the VIconButton, look like they have a smallish focus area
+ * (32x32px), but actually have a larger tappable area of 48x48px to comply with
+ * accessibility requirements.
+ */
 export default defineComponent({
   name: 'VSearchBarButton',
   components: { VIcon, VIconButton },
   props: {
+    /**
+     * The path for the icon.
+     */
     iconPath: {
       type: String,
       required: true,
     },
+    /**
+     * The size of the inner area that has a different color,
+     * sometimes only when interactive.
+     */
     innerSize: {
       type: Number as PropType<6 | 8>,
       default: 8,
     },
+    /**
+     * The classes to apply to the inner area for styling resting/hover states.
+     */
     innerAreaClasses: {
       type: String,
       default: '',
     },
+    /**
+     * Whether the icon should be flipped when the page is in RTL mode.
+     */
     rtlFlip: {
       type: Boolean,
       default: false,
diff --git a/src/components/VHeader/VSearchBar/VClearButton.vue b/src/components/VHeader/VSearchBar/VClearButton.vue
deleted file mode 100644
index 6ddfa75ff1..0000000000
--- a/src/components/VHeader/VSearchBar/VClearButton.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <VIconButton
-    :button-props="{ variant: 'plain' }"
-    :icon-props="{ iconPath: closeIcon }"
-    size="smaller"
-    class="border-tx text-dark-charcoal-70"
-    :aria-label="$t('browse-page.search-form.clear')"
-    @click="$emit('click')"
-  />
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
-
-import closeIcon from '~/assets/icons/close-small.svg'
-
-export default defineComponent({
-  name: 'VClearButton',
-  setup() {
-    return {
-      closeIcon,
-    }
-  },
-})
-</script>
diff --git a/src/components/VHeader/meta/VContentSettingsButton.stories.mdx b/src/components/VHeader/meta/VContentSettingsButton.stories.mdx
deleted file mode 100644
index e08f4a8d7e..0000000000
--- a/src/components/VHeader/meta/VContentSettingsButton.stories.mdx
+++ /dev/null
@@ -1,45 +0,0 @@
-import {
-  ArgsTable,
-  Canvas,
-  Description,
-  Meta,
-  Story,
-} from '@storybook/addon-docs'
-import VContentSettingsButton from '~/components/VHeader/VHeaderMobile/VContentSettingsButton.vue'
-
-<Meta
-  title="Components/VHeader/VHeaderMobile/VContentSettingsButton"
-  component={VContentSettingsButton}
-  decorators={[
-    () => ({
-      template: '<div class="bg-dark-charcoal-20 p-10"><story /></div>',
-    }),
-  ]}
-  argTypes={{
-    click: {
-      action: 'click',
-    },
-  }}
-/>
-
-export const Template = (args, { argTypes }) => ({
-  template: `<VContentSettingsButton v-bind="args" v-on="args" />`,
-  components: { VContentSettingsButton },
-  props: Object.keys(argTypes),
-  setup() {
-    return { args }
-  },
-})
-
-# Content Settings button
-
-<Description of={VContentSettingsButton} />
-
-<ArgsTable of={VContentSettingsButton} />
-
-The button that opens the content settings modal on screens up to `lg` breakpoint.
-If any filters are selected, it shows a pink dot in the top right corner.
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
diff --git a/src/components/VHeader/meta/VSearchBarButtons.stories.mdx b/src/components/VHeader/meta/VSearchBarButtons.stories.mdx
new file mode 100644
index 0000000000..f692bbb4d5
--- /dev/null
+++ b/src/components/VHeader/meta/VSearchBarButtons.stories.mdx
@@ -0,0 +1,117 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from '@storybook/addon-docs'
+import VContentSettingsButton from '~/components/VHeader/VHeaderMobile/VContentSettingsButton'
+import VSearchBarButton from '~/components/VHeader/VHeaderMobile/VSearchBarButton.vue'
+
+import closeIcon from '~/assets/icons/close-small.svg'
+import chevronLeftIcon from '~/assets/icons/chevron-left.svg'
+import sourceIcon from '~/assets/icons/source.svg'
+
+<Meta
+  title="Components/VHeader/VHeaderMobile/VSearchBarButton"
+  component={VSearchBarButton}
+  argTypes={{
+    iconPath: {
+      control: {
+        type: 'select',
+        options: [closeIcon, chevronLeftIcon, sourceIcon],
+        default: closeIcon,
+      },
+    },
+    innerSize: {
+      control: {
+        type: 'select',
+        options: [6, 8],
+      },
+    },
+    rtlFlip: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    innerAreaClasses: {
+      control: {
+        type: 'text',
+      },
+    },
+    click: {
+      action: 'click',
+    },
+  }}
+/>
+
+export const Template = (args) => ({
+  template: `<div class="bg-white"><VSearchBarButton v-bind="args" v-on="args" /></div>`,
+  components: { VSearchBarButton },
+  setup() {
+    if (!args.iconPath) {
+      args.iconPath = closeIcon
+    }
+    return { args, closeIcon, chevronLeftIcon, sourceIcon }
+  },
+})
+
+# Content Settings button
+
+<Description of={VSearchBarButton} />
+
+<ArgsTable of={VSearchBarButton} />
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+export const contentSettingsTemplate = (args) => ({
+  template: `
+    <div class="bg-dark-charcoal-10 rounded-sm flex justify-end">
+    <VContentSettingsButton :are-filters-selected="true" v-bind="args" />
+    </div>
+  `,
+  components: { VContentSettingsButton },
+  setup() {
+    return { args }
+  },
+})
+
+## Content Settings button with filters selected
+
+The button that opens the content settings modal on screens up to `lg` breakpoint.
+If any filters are selected, it shows a pink dot in the top right corner.
+
+<Canvas>
+  <Story name="Content Settings Button with filters selected">
+    {contentSettingsTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Clear button and Back button
+
+export const activeButtonsTemplate = (args) => ({
+  template: `<div class="rounded-sm bg-white flex justify-between ring ring-pink">
+  <VSearchBarButton
+    :icon-path="chevronLeftIcon"
+    :inner-size="8"
+    :aria-label="$t('header.back-button')"
+    inner-area-classes="hover:bg-dark-charcoal hover:text-white"
+    :rtl-flip="true"
+  />
+  <VSearchBarButton
+    :icon-path="closeIcon"
+    :aria-label="$t('browse-page.search-form.clear')"
+    inner-area-classes="bg-white hover:bg-dark-charcoal-10"
+  />
+</div>`,
+  components: { VContentSettingsButton },
+  setup() {
+    return { args, closeIcon, chevronLeftIcon }
+  },
+})
+
+<Canvas>
+  <Story name="Clear and Back Buttons">{activeButtonsTemplate.bind({})}</Story>
+</Canvas>
diff --git a/src/components/VHeaderOld/VLogoButtonOld.vue b/src/components/VHeaderOld/VLogoButtonOld.vue
index 68543c2473..41791b39f0 100644
--- a/src/components/VHeaderOld/VLogoButtonOld.vue
+++ b/src/components/VHeaderOld/VLogoButtonOld.vue
@@ -11,16 +11,19 @@
       :status="isFetching ? 'loading' : 'idle'"
       :auto-resize="autoResizeLogo"
     />
-    <OpenverseLogoText
+    <svg
       v-show="!isHeaderScrolled"
-      class="-ml-1 mt-1 me-3"
-      :class="{
-        'hidden sm:block md:hidden': isSearchRoute,
-      }"
-      :aria-hidden="true"
+      class="-ml-1 mt-1 flex flex-shrink-0 flex-grow-0 me-3"
+      :class="{ 'hidden sm:block md:hidden': isSearchRoute }"
+      xmlns="http://www.w3.org/2000/svg"
       width="95"
       height="15"
-    />
+      viewBox="0 0 95 15"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <use :href="`${OpenverseLogoText}#logo`" />
+    </svg>
   </VButton>
 </template>
 <script>
@@ -29,11 +32,11 @@ import { defineComponent } from '@nuxtjs/composition-api'
 import VLogoLoader from '~/components/VLogoLoader/VLogoLoader.vue'
 import VButton from '~/components/VButton.vue'
 
-import OpenverseLogoText from '~/assets/icons/openverse-logo-text.svg?inline'
+import OpenverseLogoText from '~/assets/icons/openverse-logo-text.svg'
 
 export default defineComponent({
   name: 'VLogoButtonOld',
-  components: { OpenverseLogoText, VLogoLoader, VButton },
+  components: { VLogoLoader, VButton },
   props: {
     isFetching: {
       type: Boolean,
@@ -52,5 +55,8 @@ export default defineComponent({
       default: true,
     },
   },
+  setup() {
+    return { OpenverseLogoText }
+  },
 })
 </script>
diff --git a/src/components/VHeaderOld/VPageMenu/VPageList.vue b/src/components/VHeaderOld/VPageMenu/VPageList.vue
index 55fd912c6a..2ec09aced5 100644
--- a/src/components/VHeaderOld/VPageMenu/VPageList.vue
+++ b/src/components/VHeaderOld/VPageMenu/VPageList.vue
@@ -18,8 +18,7 @@
         <VIcon
           v-if="isLinkExternal(page)"
           :icon-path="externalLinkIcon"
-          :size="5"
-          class="mb-0.5 self-center"
+          class="mb-0.5 h-5 w-5 self-center"
         />
       </div>
     </VItem>
diff --git a/src/components/VIcon/VIcon.vue b/src/components/VIcon/VIcon.vue
index 50b1815b16..14eea89bf2 100644
--- a/src/components/VIcon/VIcon.vue
+++ b/src/components/VIcon/VIcon.vue
@@ -1,7 +1,7 @@
 <template>
   <svg
-    class="v-icon flex-shrink-0 flex-grow-0"
-    :class="[`w-${size}`, `h-${size}`, { 'rtl-flip': rtlFlip }]"
+    class="v-icon h-6 w-6 flex-shrink-0 flex-grow-0"
+    :class="{ 'rtl-flip': rtlFlip }"
     xmlns="http://www.w3.org/2000/svg"
     :viewBox="viewBox"
     aria-hidden="true"
@@ -57,17 +57,6 @@ export default defineComponent({
       type: String,
       default: 'icon',
     },
-    /**
-     * The size of the icon based on tailwind values. Possible values:
-     * 4 - 1rem, 5 - 1.25rem, 6 - 1.5rem.
-     *
-     * @default 6
-     */
-    size: {
-      type: Number,
-      default: 6,
-      validator: (val: number) => [4, 5, 6].includes(val),
-    },
     /**
      * whether to flip the icon for RTL languages; This generally makes sense
      * for directional icons such as those involving arrows.
diff --git a/src/components/VIconButton/VIconButton.vue b/src/components/VIconButton/VIconButton.vue
index 2feb4de23d..73dc8785a5 100644
--- a/src/components/VIconButton/VIconButton.vue
+++ b/src/components/VIconButton/VIconButton.vue
@@ -2,16 +2,16 @@
   <VButton
     v-bind="buttonProps"
     size="disabled"
-    class="icon-button flex flex-shrink-0 items-center justify-center border-1.5 active:shadow-ring"
+    class="icon-button flex flex-shrink-0 items-center justify-center border-1.5"
     :class="buttonSizeClasses"
     :type="type"
     v-on="$listeners"
   >
-    <slot name="default" :icon-size-classes="iconSizeClasses" />
+    <slot name="default" :icon-size="iconSize" />
     <VIcon
       v-if="iconProps"
       class="pointer-events-none"
-      :class="iconSizeClasses"
+      :class="iconSize"
       v-bind="iconProps"
     />
   </VButton>
@@ -80,13 +80,13 @@ export default defineComponent({
     const type = (attrs['type'] ?? 'button') as ButtonType
 
     const buttonSizeClasses = computed(() => SIZE_MAP[props.size].button)
-    const iconSizeClasses = computed(() => SIZE_MAP[props.size].icon)
+    const iconSize = computed(() => SIZE_MAP[props.size].icon)
 
     return {
       type,
 
       buttonSizeClasses,
-      iconSizeClasses,
+      iconSize,
     }
   },
 })
diff --git a/src/components/VLicense/VLicense.vue b/src/components/VLicense/VLicense.vue
index 474450ad70..c4381c1647 100644
--- a/src/components/VLicense/VLicense.vue
+++ b/src/components/VLicense/VLicense.vue
@@ -4,10 +4,9 @@
       <VIcon
         v-for="(name, index) in iconNames"
         :key="index"
-        :class="['icon', bgFilled ? 'bg-filled text-black' : '']"
+        :class="['icon h-4 w-4', { 'bg-filled text-black': bgFilled }]"
         view-box="0 0 30 30"
         :icon-path="icons[name]"
-        :size="4"
       />
     </div>
     <span v-show="!hideName" class="name" :aria-label="licenseName.readable">
diff --git a/src/components/VLicense/VLicenseElements.vue b/src/components/VLicense/VLicenseElements.vue
index e07cfdbd67..e9ed8ffaff 100644
--- a/src/components/VLicense/VLicenseElements.vue
+++ b/src/components/VLicense/VLicenseElements.vue
@@ -7,7 +7,7 @@
     >
       <VIcon
         view-box="0 0 30 30"
-        :size="isSmall ? 5 : 6"
+        :class="isSmall ? 'h-5 w-5' : 'h-6 w-6'"
         :icon-path="icons[element]"
       />
       <span v-if="elementNames.length > 1" class="sr-only">{{
diff --git a/src/components/VLink.vue b/src/components/VLink.vue
index 324c316569..cef9cf8538 100644
--- a/src/components/VLink.vue
+++ b/src/components/VLink.vue
@@ -22,8 +22,7 @@
     <slot /><VIcon
       v-if="showExternalIcon && !isInternal"
       :icon-path="externalLinkIcon"
-      class="inline-block"
-      :size="4"
+      class="inline-block h-4 w-4"
       rtl-flip
     />
   </a>
diff --git a/src/components/VModal/VModalContent.vue b/src/components/VModal/VModalContent.vue
index f4d68bd1ff..2a19833a27 100644
--- a/src/components/VModal/VModalContent.vue
+++ b/src/components/VModal/VModalContent.vue
@@ -47,7 +47,7 @@
                 @click="hide()"
               >
                 {{ $t('modal.close') }}
-                <VIcon :icon-path="closeIcon" class="ms-2" :size="5" />
+                <VIcon :icon-path="closeIcon" class="h-5 w-5 ms-2" />
               </VButton>
             </div>
           </slot>
@@ -67,8 +67,14 @@
   </VTeleport>
 </template>
 
-<script>
-import { defineComponent, toRefs, ref, computed } from '@nuxtjs/composition-api'
+<script lang="ts">
+import {
+  defineComponent,
+  toRefs,
+  ref,
+  computed,
+  PropType,
+} from '@nuxtjs/composition-api'
 import { FocusTrap } from 'focus-trap-vue'
 import { Portal as VTeleport } from 'portal-vue'
 
@@ -81,6 +87,8 @@ import VLogoButtonOld from '~/components/VHeaderOld/VLogoButtonOld.vue'
 
 import closeIcon from '~/assets/icons/close.svg'
 
+type ModalVariant = 'default' | 'full' | 'two-thirds'
+
 /**
  * Renders the inner content of a modal and manages focus.
  */
@@ -93,9 +101,7 @@ export default defineComponent({
       required: true,
     },
     hide: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<() => void>} */ (
-        Function
-      ),
+      type: Function as PropType<() => void>,
       required: true,
     },
     hideOnEsc: {
@@ -115,26 +121,19 @@ export default defineComponent({
       default: true,
     },
     triggerElement: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<HTMLElement>} */ (
-        process.server ? Object : HTMLElement
-      ),
+      type: (process.server ? Object : HTMLElement) as PropType<HTMLElement>,
+      default: null,
     },
     initialFocusElement: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<HTMLElement>} */ (
-        process.server ? Object : HTMLElement
-      ),
-      required: false,
+      type: (process.server ? Object : HTMLElement) as PropType<HTMLElement>,
+      default: null,
     },
     variant: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<'default' | 'full' | 'two-thirds'>} */ (
-        String
-      ),
+      type: String as PropType<ModalVariant>,
       default: 'default',
     },
     mode: {
-      type: /** @type {import('@nuxtjs/composition-api').PropType<'dark' | 'light'>} */ (
-        String
-      ),
+      type: String as PropType<'dark' | 'light'>,
       default: 'light',
     },
     /**
@@ -152,11 +151,11 @@ export default defineComponent({
     }
 
     const propsRefs = toRefs(props)
-    const closeButton = ref()
+    const closeButton = ref<InstanceType<typeof VButton> | null>(null)
     const initialFocusElement = computed(
       () => props.initialFocusElement || closeButton.value?.$el
     )
-    const dialogRef = ref()
+    const dialogRef = ref<HTMLElement | null>(null)
     const { onKeyDown, onBlur } = useDialogContent({
       dialogRef,
       visibleRef: propsRefs.visible,
diff --git a/src/pages/image/_id.vue b/src/pages/image/_id.vue
index 99afc1fecb..01a82feecc 100644
--- a/src/pages/image/_id.vue
+++ b/src/pages/image/_id.vue
@@ -41,8 +41,7 @@
         <VIcon
           :icon-path="externalIcon"
           :rtl-flip="true"
-          class="ms-2 md:h-6 md:w-6"
-          :size="4"
+          class="h-4 w-4 ms-2 md:h-6 md:w-6"
         />
       </VButton>
       <div class="description-bold flex flex-1 flex-col justify-center">
diff --git a/tailwind.safelist.txt b/tailwind.safelist.txt
index 86be84af14..bd4943f05f 100644
--- a/tailwind.safelist.txt
+++ b/tailwind.safelist.txt
@@ -4,7 +4,9 @@ that they are generated by Tailwind.
 w-4
 w-5
 w-6
+w-8
 
 h-4
 h-5
 h-6
+h-8
diff --git a/test/storybook/visual-regression/v-button.spec.ts-snapshots/plain--avoid-hovered-linux.png b/test/storybook/visual-regression/v-button.spec.ts-snapshots/plain--avoid-hovered-linux.png
index 57fa4f60f1..b7a34e6f5b 100644
Binary files a/test/storybook/visual-regression/v-button.spec.ts-snapshots/plain--avoid-hovered-linux.png and b/test/storybook/visual-regression/v-button.spec.ts-snapshots/plain--avoid-hovered-linux.png differ
diff --git a/test/storybook/visual-regression/v-button.spec.ts-snapshots/plain--avoid-pressed-hovered-linux.png b/test/storybook/visual-regression/v-button.spec.ts-snapshots/plain--avoid-pressed-hovered-linux.png
index 57fa4f60f1..b7a34e6f5b 100644
Binary files a/test/storybook/visual-regression/v-button.spec.ts-snapshots/plain--avoid-pressed-hovered-linux.png and b/test/storybook/visual-regression/v-button.spec.ts-snapshots/plain--avoid-pressed-hovered-linux.png differ
diff --git a/test/storybook/visual-regression/v-button.spec.ts-snapshots/plain--avoid-pressed-linux.png b/test/storybook/visual-regression/v-button.spec.ts-snapshots/plain--avoid-pressed-linux.png
index 57fa4f60f1..b7a34e6f5b 100644
Binary files a/test/storybook/visual-regression/v-button.spec.ts-snapshots/plain--avoid-pressed-linux.png and b/test/storybook/visual-regression/v-button.spec.ts-snapshots/plain--avoid-pressed-linux.png differ
diff --git a/test/storybook/visual-regression/v-button.spec.ts-snapshots/plain--avoid-resting-linux.png b/test/storybook/visual-regression/v-button.spec.ts-snapshots/plain--avoid-resting-linux.png
index 57fa4f60f1..b7a34e6f5b 100644
Binary files a/test/storybook/visual-regression/v-button.spec.ts-snapshots/plain--avoid-resting-linux.png and b/test/storybook/visual-regression/v-button.spec.ts-snapshots/plain--avoid-resting-linux.png differ
diff --git a/tsconfig.json b/tsconfig.json
index 801d262f5d..1ae0a7c1e4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -86,6 +86,7 @@
     "src/components/VHeader/VSearchBar/**.vue",
     "src/components/VImageDetails/VRelatedImages.vue",
     "src/components/VModal/VInputModal.vue",
+    "src/components/VModal/VModalContent.vue",
     "src/pages/feedback.vue",
     "src/pages/search-help.vue",
     "src/composables/types.js",