diff --git a/res/css/views/elements/_InfoTooltip.scss b/res/css/views/elements/_InfoTooltip.scss
index 5858a60629..5329e7f1f8 100644
--- a/res/css/views/elements/_InfoTooltip.scss
+++ b/res/css/views/elements/_InfoTooltip.scss
@@ -30,5 +30,12 @@ limitations under the License.
     mask-position: center;
     content: '';
     vertical-align: middle;
+}
+
+.mx_InfoTooltip_icon_info::before {
     mask-image: url('$(res)/img/element-icons/info.svg');
 }
+
+.mx_InfoTooltip_icon_warning::before {
+    mask-image: url('$(res)/img/element-icons/warning.svg');
+}
diff --git a/src/components/views/elements/InfoTooltip.tsx b/src/components/views/elements/InfoTooltip.tsx
index 9eea0a96dc..ca592b1849 100644
--- a/src/components/views/elements/InfoTooltip.tsx
+++ b/src/components/views/elements/InfoTooltip.tsx
@@ -22,10 +22,16 @@ import Tooltip, {Alignment} from './Tooltip';
 import {_t} from "../../../languageHandler";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
 
+export enum InfoTooltipKind {
+    Info = "info",
+    Warning = "warning",
+}
+
 interface ITooltipProps {
     tooltip?: React.ReactNode;
     className?: string,
     tooltipClassName?: string;
+    kind?: InfoTooltipKind;
 }
 
 interface IState {
@@ -54,8 +60,12 @@ export default class InfoTooltip extends React.PureComponent<ITooltipProps, ISta
     };
 
     render() {
-        const {tooltip, children, tooltipClassName, className} = this.props;
+        const {tooltip, children, tooltipClassName, className, kind} = this.props;
         const title = _t("Information");
+        const iconClassName = (
+            (kind !== InfoTooltipKind.Warning) ?
+                "mx_InfoTooltip_icon_info" : "mx_InfoTooltip_icon_warning"
+        );
 
         // Tooltip are forced on the right for a more natural feel to them on info icons
         const tip = this.state.hover ? <Tooltip
@@ -70,7 +80,7 @@ export default class InfoTooltip extends React.PureComponent<ITooltipProps, ISta
                 onMouseLeave={this.onMouseLeave}
                 className={classNames("mx_InfoTooltip", className)}
             >
-                <span className="mx_InfoTooltip_icon" aria-label={title} />
+                <span className={classNames("mx_InfoTooltip_icon", iconClassName)} aria-label={title} />
                 {children}
                 {tip}
             </div>