diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -4,11 +4,14 @@
 import invariant from 'invariant';
 import * as React from 'react';
 
+import type { Icon } from '../SWMansionIcon.react';
+import SWMansionIcon from '../SWMansionIcon.react';
 import css from './modal.css';
 
 export type ModalSize = 'small' | 'large';
 type Props = {
-  +name: string,
+  +name: React.Node,
+  +icon?: Icon,
   +onClose: () => void,
   +children?: React.Node,
   +size?: ModalSize,
@@ -27,7 +30,7 @@
   }
 
   render(): React.Node {
-    const { size, children, onClose, fixedHeight, name } = this.props;
+    const { size, children, onClose, fixedHeight, name, icon } = this.props;
 
     const overlayClasses = classNames(
       css['modal-overlay'],
@@ -55,7 +58,10 @@
               <span className={css['modal-close']} onClick={onClose}>
                 ×
               </span>
-              <h2>{name}</h2>
+              <h2>
+                <span>{icon && <SWMansionIcon size={24} icon={icon} />}</span>
+                {name}
+              </h2>
             </div>
             {children}
           </div>
diff --git a/web/modals/threads/confirm-leave-thread-modal.react.js b/web/modals/threads/confirm-leave-thread-modal.react.js
--- a/web/modals/threads/confirm-leave-thread-modal.react.js
+++ b/web/modals/threads/confirm-leave-thread-modal.react.js
@@ -17,7 +17,7 @@
   const { onClose, onConfirm } = props;
 
   return (
-    <Modal name="Leaving channel" onClose={onClose}>
+    <Modal name="Leaving channel" icon="warning-circle" onClose={onClose}>
       <div className={css['modal-body']}>
         <p>
           Are you sure you want to leave thread? This and this will happen if