Added icons for browsers, OS and devices.

components/metrics/BrowsersTable.js

@@ -2,12 +2,23 @@ import FilterLink from 'components/common/FilterLink';
 import MetricsTable from 'components/metrics/MetricsTable';
 import { BROWSERS } from 'lib/constants';
 import useMessages from 'hooks/useMessages';
+import { useRouter } from 'next/router';
 
 export function BrowsersTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
+  const { basePath } = useRouter();
 
   function renderLink({ x: browser }) {
-    return <FilterLink id="browser" value={browser} label={BROWSERS[browser] || browser} />;
+    return (
+      <FilterLink id="browser" value={browser} label={BROWSERS[browser] || browser}>
+        <img
+          src={`${basePath}/images/browsers/${browser || 'unknown'}.png`}
+          alt={browser}
+          width={16}
+          height={16}
+        />
+      </FilterLink>
+    );
   }
 
   return (

components/metrics/DevicesTable.js

@@ -1,9 +1,11 @@
 import MetricsTable from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
 import useMessages from 'hooks/useMessages';
+import { useRouter } from 'next/router';
 
 export function DevicesTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
+  const { basePath } = useRouter();
 
   function renderLink({ x: device }) {
     return (
@@ -11,7 +13,14 @@ export function DevicesTable({ websiteId, ...props }) {
         id="device"
         value={labels[device] && device}
         label={formatMessage(labels[device] || labels.unknown)}
-      />
+      >
+        <img
+          src={`${basePath}/images/device/${device.toLowerCase() || 'unknown'}.png`}
+          alt={device}
+          width={16}
+          height={16}
+        />
+      </FilterLink>
     );
   }
 

components/metrics/OSTable.js

@@ -1,12 +1,25 @@
 import MetricsTable from './MetricsTable';
 import FilterLink from 'components/common/FilterLink';
 import useMessages from 'hooks/useMessages';
+import { useRouter } from 'next/router';
 
 export function OSTable({ websiteId, ...props }) {
   const { formatMessage, labels } = useMessages();
+  const { basePath } = useRouter();
 
   function renderLink({ x: os }) {
-    return <FilterLink id="os" value={os} />;
+    return (
+      <FilterLink id="os" value={os}>
+        <img
+          src={`${basePath}/images/os/${
+            os.toLowerCase().replaceAll(/[^\w]+/g, '-') || 'unknown'
+          }.png`}
+          alt={os}
+          width={16}
+          height={16}
+        />
+      </FilterLink>
+    );
   }
 
   return (