diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
index 676ac894..af0ff569 100644
--- a/src/components/button/__snapshots__/button.test.tsx.snap
+++ b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -79,9 +79,7 @@ exports[`Link with outline and icon text, extra padding renders as expected 1`]
             bug
           </span>
         </span>
-        <span>
-          Go do things
-        </span>
+        Go do things
       </span>
     </a>
   </div>
diff --git a/src/components/control-file/__snapshots__/control-file.test.tsx.snap b/src/components/control-file/__snapshots__/control-file.test.tsx.snap
index 52a07a9a..2fef94fc 100644
--- a/src/components/control-file/__snapshots__/control-file.test.tsx.snap
+++ b/src/components/control-file/__snapshots__/control-file.test.tsx.snap
@@ -18,36 +18,30 @@ exports[`ControlFile all options renders as expected 1`] = `
             type="button"
           >
             <span
-              class="txt-truncate"
+              class="flex flex--center-cross"
             >
               <span
-                class="flex flex--center-cross"
+                class="mr6"
               >
+                <svg
+                  aria-hidden="true"
+                  class="events-none icon"
+                  data-testid="icon-harddrive"
+                  focusable="false"
+                  style="width: 18px; height: 18px;"
+                >
+                  <use
+                    xlink:href="#icon-harddrive"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  />
+                </svg>
                 <span
-                  class="mr6"
+                  style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="events-none icon"
-                    data-testid="icon-harddrive"
-                    focusable="false"
-                    style="width: 18px; height: 18px;"
-                  >
-                    <use
-                      xlink:href="#icon-harddrive"
-                      xmlns:xlink="http://www.w3.org/1999/xlink"
-                    />
-                  </svg>
-                  <span
-                    style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
-                  >
-                    harddrive
-                  </span>
-                </span>
-                <span>
-                  Select an image
+                  harddrive
                 </span>
               </span>
+              Select an image
             </span>
           </button>
           <input
@@ -99,36 +93,30 @@ exports[`ControlFile basic renders as expected 1`] = `
             type="button"
           >
             <span
-              class="txt-truncate"
+              class="flex flex--center-cross"
             >
               <span
-                class="flex flex--center-cross"
+                class="mr6"
               >
+                <svg
+                  aria-hidden="true"
+                  class="events-none icon"
+                  data-testid="icon-harddrive"
+                  focusable="false"
+                  style="width: 18px; height: 18px;"
+                >
+                  <use
+                    xlink:href="#icon-harddrive"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  />
+                </svg>
                 <span
-                  class="mr6"
+                  style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="events-none icon"
-                    data-testid="icon-harddrive"
-                    focusable="false"
-                    style="width: 18px; height: 18px;"
-                  >
-                    <use
-                      xlink:href="#icon-harddrive"
-                      xmlns:xlink="http://www.w3.org/1999/xlink"
-                    />
-                  </svg>
-                  <span
-                    style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
-                  >
-                    harddrive
-                  </span>
-                </span>
-                <span>
-                  Select a file
+                  harddrive
                 </span>
               </span>
+              Select a file
             </span>
           </button>
           <input
@@ -170,36 +158,30 @@ exports[`ControlFile disabled renders as expected 1`] = `
             type="button"
           >
             <span
-              class="txt-truncate"
+              class="flex flex--center-cross"
             >
               <span
-                class="flex flex--center-cross"
+                class="mr6"
               >
+                <svg
+                  aria-hidden="true"
+                  class="events-none icon"
+                  data-testid="icon-harddrive"
+                  focusable="false"
+                  style="width: 18px; height: 18px;"
+                >
+                  <use
+                    xlink:href="#icon-harddrive"
+                    xmlns:xlink="http://www.w3.org/1999/xlink"
+                  />
+                </svg>
                 <span
-                  class="mr6"
+                  style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="events-none icon"
-                    data-testid="icon-harddrive"
-                    focusable="false"
-                    style="width: 18px; height: 18px;"
-                  >
-                    <use
-                      xlink:href="#icon-harddrive"
-                      xmlns:xlink="http://www.w3.org/1999/xlink"
-                    />
-                  </svg>
-                  <span
-                    style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
-                  >
-                    harddrive
-                  </span>
-                </span>
-                <span>
-                  Select a file
+                  harddrive
                 </span>
               </span>
+              Select a file
             </span>
           </button>
           <input
diff --git a/src/components/control-file/control-file.tsx b/src/components/control-file/control-file.tsx
index 62748c8e..bcd7f774 100644
--- a/src/components/control-file/control-file.tsx
+++ b/src/components/control-file/control-file.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, useRef } from 'react';
+import React, { ReactElement, ReactNode, useRef } from 'react';
 import PropTypes from 'prop-types';
 import omit from '../utils/omit';
 import ControlWrapper from '../control-wrapper';
@@ -12,7 +12,7 @@ interface Props extends Omit<InputProps, 'value' | 'onChange'> {
   optional?: boolean;
   disabled?: boolean;
   validationError?: ReactElement | string;
-  displayValue?: string;
+  displayValue?: ReactNode;
   themeControlFile?: string;
   themeControlWrapper?: string;
 }
@@ -94,11 +94,9 @@ export default function ControlFile({
             className={`${themeControlFile} relative`}
             onClick={onButtonClick}
           >
-            <span className="txt-truncate">
-              <IconText iconBefore="harddrive">
-                {displayValue}
-              </IconText>
-            </span>
+            <IconText iconBefore="harddrive">
+              {displayValue}
+            </IconText>
           </button>
           <input {...inputProps} {...extraProps} />
         </div>
diff --git a/src/components/control-file/examples/control-file-example-custom-display-value.tsx b/src/components/control-file/examples/control-file-example-custom-display-value.tsx
new file mode 100644
index 00000000..cec5503f
--- /dev/null
+++ b/src/components/control-file/examples/control-file-example-custom-display-value.tsx
@@ -0,0 +1,17 @@
+/*
+Basic.
+*/
+import React from 'react';
+import ControlFile from '../control-file';
+
+export default function Example() {
+  return (
+    <ControlFile
+      id="name"
+      displayValue={<span className="w180 txt-truncate">A long truncated display value</span>}
+      onChange={(value, id) => {
+        console.log(value, id);
+      }}
+    />
+  );
+}
diff --git a/src/components/form/__snapshots__/form.test.tsx.snap b/src/components/form/__snapshots__/form.test.tsx.snap
index 274216d4..f3cd2019 100644
--- a/src/components/form/__snapshots__/form.test.tsx.snap
+++ b/src/components/form/__snapshots__/form.test.tsx.snap
@@ -242,36 +242,30 @@ exports[`Form all controls renders as expected 1`] = `
                     type="button"
                   >
                     <span
-                      class="txt-truncate"
+                      class="flex flex--center-cross"
                     >
                       <span
-                        class="flex flex--center-cross"
+                        class="mr6"
                       >
+                        <svg
+                          aria-hidden="true"
+                          class="events-none icon"
+                          data-testid="icon-harddrive"
+                          focusable="false"
+                          style="width: 18px; height: 18px;"
+                        >
+                          <use
+                            xlink:href="#icon-harddrive"
+                            xmlns:xlink="http://www.w3.org/1999/xlink"
+                          />
+                        </svg>
                         <span
-                          class="mr6"
+                          style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
                         >
-                          <svg
-                            aria-hidden="true"
-                            class="events-none icon"
-                            data-testid="icon-harddrive"
-                            focusable="false"
-                            style="width: 18px; height: 18px;"
-                          >
-                            <use
-                              xlink:href="#icon-harddrive"
-                              xmlns:xlink="http://www.w3.org/1999/xlink"
-                            />
-                          </svg>
-                          <span
-                            style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
-                          >
-                            harddrive
-                          </span>
-                        </span>
-                        <span>
-                          Select a file
+                          harddrive
                         </span>
                       </span>
+                      Select a file
                     </span>
                   </button>
                   <input
diff --git a/src/components/icon-text/__snapshots__/icon-text.test.tsx.snap b/src/components/icon-text/__snapshots__/icon-text.test.tsx.snap
index 417fb50d..718c05bf 100644
--- a/src/components/icon-text/__snapshots__/icon-text.test.tsx.snap
+++ b/src/components/icon-text/__snapshots__/icon-text.test.tsx.snap
@@ -27,9 +27,7 @@ exports[`IconText both icons renders 1`] = `
           check
         </span>
       </span>
-      <span>
-        What
-      </span>
+      What
       <span
         class="ml6"
       >
@@ -62,9 +60,7 @@ exports[`IconText icon after renders 1`] = `
     <span
       class="flex flex--center-cross"
     >
-      <span>
-        Next
-      </span>
+      Next
       <span
         class="ml6"
       >
@@ -118,9 +114,7 @@ exports[`IconText icon before renders 1`] = `
           clipboard
         </span>
       </span>
-      <span>
-        Copy
-      </span>
+      Copy
     </span>
   </div>
 </body>
@@ -154,9 +148,7 @@ exports[`IconText inline flex parent renders 1`] = `
         </span>
       </span>
       <span>
-        <span>
-          Inline
-        </span>
+        Inline
       </span>
     </span>
   </div>
diff --git a/src/components/icon-text/icon-text.tsx b/src/components/icon-text/icon-text.tsx
index b68d682c..8434ad75 100644
--- a/src/components/icon-text/icon-text.tsx
+++ b/src/components/icon-text/icon-text.tsx
@@ -39,7 +39,7 @@ export default function IconText({
   return (
     <span className={`${inline ? 'inline-flex' : 'flex'} flex--center-cross`}>
       {before}
-      <span>{children}</span>
+      {children}
       {after}
     </span>
   );