Navbar icons and logo

Now that we know how to work with icons in Tailwind, it's time to update the Navbar in our project.

This is how it looks right now:

First, let's change the icons on the right.

Step 1 - change icons

In Navbar's code, find the comment <!-- Right elements --> . It means a wrapper in which the icons on the right side of the Navbar are located.

The first icon is the shopping cart icon (marked with <!-- Cart Icon -->).

Inside the <a> element you will find a <span> element and within it an <svg> element.

Go to the Hero Icons website and copy the SVG code of the cog-6-tooth icon. Then paste it in place of the shopping cart SVG icon.

After saving the file, a cog icon will appear instead of the shopping cart.

Have you noticed the <span class="[&>svg]:w-5"> element with our icon in the middle?

This time it sets the size of the icon, so we can remove classes . w-6 .h-6 from the cog icon.

Below our new icon you will find 2 dropdowns. We'll talk about dropdowns in future lessons, but we don't need them right now. So remove this code.

Instead, copy the cog icon code an additional 2 times and change the comment in the 2 new icons to "envelope" and "user".

Then go back to the Hero Icons page and find the envelope and user icons. Copy their SVG code and, as in the case of the first icon, replace their code in the appropriate places.

After saving the file, our navbar should look like this:

Step 2 - change logo

Find the comment <!-- Logo --> in the navbar. As the name suggests, it means a logo element.

On the Hero Icons page, choose an icon you like to use as our logo. I chose the "fire" icon.

Then replace the img element with an svg element with our new logo:

After saving the file, our navbar should look like this:

John Doe

About author

Michal Szymanski

Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.