diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.css b/packages/trace-viewer/src/ui/networkResourceDetails.css
index ce0648b8c2..0914d065bb 100644
--- a/packages/trace-viewer/src/ui/networkResourceDetails.css
+++ b/packages/trace-viewer/src/ui/networkResourceDetails.css
@@ -61,3 +61,27 @@
 .tab-network .tabbed-pane-tab.selected {
   font-weight: bold;
 }
+
+.green-circle::before,
+.red-circle::before,
+.yellow-circle::before {
+  content: "";
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  margin-right: 2px;
+  align-self: center;
+}
+
+.green-circle::before {
+  background-color: var(--vscode-charts-green);
+}
+
+.red-circle::before {
+  background-color: var(--vscode-charts-red);
+}
+
+.yellow-circle::before {
+  background-color: var(--vscode-charts-yellow);
+}
diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.tsx b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
index e7b1bad4b6..79594fb8c4 100644
--- a/packages/trace-viewer/src/ui/networkResourceDetails.tsx
+++ b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
@@ -80,11 +80,10 @@ const RequestTab: React.FunctionComponent<{
     <div className='network-request-details-header'>General</div>
     <div className='network-request-details-url'>{`URL: ${resource.request.url}`}</div>
     <div className='network-request-details-general'>{`Method: ${resource.request.method}`}</div>
-    <div className='network-request-details-general'>{`Status Code: ${
-      resource.response.status >= 200 && resource.response.status < 400
-        ? `🟢 ${resource.response.status} ${resource.response.statusText}`
-        : `🔴 ${resource.response.status} ${resource.response.statusText}`
-    }`}</div>
+    <div className='network-request-details-general' style={{ display: 'flex' }}>
+      Status Code: <span className={statusClass(resource.response.status)} style={{ display: 'inline-flex' }}>
+        {`${resource.response.status} ${resource.response.statusText}`}
+      </span></div>
     <div className='network-request-details-header'>Request Headers</div>
     <div className='network-request-details-headers'>{resource.request.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div>
     {requestBody && <div className='network-request-details-header'>Request Body</div>}
@@ -135,6 +134,14 @@ const BodyTab: React.FunctionComponent<{
   </div>;
 };
 
+function statusClass(statusCode: number): string {
+  if (statusCode < 300 || statusCode === 304)
+    return 'green-circle';
+  if (statusCode < 400)
+    return 'yellow-circle';
+  return 'red-circle';
+}
+
 function formatBody(body: string | null, contentType: string): string {
   if (body === null)
     return 'Loading...';