diff --git a/npm b/npm
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/cid/Cid.js b/src/components/cid/Cid.js
deleted file mode 100644
index 29bf5014d..000000000
--- a/src/components/cid/Cid.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react'
-import { Identicon } from '../identicon/Identicon.js'
-import ErrorBoundary from '../error/error-boundary.jsx'
-
-export function cidStartAndEnd (value) {
-  const chars = value.toString().split('')
-  if (chars.length <= 9) return value
-  const start = chars.slice(0, 4).join('')
-  const end = chars.slice(chars.length - 4).join('')
-  return {
-    value,
-    start,
-    end
-  }
-}
-
-export function shortCid (value) {
-  const { start, end } = cidStartAndEnd(value)
-  return `${start}…${end}`
-}
-
-const Cid = React.forwardRef(({ value, title, style, identicon = false, ...props }, ref) => {
-  style = Object.assign({}, {
-    textDecoration: 'none',
-    marginLeft: identicon ? '5px' : null
-  }, style)
-  const { start, end } = cidStartAndEnd(value)
-  return (
-    <abbr title={title || value} style={style} ref={ref} {...props}>
-      { identicon && <ErrorBoundary fallback={() => null}><Identicon cid={value} className='mr2' /></ErrorBoundary> }
-      <span>
-        <span>{start}</span>
-        <span className='o-20'>…</span>
-        <span>{end}</span>
-      </span>
-    </abbr>
-  )
-})
-
-export default Cid
diff --git a/src/components/cid/Cid.stories.js b/src/components/cid/Cid.stories.js
deleted file mode 100644
index 6f02de7cf..000000000
--- a/src/components/cid/Cid.stories.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import Cid from './Cid.js'
-
-/**
- * @type {import('@storybook/react').Meta}
- */
-const CidStory = {
-  title: 'CID',
-  component: Cid,
-  parameters: {
-    actions: {
-      disable: false
-    }
-  },
-  argTypes: {
-    onClick: { action: 'clicked' }
-  }
-}
-export default CidStory
-
-/**
- * @type {import('@storybook/react').StoryObj}
- */
-export const CidV0 = {
-  args: {
-    className: 'db ma2 monospace',
-    value: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW',
-    identicon: false
-  }
-}
-
-/**
- * @type {import('@storybook/react').StoryObj}
- */
-export const CidV0Identicon = {
-  args: {
-    className: 'db ma2 monospace',
-    value: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW',
-    identicon: true
-  }
-}
-
-/**
- * @type {import('@storybook/react').StoryObj}
- */
-export const CidV1 = {
-  args: {
-    className: 'db ma2 monospace',
-    value: 'zb2rhZMC2PFynWT7oBj7e6BpDpzge367etSQi6ZUA81EVVCxG',
-    identicon: false
-  }
-}
-
-/**
- * @type {import('@storybook/react').StoryObj}
- */
-export const CidV1Sha3 = {
-  args: {
-    className: 'db ma2 monospace',
-    value: 'zB7NbGN5wyfSbNNNwo3smZczHZutiWERdvWuMcHXTj393RnbhwsHjrP7bPDRPA79YWPbS69cZLWXSANcwUMmk4Rp3hP9Y',
-    identicon: false
-  }
-}
diff --git a/src/components/cid/cid.stories.tsx b/src/components/cid/cid.stories.tsx
new file mode 100644
index 000000000..90b1e7019
--- /dev/null
+++ b/src/components/cid/cid.stories.tsx
@@ -0,0 +1,37 @@
+import Cid from './cid'
+
+const meta = {
+  title: 'CID',
+  component: Cid,
+  parameters: {
+    actions: { disable: false }
+  },
+  argTypes: {
+    onClick: { action: 'clicked' }
+  },
+  args: {
+    className: 'db ma2 monospace',
+    value: 'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW',
+    identicon: false
+  }
+} as const
+
+export default meta
+
+export const CidV0 = {}
+
+export const CidV0Identicon = {
+  args: { identicon: true }
+}
+
+export const CidV1 = {
+  args: {
+    value: 'zb2rhZMC2PFynWT7oBj7e6BpDpzge367etSQi6ZUA81EVVCxG'
+  }
+}
+
+export const CidV1Sha3 = {
+  args: {
+    value: 'zB7NbGN5wyfSbNNNwo3smZczHZutiWERdvWuMcHXTj393RnbhwsHjrP7bPDRPA79YWPbS69cZLWXSANcwUMmk4Rp3hP9Y'
+  }
+}
diff --git a/src/components/cid/cid.tsx b/src/components/cid/cid.tsx
new file mode 100644
index 000000000..b42165381
--- /dev/null
+++ b/src/components/cid/cid.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import { Identicon } from '../identicon/identicon.js'
+import ErrorBoundary from '../error/error-boundary.js'
+
+export function cidStartAndEnd (value: string | { toString(): string }) {
+  const valueStr = value.toString()
+  const chars = value.toString().split('')
+  if (chars.length <= 9) {
+    return {
+      value: valueStr,
+      start: valueStr,
+      end: ''
+    }
+  }
+  const start = chars.slice(0, 4).join('')
+  const end = chars.slice(chars.length - 4).join('')
+  return {
+    value,
+    start,
+    end
+  }
+}
+
+export function shortCid (value: string | { toString(): string }): string {
+  const { start, end } = cidStartAndEnd(value)
+  return `${start}…${end}`
+}
+
+export interface CidProps {
+  value: string | { toString(): string }
+  title?: string
+  style?: React.CSSProperties
+  identicon?: boolean
+  className?: string
+  onClick?: () => void
+}
+
+const Cid = React.forwardRef<HTMLElement, CidProps>(({ value, title, style, identicon = false, ...props }, ref) => {
+  style = Object.assign({}, {
+    textDecoration: 'none',
+    marginLeft: identicon ? '5px' : null
+  }, style)
+  const { start, end } = cidStartAndEnd(value)
+  const displayTitle = title || value.toString()
+  return (
+    <abbr title={displayTitle} style={style} ref={ref} {...props}>
+      { identicon && <ErrorBoundary fallback={() => null}><Identicon cid={value.toString()} className='mr2' /></ErrorBoundary> }
+      <span>
+        <span>{start}</span>
+        <span className='o-20'>…</span>
+        <span>{end}</span>
+      </span>
+    </abbr>
+  )
+})
+
+export default Cid
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/peers/PeersTable/PeersTable.js b/src/peers/PeersTable/PeersTable.js
index e63bdd9a8..a7ed3e1c7 100644
--- a/src/peers/PeersTable/PeersTable.js
+++ b/src/peers/PeersTable/PeersTable.js
@@ -6,7 +6,7 @@ import { withTranslation } from 'react-i18next'
 import { Table, Column, AutoSizer, SortDirection } from 'react-virtualized'
 import CountryFlag from 'react-country-flag'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
-import Cid from '../../components/cid/Cid.js'
+import Cid from '../../components/cid/cid.js'
 import { sortByProperty } from '../../lib/sort.js'
 
 import './PeersTable.css'
diff --git a/src/peers/WorldMap/WorldMap.js b/src/peers/WorldMap/WorldMap.js
index b4b8b2c92..b7ce8b19c 100644
--- a/src/peers/WorldMap/WorldMap.js
+++ b/src/peers/WorldMap/WorldMap.js
@@ -13,7 +13,7 @@ import Popover from '../../components/popover/Popover.js'
 
 // Styles
 import './WorldMap.css'
-import Cid from '../../components/cid/Cid.js'
+import Cid from '../../components/cid/cid.js'
 
 const calculateWidth = (windowWidth) => {
   // the d3 generated svg width includes a lot of ocean, that we crop for now, as it looks weird.
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"