diff --git a/src/components/load-gap.tsx b/src/components/load-gap.tsx
index 33ef63645..48aac0a06 100644
--- a/src/components/load-gap.tsx
+++ b/src/components/load-gap.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import Icon from 'soapbox/components/icon';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 
 const messages = defineMessages({
   load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
@@ -19,8 +19,8 @@ const LoadGap: React.FC<ILoadGap> = ({ disabled, maxId, onClick }) => {
   const handleClick = () => onClick(maxId);
 
   return (
-    <button className='load-more load-gap' disabled={disabled} onClick={handleClick} aria-label={intl.formatMessage(messages.load_more)}>
-      <Icon src={require('@tabler/icons/outline/dots.svg')} />
+    <button className='m-0 box-border block w-full border-0 bg-transparent p-4 text-gray-900' disabled={disabled} onClick={handleClick} aria-label={intl.formatMessage(messages.load_more)}>
+      <SvgIcon className='mx-auto' src={require('@tabler/icons/outline/dots.svg')} />
     </button>
   );
 };