diff --git a/web/components/add-button.css b/web/components/add-button.css
new file mode 100644
index 000000000..9a4c09243
--- /dev/null
+++ b/web/components/add-button.css
@@ -0,0 +1,14 @@
+.container {
+  display: flex;
+}
+
+.addButton {
+  background-color: var(--button-background-secondary-default);
+  border-radius: 4px;
+  color: var(--button-label-secondary-default);
+}
+
+.addButton:hover {
+  cursor: pointer;
+  background-color: var(--button-background-secondary-hover);
+}
diff --git a/web/components/add-button.react.js b/web/components/add-button.react.js
new file mode 100644
index 000000000..7a5a70aca
--- /dev/null
+++ b/web/components/add-button.react.js
@@ -0,0 +1,23 @@
+// @flow
+
+import * as React from 'react';
+
+import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+
+import css from './add-button.css';
+
+type Props = {
+  +onClick: () => mixed,
+};
+
+function AddButton(props: Props): React.Node {
+  const { onClick } = props;
+
+  return (
+    <div onClick={onClick} className={css.container}>
+      <SWMansionIcon icon="plus-small" size={24} className={css.addButton} />
+    </div>
+  );
+}
+
+export default AddButton;
diff --git a/web/settings/keyserver-selection-list.css b/web/settings/keyserver-selection-list.css
index 6ba7706a4..8ff9c063c 100644
--- a/web/settings/keyserver-selection-list.css
+++ b/web/settings/keyserver-selection-list.css
@@ -1,31 +1,20 @@
 .container {
   flex: 1;
   background-color: var(--panel-background-primary-default);
   padding: 40px;
   max-width: 456px;
 }
 
 .headerContainer {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 16px;
 }
 
 .header {
   color: var(--text-background-primary-default);
   font-weight: var(--semi-bold);
   line-height: var(--line-height-display);
 }
-
-.addButton {
-  background-color: var(--button-background-secondary-default);
-  border-radius: 4px;
-  color: var(--button-label-secondary-default);
-}
-
-.addButton:hover {
-  cursor: pointer;
-  background-color: var(--button-background-secondary-hover);
-}
diff --git a/web/settings/keyserver-selection-list.react.js b/web/settings/keyserver-selection-list.react.js
index 7ea14cefe..a01203b41 100644
--- a/web/settings/keyserver-selection-list.react.js
+++ b/web/settings/keyserver-selection-list.react.js
@@ -1,62 +1,56 @@
 // @flow
 
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
-import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { selectedKeyserversSelector } from 'lib/selectors/keyserver-selectors.js';
 import type { SelectedKeyserverInfo } from 'lib/types/keyserver-types.js';
 
 import KeyserverSelectionListItem from './keyserver-selection-list-item.react.js';
 import css from './keyserver-selection-list.css';
+import AddButton from '../components/add-button.react.js';
 import AddKeyserverModal from '../modals/keyserver-selection/add-keyserver-modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 function KeyserverSelectionList(): React.Node {
   const selectedKeyserverInfos: $ReadOnlyArray<SelectedKeyserverInfo> =
     useSelector(selectedKeyserversSelector);
 
   const selectedKeyservers = React.useMemo(
     () =>
       selectedKeyserverInfos.map(
         ({ keyserverAdminUserInfo, keyserverInfo }) => (
           <KeyserverSelectionListItem
             key={`${keyserverAdminUserInfo.id}${keyserverInfo.urlPrefix}`}
             keyserverAdminUserInfo={keyserverAdminUserInfo}
             keyserverInfo={keyserverInfo}
           />
         ),
       ),
     [selectedKeyserverInfos],
   );
 
   const { pushModal } = useModalContext();
 
   const onClickAddKeyserver = React.useCallback(
     () => pushModal(<AddKeyserverModal />),
     [pushModal],
   );
 
   const keyserverSelectionList = React.useMemo(
     () => (
       <div className={css.container}>
         <div className={css.headerContainer}>
           <h4 className={css.header}>Keyservers</h4>
-          <div onClick={onClickAddKeyserver}>
-            <SWMansionIcon
-              icon="plus-small"
-              size={26}
-              className={css.addButton}
-            />
-          </div>
+          <AddButton onClick={onClickAddKeyserver} />
         </div>
         {selectedKeyservers}
       </div>
     ),
     [onClickAddKeyserver, selectedKeyservers],
   );
 
   return keyserverSelectionList;
 }
 
 export default KeyserverSelectionList;