Text and Icon on the Same Line with Tailwind CSS

If you want to place text and an icon on the same line using Tailwind CSS, this guide will show you how to achieve it effectively. Often, developers encounter situations where the icon appears above the text due to incorrect styling. Here's how to fix this issue.

Solution: Use Flexbox with Tailwind Classes

To align text and icons on the same line, you can use Tailwind's flex utility. For vertical alignment and proper spacing, justify-between and items-center work wonders. Below is a simple example:

Example Code:

<!-- Include Tailwind -->
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />

<!-- Component -->
<div class="card bg-neutral hover:bg-primary h-48 px-3">
  <!-- Flexbox Container -->
  <div class="flex items-center justify-between">
    <!-- Text -->
    <h2 class="py-3 text-2xl font-bold text-white">Project Name</h2>
    <!-- Icon -->
    <svg
      class="h-6 w-6"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      stroke-width="2"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
      />
    </svg>
  </div>
  <!-- Additional Content -->
  <p class="group-hover:bg-primary py-4 text-left font-bold">Explanation of the project</p>
  <p class="pb-4 text-left font-bold">Tag, tag, tag</p>
</div>

Key Tailwind Classes Used:

• flex: Creates a flex container, aligning child elements horizontally by default.
• justify-between: Ensures equal spacing between elements (text on the left, icon on the right).
• items-center: Vertically aligns text and icons.
• h-6 w-6: Defines the height and width of the icon.

Advanced Example: Inline Icon with Text

For scenarios like inline icons (e.g., next to a name), you can use inline-flex:

<p>
  Today I spent most of the day researching
  <span class="inline-flex items-center">
    <svg
      class="mx-1 h-5 w-5"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      stroke-width="2"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
      />
    </svg>
    <span>Kramer</span>
  </span>
  about Tailwind tips.
</p>

Here, inline-flex ensures the text and icon align seamlessly within the paragraph.

FAQ

Q: Why is my icon appearing above the text?

This typically happens if the icon and text are not wrapped in a flex container. Without a proper alignment class like items-center, elements stack vertically by default.

Q: How do I center the icon vertically?

Add the items-center class to the flex container. This ensures both text and the icon are aligned along the vertical axis.

Q: Can I adjust the spacing between the text and icon?

Yes, you can use Tailwind's spacing utilities like ml-2 or mr-2 to control the margin between elements.