Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

Exploring Tailwind Icons: How to Use HeroIcons Well

Tailwind CSS is one of the world’s top and most widely used frontend technologies, boasting over 7.4 million weekly downloads on NPM at the time of writing this article. Unsurprisingly, the Tailwind icons are also popular.

The makers of Tailwind CSS also offer a collection of Beautiful open-source hand-crafted SVG and JSX format icons, which can be easily used in a frontend project.

In this article, we’ll explore how to use SVGs, specifically the official Tailwind SVG icons from Heroicons, in Tailwind CSS projects. We’ll also discuss some alternative options for incorporating icons into your front-end design.

Give Purecode a try today to instantly generate thousands of customizable, styled HTML, CSS, and JavaScript components to accelerate your web development projects.

Getting Started with Tailwind CSS Icons

Using SVG icons in conjunction with Tailwind CSS is generally straightforward. However, depending on your project setup and use case, you can choose from a variety of icon sources, such as Heroicons, Font Awesome, and other SVG icon providers.

In this article, we’ll mainly focus on the usage of Heroicons in a React and Tailwind CSS application.

Scaffolding a new React Application with Vite

In this section, we’re going to follow the steps below to set up a new React application using the Vite React build tool.

Step 1: Run the command below to install React using Vite.

Using yarn (preferred in this tutorial)

yarn create vite

Or using npm

npm create vite
  • Provide your project name: my-tailwind-icon-project

  • Framework: React

  • Variant: JavaScript

Step 2: Run the commands below to navigate into the newly created project folder directory.

cd my-tailwind-icon-project

Step 3: Install the Vite required dependencies using either yarn or npm.

yarn install

or using npm

npm install

Step 4: Start your server using the command below

yarn run dev

or using npm

npm run dev

Your server will start running on an available port as shown below.

When you visit the port from your browser, you should see the following screen and functionality.

Setting up Tailwind CSS in a React Vite Project

In this section, we’ll install and set up Tailwind CSS in our React application by following the Tailwind framework installation steps below.

1: Run the command below to install Tailwind CSS and its dependencies.

yarn add -D tailwindcss postcss autoprefixer

2: Run the command below to initialize the Tailwind CSS config files.

npx tailwindcss init -p

3: Open the tailwind.config.js file and add the paths to all of your template files (folder and file extensions where you’d be using Tailwind CSS). You can update your content with the following to begin with.

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Step 4: Open the ./src/index.css file and replace the content with the following @tailwind directives.

@tailwind base;
@tailwind components;
@tailwind utilities;

Next, delete the CSS style rules in the App.css file as well. Your screen should now look something like below on your browser.

Step 5: To confirm that Tailwind is successfully setup in our React Vite application, update the App.jsx file with the following code:

function App() {
  return (
    <main className='min-h-screen bg-green-200 flex justify-center items-center'>
      <h3 className='hidden'>Tailwind is working if you cannot see this</h3>
      <h3 className='font-medium text-green-800'>
        Tailwind is working if this is red
      </h3>
    </main>
  );
}

export default App;

Step 6: Stop and start your server again, and if everything goes well. Your screen should look something like the one below.

Tips: If your app screen isn’t looking like the one above, you can go ahead and retrace your steps on the Tailwind installation section and ensure to that you restart your server after that.

Introduction to Heroicons with Tailwind CSS

Heroicons is a webpage that provides a collection of eye-catching icons, designed and crafted by the Tailwind CSS team themselves.

In this section, we’ll explore various methods for installing and using Tailwind Heroicons in a front-end application.

Using Heroicon HTML SVGs

The quickest way to use heroicons in any of your front-end projects is via the SVG tags. Below are steps to use the Heroicons SVGs without any installations.

1: Head over to the heroicons website.

2: Search for any icon of your choice using the search input box and the matching icons will be filtered out as shown below.

3: Hover on the icon cards and copy either the SVG format as shown below.

The SVG copy format will look as follows:

<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="M12 8.25v-1.5m0 1.5c-1.355 0-2.697.056-4.024.166C6.845 8.51 6 9.473 6 10.608v2.513m6-4.87c1.355 0 2.697.055 4.024.165C17.155 8.51 18 9.473 18 10.608v2.513m-3-4.87v-1.5m-6 1.5v-1.5m12 9.75l-1.5.75a3.354 3.354 0 01-3 0 3.354 3.354 0 00-3 0 3.354 3.354 0 01-3 0 3.354 3.354 0 00-3 0 3.354 3.354 0 01-3 0L3 16.5m15-3.38a48.474 48.474 0 00-6-.37c-2.032 0-4.034.125-6 .37m12 0c.39.049.777.102 1.163.16 1.07.16 1.837 1.094 1.837 2.175v5.17c0 .62-.504 1.124-1.125 1.124H4.125A1.125 1.125 0 013 20.625v-5.17c0-1.08.768-2.014 1.837-2.174A47.78 47.78 0 016 13.12M12.265 3.11a.375.375 0 11-.53 0L12 2.845l.265.265zm-3 0a.375.375 0 11-.53 0L9 2.845l.265.265zm6 0a.375.375 0 11-.53 0L15 2.845l.265.265z" />
</svg>

While the JSX copy format looks as follows:

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
  <path strokeLinecap="round" strokeLinejoin="round" d="M12 8.25v-1.5m0 1.5c-1.355 0-2.697.056-4.024.166C6.845 8.51 6 9.473 6 10.608v2.513m6-4.87c1.355 0 2.697.055 4.024.165C17.155 8.51 18 9.473 18 10.608v2.513m-3-4.87v-1.5m-6 1.5v-1.5m12 9.75l-1.5.75a3.354 3.354 0 01-3 0 3.354 3.354 0 00-3 0 3.354 3.354 0 01-3 0 3.354 3.354 0 00-3 0 3.354 3.354 0 01-3 0L3 16.5m15-3.38a48.474 48.474 0 00-6-.37c-2.032 0-4.034.125-6 .37m12 0c.39.049.777.102 1.163.16 1.07.16 1.837 1.094 1.837 2.175v5.17c0 .62-.504 1.124-1.125 1.124H4.125A1.125 1.125 0 013 20.625v-5.17c0-1.08.768-2.014 1.837-2.174A47.78 47.78 0 016 13.12M12.265 3.11a.375.375 0 11-.53 0L12 2.845l.265.265zm-3 0a.375.375 0 11-.53 0L9 2.845l.265.265zm6 0a.375.375 0 11-.53 0L15 2.845l.265.265z" />
</svg>

The difference between them lies in the syntax of their attributes.

HTML SVG Format

JSX Format

stroke-width

strokeWidth

strokeLinecap

stroke-linecap

stroke-linejoin

strokeLinejoin

Learn how to write markup language in React (JSX) from the React official documentation website. If you’re using React or any JSX-supported framework, you can check this VScode extension for converting HTML to JSX

Step 4: Since we’re working with a React frontend application, we’ll be making use of the JSX format. Update your App.jsx file with the following lines of code:

function App() {
  return (
    <main className='min-h-screen bg-green-200 flex gap-2 justify-center items-center'>
      <svg
        xmlns='http://www.w3.org/2000/svg'
        fill='none'
        viewBox='0 0 24 24'
        strokeWidth={1.5}
        stroke='currentColor'
        className='w-6 h-6'
      >
        <path
          strokeLinecap='round'
          strokeLinejoin='round'
          d='M12 8.25v-1.5m0 1.5c-1.355 0-2.697.056-4.024.166C6.845 8.51 6 9.473 6 10.608v2.513m6-4.87c1.355 0 2.697.055 4.024.165C17.155 8.51 18 9.473 18 10.608v2.513m-3-4.87v-1.5m-6 1.5v-1.5m12 9.75l-1.5.75a3.354 3.354 0 01-3 0 3.354 3.354 0 00-3 0 3.354 3.354 0 01-3 0 3.354 3.354 0 00-3 0 3.354 3.354 0 01-3 0L3 16.5m15-3.38a48.474 48.474 0 00-6-.37c-2.032 0-4.034.125-6 .37m12 0c.39.049.777.102 1.163.16 1.07.16 1.837 1.094 1.837 2.175v5.17c0 .62-.504 1.124-1.125 1.124H4.125A1.125 1.125 0 013 20.625v-5.17c0-1.08.768-2.014 1.837-2.174A47.78 47.78 0 016 13.12M12.265 3.11a.375.375 0 11-.53 0L12 2.845l.265.265zm-3 0a.375.375 0 11-.53 0L9 2.845l.265.265zm6 0a.375.375 0 11-.53 0L15 2.845l.265.265z'
        />
      </svg>
    </main>
  );
}

export default App;

Step 5: When you check your browser, you should see the following cake icon displayed on your screen.

Tailwind Heroicons Package Installation in React Vite Application

In this section, we’ll cover the installation of the Heroicons as a package in our React application. This approach also works in some other JavaScript frontend frameworks.

Step 1: Run the command below to install the heroicons package in your React app.

yarn add @heroicons/react

The Heroicon icon package provides two variants of icon appearance; the outline and solid icons.

Heroicons Outline Variants

The outline icon variants can be imported from the following package directory.

@heroicons/react/24/outline

Below is a usage of a Heroicon outline icon:

import { CakeIcon } from "@heroicons/react/24/outline";
function App() {
  return (
    <main className='min-h-screen bg-green-200 flex gap-2 justify-center items-center'>
      <CakeIcon className='w-6 h-6' />
    </main>
  );
}

export default App;

The above code will produce the following output:

Heroicons Solid Variants

The solid icon variants can be imported from the following package directory.

@heroicons/react/24/solid

Below is a usage of a Heroicon solid icon:

import { CakeIcon } from "@heroicons/react/24/solid";
function App() {
  return (
    <main className='min-h-screen bg-green-200 flex gap-2 justify-center items-center'>
      <CakeIcon className='w-6 h-6' />
    </main>
  );
}

export default App;

The above code will produce the following solid icon output:

Below is an example of using the two variants outline and solid at the same time:

import { CakeIcon } from "@heroicons/react/24/outline";
import { CakeIcon as SolidCakeIcon } from "@heroicons/react/24/solid";
function App() {
  return (
    <main className='min-h-screen bg-green-200 flex gap-2 justify-center items-center'>
      <CakeIcon className='w-6 h-6' />
      <SolidCakeIcon className='w-6 h-6' />
    </main>
  );
}

export default App;

The above code will produce the following icons:

Customizing SVGs using Tailwind CSS

To customize Heroicon SVGs using Tailwind CSS and apply your preferred styles, you can easily do so by passing the relevant utility classes to the className attribute.

This approach allows you to take advantage of the extensive styling options through utility classes provided by Tailwind CSS, ensuring that your icons seamlessly blend with the overall design of your application.

Applying Colors to SVGs in Tailwind CSS

To apply color to an SVG in Tailwind CSS, you can utilize the text-color utility SVG class.

This method enables you to effortlessly customize the appearance of your SVG icons by assigning the desired color through the available utility classes or adding your brand color scheme.

By doing so, you can ensure that your SVG icons not only match the overall design of your application but also maintain a consistent visual style throughout.

The source code:

import { CakeIcon } from "@heroicons/react/24/solid";
function App() {
  return (
    <main className='min-h-screen bg-blue-50 flex gap-2 justify-center items-center'>
      <CakeIcon className='w-6 h-6 text-blue-500' />
    </main>
  );
}

export default App;

Animating SVG Icons in Tailwind

To animate SVGs in a visually appealing and engaging way, we can utilize the various animation classes provided by Tailwind CSS as per your requirements.

These classes can be easily applied to the SVG elements, allowing for smooth and seamless animations that enhance the user experience.

Below is a demonstration of how to create an animated down arrow SVG using the Tailwind bounce animate utility class, which adds a lively and dynamic effect to the icon.

The source code:

import { ArrowDownIcon } from "@heroicons/react/24/solid";
function App() {
  return (
    <main className='min-h-screen bg-blue-50 flex gap-2 justify-center items-center'>
      <ArrowDownIcon className='w-7 h-7 animate-bounce text-blue-600' />
    </main>
  );
}

export default App;

Another practical application of an animated SVG is to create a loader icon that visually communicates the progress of an action or task. This can be particularly helpful in enhancing user experience, as it provides users with a clear indication that a process is underway and that they should wait for its completion.

By incorporating an animated SVG loader icon, developers can effectively convey the status of ongoing operations, such as data fetching, file uploads, or page loading, in a visually appealing and engaging manner.

This can ultimately contribute to a more seamless and enjoyable user experience, as users are kept informed about the progress of various tasks within the application.

The source code:

import { ArrowPathIcon } from "@heroicons/react/24/solid";
function App() {
  return (
    <main className='min-h-screen bg-blue-50 flex gap-2 justify-center items-center'>
      <ArrowPathIcon className='w-5 h-5 animate-spin text-blue-600' />
    </main>
  );
}

export default App;

Using SVGs in Buttons

One of the frequent and practical applications of SVGs is integrating them within a button component. This combination allows for a more visually appealing and interactive user experience, as the SVG icons can provide additional context and meaning to the button’s purpose or function.

For instance, you might want to create a button that includes a play icon to indicate that clicking the button will navigate the user to a video or start playing a video.

The source code:

To achieve this, you can simply nest the SVG component within the button element, ensuring that the appropriate styling and sizing are applied to both the button and the SVG icon. This will ensure a seamless integration of the icon within the button, creating a cohesive and visually appealing component that effectively communicates its intended purpose to the user.

import { PlayCircleIcon } from "@heroicons/react/24/solid";
function App() {
  return (
    <main className='min-h-screen bg-blue-50 flex gap-2 justify-center items-center'>
      <button className='flex items-center gap-1 bg-blue-500 rounded-md py-1.5 px-2 text-white text-sm'>
        <span>Play video</span>
        <PlayCircleIcon className='w-4 h-4' />
      </button>
    </main>
  );
}

export default App;

By using SVGs in conjunction with buttons, you can enhance the overall design and usability of your application’s interface, making it more intuitive for users to interact with.

Using SVG as links

Another practical application of SVGs is incorporating them as link icons or as heading link icons, as demonstrated below. This approach can significantly improve the visual appeal and user experience of your website or application.

By using SVGs as link icons, you can create a more visually engaging and consistent design language throughout your application. This not only enhances the aesthetics of your website as mentioned above in another section but also makes it easier for users to identify and interact with various links and navigation elements.

The source code:

import { LinkIcon } from "@heroicons/react/24/solid";
function App() {
  return (
    <main className='min-h-screen bg-blue-50 flex gap-2 justify-center items-center'>
      <a
        href='https://www.youtube.com/@unclebigbay'
        target='_blank'
        rel='noopener noreferrer'
        className='flex items-center gap-1'
      >
        <LinkIcon className='w-4 h-4 text-slate-600 ' />
        <h2 className='text-slate-800 font-medium'>Heading</h2>
      </a>
    </main>
  );
}

export default App;

By incorporating SVGs as link icons and heading link icons, you can elevate the overall design and usability of your application’s interface, creating a more intuitive and enjoyable experience for your users.

Using SVGs as Hamburger Menu Toggle

Another popular use case of SVG is for implementing hamburger icons

The source code:

import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
import { useState } from "react";
function App() {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  return (
    <main className='min-h-screen bg-blue-50 p-5'>
      <div className='flex items-center gap-3'>
        <button
          className='border rounded-full p-1.5 hover:bg-slate-100'
          onClick={() => setIsSidebarOpen((prevOpenState) => !prevOpenState)}
        >
          {isSidebarOpen ? (
            <XMarkIcon className='w-7 h-7 text-slate-600 transition-all' />
          ) : (
            <Bars3Icon className='w-7 h-7 text-slate-600 transition-all' />
          )}
        </button>
        <span>{isSidebarOpen ? "Open" : "Close"}</span>
      </div>
    </main>
  );
}

export default App;

Using SVGs as Theme Toggle Icons

SVGs can be used along with dark and light theme implementation on a website by using the moon and sun SVG icons as a toggle element representing the current theme as demonstrated below.

The source code:

The useState logic code will handle the theme-switching functionality, while the SVG icons will serve as a visually engaging representation of the current theme and the alternative theme available to the user.

import { MoonIcon, SunIcon } from "@heroicons/react/24/solid";
import { useState } from "react";
function App() {
  const [isDarkTheme, setIsDarkTheme] = useState(false);
  return (
    <main
      className={`min-h-screen bg-blue-50 flex gap-2 justify-center items-center ${
        isDarkTheme && "bg-slate-950"
      }`}
    >
      <button onClick={() => setIsDarkTheme((prevTheme) => !prevTheme)}>
        {isDarkTheme ? (
          <SunIcon className='w-4 h-4 text-slate-600' />
        ) : (
          <MoonIcon className='w-4 h-4 text-slate-600' />
        )}
      </button>
    </main>
  );
}

export default App;

In order to gain a deeper understanding of how to utilize SVG icons within Tailwind CSS, I recommend checking out the comprehensive video tutorial provided below.

For those interested in further expanding their knowledge and skills in using SVG icons within the Vue framework alongside Tailwind CSS, I highly recommend exploring the in-depth video tutorial provided below.

This video tutorial offers a thorough walkthrough, demonstrating how to effectively integrate and utilize SVG icons in your Vue projects, ensuring a seamless and visually appealing user experience.

Wrapping Up Tailwind CSS Icons

In this article, we explored how the integration of Heroicons with Tailwind CSS offers a wide range of possibilities for enhancing the aesthetics and functionality of your front-end projects.

From setting up a new React application with Vite and installing Tailwind CSS to incorporating SVG icons in buttons, links, and theme toggles, this guide provides comprehensive insights on how to leverage Tailwind CSS Icons, specifically using Heroicons, in your projects.

Understanding and implementing these techniques can greatly improve the visual appeal and user experience of your applications.

Checkout Purecode!

I recommend you try out Purecode, an AI tool that can generate custom HTML, CSS, and JavaScript components. Here are some of its features:

  • It uses an AI assistant to generate thousands of responsive pre-made components for you.
  • The components come with default styling using CSS, Tailwind CSS, or your own custom styles so you can match your brand’s design.
  • You can easily customize the generated components to suit your specific needs – add new icons, change colors, spacing, paddings, margins, etc.
  • It generates both the HTML markup and CSS styles for the components, saving you development time.
  • It also includes some JavaScript functionality within the components to make them interactive.
Ayodele Samuel Adebayo

Ayodele Samuel Adebayo