How to add icons in tailwind css?

Ayyaz

@AyyazTech

Introduction

Hello, and welcome to this tutorial on how to add icons in Tailwind CSS. In this video, we will be using Heroicons, a set of free SVG icons designed by the creators of Tailwind CSS. By the end of this tutorial, you will know how to search for icons, add them to your project, and style them using Tailwind CSS utility classes.

Step 1: Find the Icon

First, let's find the icon we want to use. Visit the Heroicons website at heroicons.com. Use the search bar to find the icon you need, and click on it to copy the SVG code.

Step 2: Add the Icon to Your Project

Now that we have the SVG code, let's add it to our HTML file. Paste the copied SVG code where you want the icon to appear. The SVG code should look something like this:

<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="..."></path>
</svg>

<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="..."></path>
</svg>

Step 3: Style the Icon

We can now style the icon using Tailwind CSS utility classes. For example, let's change the size and color of the icon:

<svg class="w-8 h-8 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="..."></path>
</svg>

<svg class="w-8 h-8 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="..."></path>
</svg>

In this example, we changed the width and height to 8 (from 6) and set the text color to blue-500.

Step 4: Add Hover Effects (Optional)

You can also add hover effects to your icons. For example, let's make the icon change color when the user hovers over it:

<svg class="w-8 h-8 text-blue-500 hover:text-red-500 transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="..."></path>
</svg>

<svg class="w-8 h-8 text-blue-500 hover:text-red-500 transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="..."></path>
</svg>

Here, we added the hover:text-red-500 class to change the color on hover, and the transition-colors duration-300 classes to add a smooth color transition.

And that's it! You now know how to add and style icons in Tailwind CSS using Heroicons. Feel free to explore the Heroicons library and experiment with different icons and styles in your projects.

Thank you for following this tutorial. If you found it helpful, please give youtube video a thumbs up and subscribe for more Tailwind CSS tutorials.