diff --git a/src/core/primitives/code/__workshop__/opticalAlignment.tsx b/src/core/primitives/code/__workshop__/opticalAlignment.tsx
index 4b94d17fc..3107d8613 100644
--- a/src/core/primitives/code/__workshop__/opticalAlignment.tsx
+++ b/src/core/primitives/code/__workshop__/opticalAlignment.tsx
@@ -1,4 +1,3 @@
-import {AddCircleIcon} from '@sanity/icons'
 import {Box, Card, Code, Flex, Stack} from '@sanity/ui'
 
 export default function OpticalAlignment() {
@@ -37,9 +36,7 @@ export default function OpticalAlignment() {
 
         <Flex>
           <Card padding={2} scheme="dark">
-            <Code>
-              <AddCircleIcon />
-            </Code>
+            <Code>{`<AddCircleIcon />`}</Code>
           </Card>
         </Flex>
       </Stack>
diff --git a/src/core/primitives/code/code.tsx b/src/core/primitives/code/code.tsx
index 6c1e892d9..512f37c0d 100644
--- a/src/core/primitives/code/code.tsx
+++ b/src/core/primitives/code/code.tsx
@@ -1,4 +1,4 @@
-import {forwardRef, Suspense, lazy} from 'react'
+import {forwardRef, lazy, Suspense} from 'react'
 import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
@@ -6,6 +6,17 @@ import {codeBaseStyle} from './styles'
 
 const LazyRefractor = lazy(() => import('./refractor'))
 
+/**
+ * @public
+ */
+export type StringifiableNode =
+  | string
+  | number
+  | bigint
+  | boolean
+  | null
+  | undefined
+  | Iterable<StringifiableNode>
 /**
  * @public
  */
@@ -13,6 +24,7 @@ export interface CodeProps {
   as?: React.ElementType | keyof React.JSX.IntrinsicElements
   /** Define the language to use for syntax highlighting. */
   language?: string
+  children: StringifiableNode
   size?: number | number[]
   weight?: string
 }
@@ -23,7 +35,7 @@ const StyledCode = styled.pre<ResponsiveFontStyleProps>(codeBaseStyle, responsiv
  * @public
  */
 export const Code = forwardRef(function Code(
-  props: CodeProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
+  props: CodeProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size' | 'children'>,
   ref: React.ForwardedRef<HTMLElement>,
 ) {
   const {children, language, size = 2, weight, ...restProps} = props
@@ -31,9 +43,21 @@ export const Code = forwardRef(function Code(
   return (
     <StyledCode data-ui="Code" {...restProps} $size={useArrayProp(size)} $weight={weight} ref={ref}>
       <Suspense fallback={<code>{children}</code>}>
-        <LazyRefractor language={language} value={children} />
+        <LazyRefractor language={language} value={stringifyChildren(children)} />
       </Suspense>
     </StyledCode>
   )
 })
 Code.displayName = 'ForwardRef(Code)'
+
+function stringifyChildren(children: StringifiableNode): string {
+  if (!children || typeof children === 'boolean') {
+    return ''
+  }
+
+  if (Array.isArray(children)) {
+    return children.map((c) => stringifyChildren(c)).join('')
+  }
+
+  return String(children)
+}