TWE Icons Integration Tutorial

Introduction

Icons play a crucial role in enhancing user interfaces and creating visually appealing designs. We have integrated most popular icon libraries into our components and made it easy to customize them. Let's take a look at how to use them.

Top-layer customization

It is best to place icons inside spans or other wrapper elements to provide better and easier customization. In most cases, placing svg icons causes no need to add new styles.

You can use any icon library you want, but we recommend using Heroicons as they are created by Tailwind CSS team.

Let's take a look at how to customize icons in our components using top-layer customization.

Button

HTML

        
            
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        class="inline-block rounded-full bg-primary p-2 uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
        <span class="[&>svg]:h-4 [&>svg]:w-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor">
            <path
              fill-rule="evenodd"
              d="M19.5 21a3 3 0 003-3V9a3 3 0 00-3-3h-5.379a.75.75 0 01-.53-.22L11.47 3.66A2.25 2.25 0 009.879 3H4.5a3 3 0 00-3 3v12a3 3 0 003 3h15zm-6.75-10.5a.75.75 0 00-1.5 0v4.19l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V10.5z"
              clip-rule="evenodd" />
          </svg>
        </span>
      </button>

        
            
      <ul class="my-1 flex list-none gap-1 p-0" data-twe-rating-init>
        <li>
          <span
            class="text-primary [&>svg]:h-5 [&>svg]:w-5"
            title="Bad"
            data-twe-rating-icon-ref>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
            </svg>
          </span>
        </li>
        <li>
          <span
            class="text-primary [&>svg]:h-5 [&>svg]:w-5"
            title="Poor"
            data-twe-rating-icon-ref>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
            </svg>
          </span>
        </li>
        <li>
          <span
            class="text-primary [&>svg]:h-5 [&>svg]:w-5"
            title="OK"
            data-twe-rating-icon-ref>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
            </svg>
          </span>
        </li>
        <li>
          <span
            class="text-primary [&>svg]:h-5 [&>svg]:w-5"
            title="Good"
            data-twe-rating-icon-ref>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
            </svg>
          </span>
        </li>
        <li>
          <span
            class="text-primary [&>svg]:h-5 [&>svg]:w-5"
            title="Excellent"
            data-twe-rating-icon-ref>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
            </svg>
          </span>
        </li>
      </ul>

        
            
      // Initialization for ES Users
      import {
        Rating,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Rating });

Note: In Timepicker and Datepicker components, you can also use top-layer customization to customize icons. Check out Timepicker Custom Icon and Datepicker Custom Toggle Icon examples.

Customization via options and data attributes

In our components, which have icons in their structure, we have provided the possibility of customization via options and data attributes.

Datetimepicker

Let's take a look at how to customize icons in our Datetimepicker component via options or data attributes.

Via data attributes

Select a time

html
javascript

        
            
      <div
        class="relative mb-3"
        data-twe-date-timepicker-init
        data-twe-input-wrapper-init
        data-twe-date-timepicker-toggle-icon-template='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5" />
          </svg>'
        >
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0 dark:autofill:shadow-autofill"
          id="form1" />
        <label
          for="form1"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
          >Select a time</label
        >
      </div>

        
            
      // Initialization for ES Users
      import {
        Datetimepicker,
        Input,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Datetimepicker, Input });

Via options

Select a time

html
javascript
umd

ES UMD

        
            
      <div
        id="datetimepicker-customization"
        data-twe-input-wrapper-init
        class="relative mb-3">
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0 dark:autofill:shadow-autofill"
          id="form1" />
        <label
          for="form1"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
          >Select a time</label
        >
      </div>

        
            
      import {
        Datetimepicker,
        Input,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Input });
      
      const datetimepickerCustomization = document.querySelector(
        "#datetimepicker-customization"
      );
      new Datetimepicker(datetimepickerCustomization, {
        dateTimepickerToggleIconTemplate: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5" />
          </svg>`,
      });

        
            
      const datetimepickerCustomization = document.querySelector(
        "#datetimepicker-customization"
      );
      new twe.Datetimepicker(datetimepickerCustomization, {
        dateTimepickerToggleIconTemplate: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 5.25l-7.5 7.5-7.5-7.5m15 6l-7.5 7.5-7.5-7.5" />
          </svg>`,
      });

Other icon libriaries

Let's take a look at how to integrate other popular icon libraries in TWE.

Font Awesome

There are two ways to integrate Font Awesome into TWE. You can use the SVG code or FA package.

Using SVG icons

Choose the icon you want from the Font Awesome website and copy the SVG code. Then paste it into the component's template.

HTML

        
            
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        class="mb-2 flex rounded bg-[#1da1f2] px-6 py-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:shadow-lg focus:shadow-lg focus:outline-none focus:ring-0 active:shadow-lg">
        <span class="me-2 [&>svg]:h-3.5 [&>svg]:w-3.5">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            height="16"
            width="16"
            viewBox="0 0 512 512"
            fill="currentColor">
            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
            <path
              d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z" />
          </svg>
        </span>
        Twitter
      </button>

Using FA package

You can setup Font Awesome in your project using a package manager or CDN. In this example, we will use the CDN. If you want to use the package manager method, you can check out the Font Awesome documentation.

Step 1

Add import rule to your CSS file.

css

        
            
    @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");

    @tailwind base;
    ...

Step 2

Choose the icon you want from the Font Awesome website and copy the HTML code. Then paste it into the component's template.

HTML

        
            
      <button
        type="button"
        data-twe-ripple-init
        data-twe-ripple-color="light"
        class="mb-2 flex items-center justify-center rounded bg-[#1da1f2] px-6 py-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:shadow-lg focus:shadow-lg focus:outline-none focus:ring-0 active:shadow-lg">
        <span class="pe-1">
          <i class="fa-brands fa-twitter fa-lg"></i>
        </span>
        Twitter
      </button>

Google icons

Step 1

Go to the Google Fonts website and choose the icon you want. Copy content of href attribute of the link tag from static icon font section and add import rule to your CSS file.

css

        
            
    @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");

    @tailwind base;
    ...

Step 2

Now you can use the google icons you want in the TWE components.

HTML

        
            
      <div class="relative mb-4 flex w-full flex-wrap items-stretch">
        <input
          type="search"
          class="relative m-0 -me-0.5 block min-w-0 flex-auto rounded-s border border-solid border-neutral-300 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-neutral-700 outline-none transition duration-200 ease-in-out focus:z-[3] focus:border-primary focus:text-neutral-700 focus:shadow-[inset_0_0_0_1px_rgb(59,113,202)] focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:focus:border-primary"
          placeholder="Search"
          aria-label="Search"
          aria-describedby="button-addon1" />

        <!--Search button-->
        <button
          class="relative z-[2] flex items-center rounded-e bg-primary px-6 py-2.5 text-xs font-medium uppercase leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
          type="button"
          id="button-addon1"
          data-twe-ripple-init
          data-twe-ripple-color="light">
          <span class="material-symbols-outlined text-[20px]">search</span>
        </button>
      </div>

Icons Integration

Introduction

Top-layer customization

Button

Rating

Customization via options and data attributes

Datetimepicker

Via data attributes

Via options

Other icon libriaries

Font Awesome

Using SVG icons

Using FA package

Step 1

Step 2

Google icons

Step 1

Step 2

Access restricted

To view this section you must have an active PRO account