diff --git a/test/utils/IconInput.test.tsx b/test/utils/IconInput.test.tsx
new file mode 100644
index 00000000..a5d863d0
--- /dev/null
+++ b/test/utils/IconInput.test.tsx
@@ -0,0 +1,24 @@
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { faAppleAlt, faCalendar, faTable } from '@fortawesome/free-solid-svg-icons';
+import { screen } from '@testing-library/react';
+import { IconInput } from '../../src/utils/IconInput';
+import { renderWithEvents } from '../__helpers__/setUpTest';
+
+describe('<IconInput />', () => {
+  const setUp = (icon: IconProp, placeholder?: string) => renderWithEvents(
+    <IconInput icon={icon} placeholder={placeholder} />,
+  );
+
+  it.each([faCalendar, faAppleAlt, faTable])('displays provided icon', (icon) => {
+    const { container } = setUp(icon);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('focuses input on icon click', async () => {
+    const { user } = setUp(faCalendar, 'foo');
+
+    expect(screen.getByPlaceholderText('foo')).not.toHaveFocus();
+    await user.click(screen.getByRole('img', { hidden: true }));
+    expect(screen.getByPlaceholderText('foo')).toHaveFocus();
+  });
+});
diff --git a/test/utils/__snapshots__/IconInput.test.tsx.snap b/test/utils/__snapshots__/IconInput.test.tsx.snap
new file mode 100644
index 00000000..cc72248c
--- /dev/null
+++ b/test/utils/__snapshots__/IconInput.test.tsx.snap
@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<IconInput /> displays provided icon 1`] = `
+<div>
+  <div
+    class="icon-input-container"
+  >
+    <input
+      class="icon-input-container__input form-control"
+      type="text"
+    />
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-calendar fa-fw icon-input-container__icon"
+      data-icon="calendar"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      viewBox="0 0 448 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M96 32V64H48C21.5 64 0 85.5 0 112v48H448V112c0-26.5-21.5-48-48-48H352V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V64H160V32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192H0V464c0 26.5 21.5 48 48 48H400c26.5 0 48-21.5 48-48V192z"
+        fill="currentColor"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`<IconInput /> displays provided icon 2`] = `
+<div>
+  <div
+    class="icon-input-container"
+  >
+    <input
+      class="icon-input-container__input form-control"
+      type="text"
+    />
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-apple-whole fa-fw icon-input-container__icon"
+      data-icon="apple-whole"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      viewBox="0 0 448 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M224 112c-8.8 0-16-7.2-16-16V80c0-44.2 35.8-80 80-80h16c8.8 0 16 7.2 16 16V32c0 44.2-35.8 80-80 80H224zM0 288c0-76.3 35.7-160 112-160c27.3 0 59.7 10.3 82.7 19.3c18.8 7.3 39.9 7.3 58.7 0c22.9-8.9 55.4-19.3 82.7-19.3c76.3 0 112 83.7 112 160c0 128-80 224-160 224c-16.5 0-38.1-6.6-51.5-11.3c-8.1-2.8-16.9-2.8-25 0c-13.4 4.7-35 11.3-51.5 11.3C80 512 0 416 0 288z"
+        fill="currentColor"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`<IconInput /> displays provided icon 3`] = `
+<div>
+  <div
+    class="icon-input-container"
+  >
+    <input
+      class="icon-input-container__input form-control"
+      type="text"
+    />
+    <svg
+      aria-hidden="true"
+      class="svg-inline--fa fa-table fa-fw icon-input-container__icon"
+      data-icon="table"
+      data-prefix="fas"
+      focusable="false"
+      role="img"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M64 256V160H224v96H64zm0 64H224v96H64V320zm224 96V320H448v96H288zM448 256H288V160H448v96zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"
+        fill="currentColor"
+      />
+    </svg>
+  </div>
+</div>
+`;