diff --git a/web/modals/threads/settings/thread-settings-relationship-button.react.js b/web/modals/threads/settings/thread-settings-relationship-button.react.js
--- a/web/modals/threads/settings/thread-settings-relationship-button.react.js
+++ b/web/modals/threads/settings/thread-settings-relationship-button.react.js
@@ -1,4 +1,11 @@
 // @flow
+import {
+  faUserMinus,
+  faUserPlus,
+  faUserShield,
+  faUserSlash,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import invariant from 'invariant';
 import * as React from 'react';
 
@@ -12,7 +19,10 @@
   getRelationshipDispatchAction,
 } from 'lib/shared/relationship-utils';
 import type { SetState } from 'lib/types/hook-types';
-import { type RelationshipButton } from 'lib/types/relationship-types';
+import {
+  relationshipButtons,
+  type RelationshipButton,
+} from 'lib/types/relationship-types';
 import type { UserInfo } from 'lib/types/user-types';
 import {
   useDispatchActionPromise,
@@ -21,6 +31,7 @@
 
 import Button from '../../../components/button.react';
 import { useSelector } from '../../../redux/redux-utils';
+import css from './thread-settings-relationship-tab.css';
 
 const loadingStatusSelector = createLoadingStatusSelector(
   updateRelationshipsActionTypes,
@@ -40,10 +51,50 @@
   const { username } = otherUserInfo;
   invariant(username, 'Other username should be specified');
 
-  const { text, action } = React.useMemo(() => {
+  const { text, action, variant, icon } = React.useMemo(() => {
+    let buttonVariant;
+    let buttonIcon;
+
+    switch (relationshipButton) {
+      case relationshipButtons.FRIEND:
+        buttonVariant = 'success';
+        buttonIcon = faUserPlus;
+        break;
+      case relationshipButtons.BLOCK:
+        buttonVariant = 'danger';
+        buttonIcon = faUserShield;
+        break;
+      case relationshipButtons.UNFRIEND:
+        buttonVariant = 'danger';
+        buttonIcon = faUserMinus;
+        break;
+      case relationshipButtons.UNBLOCK:
+        buttonVariant = 'success';
+        buttonIcon = faUserShield;
+        break;
+      case relationshipButtons.ACCEPT:
+        buttonVariant = 'success';
+        buttonIcon = faUserPlus;
+        break;
+      case relationshipButtons.REJECT:
+        buttonVariant = 'danger';
+        buttonIcon = faUserSlash;
+        break;
+      case relationshipButtons.WITHDRAW:
+        buttonVariant = 'danger';
+        buttonIcon = faUserMinus;
+        break;
+      default:
+        buttonVariant = 'primary';
+        buttonIcon = null;
+        break;
+    }
+
     return {
       text: getRelationshipActionText(relationshipButton, username),
       action: getRelationshipDispatchAction(relationshipButton),
+      variant: buttonVariant,
+      icon: buttonIcon,
     };
   }, [relationshipButton, username]);
 
@@ -70,7 +121,10 @@
   }, [dispatchActionPromise, updateRelationshipsActionPromise]);
 
   return (
-    <Button variant="primary" onClick={onClick} disabled={disabled}>
+    <Button variant={variant} onClick={onClick} disabled={disabled}>
+      {icon && (
+        <FontAwesomeIcon icon={icon} className={css.relationshipButtonIcon} />
+      )}
       {text}
     </Button>
   );
diff --git a/web/modals/threads/settings/thread-settings-relationship-tab.css b/web/modals/threads/settings/thread-settings-relationship-tab.css
--- a/web/modals/threads/settings/thread-settings-relationship-tab.css
+++ b/web/modals/threads/settings/thread-settings-relationship-tab.css
@@ -3,3 +3,7 @@
   flex-direction: column;
   row-gap: 10px;
 }
+
+svg.relationshipButtonIcon {
+  padding-right: 0.5rem;
+}