diff --git a/app/soapbox/components/ui/file-input/file-input.tsx b/app/soapbox/components/ui/file-input/file-input.tsx
index 48209ee7f..1f37f9279 100644
--- a/app/soapbox/components/ui/file-input/file-input.tsx
+++ b/app/soapbox/components/ui/file-input/file-input.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-interface IFileInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'required' | 'disabled' | 'name'> { }
+interface IFileInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'required' | 'disabled' | 'name' | 'accept'> { }
 
 const FileInput = forwardRef<HTMLInputElement, IFileInput>((props, ref) => {
   return (
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index bd9977ea2..24ad615a3 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -14,6 +14,7 @@ import {
   FormActions,
   FormGroup,
   Input,
+  FileInput,
   Textarea,
   Button,
   Toggle,
@@ -199,10 +200,8 @@ const SoapboxConfig: React.FC = () => {
             labelText={<FormattedMessage id='soapbox_config.fields.logo_label' defaultMessage='Logo' />}
             hintText={<FormattedMessage id='soapbox_config.hints.logo' defaultMessage='SVG. At most 2 MB. Will be displayed to 50px height, maintaining aspect ratio' />}
           >
-            <input
-              type='file'
+            <FileInput
               onChange={handleFileChange(['logo'])}
-              className='text-sm'
               accept='image/svg,image/png'
             />
           </FormGroup>