<Flex
  bg="#edf3f8"
  _dark={{
    bg: "#3e3e3e",
  }}
  p={20}
  w="full"
  justifyContent="center"
  alignItems="center"
>
  <chakra.span pos="relative" display="inline-block">
    <Icon
      boxSize={6}
      fill="none"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
    </Icon>
    <chakra.span
      pos="absolute"
      top="-1px"
      right="-1px"
      px={2}
      py={1}
      fontSize="xs"
      fontWeight="bold"
      lineHeight="none"
      color="red.100"
      transform="translate(50%,-50%)"
      bg="red.600"
      rounded="full"
    >
      99
    </chakra.span>
  </chakra.span>

  <chakra.span pos="relative" display="inline-block" ml={8}>
    <Icon
      boxSize={6}
      fill="none"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        d="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z"
        clipRule="evenodd"
        fillRule="evenodd"
      ></path>
    </Icon>
    <chakra.span
      pos="absolute"
      top="-1px"
      right="-1px"
      px={2}
      py={1}
      fontSize="xs"
      fontWeight="bold"
      lineHeight="none"
      color="red.100"
      transform="translate(50%,-50%)"
      bg="red.600"
      rounded="full"
    >
      99
    </chakra.span>
  </chakra.span>
</Flex>;

<Flex
  bg="#edf3f8"
  _dark={{
    bg: "#3e3e3e",
  }}
  p={20}
  w="full"
  justifyContent="center"
  alignItems="center"
>
  <IconButton
    aria-label="label"
    isRound
    size="md"
    icon={
      <>
        <AiOutlineShoppingCart />
        <chakra.span
          pos="absolute"
          top="-1px"
          right="-1px"
          px={2}
          py={1}
          fontSize="xs"
          fontWeight="bold"
          lineHeight="none"
          color="red.100"
          transform="translate(50%,-50%)"
          bg="red.600"
          rounded="full"
        >
          99
        </chakra.span>
      </>
    }
  />

  <IconButton
    aria-label="label"
    size="md"
    isRound
    ml={8}
    icon={
      <>
        <AiOutlineMessage />
        <chakra.span
          pos="absolute"
          top="-1px"
          right="-1px"
          px={2}
          py={1}
          fontSize="xs"
          fontWeight="bold"
          lineHeight="none"
          color="red.100"
          transform="translate(50%,-50%)"
          bg="red.600"
          rounded="full"
        >
          99
        </chakra.span>
      </>
    }
  />
</Flex>;

<Flex
  bg="#edf3f8"
  _dark={{
    bg: "#3e3e3e",
  }}
  p={20}
  w="full"
  justifyContent="center"
  alignItems="center"
>
  <IconButton
    aria-label="label"
    isRound
    size="md"
    icon={
      <>
        <AiOutlineShoppingCart />
        <chakra.span
          pos="absolute"
          top="-1px"
          right="-1px"
          p="4px"
          fontSize="xs"
          fontWeight="bold"
          lineHeight="none"
          color="red.100"
          transform="translate(50%,-50%)"
          bg="red.600"
          rounded="full"
        />
      </>
    }
  />

  <IconButton
    aria-label="label"
    size="md"
    isRound
    variant="ghost"
    ml={8}
    icon={
      <>
        <AiOutlineMessage />
        <chakra.span
          pos="absolute"
          top="-1px"
          right="-1px"
          p="4px"
          fontSize="xs"
          fontWeight="bold"
          lineHeight="none"
          color="red.100"
          transform="translate(50%,-50%)"
          bg="red.600"
          rounded="full"
        />
      </>
    }
  />
</Flex>;