diff --git a/src-docs/src/views/i18n/i18n_interpolation.js b/src-docs/src/views/i18n/i18n_interpolation.js
index 4c830cc37c5..1e5c90dfdf8 100644
--- a/src-docs/src/views/i18n/i18n_interpolation.js
+++ b/src-docs/src/views/i18n/i18n_interpolation.js
@@ -10,7 +10,7 @@ import {
 } from '../../../../src/components';
 
 export default () => {
-  const [count, setCount] = useState(1);
+  const [count, setCount] = useState(0);
 
   return (
     <>
@@ -44,6 +44,35 @@ export default () => {
 
       <EuiSpacer size="l" />
 
+      <EuiTitle size="xs">
+        <h3>useEuiI18n with function interpolation</h3>
+      </EuiTitle>
+      <p>
+        {useEuiI18n(
+          'euiI18nInterpolation.clickedCount',
+          ({ count }) =>
+            `Clicked on button ${count} time${count === 1 ? '' : 's'}.`,
+          { count }
+        )}
+      </p>
+
+      <EuiSpacer size="l" />
+
+      <EuiTitle size="xs">
+        <h3>EuiI18n with function interpolation</h3>
+      </EuiTitle>
+      <p>
+        <EuiI18n
+          token="euiI18nInterpolation.clickedCount"
+          default={({ count }) =>
+            `Clicked on button ${count} time${count === 1 ? '' : 's'}.`
+          }
+          values={{ count }}
+        />
+      </p>
+
+      <EuiSpacer size="l" />
+
       <EuiTitle size="xs">
         <h3>useEuiI18n with component interpolation</h3>
       </EuiTitle>
diff --git a/src/components/i18n/i18n.tsx b/src/components/i18n/i18n.tsx
index b8c9a82e4f0..032ecff6a36 100644
--- a/src/components/i18n/i18n.tsx
+++ b/src/components/i18n/i18n.tsx
@@ -61,7 +61,10 @@ function lookupToken<
       return errorOnMissingValues(token);
     }
     // @ts-ignore TypeScript complains that `DEFAULT` doesn't have a call signature but we verified `renderable` is a function
-    return renderable(values);
+    const rendered = renderable(values);
+    return (i18nMappingFunc
+      ? i18nMappingFunc(rendered as string)
+      : rendered) as RESOLVED;
   } else if (values === undefined || typeof renderable !== 'string') {
     if (i18nMappingFunc && typeof valueDefault === 'string') {
       renderable = i18nMappingFunc(valueDefault);
@@ -133,6 +136,7 @@ const EuiI18n = <
             lookupToken({
               token,
               i18nMapping: mapping,
+              i18nMappingFunc: mappingFunc,
               valueDefault: props.defaults[idx],
               render,
             })