h2h icon

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>