How to Align Text and Icon on the Same Line with Tailwind CSS

Whether you’re building a button, a notification, or a navigation link, aligning text and an icon on the same line is a common UI pattern. Tailwind CSS makes this task incredibly simple and flexible, thanks to its utility-first classes.

In this blog, we’ll explore how to align text and icons inline using Tailwind CSS, including different layout options and best practices for spacing, sizing, and alignment.

Table of Contents

🎯 Goal: Text and Icon on the Same Horizontal Line

Here’s what we want to achieve:

[🔔] Notifications

The icon should sit neatly next to the text, vertically aligned in the center.

✅ Method 1: Flexbox with `flex items-center`

Best For: Buttons, nav links, badges, and labels.

🧩 Example:

<button class="flex items-center space-x-2 text-sm text-blue-600">
  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
    <path d="..." />
  </svg>
  <span>Notifications</span>
</button>

🔍 Key Tailwind Classes:

flex: Puts the icon and text in a horizontal row.
items-center: Vertically aligns icon and text in the center.
space-x-2: Adds consistent horizontal space between the icon and text.
w-5 h-5: Ensures consistent icon sizing.

✅ Result: Perfect alignment and spacing on the same line, with full control over styling.

✅ Method 2: Inline-Flex for Inline Elements

Best For: When placing inline items (e.g., inside text paragraphs or inline links).

<a href="#" class="inline-flex items-center text-gray-700 hover:text-black">
  <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
    <path d="..." />
  </svg>
  <span>Learn More</span>
</a>

🔍 Notes:

inline-flex: Makes the element behave like inline text but still use Flexbox.
mr-1: Adds space between the icon and text manually (useful for small inline use cases).

✅ Method 3: Using Icon Libraries (e.g., Heroicons, Font Awesome)

When using libraries like Heroicons:

<div class="flex items-center text-gray-800">
  <span class="material-icons text-xl mr-2">check_circle</span>
  Success
</div>

Tips:

Control vertical alignment with items-center.
Set icon size using text-* classes (text-xl, text-sm, etc.) if it’s a font icon.
Use mr-1, ml-1, or space-x-* for spacing.

⚙️ Bonus: Reversing Icon and Text

If you want the text to come before the icon:

<div class="flex items-center space-x-reverse space-x-2">
  <span>Download</span>
  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
    <path d="..." />
  </svg>
</div>

Use:

space-x-reverse: Reverses the direction of spacing when the order is swapped.
Place icon after the text.

🎨 Customization Tips

Requirement	Class to Use
Vertical alignment	`items-center`
Horizontal spacing	`space-x-*` or `mr-1`
Icon sizing	`w-4 h-4`, `text-xl`, etc.
Inline usage	`inline-flex`
Icon before or after	Change DOM order + use `space-x-reverse`

❌ Common Mistakes to Avoid

❌ Using plain inline without inline-flex – alignment won’t work as expected.
❌ Forgetting to size the icon — which can make it misaligned or oversized.
❌ Not using items-center — can cause vertical misalignment between text and icon.

✅ Summary

Tailwind CSS makes aligning text and icons simple, clean, and responsive. Here’s what to remember:

Use flex or inline-flex with items-center for alignment.
Add spacing with space-x-*, mr-*, or ml-*.
Size icons using w-*, h-*, or text-*.

💬 Final Thoughts

Aligning icons and text is a tiny detail — but it makes a big impact on the overall polish of your UI. With Tailwind CSS, it’s just a matter of combining the right utilities.