tailwind-icon-heights.md

Tailwind Icon Height sizes

These CSS classes will size any square SVG to match the default TailwindCSS font sizes. Great for mixing icons with text on buttons and headings.

The icon sizes were manually picked, so they match my taste. Your mileage may vary! I've also added sizes that are larger than Tailwind's max font size for really big icons in hero sections and the like

Enjoy!

Usage

1. Add the styles to your stylesheet
2. Use the classes on your SVGs like so:

<button class='flex flex-row items-center'>
   <span class='text-sm mr-2'>New item</span>
   <!-- This icon will be the same size as 'sm' font size -->
   <svg class='icon-sm'>...</svg>
</button>

Styles

.icon-10xl {
  height: 8rem;
}

.icon-9xl {
  height: 7rem;
}

.icon-8xl {
  height: 6rem;
}

.icon-7xl {
  height: 5rem;
}

.icon-6xl {
  height: 4.5rem;
}

.icon-5xl {
  height: 3.25rem;
}

.icon-4xl {
  height: 2.75rem;
}

.icon-3xl {
  height: 2.25rem;
}

.icon-2xl {
  height: 2rem;
}

.icon-xl {
  height: 1.75rem;
}

.icon-lg {
  height: 1.7rem;
}


.icon-md {
  height: 1.5rem;
}


.icon-sm {
  height: 1.2rem;
}

.icon-xs {
  height: 1rem;
}