frontPanel/src/pages/DesignPage/ColorRingIcon.tsx

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

interface Color {
  color?: string;
}
export default function ColorRingIcon({ color }: Color) {
  return (
    <Box
      sx={{
        height: "20px",
        width: "20px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <svg
        width="17"
        height="17"
        viewBox="0 0 17 17"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <rect
          x="0.5"
          y="0.5"
          width="16"
          height="16"
          rx="8"
          fill={color || "#FFFFFF"}
          stroke={color ? "transparent" : "#9A9AAF"}
        />
      </svg>
    </Box>
  );
}