diff --git a/.changeset/eighty-snails-vanish.md b/.changeset/eighty-snails-vanish.md
new file mode 100644
index 0000000000..f66a487af7
--- /dev/null
+++ b/.changeset/eighty-snails-vanish.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Fixed the alignment of the icon next to a validation hint when the text is center-aligned.
diff --git a/.changeset/good-buttons-wonder.md b/.changeset/good-buttons-wonder.md
new file mode 100644
index 0000000000..c872c3c35c
--- /dev/null
+++ b/.changeset/good-buttons-wonder.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Passed the click event to the `onClear` prop of the ImageInput.
diff --git a/.changeset/rotten-balloons-allow.md b/.changeset/rotten-balloons-allow.md
new file mode 100644
index 0000000000..82d4ae596a
--- /dev/null
+++ b/.changeset/rotten-balloons-allow.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Tweaked the ImageInput to work with images with arbitrary border-radii.
diff --git a/.storybook/components/Teaser.js b/.storybook/components/Teaser.js
index 77e003634f..5f6e96c06f 100644
--- a/.storybook/components/Teaser.js
+++ b/.storybook/components/Teaser.js
@@ -36,6 +36,10 @@ const Wrapper = styled(Card)(
       margin-right: ${theme.spacings.giga};
       min-height: ${CARD_HEIGHT};
     }
+
+    *:last-child {
+      margin-bottom: 0;
+    }
   `,
 );
 
diff --git a/packages/circuit-ui/components/ImageInput/ImageInput.tsx b/packages/circuit-ui/components/ImageInput/ImageInput.tsx
index fbeecd9196..c48b78d2b3 100644
--- a/packages/circuit-ui/components/ImageInput/ImageInput.tsx
+++ b/packages/circuit-ui/components/ImageInput/ImageInput.tsx
@@ -20,6 +20,8 @@ import {
   useRef,
   InputHTMLAttributes,
   ChangeEvent,
+  MouseEvent,
+  KeyboardEvent,
   Fragment,
 } from 'react';
 import { css, jsx } from '@emotion/core';
@@ -47,11 +49,11 @@ export interface ImageInputProps
   /**
    * A callback function to call when the user has selected an image.
    */
-  onChange: (event: File) => Promise<void>;
+  onChange: (event: File) => void | Promise<void>;
   /**
    * A callback function to call when the input is cleared.
    */
-  onClear: () => void;
+  onClear: (event: MouseEvent | KeyboardEvent) => void;
   /**
    * An accessible label for the "clear" icon button.
    */
@@ -88,7 +90,7 @@ const InputWrapper = styled.div`
 const HiddenInput = styled.input(
   ({ theme }) => css`
     ${hideVisually()};
-    &:focus + label {
+    &:focus + label > *:last-child {
       ${focusOutline({ theme })};
     }
   `,
@@ -96,25 +98,32 @@ const HiddenInput = styled.input(
 
 type StyledLabelProps = StyleProps & { isLoading: boolean; invalid: boolean };
 
-const baseLabelStyles = css`
-  border-radius: 12px;
-  overflow: hidden;
-  &:hover {
-    cursor: pointer;
+const baseLabelStyles = ({ theme }: StyleProps) => css`
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+    border-radius: 12px;
+    pointer-events: none;
+    background-color: ${theme.colors.black};
+    opacity: 0;
+    transition: opacity ${theme.transitions.default};
   }
-`;
 
-const addButtonStyles = ({ theme }: StyledLabelProps) => css`
-  &:hover {
-    & > button {
-      background-color: ${theme.colors.p700};
-      border-color: ${theme.colors.p700};
-    }
+  > *:last-child {
+    transition: box-shadow ${theme.transitions.default};
   }
-  &:active {
-    & > button {
-      background-color: ${theme.colors.p900};
-      border-color: ${theme.colors.p900};
+
+  @supports (-webkit-filter: brightness(1)) or (filter: brightness(1)) {
+    transition: filter ${theme.transitions.default};
+
+    &::before {
+      content: none;
     }
   }
 `;
@@ -122,58 +131,66 @@ const addButtonStyles = ({ theme }: StyledLabelProps) => css`
 const invalidLabelStyles = ({ theme, invalid }: StyledLabelProps) =>
   invalid &&
   css`
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0%;
-      width: 100%;
-      height: 100%;
-      border-radius: 12px;
-      box-shadow: inset 0 0 0 2px ${theme.colors.danger};
+    > *:last-child {
+      box-shadow: 0 0 0 2px ${theme.colors.danger};
     }
-    &:hover::after {
-      box-shadow: inset 0 0 0 2px ${theme.colors.r700};
+    &:hover > *:last-child {
+      box-shadow: 0 0 0 2px ${theme.colors.r700};
     }
   `;
 
-const overlayLabelStyles = ({ theme, isLoading }: StyledLabelProps) => css`
-  &::before {
-    // @FIXME replace with a brightness filter when we drop IE support
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0%;
-    width: 100%;
-    height: 100%;
-    border-radius: 12px;
-    background-color: ${theme.colors.black};
-    opacity: 0;
-    pointer-events: none;
-    ${isLoading &&
-    css`
-      opacity: 0.4;
-    `}
+const loadingLabelStyles = ({ isLoading }: StyledLabelProps) => {
+  if (isLoading) {
+    return css`
+      &::before {
+        opacity: 0.4;
+      }
+
+      @supports (-webkit-filter: brightness(1)) or (filter: brightness(1)) {
+        filter: brightness(0.6);
+      }
+    `;
   }
-  &:hover::before {
-    ${!isLoading &&
-    css`
+
+  return css`
+    &:hover::before {
       opacity: 0.1;
-    `}
-  }
-  &:active::before {
-    ${!isLoading &&
-    css`
+    }
+    &:active::before {
       opacity: 0.2;
-    `}
+    }
+
+    @supports (-webkit-filter: brightness(1)) or (filter: brightness(1)) {
+      &:hover {
+        filter: brightness(0.9);
+      }
+      &:active {
+        filter: brightness(0.8);
+      }
+    }
+  `;
+};
+
+const addButtonStyles = ({ theme }: StyledLabelProps) => css`
+  &:hover {
+    & > button {
+      background-color: ${theme.colors.p700};
+      border-color: ${theme.colors.p700};
+    }
+  }
+  &:active {
+    & > button {
+      background-color: ${theme.colors.p900};
+      border-color: ${theme.colors.p900};
+    }
   }
 `;
 
 const StyledLabel = styled(Label)<StyledLabelProps>(
   baseLabelStyles,
-  addButtonStyles,
   invalidLabelStyles,
-  overlayLabelStyles,
+  loadingLabelStyles,
+  addButtonStyles,
 );
 
 const ActionButton = styled(IconButton)(
@@ -251,7 +268,7 @@ export const ImageInput = ({
     // URL.createObjectURL is not supported in Node, but the handleChange will only run client-side
     // eslint-disable-next-line node/no-unsupported-features/node-builtins
     setPreviewImage(URL.createObjectURL(file));
-    onChange(file)
+    Promise.resolve(onChange(file))
       .then(() => setIsLoading(false))
       .catch(() => setIsLoading(false));
   };
@@ -262,10 +279,10 @@ export const ImageInput = ({
     }
   };
 
-  const handleClear = () => {
+  const handleClear = (event: MouseEvent | KeyboardEvent) => {
     clearInputElement();
     setPreviewImage('');
-    onClear();
+    onClear(event);
   };
 
   /**
diff --git a/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap b/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap
index 7ee0bd699d..5df1c3fe48 100644
--- a/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap
+++ b/packages/circuit-ui/components/ImageInput/__snapshots__/ImageInput.spec.tsx.snap
@@ -34,12 +34,12 @@ exports[`ImageInput styles should render a custom component 1`] = `
   width: 1px;
 }
 
-.circuit-0:focus + label {
+.circuit-0:focus + label > *:last-child {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-0:focus + label::-moz-focus-inner {
+.circuit-0:focus + label > *:last-child::-moz-focus-inner {
   border: 0;
 }
 
@@ -47,24 +47,9 @@ exports[`ImageInput styles should render a custom component 1`] = `
   font-size: 13px;
   line-height: 20px;
   display: block;
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.circuit-2:hover {
   cursor: pointer;
 }
 
-.circuit-2:hover > button {
-  background-color: #234BC3;
-  border-color: #234BC3;
-}
-
-.circuit-2:active > button {
-  background-color: #1A368E;
-  border-color: #1A368E;
-}
-
 .circuit-2::before {
   content: '';
   position: absolute;
@@ -73,9 +58,27 @@ exports[`ImageInput styles should render a custom component 1`] = `
   width: 100%;
   height: 100%;
   border-radius: 12px;
+  pointer-events: none;
   background-color: #000;
   opacity: 0;
-  pointer-events: none;
+  -webkit-transition: opacity 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out;
+}
+
+.circuit-2 > *:last-child {
+  -webkit-transition: box-shadow 120ms ease-in-out;
+  transition: box-shadow 120ms ease-in-out;
+}
+
+@supports (-webkit-filter:brightness(1)) or (filter:brightness(1)) {
+  .circuit-2 {
+    -webkit-transition: filter 120ms ease-in-out;
+    transition: filter 120ms ease-in-out;
+  }
+
+  .circuit-2::before {
+    content: none;
+  }
 }
 
 .circuit-2:hover::before {
@@ -86,6 +89,28 @@ exports[`ImageInput styles should render a custom component 1`] = `
   opacity: 0.2;
 }
 
+@supports (-webkit-filter:brightness(1)) or (filter:brightness(1)) {
+  .circuit-2:hover {
+    -webkit-filter: brightness(0.9);
+    filter: brightness(0.9);
+  }
+
+  .circuit-2:active {
+    -webkit-filter: brightness(0.8);
+    filter: brightness(0.8);
+  }
+}
+
+.circuit-2:hover > button {
+  background-color: #234BC3;
+  border-color: #234BC3;
+}
+
+.circuit-2:active > button {
+  background-color: #1A368E;
+  border-color: #1A368E;
+}
+
 .circuit-1 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
@@ -300,12 +325,12 @@ exports[`ImageInput styles should render with an existing image 1`] = `
   width: 1px;
 }
 
-.circuit-0:focus + label {
+.circuit-0:focus + label > *:last-child {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-0:focus + label::-moz-focus-inner {
+.circuit-0:focus + label > *:last-child::-moz-focus-inner {
   border: 0;
 }
 
@@ -313,24 +338,9 @@ exports[`ImageInput styles should render with an existing image 1`] = `
   font-size: 13px;
   line-height: 20px;
   display: block;
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.circuit-3:hover {
   cursor: pointer;
 }
 
-.circuit-3:hover > button {
-  background-color: #234BC3;
-  border-color: #234BC3;
-}
-
-.circuit-3:active > button {
-  background-color: #1A368E;
-  border-color: #1A368E;
-}
-
 .circuit-3::before {
   content: '';
   position: absolute;
@@ -339,9 +349,27 @@ exports[`ImageInput styles should render with an existing image 1`] = `
   width: 100%;
   height: 100%;
   border-radius: 12px;
+  pointer-events: none;
   background-color: #000;
   opacity: 0;
-  pointer-events: none;
+  -webkit-transition: opacity 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out;
+}
+
+.circuit-3 > *:last-child {
+  -webkit-transition: box-shadow 120ms ease-in-out;
+  transition: box-shadow 120ms ease-in-out;
+}
+
+@supports (-webkit-filter:brightness(1)) or (filter:brightness(1)) {
+  .circuit-3 {
+    -webkit-transition: filter 120ms ease-in-out;
+    transition: filter 120ms ease-in-out;
+  }
+
+  .circuit-3::before {
+    content: none;
+  }
 }
 
 .circuit-3:hover::before {
@@ -352,6 +380,28 @@ exports[`ImageInput styles should render with an existing image 1`] = `
   opacity: 0.2;
 }
 
+@supports (-webkit-filter:brightness(1)) or (filter:brightness(1)) {
+  .circuit-3:hover {
+    -webkit-filter: brightness(0.9);
+    filter: brightness(0.9);
+  }
+
+  .circuit-3:active {
+    -webkit-filter: brightness(0.8);
+    filter: brightness(0.8);
+  }
+}
+
+.circuit-3:hover > button {
+  background-color: #234BC3;
+  border-color: #234BC3;
+}
+
+.circuit-3:active > button {
+  background-color: #1A368E;
+  border-color: #1A368E;
+}
+
 .circuit-1 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
@@ -577,12 +627,12 @@ exports[`ImageInput styles should render with default styles 1`] = `
   width: 1px;
 }
 
-.circuit-0:focus + label {
+.circuit-0:focus + label > *:last-child {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-0:focus + label::-moz-focus-inner {
+.circuit-0:focus + label > *:last-child::-moz-focus-inner {
   border: 0;
 }
 
@@ -590,24 +640,9 @@ exports[`ImageInput styles should render with default styles 1`] = `
   font-size: 13px;
   line-height: 20px;
   display: block;
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.circuit-3:hover {
   cursor: pointer;
 }
 
-.circuit-3:hover > button {
-  background-color: #234BC3;
-  border-color: #234BC3;
-}
-
-.circuit-3:active > button {
-  background-color: #1A368E;
-  border-color: #1A368E;
-}
-
 .circuit-3::before {
   content: '';
   position: absolute;
@@ -616,9 +651,27 @@ exports[`ImageInput styles should render with default styles 1`] = `
   width: 100%;
   height: 100%;
   border-radius: 12px;
+  pointer-events: none;
   background-color: #000;
   opacity: 0;
-  pointer-events: none;
+  -webkit-transition: opacity 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out;
+}
+
+.circuit-3 > *:last-child {
+  -webkit-transition: box-shadow 120ms ease-in-out;
+  transition: box-shadow 120ms ease-in-out;
+}
+
+@supports (-webkit-filter:brightness(1)) or (filter:brightness(1)) {
+  .circuit-3 {
+    -webkit-transition: filter 120ms ease-in-out;
+    transition: filter 120ms ease-in-out;
+  }
+
+  .circuit-3::before {
+    content: none;
+  }
 }
 
 .circuit-3:hover::before {
@@ -629,6 +682,28 @@ exports[`ImageInput styles should render with default styles 1`] = `
   opacity: 0.2;
 }
 
+@supports (-webkit-filter:brightness(1)) or (filter:brightness(1)) {
+  .circuit-3:hover {
+    -webkit-filter: brightness(0.9);
+    filter: brightness(0.9);
+  }
+
+  .circuit-3:active {
+    -webkit-filter: brightness(0.8);
+    filter: brightness(0.8);
+  }
+}
+
+.circuit-3:hover > button {
+  background-color: #234BC3;
+  border-color: #234BC3;
+}
+
+.circuit-3:active > button {
+  background-color: #1A368E;
+  border-color: #1A368E;
+}
+
 .circuit-1 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
@@ -851,12 +926,12 @@ exports[`ImageInput styles should render with invalid styles 1`] = `
   width: 1px;
 }
 
-.circuit-0:focus + label {
+.circuit-0:focus + label > *:last-child {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-0:focus + label::-moz-focus-inner {
+.circuit-0:focus + label > *:last-child::-moz-focus-inner {
   border: 0;
 }
 
@@ -991,25 +1066,10 @@ exports[`ImageInput styles should render with invalid styles 1`] = `
   font-size: 13px;
   line-height: 20px;
   display: block;
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.circuit-3:hover {
   cursor: pointer;
 }
 
-.circuit-3:hover > button {
-  background-color: #234BC3;
-  border-color: #234BC3;
-}
-
-.circuit-3:active > button {
-  background-color: #1A368E;
-  border-color: #1A368E;
-}
-
-.circuit-3::after {
+.circuit-3::before {
   content: '';
   position: absolute;
   top: 0;
@@ -1017,24 +1077,35 @@ exports[`ImageInput styles should render with invalid styles 1`] = `
   width: 100%;
   height: 100%;
   border-radius: 12px;
-  box-shadow: inset 0 0 0 2px #D23F47;
+  pointer-events: none;
+  background-color: #000;
+  opacity: 0;
+  -webkit-transition: opacity 120ms ease-in-out;
+  transition: opacity 120ms ease-in-out;
 }
 
-.circuit-3:hover::after {
-  box-shadow: inset 0 0 0 2px #B22426;
+.circuit-3 > *:last-child {
+  -webkit-transition: box-shadow 120ms ease-in-out;
+  transition: box-shadow 120ms ease-in-out;
 }
 
-.circuit-3::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0%;
-  width: 100%;
-  height: 100%;
-  border-radius: 12px;
-  background-color: #000;
-  opacity: 0;
-  pointer-events: none;
+@supports (-webkit-filter:brightness(1)) or (filter:brightness(1)) {
+  .circuit-3 {
+    -webkit-transition: filter 120ms ease-in-out;
+    transition: filter 120ms ease-in-out;
+  }
+
+  .circuit-3::before {
+    content: none;
+  }
+}
+
+.circuit-3 > *:last-child {
+  box-shadow: 0 0 0 2px #D23F47;
+}
+
+.circuit-3:hover > *:last-child {
+  box-shadow: 0 0 0 2px #B22426;
 }
 
 .circuit-3:hover::before {
@@ -1045,17 +1116,32 @@ exports[`ImageInput styles should render with invalid styles 1`] = `
   opacity: 0.2;
 }
 
+@supports (-webkit-filter:brightness(1)) or (filter:brightness(1)) {
+  .circuit-3:hover {
+    -webkit-filter: brightness(0.9);
+    filter: brightness(0.9);
+  }
+
+  .circuit-3:active {
+    -webkit-filter: brightness(0.8);
+    filter: brightness(0.8);
+  }
+}
+
+.circuit-3:hover > button {
+  background-color: #234BC3;
+  border-color: #234BC3;
+}
+
+.circuit-3:active > button {
+  background-color: #1A368E;
+  border-color: #1A368E;
+}
+
 .circuit-10 {
   font-size: 13px;
   line-height: 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
+  display: block;
   margin-top: 4px;
   color: #666;
   -webkit-transition: color 120ms ease-in-out;
@@ -1064,12 +1150,10 @@ exports[`ImageInput styles should render with invalid styles 1`] = `
 }
 
 .circuit-9 {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
+  display: inline-block;
   width: 16px;
   height: 16px;
-  margin-top: 0.15em;
+  vertical-align: text-top;
   margin-right: 4px;
   color: #D23F47;
 }
diff --git a/packages/circuit-ui/components/Input/__snapshots__/Input.spec.tsx.snap b/packages/circuit-ui/components/Input/__snapshots__/Input.spec.tsx.snap
index 1200c80497..d3d88dd20c 100644
--- a/packages/circuit-ui/components/Input/__snapshots__/Input.spec.tsx.snap
+++ b/packages/circuit-ui/components/Input/__snapshots__/Input.spec.tsx.snap
@@ -231,14 +231,7 @@ label + .circuit-3:not(label) {
 .circuit-2 {
   font-size: 13px;
   line-height: 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
+  display: block;
   margin-top: 4px;
   color: #666;
   -webkit-transition: color 120ms ease-in-out;
diff --git a/packages/circuit-ui/components/Select/__snapshots__/Select.spec.tsx.snap b/packages/circuit-ui/components/Select/__snapshots__/Select.spec.tsx.snap
index 9bc1515db9..ac23363fb1 100644
--- a/packages/circuit-ui/components/Select/__snapshots__/Select.spec.tsx.snap
+++ b/packages/circuit-ui/components/Select/__snapshots__/Select.spec.tsx.snap
@@ -635,14 +635,7 @@ select:not(:active) ~ .circuit-2 {
 .circuit-4 {
   font-size: 13px;
   line-height: 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
+  display: block;
   margin-top: 4px;
   color: #666;
   -webkit-transition: color 120ms ease-in-out;
diff --git a/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap b/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap
index 59123a701e..e14b6db74f 100644
--- a/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap
+++ b/packages/circuit-ui/components/TextArea/__snapshots__/TextArea.spec.tsx.snap
@@ -235,14 +235,7 @@ label + .circuit-3:not(label) {
 .circuit-2 {
   font-size: 13px;
   line-height: 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
+  display: block;
   margin-top: 4px;
   color: #666;
   -webkit-transition: color 120ms ease-in-out;
diff --git a/packages/circuit-ui/components/ValidationHint/ValidationHint.tsx b/packages/circuit-ui/components/ValidationHint/ValidationHint.tsx
index 421be65f07..84d9aac12d 100644
--- a/packages/circuit-ui/components/ValidationHint/ValidationHint.tsx
+++ b/packages/circuit-ui/components/ValidationHint/ValidationHint.tsx
@@ -38,8 +38,7 @@ export interface ValidationHintProps extends HTMLProps<HTMLSpanElement> {
 const baseStyles = ({ theme }: StyleProps) => css`
   label: validation-hint;
   ${textKilo({ theme })};
-  display: flex;
-  align-items: flex-start;
+  display: block;
   margin-top: ${theme.spacings.bit};
   color: ${theme.colors.n700};
   transition: color ${theme.transitions.default};
@@ -69,10 +68,10 @@ const iconStyles = (color: 'danger' | 'warning' | 'success') => (
   theme: Theme,
 ) => css`
   label: ${`validation-hint__icon--${color}`};
-  flex-shrink: 0;
+  display: inline-block;
   width: ${theme.iconSizes.kilo};
   height: ${theme.iconSizes.kilo};
-  margin-top: 0.15em;
+  vertical-align: text-top;
   margin-right: ${theme.spacings.bit};
   color: ${theme.colors[color]};
 `;
@@ -112,7 +111,7 @@ const getIcon = (state: ValidationHintProps) => {
 export const ValidationHint = ({
   validationHint,
   ...props
-}: ValidationHintProps) => {
+}: ValidationHintProps): JSX.Element | null => {
   if (!validationHint) {
     return null;
   }
diff --git a/packages/circuit-ui/components/ValidationHint/__snapshots__/ValidationHint.spec.tsx.snap b/packages/circuit-ui/components/ValidationHint/__snapshots__/ValidationHint.spec.tsx.snap
index 8bcfff3785..93c177692e 100644
--- a/packages/circuit-ui/components/ValidationHint/__snapshots__/ValidationHint.spec.tsx.snap
+++ b/packages/circuit-ui/components/ValidationHint/__snapshots__/ValidationHint.spec.tsx.snap
@@ -4,14 +4,7 @@ exports[`ValidationHint styles should render with default styles 1`] = `
 .circuit-0 {
   font-size: 13px;
   line-height: 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
+  display: block;
   margin-top: 4px;
   color: #666;
   -webkit-transition: color 120ms ease-in-out;
@@ -29,14 +22,7 @@ exports[`ValidationHint styles should render with invalid styles 1`] = `
 .circuit-1 {
   font-size: 13px;
   line-height: 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
+  display: block;
   margin-top: 4px;
   color: #666;
   -webkit-transition: color 120ms ease-in-out;
@@ -45,12 +31,10 @@ exports[`ValidationHint styles should render with invalid styles 1`] = `
 }
 
 .circuit-0 {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
+  display: inline-block;
   width: 16px;
   height: 16px;
-  margin-top: 0.15em;
+  vertical-align: text-top;
   margin-right: 4px;
   color: #D23F47;
 }
@@ -82,14 +66,7 @@ exports[`ValidationHint styles should render with valid styles 1`] = `
 .circuit-1 {
   font-size: 13px;
   line-height: 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
+  display: block;
   margin-top: 4px;
   color: #666;
   -webkit-transition: color 120ms ease-in-out;
@@ -98,12 +75,10 @@ exports[`ValidationHint styles should render with valid styles 1`] = `
 }
 
 .circuit-0 {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
+  display: inline-block;
   width: 16px;
   height: 16px;
-  margin-top: 0.15em;
+  vertical-align: text-top;
   margin-right: 4px;
   color: #138849;
 }
@@ -135,14 +110,7 @@ exports[`ValidationHint styles should render with warning styles 1`] = `
 .circuit-1 {
   font-size: 13px;
   line-height: 20px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
+  display: block;
   margin-top: 4px;
   color: #666;
   -webkit-transition: color 120ms ease-in-out;
@@ -150,12 +118,10 @@ exports[`ValidationHint styles should render with warning styles 1`] = `
 }
 
 .circuit-0 {
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
+  display: inline-block;
   width: 16px;
   height: 16px;
-  margin-top: 0.15em;
+  vertical-align: text-top;
   margin-right: 4px;
   color: #F5C625;
 }