diff --git a/src/components/cid/Cid.js b/src/components/cid/Cid.js
index 29bf5014d..a77299414 100644
--- a/src/components/cid/Cid.js
+++ b/src/components/cid/Cid.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Identicon } from '../identicon/Identicon.js'
+import { Identicon } from '../identicon/identicon.js'
 import ErrorBoundary from '../error/error-boundary.jsx'
 
 export function cidStartAndEnd (value) {
diff --git a/src/components/identicon/Identicon.js b/src/components/identicon/Identicon.js
deleted file mode 100644
index ddd57a7b2..000000000
--- a/src/components/identicon/Identicon.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import ReactIdenticon from 'react-identicons'
-import theme from 'ipfs-css/theme.json'
-
-const { colors } = theme
-const identiconPalette = [colors.navy, colors.aqua, colors.gray, colors.charcoal, colors.red, colors.yellow, colors.teal, colors.green]
-
-export const Identicon = ({ size = 14, cid, className = 'v-btm' }) => <ReactIdenticon string={cid} size={size} palette={identiconPalette} className={className} />
-
-export default Identicon
diff --git a/src/components/identicon/Identicon.stories.js b/src/components/identicon/Identicon.stories.js
deleted file mode 100644
index e1ce55e4e..000000000
--- a/src/components/identicon/Identicon.stories.js
+++ /dev/null
@@ -1,46 +0,0 @@
-// @ts-check
-import { Identicon } from './Identicon.js'
-
-/**
- * @type {import('@storybook/react').Meta}
- */
-export default {
-  title: 'Identicon',
-  component: Identicon,
-  parameters: {
-    actions: {
-      disable: false,
-      handles: ['click']
-    }
-  },
-  argTypes: {
-    onClick: { action: 'clicked' }
-  },
-  args: {
-    cid: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW',
-    className: 'ma2',
-    size: 14
-  }
-}
-
-/**
- * @type {import('@storybook/react').StoryObj}
- */
-export const Default = {
-  args: {
-    cid: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW',
-    className: 'ma2',
-    size: 14
-  }
-}
-
-/**
- * @type {import('@storybook/react').StoryObj}
- */
-export const Large = {
-  args: {
-    cid: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW',
-    className: 'ma2',
-    size: 64
-  }
-}
diff --git a/src/components/identicon/identicon.stories.tsx b/src/components/identicon/identicon.stories.tsx
new file mode 100644
index 000000000..a970be4a7
--- /dev/null
+++ b/src/components/identicon/identicon.stories.tsx
@@ -0,0 +1,23 @@
+// @ts-check
+import { Identicon } from './identicon'
+
+const meta = {
+  title: 'Identicon',
+  component: Identicon,
+  parameters: {
+    actions: { disable: false, handles: ['click'] }
+  },
+  args: {
+    cid: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW',
+    className: 'ma2',
+    size: 14
+  }
+} as const
+
+export default meta
+
+export const Default = {}
+
+export const Large = {
+  args: { size: 64 }
+}
diff --git a/src/components/identicon/identicon.tsx b/src/components/identicon/identicon.tsx
new file mode 100644
index 000000000..d027b8255
--- /dev/null
+++ b/src/components/identicon/identicon.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import ReactIdenticon from 'react-identicons'
+import theme from 'ipfs-css/theme.json'
+
+const { colors } = theme
+const identiconPalette = [colors.navy, colors.aqua, colors.gray, colors.charcoal, colors.red, colors.yellow, colors.teal, colors.green]
+
+export interface IdenticonProps {
+  size?: number
+  cid: string
+  className?: string
+}
+
+export const Identicon: React.FC<IdenticonProps> = ({
+  size = 14,
+  cid,
+  className = 'v-btm'
+}) => (
+    <ReactIdenticon
+      string={cid}
+      size={size}
+      palette={identiconPalette}
+      className={className}
+    />
+)
+
+export default Identicon
diff --git a/src/types/react-identicons.d.ts b/src/types/react-identicons.d.ts
new file mode 100644
index 000000000..92b6a522e
--- /dev/null
+++ b/src/types/react-identicons.d.ts
@@ -0,0 +1,13 @@
+declare module 'react-identicons' {
+  import { FC } from 'react'
+
+  interface ReactIdenticonProps {
+    string: string
+    size?: number
+    palette?: string[]
+    className?: string
+  }
+
+  const ReactIdenticon: FC<ReactIdenticonProps>
+  export default ReactIdenticon
+}
diff --git a/tsconfig.json b/tsconfig.json
index 722f98599..28c0040b4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -97,6 +97,8 @@
     "src/components/about-webui/AboutWebUI.js",
     "src/components/box/Box.js",
     "src/components/shell/Shell.js",
+    "src/components/identicon/identicon.tsx",
+    "src/components/identicon/identicon.stories.tsx",
     "src/i18n-decorator.js",
     "src/i18n.js",
     "src/lib/i18n-localeParser.js"