diff --git a/src/assets/social/DynamicSocialIcon.tsx b/src/assets/social/DynamicSocialIcon.tsx
index cfc9f9ece..c662b8b32 100644
--- a/src/assets/social/DynamicSocialIcon.tsx
+++ b/src/assets/social/DynamicSocialIcon.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import dynamic from 'next/dynamic'
+import { SVGProps } from 'react'
 
 import { QuestionCircleSVG } from '@ensdomains/thorin'
 
@@ -34,11 +35,10 @@ export const DynamicSocialIcon = ({
 }: {
   name: keyof typeof socialIconTypes | string
   showDefault?: boolean
-  fill?: string
-}) => {
+} & Omit<SVGProps<SVGSVGElement>, 'name'>) => {
   if (name in socialIconTypes) {
     const key = name as keyof typeof socialIconTypes
-    const Icon = socialIconTypes[key] as any
+    const Icon = socialIconTypes[key]
     const fill = socialIconColors[key]
     return <Icon {...props} fill={fill} />
   }
diff --git a/src/components/pages/profile/ProfileButton.tsx b/src/components/pages/profile/ProfileButton.tsx
index b30e5373d..f1184ebdb 100644
--- a/src/components/pages/profile/ProfileButton.tsx
+++ b/src/components/pages/profile/ProfileButton.tsx
@@ -68,6 +68,8 @@ export const SocialProfileButton = ({
       <RecordItem
         icon={() => (
           <DynamicSocialIcon
+            height={20}
+            width={20}
             fill={socialData.color}
             name={socialData.icon as keyof typeof socialIconTypes}
           />