Icon

    <>
      {Object.keys(vars.texts).map((size, index) => (
        <Arrange gap="0.65em" key={index}>
          <Icon size={size} icon={<IconGlobe />} />
          <Text size={size} weight="medium">
            Size {size}
          </Text>
        </Arrange>
      ))}
    </>
  

    <>
      <Arrange gap="0.65em">
        <Icon size="xl" icon={<IconArrowRight />} />
        <Text size="xl" weight="medium">
          Icon size xl with text size xl
        </Text>
      </Arrange>
      <Arrange gap="0.65em">
        <Icon size="m" icon={<IconArrowRight />} />
        <Text size="m" weight="medium">
          Icon size m with text size m
        </Text>
      </Arrange>
    </>
  

    <Arrange gap="s">
      <Icon size="xxl" icon={<IconSmile />} />
      <Icon size="xxl" color="blue" icon={<IconSmile />} />
      <Icon size="xxl" color="red" icon={<IconSmile />} />
    </Arrange>
  

    <Arrange gap="s">
      <Icon icon={<IconSmile />} />
      <Text>{IconSmile.viewBoxWidth / 2}px</Text>

      <Icon icon={<IconArrowRight />} />
      <Text>{IconArrowRight.viewBoxWidth / 2}px</Text>

      <Icon icon={<IconType />} />
      <Text>{IconType.viewBoxWidth / 2}px</Text>
    </Arrange>