diff --git a/packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss b/packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss
new file mode 100644
index 00000000000..2bc2ce39a83
--- /dev/null
+++ b/packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss
@@ -0,0 +1,39 @@
+.close-button {
+    // keep in sync with CLOSE_BUTTON_SIZE in CloseButton.tsx
+    $size: 32px;
+
+    $light-stroke: #e7e7e7;
+
+    $active-fill: #dbe5f0;
+    $hover-fill: #f2f2f2;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    position: relative;
+    height: $size;
+    width: $size;
+    padding: 7px;
+
+    color: $light-text;
+    background: white;
+    border: 1px solid $light-stroke !important;
+    border-radius: 50%;
+
+    &:hover {
+        background: $hover-fill;
+        cursor: pointer;
+        color: $dark-text;
+    }
+
+    &:active {
+        background: $active-fill;
+        border: 1px solid $active-fill;
+    }
+
+    svg {
+        height: 14px;
+        width: 14px;
+    }
+}
diff --git a/packages/@ourworldindata/grapher/src/closeButton/CloseButton.tsx b/packages/@ourworldindata/grapher/src/closeButton/CloseButton.tsx
new file mode 100644
index 00000000000..d8be4ca885d
--- /dev/null
+++ b/packages/@ourworldindata/grapher/src/closeButton/CloseButton.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+import cx from "classnames"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
+import { faXmark } from "@fortawesome/free-solid-svg-icons"
+
+// keep in sync with $size in CloseButton.scss
+const CLOSE_BUTTON_SIZE = 32
+
+export const CLOSE_BUTTON_WIDTH = CLOSE_BUTTON_SIZE
+export const CLOSE_BUTTON_HEIGHT = CLOSE_BUTTON_SIZE
+
+export function CloseButton({
+    onClick,
+    className,
+}: {
+    onClick: React.MouseEventHandler<HTMLButtonElement>
+    className?: string
+}) {
+    return (
+        <button
+            type="button"
+            className={cx("close-button", className)}
+            onClick={onClick}
+        >
+            <FontAwesomeIcon icon={faXmark} />
+        </button>
+    )
+}
diff --git a/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx b/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx
index a79d7fe4a58..1aad31865d8 100644
--- a/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/EntitySelectionToggle.tsx
@@ -55,18 +55,18 @@ export class EntitySelectionToggle extends React.Component<{
                   icon: <FontAwesomeIcon icon={faEye} />,
               }
             : canChangeEntity
-            ? {
-                  action: "Change",
-                  entity: entityType,
-                  icon: <FontAwesomeIcon icon={faRightLeft} />,
-              }
-            : canAddEntities
-            ? {
-                  action: "Edit",
-                  entity: entityTypePlural,
-                  icon: <FontAwesomeIcon icon={faPencilAlt} />,
-              }
-            : null
+              ? {
+                    action: "Change",
+                    entity: entityType,
+                    icon: <FontAwesomeIcon icon={faRightLeft} />,
+                }
+              : canAddEntities
+                ? {
+                      action: "Edit",
+                      entity: entityTypePlural,
+                      icon: <FontAwesomeIcon icon={faPencilAlt} />,
+                  }
+                : null
     }
 
     render(): JSX.Element | null {
diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss
index af5f6796962..103d898bf5c 100644
--- a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss
+++ b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss
@@ -19,7 +19,7 @@ $control-row-height: 32px;
 
 nav.controlsRow .chart-controls .settings-menu {
     // the pop-up version of the settings menu
-    .settings-menu-controls {
+    .settings-menu-wrapper {
         position: absolute;
         width: 300px;
         right: $indent;
@@ -42,6 +42,27 @@ nav.controlsRow .chart-controls .settings-menu {
 }
 
 .settings-menu-contents {
+    //
+    // chart-type label
+    //
+    .settings-menu-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: white;
+        padding: 9px $indent 3px $indent;
+        position: sticky;
+        top: 0;
+        z-index: 1;
+
+        .settings-menu-title {
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: $light-text;
+            font: $bold 12px/16px $lato;
+        }
+    }
+
     .settings-menu-controls {
         //
         // shared button coloring & behaviors
@@ -79,40 +100,6 @@ nav.controlsRow .chart-controls .settings-menu {
             }
         }
 
-        //
-        // chart-type label and close button
-        //
-        .config-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: white;
-            padding: 9px $indent 3px $indent;
-            position: sticky;
-            top: 0;
-            z-index: 1;
-
-            .config-title {
-                text-transform: uppercase;
-                letter-spacing: 0.1em;
-                color: $light-text;
-                font: $bold 12px/16px $lato;
-            }
-
-            button.close {
-                position: relative;
-                border-radius: 50%;
-                height: 32px;
-                width: 32px;
-                text-align: center;
-                justify-content: center;
-                svg {
-                    height: 14px;
-                    width: 14px;
-                }
-            }
-        }
-
         //
         // each titled block of control widgets (with optional info-circle + tooltip)
         //
diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
index 23960cb25d8..61f079dfe45 100644
--- a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
+++ b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
@@ -3,12 +3,13 @@ import { computed, action, observable } from "mobx"
 import { observer } from "mobx-react"
 import classnames from "classnames"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import { faXmark, faGear } from "@fortawesome/free-solid-svg-icons"
+import { faGear } from "@fortawesome/free-solid-svg-icons"
 import { EntityName, ChartTypeName, FacetStrategy } from "@ourworldindata/types"
 import { SelectionArray } from "../selection/SelectionArray"
 import { ChartDimension } from "../chart/ChartDimension"
 import { makeSelectionArray } from "../chart/ChartUtils.js"
 import { AxisConfig } from "../axis/AxisConfig"
+import { CloseButton } from "../closeButton/CloseButton.js"
 
 import { AxisScaleToggle } from "./settings/AxisScaleToggle"
 import { AbsRelToggle, AbsRelToggleManager } from "./settings/AbsRelToggle"
@@ -309,68 +310,70 @@ export class SettingsMenu extends React.Component<{
                     onClick={this.toggleVisibility}
                 ></div>
                 <div
-                    className="settings-menu-controls"
+                    className="settings-menu-wrapper"
                     style={{
                         ...this.layout,
                     }}
                 >
-                    <div className="config-header">
-                        <div className="config-title">{menuTitle}</div>
-                        <button
-                            className="clickable close"
-                            onClick={this.toggleVisibility}
-                        >
-                            <FontAwesomeIcon icon={faXmark} />
-                        </button>
+                    <div className="settings-menu-header">
+                        <div className="settings-menu-title">{menuTitle}</div>
+                        <CloseButton onClick={() => this.toggleVisibility()} />
                     </div>
 
-                    <SettingsGroup
-                        title="Chart view"
-                        active={
-                            isOnChartTab &&
-                            (showAbsRelToggle ||
-                                showZoomToggle ||
-                                showNoDataAreaToggle ||
-                                showFacetControl ||
-                                showFacetYDomainToggle)
-                        }
-                    >
-                        {showFacetControl && (
-                            <FacetStrategySelector manager={manager} />
-                        )}
-                        {showFacetYDomainToggle && (
-                            <FacetYDomainToggle manager={manager} />
-                        )}
-                        {showAbsRelToggle && <AbsRelToggle manager={manager} />}
-                        {showNoDataAreaToggle && (
-                            <NoDataAreaToggle manager={manager} />
-                        )}
-                        {showZoomToggle && <ZoomToggle manager={manager} />}
-                    </SettingsGroup>
-                    <SettingsGroup
-                        title="Axis scale"
-                        active={
-                            isOnChartTab &&
-                            (showYScaleToggle || showXScaleToggle)
-                        }
-                    >
-                        {showYScaleToggle && (
-                            <AxisScaleToggle
-                                axis={yAxis!}
-                                subtitle={omitLoneAxisLabel ? "" : yLabel}
-                            />
-                        )}
-                        {showXScaleToggle && (
-                            <AxisScaleToggle axis={xAxis!} subtitle={xLabel} />
-                        )}
-                        <div className="config-subtitle">
-                            A linear scale evenly spaces values, where each
-                            increment represents a consistent change. A
-                            logarithmic scale uses multiples of the starting
-                            value, with each increment representing the same
-                            percentage increase.
-                        </div>
-                    </SettingsGroup>
+                    <div className="settings-menu-controls">
+                        <SettingsGroup
+                            title="Chart view"
+                            active={
+                                isOnChartTab &&
+                                (showAbsRelToggle ||
+                                    showZoomToggle ||
+                                    showNoDataAreaToggle ||
+                                    showFacetControl ||
+                                    showFacetYDomainToggle)
+                            }
+                        >
+                            {showFacetControl && (
+                                <FacetStrategySelector manager={manager} />
+                            )}
+                            {showFacetYDomainToggle && (
+                                <FacetYDomainToggle manager={manager} />
+                            )}
+                            {showAbsRelToggle && (
+                                <AbsRelToggle manager={manager} />
+                            )}
+                            {showNoDataAreaToggle && (
+                                <NoDataAreaToggle manager={manager} />
+                            )}
+                            {showZoomToggle && <ZoomToggle manager={manager} />}
+                        </SettingsGroup>
+                        <SettingsGroup
+                            title="Axis scale"
+                            active={
+                                isOnChartTab &&
+                                (showYScaleToggle || showXScaleToggle)
+                            }
+                        >
+                            {showYScaleToggle && (
+                                <AxisScaleToggle
+                                    axis={yAxis!}
+                                    subtitle={omitLoneAxisLabel ? "" : yLabel}
+                                />
+                            )}
+                            {showXScaleToggle && (
+                                <AxisScaleToggle
+                                    axis={xAxis!}
+                                    subtitle={xLabel}
+                                />
+                            )}
+                            <div className="config-subtitle">
+                                A linear scale evenly spaces values, where each
+                                increment represents a consistent change. A
+                                logarithmic scale uses multiples of the starting
+                                value, with each increment representing the same
+                                percentage increase.
+                            </div>
+                        </SettingsGroup>
+                    </div>
                 </div>
             </div>
         )
diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
index 699943ed0c0..c6f6c3c5134 100644
--- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx
+++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -3133,8 +3133,8 @@ export class Grapher
         return this.canHighlightEntities
             ? `Select ${this.entityTypePlural}`
             : this.canChangeEntity
-            ? `Change ${a(this.entityType)}`
-            : `Add/remove ${this.entityTypePlural}`
+              ? `Change ${a(this.entityType)}`
+              : `Add/remove ${this.entityTypePlural}`
     }
 
     @computed get canSelectMultipleEntities(): boolean {
diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
index 7a431ae9ec1..cfa8428f3ab 100644
--- a/packages/@ourworldindata/grapher/src/core/grapher.scss
+++ b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -85,6 +85,7 @@ $zindex-controls-drawer: 150;
 @import "../sparkBars/SparkBars.scss";
 @import "../fullScreen/FullScreen.scss";
 @import "../../../components/src/Checkbox.scss";
+@import "../closeButton/CloseButton.scss";
 
 .GrapherComponent,
 .GrapherComponent h2,
diff --git a/packages/@ourworldindata/grapher/src/modal/Modal.scss b/packages/@ourworldindata/grapher/src/modal/Modal.scss
index a13701111f3..dcbaf7a7a74 100644
--- a/packages/@ourworldindata/grapher/src/modal/Modal.scss
+++ b/packages/@ourworldindata/grapher/src/modal/Modal.scss
@@ -31,37 +31,10 @@ $modal-padding: 1.5em;
             flex-direction: column;
         }
 
-        .modalDismiss {
-            $light-stroke: #e7e7e7;
-            $hover-fill: #f2f2f2;
-            $active-fill: #dbe5f0;
-
-            font-size: 13px;
-            color: $dark-text;
-            border: 1px solid $light-stroke;
-            border-radius: 50%;
-            width: 32px;
-            height: 32px;
-            background-color: #fff;
-            z-index: 1;
-
-            // center icon
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
+        .close-button--top-right {
             position: absolute;
             top: $modal-padding;
             right: $modal-padding;
-
-            &:hover {
-                border-color: $hover-fill;
-                background: $hover-fill;
-                cursor: pointer;
-            }
-            &:active {
-                background-color: $active-fill;
-            }
         }
 
         .modalHeader {
@@ -83,10 +56,6 @@ $modal-padding: 1.5em;
                 letter-spacing: 1.2px;
                 margin: 0;
             }
-
-            .modalDismiss {
-                position: static;
-            }
         }
 
         .modalScrollable {
diff --git a/packages/@ourworldindata/grapher/src/modal/Modal.tsx b/packages/@ourworldindata/grapher/src/modal/Modal.tsx
index 547e0426fd8..03c2c38e0ba 100644
--- a/packages/@ourworldindata/grapher/src/modal/Modal.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/Modal.tsx
@@ -2,9 +2,8 @@ import React from "react"
 import { observer } from "mobx-react"
 import { action, computed } from "mobx"
 import cx from "classnames"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import { faTimes } from "@fortawesome/free-solid-svg-icons"
 import { Bounds } from "@ourworldindata/utils"
+import { CloseButton } from "../closeButton/CloseButton.js"
 
 @observer
 export class Modal extends React.Component<{
@@ -87,12 +86,6 @@ export class Modal extends React.Component<{
             contentStyle.transform = "translateY(-50%)"
         }
 
-        const dismissButton = (
-            <button className="modalDismiss" onClick={this.props.onDismiss}>
-                <FontAwesomeIcon icon={faTimes} />
-            </button>
-        )
-
         return (
             <div className="modalOverlay">
                 <div className="modalWrapper">
@@ -108,10 +101,13 @@ export class Modal extends React.Component<{
                                 })}
                             >
                                 <div className="modalTitle">{this.title}</div>
-                                {dismissButton}
+                                <CloseButton onClick={this.props.onDismiss} />
                             </div>
                         ) : (
-                            dismissButton
+                            <CloseButton
+                                className="close-button--top-right"
+                                onClick={this.props.onDismiss}
+                            />
                         )}
                         <div className="modalScrollable">
                             {this.props.children}
diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
index 2e2f6af51dc..17af8409f65 100644
--- a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
+++ b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
@@ -35,6 +35,7 @@ import { SourcesDescriptions } from "./SourcesDescriptions"
 import { Tabs } from "../tabs/Tabs"
 import { ExpandableTabs } from "../tabs/ExpandableTabs"
 import { LoadingIndicator } from "../loadingIndicator/LoadingIndicator"
+import { CLOSE_BUTTON_WIDTH } from "../closeButton/CloseButton"
 
 // keep in sync with variables in SourcesModal.scss
 const MAX_CONTENT_WIDTH = 640
@@ -91,8 +92,7 @@ export class SourcesModal extends React.Component<
 
     @computed private get showStickyModalHeader(): boolean {
         const modalWidth = this.modalBounds.width - 2 * this.modalPadding
-        const dismissButtonWidth = 32
-        return (modalWidth - MAX_CONTENT_WIDTH) / 2 < dismissButtonWidth
+        return (modalWidth - MAX_CONTENT_WIDTH) / 2 < CLOSE_BUTTON_WIDTH + 2
     }
 
     @computed private get modalPadding(): number {
diff --git a/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.scss b/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.scss
index 601e24f45db..e9e7080bcdb 100644
--- a/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.scss
+++ b/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.scss
@@ -39,52 +39,6 @@
                     color: $light-text;
                     font: $bold 12px/16px $lato;
                 }
-
-                button.close {
-                    position: relative;
-                    border-radius: 50%;
-                    height: 32px;
-                    width: 32px;
-                    text-align: center;
-                    justify-content: center;
-                    svg {
-                        height: 14px;
-                        width: 14px;
-                    }
-                }
-            }
-
-            button {
-                display: flex;
-                align-items: center;
-                color: $light-text;
-                background: white;
-                border: 1px solid $light-stroke;
-                font: $medium 13px/16px $lato;
-                letter-spacing: 0.01em;
-                border-radius: 4px;
-                padding: 7px;
-                height: 40px;
-
-                &:hover {
-                    background: $hover-fill;
-                    cursor: pointer;
-
-                    &:not(.active) {
-                        color: $dark-text;
-                    }
-                }
-
-                &.active,
-                &:active {
-                    background: $active-fill;
-                    border: 1px solid $active-fill;
-                }
-
-                &.active {
-                    cursor: default;
-                    color: $active-text;
-                }
             }
         }
 
diff --git a/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.tsx b/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.tsx
index b2f8266cbc7..6e046bdfce9 100644
--- a/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.tsx
+++ b/packages/@ourworldindata/grapher/src/slideInDrawer/SlideInDrawer.tsx
@@ -3,8 +3,7 @@ import { createPortal } from "react-dom"
 import { computed, action, observable } from "mobx"
 import { observer } from "mobx-react"
 import { GRAPHER_DRAWER_ID } from "../core/GrapherConstants"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import { faXmark } from "@fortawesome/free-solid-svg-icons"
+import { CloseButton } from "../closeButton/CloseButton.js"
 
 @observer
 export class SlideInDrawer extends React.Component<{
@@ -88,12 +87,7 @@ export class SlideInDrawer extends React.Component<{
                         <div className="grapher-drawer-title">
                             {this.props.title}
                         </div>
-                        <button
-                            className="clickable close"
-                            onClick={this.toggleVisibility}
-                        >
-                            <FontAwesomeIcon icon={faXmark} />
-                        </button>
+                        <CloseButton onClick={() => this.toggleVisibility()} />
                     </div>
 
                     {this.props.children}