diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index 59298ef8e6..2bb5b8ec3f 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -279,7 +279,7 @@ limitations under the License.
     max-width: 240px;
 }
 
-.mx_CallView_header_phoneIcon {
+.mx_CallView_header_callTypeIcon {
     display: inline-block;
     margin-right: 6px;
     height: 16px;
@@ -293,12 +293,19 @@ limitations under the License.
 
         height: 16px;
         width: 16px;
-        background-color: $warning-color;
+        background-color: $secondary-fg-color;
         mask-repeat: no-repeat;
         mask-size: contain;
         mask-position: center;
+    }
+
+    &.mx_CallView_header_callTypeIcon_voice::before {
         mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
     }
+
+    &.mx_CallView_header_callTypeIcon_video::before {
+        mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+    }
 }
 
 .mx_CallView_callControls {
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index 966d8e4a09..039f5f2dcf 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -822,10 +822,15 @@ export default class CallView extends React.Component<IProps, IState> {
             { expandButton }
         </div>;
 
+        const callTypeIconClassName = classNames("mx_CallView_header_callTypeIcon", {
+            "mx_CallView_header_callTypeIcon_voice": !isVideoCall,
+            "mx_CallView_header_callTypeIcon_video": isVideoCall,
+        });
+
         let header: React.ReactNode;
         if (!this.props.pipMode) {
             header = <div className="mx_CallView_header">
-                <div className="mx_CallView_header_phoneIcon" />
+                <div className={callTypeIconClassName} />
                 <span className="mx_CallView_header_callType">{ callTypeText }</span>
                 { headerControls }
             </div>;