h2h icon

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>
               )}