frontAnswerer/lib/assets/icons/ContactFormIcon/NameIcon.tsx

import { Box } from "@mui/material";

interface Props {
  color: string;
  backgroundColor: string;
}

export default function NameIcon({ color, backgroundColor }: Props) {
  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: "58px",
        width: "45px",
        backgroundColor: { backgroundColor },
        borderBottomLeftRadius: "12px",
        borderTopLeftRadius: "12px",
      }}
    >
      <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle
          cx="2.97143"
          cy="2.97143"
          r="2.97143"
          transform="matrix(-1 0 0 1 11.4688 2.5)"
          stroke="#9A9AAF"
          strokeWidth="1.5"
        />
        <path
          d="M3.29688 12.8526C3.29688 12.2135 3.69865 11.6433 4.30054 11.4284V11.4284C7.01416 10.4592 9.97959 10.4592 12.6932 11.4284V11.4284C13.2951 11.6433 13.6969 12.2135 13.6969 12.8526V13.8298C13.6969 14.7119 12.9156 15.3895 12.0424 15.2648L11.7512 15.2232C9.59262 14.9148 7.40113 14.9148 5.24252 15.2232L4.95137 15.2648C4.07814 15.3895 3.29688 14.7119 3.29688 13.8298V12.8526Z"
          stroke="#9A9AAF"
          strokeWidth="1.5"
        />
      </svg>
    </Box>
  );
}