TW Elements - Icons. Free UI/UX design course

Icons

If you've used popular icon sets before, such as Font Awesome or Material Icons, you've probably used a simplified version where we include a link to the entire icon set, and then use these icons in our HTML in the form of defined classes, such as; HTML:

<i class="fas fa-heart"></i>

And a heart appears in your project:

However, for performance reasons, Tailwind CSS recommends using icons as SVG elements.

In this lesson, we'll find out exactly how it works.

SVG icons in Tailwind CSS

Using icons in the SVG form has one great advantage - instead of loading the entire (sometimes really huge) set of icons to our project, we can add only the icons we choose (even just one), which of course can have a significant impact on the weight of our project and its performance.

SVG stands for Scalable Vector Graphics, which means these icons will maintain their quality regardless of the display size.

Problem? This looks gross in our HTML because we need to include some really big SVG code.

Same heart icon as above, but added as an SVG element.

<svg
  class="h-10 w-10"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 512 512">
  <path
    d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z" />
  <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
</svg>

However, controlled HTML clutter is something that is acceptable in Tailwind.

How does it exactly work? Let's find out.

Hero Icons

The simplest solution is to use the recommended icon set created by one of Tailwind's creators.

This set is Hero Icons.

The advantage is that these icons already have Tailwind CSS classes added, which allows you to easily add them to our project and they work right away.

The disadvantage is that this set is relatively small (only 292 icons), which means that you often have to look for the icons you need in other sources.

How to use Hero Icons in Tailwind CSS?
Firstly click on the link above and go to the Hero Icons page.

You will see a list of icons and 3 options to choose from - Outline, Solid and Mini icons. When you select an option, the icons will be filtered.

Once you've selected an icon, hover over it and click the "Copy SVG" button. The needed code will be copied to the clipboard.

Suppose we copied the academic cap icon

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="currentColor"
  class="h-6 w-6">
  <path
    d="M11.7 2.805a.75.75 0 01.6 0A60.65 60.65 0 0122.83 8.72a.75.75 0 01-.231 1.337 49.949 49.949 0 00-9.902 3.912l-.003.002-.34.18a.75.75 0 01-.707 0A50.009 50.009 0 007.5 12.174v-.224c0-.131.067-.248.172-.311a54.614 54.614 0 014.653-2.52.75.75 0 00-.65-1.352 56.129 56.129 0 00-4.78 2.589 1.858 1.858 0 00-.859 1.228 49.803 49.803 0 00-4.634-1.527.75.75 0 01-.231-1.337A60.653 60.653 0 0111.7 2.805z" />
  <path
    d="M13.06 15.473a48.45 48.45 0 017.666-3.282c.134 1.414.22 2.843.255 4.285a.75.75 0 01-.46.71 47.878 47.878 0 00-8.105 4.342.75.75 0 01-.832 0 47.877 47.877 0 00-8.104-4.342.75.75 0 01-.461-.71c.035-1.442.121-2.87.255-4.286A48.4 48.4 0 016 13.18v1.27a1.5 1.5 0 00-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.661a6.729 6.729 0 00.551-1.608 1.5 1.5 0 00.14-2.67v-.645a48.549 48.549 0 013.44 1.668 2.25 2.25 0 002.12 0z" />
  <path
    d="M4.462 19.462c.42-.419.753-.89 1-1.394.453.213.902.434 1.347.661a6.743 6.743 0 01-1.286 1.794.75.75 0 11-1.06-1.06z" />
</svg>

After adding it to our project, we should see a cap like this:

It works out of the box, but let's have a closer look at this.

SVG explanation

The outer svg element defines the SVG element. The xmlns attribute is used to specify the XML namespace for the SVG (which is a requirement for SVGs to work properly). The viewBox attribute is used to specify the aspect ratio and coordinate system of the SVG. The fill attribute is set to "currentColor", meaning the color of the shapes inside the SVG will inherit the color of the text in the same context.

The class attribute contains Tailwind CSS utility classes to style the SVG. The .w-6 and .h-6 classes set the width and height of the SVG to 1.5rem (24px).

The path elements contain the actual drawing instructions for the icon. Each path represents a different part of the icon. The d attribute in each path element holds these commands.

Font awesome

Another icon set that has SVG icons available is Font Awesome.

This is one of the most popular (if not the most popular) icon sets. It has a free and paid version.

There are over 2000 icons in the free version, which is many times more than in Hero Icons.

The disadvantage is that when using icons in SVG form, we also need to add a comment about the license.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
  <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
  <path
    d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
</svg>

How to use Font Awesome in Tailwind CSS?

Firstly click the link and go to the Font Awesome page.

Then select the "Free" option (Unless you have purchased a paid license. In my opinion, a free license is more than enough).

Then click on the icon you are interested in and select the SVG option. Then click on the code to copy it. It will be kept in the clipboard.

Suppose we have copied the house icon.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
  <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
  <path
    d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z" />
</svg>

When we copy it to our project, we will see that it is huge and fills all available space.

This is because there is no defined size by default. So we need to add Tailwind classes to define height and width.

So let's use the same classes that Hero Icons have by default. Add the .w-6 and .h-6 classes to the svg element.

<svg
  class="h-6 w-6"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 576 512">
  <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
  <path
    d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z" />
</svg>

A cute little house should then appear in our project.

You can also try our SVG icon generator with font awesome prepared icons already with Tailwind CSS classes.