src/components/head-to-head-icon.tsx

@@ -0,0 +1,35 @@
+import { Box } from "@mantine/core";
+import { FootballHelmetIcon } from "@phosphor-icons/react";
+
+const HeadToHeadIcon = ({ size = 14 }: { size?: number }) => (
+  <Box
+    component="span"
+    style={{
+      position: "relative",
+      display: "inline-block",
+      width: size * (27.5 / 14),
+      height: size * (16 / 14),
+    }}
+  >
+    <FootballHelmetIcon
+      size={size}
+      style={{
+        position: "absolute",
+        left: 0,
+        top: 0,
+        transform: "rotate(25deg)",
+      }}
+    />
+    <FootballHelmetIcon
+      size={size}
+      style={{
+        position: "absolute",
+        right: 0,
+        top: 0,
+        transform: "scaleX(-1) rotate(25deg)",
+      }}
+    />
+  </Box>
+);
+
+export default HeadToHeadIcon;

src/features/bracket/components/match-dock.tsx

@@ -13,7 +13,7 @@ import {
   Tooltip,
 } from "@mantine/core";
 import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
-import { FootballHelmetIcon } from "@phosphor-icons/react";
+import HeadToHeadIcon from "@/components/head-to-head-icon";
 import { useNavigate } from "@tanstack/react-router";
 import { Match } from "@/features/matches/types";
 import TeamAvatar from "@/components/team-avatar";
@@ -188,28 +188,7 @@ const MatchDock = ({ match, onClose }: MatchDockProps) => {
                         w={40}
                         style={{ flexShrink: 0 }}
                       >
-                        <Group
-                          style={{ position: "relative", width: 27.5, height: 16 }}
-                        >
-                          <FootballHelmetIcon
-                            size={14}
-                            style={{
-                              position: "absolute",
-                              left: 0,
-                              top: 0,
-                              transform: "rotate(25deg)",
-                            }}
-                          />
-                          <FootballHelmetIcon
-                            size={14}
-                            style={{
-                              position: "absolute",
-                              right: 0,
-                              top: 0,
-                              transform: "scaleX(-1) rotate(25deg)",
-                            }}
-                          />
-                        </Group>
+                        <HeadToHeadIcon />
                       </ActionIcon>
                     </Tooltip>
                   )}

src/features/matches/components/match-card.tsx

@@ -1,5 +1,5 @@
 import { Text, Group, Stack, Paper, Indicator, Box, Tooltip, ActionIcon } from "@mantine/core";
-import { FootballHelmetIcon } from "@phosphor-icons/react";
+import HeadToHeadIcon from "@/components/head-to-head-icon";
 import { useNavigate } from "@tanstack/react-router";
 import { Match } from "../types";
 import TeamAvatar from "@/components/team-avatar";
@@ -94,26 +94,7 @@ const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
                     aria-label={t`View head-to-head`}
                     w={40}
                   >
-                    <Group style={{ position: 'relative', width: 27.5, height: 16 }}>
-                      <FootballHelmetIcon
-                        size={14}
-                        style={{
-                          position: 'absolute',
-                          left: 0,
-                          top: 0,
-                          transform: 'rotate(25deg)',
-                        }}
-                      />
-                      <FootballHelmetIcon
-                        size={14}
-                        style={{
-                          position: 'absolute',
-                          right: 0,
-                          top: 0,
-                          transform: 'scaleX(-1) rotate(25deg)',
-                        }}
-                      />
-                    </Group>
+                    <HeadToHeadIcon />
                   </ActionIcon>
                 </Tooltip>
               )}

src/features/players/components/profile/header.tsx

@@ -1,7 +1,8 @@
 import Sheet from "@/components/sheet/sheet";
 import { useAuth } from "@/contexts/auth-context";
-import { Flex, Title, ActionIcon, Stack, Button, Box } from "@mantine/core";
-import { PencilIcon, FootballHelmetIcon } from "@phosphor-icons/react";
+import { Flex, Title, ActionIcon, Stack, Button } from "@mantine/core";
+import { PencilIcon } from "@phosphor-icons/react";
+import HeadToHeadIcon from "@/components/head-to-head-icon";
 import { useMemo } from "react";
 import { useLingui } from "@lingui/react/macro";
 import NameUpdateForm from "./name-form";
@@ -64,26 +65,7 @@ const Header = ({ player }: HeaderProps) => {
               w={40}
               display={!owner ? 'block' : 'none'}
             >
-              <Box style={{ position: 'relative', width: 27.5, height: 16 }}>
-                <FootballHelmetIcon
-                  size={14}
-                  style={{
-                    position: 'absolute',
-                    left: 0,
-                    top: 0,
-                    transform: 'rotate(25deg)'
-                  }}
-                />
-                <FootballHelmetIcon
-                  size={14}
-                  style={{
-                    position: 'absolute',
-                    right: 0,
-                    top: 0,
-                    transform: 'scaleX(-1) rotate(25deg)'
-                  }}
-                />
-              </Box>
+              <HeadToHeadIcon />
             </ActionIcon>
           </Flex>
         </Flex>

src/features/predictions/components/prediction-editor.tsx

@@ -7,7 +7,8 @@ import {
   Stack,
   Text,
 } from "@mantine/core";
-import { CaretLeftIcon, CaretRightIcon, InfoIcon } from "@phosphor-icons/react";
+import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
+import HeadToHeadIcon from "@/components/head-to-head-icon";
 import WizardOrbIcon from "@/components/wizard-orb-icon";
 import { Trans, useLingui } from "@lingui/react/macro";
 import { useNavigate } from "@tanstack/react-router";
@@ -228,7 +229,7 @@ export const PredictionEditor: React.FC<PredictionEditorProps> = ({
                   disabled={!activeResolved?.home && !activeResolved?.away}
                   aria-label={t`Matchup details`}
                 >
-                  <InfoIcon size={16} />
+                  <HeadToHeadIcon />
                 </ActionIcon>
               </Group>
               <Group gap="sm" align="center" wrap="nowrap">