diff --git a/packages/react-docs/pages/playground/othello/othello/index.js b/packages/react-docs/pages/playground/othello/othello/index.js
index 6d6bb077c2..28d10b1015 100644
--- a/packages/react-docs/pages/playground/othello/othello/index.js
+++ b/packages/react-docs/pages/playground/othello/othello/index.js
@@ -23,7 +23,9 @@ import { search } from './computer';
 const Othello = () => {
   const [turn, setTurn] = useState(BLACK_PIECE);
   const [cells, updateCells] = useState((new Array(BOARD_SIZE**2)).fill(EMPTY_PIECE));
-  const nextTurn = () => setTurn(turn === WHITE_PIECE ? BLACK_PIECE : WHITE_PIECE);
+  const nextTurn = useCallback(() => {
+    setTurn(turn === WHITE_PIECE ? BLACK_PIECE : WHITE_PIECE);
+  }, [turn]);
   const restart = useCallback(() => {
     const nextCells = (new Array(BOARD_SIZE**2)).fill(EMPTY_PIECE);
     nextCells[BOARD_SIZE * 3 + 3] = WHITE_PIECE;
diff --git a/packages/react-icons/src/SVGIcon.js b/packages/react-icons/src/SVGIcon.js
index 0561814c7d..acd33f9a70 100644
--- a/packages/react-icons/src/SVGIcon.js
+++ b/packages/react-icons/src/SVGIcon.js
@@ -21,6 +21,7 @@ const SVGIcon = forwardRef((
     flexShrink: 0,
     width: size,
     height: size,
+    verticalAlign: 'middle',
   };
   const more = {};
 
diff --git a/packages/react/src/badge/__tests__/__snapshots__/Badge.test.js.snap b/packages/react/src/badge/__tests__/__snapshots__/Badge.test.js.snap
index d6245f3a15..fc1584ac71 100644
--- a/packages/react/src/badge/__tests__/__snapshots__/Badge.test.js.snap
+++ b/packages/react/src/badge/__tests__/__snapshots__/Badge.test.js.snap
@@ -77,6 +77,7 @@ exports[`Badge should render correctly 1`] = `
   flex-shrink: 0;
   width: var(--tonic-sizes-4x);
   height: var(--tonic-sizes-4x);
+  vertical-align: middle;
 }
 
 .emotion-10 {
diff --git a/packages/react/src/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/react/src/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
index 3d0aea926d..695a54a1e3 100644
--- a/packages/react/src/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
+++ b/packages/react/src/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -126,6 +126,7 @@ input[type="checkbox"]:checked:disabled+.emotion-4 {
   flex-shrink: 0;
   width: .75rem;
   height: .75rem;
+  vertical-align: middle;
 }
 
 .emotion-8 {
@@ -237,6 +238,7 @@ input[type="checkbox"]:checked:disabled+.emotion-14 {
   flex-shrink: 0;
   width: 1rem;
   height: 1rem;
+  vertical-align: middle;
 }
 
 .emotion-24 {
@@ -339,6 +341,7 @@ input[type="checkbox"]:checked:disabled+.emotion-24 {
   flex-shrink: 0;
   width: 1.5rem;
   height: 1.5rem;
+  vertical-align: middle;
 }
 
 .emotion-44 {
diff --git a/packages/react/src/drawer/__tests__/__snapshots__/Drawer.test.js.snap b/packages/react/src/drawer/__tests__/__snapshots__/Drawer.test.js.snap
index 21a753f607..e5899e6265 100644
--- a/packages/react/src/drawer/__tests__/__snapshots__/Drawer.test.js.snap
+++ b/packages/react/src/drawer/__tests__/__snapshots__/Drawer.test.js.snap
@@ -152,6 +152,7 @@ exports[`Drawer should render correctly 1`] = `
   flex-shrink: 0;
   width: var(--tonic-sizes-4x);
   height: var(--tonic-sizes-4x);
+  vertical-align: middle;
 }
 
 .emotion-16 {
diff --git a/packages/react/src/menu/__tests__/__snapshots__/Menu.test.js.snap b/packages/react/src/menu/__tests__/__snapshots__/Menu.test.js.snap
index 6508c6f2ea..a74b0f98e1 100644
--- a/packages/react/src/menu/__tests__/__snapshots__/Menu.test.js.snap
+++ b/packages/react/src/menu/__tests__/__snapshots__/Menu.test.js.snap
@@ -134,6 +134,7 @@ exports[`Menu should render correctly 1`] = `
   flex-shrink: 0;
   width: var(--tonic-sizes-4x);
   height: var(--tonic-sizes-4x);
+  vertical-align: middle;
 }
 
 .emotion-10 {
diff --git a/packages/react/src/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/react/src/modal/__tests__/__snapshots__/Modal.test.js.snap
index ceed5f079f..bfd5418e09 100644
--- a/packages/react/src/modal/__tests__/__snapshots__/Modal.test.js.snap
+++ b/packages/react/src/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -152,6 +152,7 @@ exports[`Modal should render correctly 1`] = `
   flex-shrink: 0;
   width: var(--tonic-sizes-4x);
   height: var(--tonic-sizes-4x);
+  vertical-align: middle;
 }
 
 .emotion-16 {
diff --git a/packages/react/src/search-input/__tests__/__snapshots__/SearchInput.test.js.snap b/packages/react/src/search-input/__tests__/__snapshots__/SearchInput.test.js.snap
index e737feff1f..54def80f60 100644
--- a/packages/react/src/search-input/__tests__/__snapshots__/SearchInput.test.js.snap
+++ b/packages/react/src/search-input/__tests__/__snapshots__/SearchInput.test.js.snap
@@ -94,6 +94,14 @@ exports[`SearchInput should render correctly 1`] = `
 }
 
 .emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding-left: calc(.75rem - .0625rem);
   padding-right: var(--tonic-space-2x);
 }
@@ -108,6 +116,7 @@ exports[`SearchInput should render correctly 1`] = `
   flex-shrink: 0;
   width: var(--tonic-sizes-4x);
   height: var(--tonic-sizes-4x);
+  vertical-align: middle;
 }
 
 .emotion-8 {
@@ -298,6 +307,14 @@ exports[`SearchInput should render correctly 1`] = `
 }
 
 .emotion-24 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding-left: var(--tonic-space-3x);
   padding-right: var(--tonic-space-2x);
 }
diff --git a/packages/react/src/search-input/styles.js b/packages/react/src/search-input/styles.js
index d45d460594..6156dd2fbb 100644
--- a/packages/react/src/search-input/styles.js
+++ b/packages/react/src/search-input/styles.js
@@ -109,6 +109,8 @@ const useSearchInputLoadingIconStyle = ({ variant }) => {
     : '2x';
 
   return {
+    display: 'flex',
+    alignItems: 'center',
     pl,
     pr,
   };
@@ -122,6 +124,8 @@ const useSearchInputSearchIconStyle = ({ variant }) => {
   const pr = '2x';
 
   return {
+    display: 'flex',
+    alignItems: 'center',
     pl,
     pr,
   };
diff --git a/packages/react/src/tree/__tests__/__snapshots__/Tree.test.js.snap b/packages/react/src/tree/__tests__/__snapshots__/Tree.test.js.snap
index f73040790d..ff4deb6ffa 100644
--- a/packages/react/src/tree/__tests__/__snapshots__/Tree.test.js.snap
+++ b/packages/react/src/tree/__tests__/__snapshots__/Tree.test.js.snap
@@ -113,6 +113,7 @@ exports[`Tree should render correctly 1`] = `
   flex-shrink: 0;
   width: var(--tonic-sizes-4x);
   height: var(--tonic-sizes-4x);
+  vertical-align: middle;
 }
 
 .emotion-14 {