Heroicons

The heroicons page (opens in a new tab) is a great source of icons for your pages. The width attribute helps to fix the size of the icon.

<svg
  className="h-6 w-6 text-gray-500"
  fill="none"
  viewBox="0 0 24 24"
  stroke="currentColor"
  strokeWidth="2"
  width="50" 
>
  <path
    strokeLinecap="round"
    strokeLinejoin="round"
    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
  />
</svg>

See vayurobins commented on Feb 25, 2020 (opens in a new tab) to sschoger/heroicons-ui/issues/19:

Thanks for asking. I got it fixed at last. It just that the SVG sizing is a bit confusing, making the size bigger, makes the icon smaller. :-)

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  width="100" 
  viewBox="0 0 27 27">
  <path 
    fill="var(--white)" 
    d="M5.41 16H18a2 2 0 0 0 2-2 1 1 0 0 1 2 0 4 4 0 0 1-4 4H5.41l2.3 2.3a1 1 0 0 1-1.42 1.4l-4-4a1 1 0 0 1 0-1.4l4-4a1 1 0 1 1 1.42 1.4L5.4 16zM6 8a2 2 0 0 0-2 2 1 1 0 0 1-2 0 4 4 0 0 1 4-4h12.59l-2.3-2.3a1 1 0 1 1 1.42-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.42-1.4L18.6 8H6z" 
    className="heroicon-ui">
  </path>
</svg>

Cards iframe