--- title: "Tailwind CSS Icons: A How-to Guide | CoderPad" description: "Icons are an important part of web development. You'll learn how to use icons in Tailwind CSS and how you can add icons using Font Awesome." canonical: "https://coderpad.io/blog/development/tailwind-css-icons-a-how-to-guide/" last_modified: "2026-04-15 16:20:59" --- [Back to blog](https://coderpad.io/blog/) # Tailwind CSS Icons: A How-to Guide January 17, 2023 6 Minute Read By Oscar Jite-Orimiono [Development](https://coderpad.io/blog/development/) [Tailwind CSS](http://tailwindcss.com/) is a low-level, utility-first CSS framework. It lets you build web components without leaving the comfort of the HTML markup. This is possible because, in place of predefined components, it has utility classes that make building custom components a lot easier. Tailwind CSS has a lot of utilities but none for adding icons to your project. You’ll have to use an external icon library or image. Icons are important in modern web development. In this post, you’ll learn how to use icons in Tailwind CSS. We’re going to look at how you can add icons using Font Awesome, as well as how you can add icons using Heroicons by the makers of Tailwind CSS. ## Font Awesome [Font Awesome](https://fontawesome.com/) is the go-to icon library for many web developers. It has a vast array of icons and is easy to use. First, set up an icon kit and link it to your project. An alternative is to link the [Font Awesome stylesheet](https://cdnjs.com/libraries/font-awesome) from the [cdnjs](https://cdnjs.com/) open-source library. Next, create the webpage. Then, find the icon you want to use and copy its HTML code. To illustrate, we’re using a simple text card. The tailwind play platform. The icon will be just below the bold header. ```
                     
    
Font Awesome Icon
        

              Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi sed ex odit?               Molestiae odio porro at sequi, vel quia corporis ex deserunt, animi, voluptates eveniet.         

Code language: HTML, XML (xml) ``` The tailwind play platform with a Font Awesome house icon. At this point, the icon has the default black color. You can style it by adding some of Tailwind’s utility classes to the icon’s`div`container. ```
Code language: HTML, XML (xml) ``` And that’s it! The tailwind play platform with a Font Awesome house enclosed icon. We now have a nice-looking icon on the text card. Font Awesome also gives you the option of copying the icon’s SVG code. You can then add Tailwind’s utility classes to the SVG to style it to your taste. ``` Code language: HTML, XML (xml) ``` The tailwind play platform with a Font Awesome house enclosed icon. Here, the`text-color`utility won’t work, so you’ll have to add a`fill`color. You can also download the icon as an SVG image and put it into your webpage with the HTML`image`tag. Then, add in some utilities to resize the icon. ```
   
Code language: HTML, XML (xml) ``` Here’s a screenshot of what you should see. The tailwind play platform with a svg icon. The problem with this method is that you can’t change the color of the icon because you’re loading the SVG as an image file. You have to load it as an SVG, in the`SVG`tag, before you can change the color. So, you’re stuck with a rather boring black (unless that’s what you want). > ![ℹ️](https://coderpad.io/assets/emoji/2139.svg) It’s important to note that a lot of the icons and some features available on Font Awesome are not free, and they’re only accessible when you have a pro account. A modal notifying the user of the Pro icon pack. ## Heroicons If you head over to the resources section of Tailwind’s website, you’ll find a link to Heroicons. It’s an open-source project, which almost certainly means it’s free. The resources page on the tailwindcss website. [Heroicons](https://heroicons.com/) is an open-source library that contains “beautiful hand-crafted SVG icons by the makers of Tailwind CSS.” You don’t need to link a cdn to use Heroicons, you’ll just have to copy the SVG code of the icon and paste it in your project – and note that the icons are free to use. Heroicons also comes in three different styles corresponding to different icon use cases: The documentation page for the icons in the Heroicons library. Here’s an example of how you’d implement an outline Heroicon. We’re using the same card as before, but this time copying and pasting the SVG code of the Heroicon into the HTML icon. The tailwind play platform with a Heroicons subheader. As with every element in Tailwind CSS, you can style them using the utility classes. The SVG icon comes with default height and width utilities, and you can overwrite these with your own styling. The tailwind play platform with a Heroicon house icon. You can also wrap the SVG icon in a`div`container and add the utility classes there instead. This is great for adding a background color so the icon really stands out. ```
           
Code language: HTML, XML (xml) ``` The tailwind play platform with a Heroicon enclosed house icon. The icons with the outline style come with some default attributes that you can overwrite with Tailwind utility classes. These are`stroke`and`stroke-width`. You can replace them with the SVG utilities available in Tailwind CSS. The stroke reference page on the tailwind css library webpage. For this next example, we’re using`stroke-current`so it uses the`text-color`for both fill and stroke. Next, we’re making the icon a little bolder by using`stroke-2`, which increases the`stroke-width`of the SVG. The tailwind play platform with a Heroicon styled svg house icon. The next icon style on Heroicons is solid, which is the complete opposite of outline. The tailwind play platform with a Heroicon styled svg house icon. These icons come with a default height and width, just like the outline icons, and they also come with the`fill`attribute. This attribute comes with the`currentColor`keyword, meaning it’ll take the color defined by the`text-color`utility class. The stroke reference page on the tailwind css library webpage. Heroicons has a third style for its icon, and that’s mini, which is intended for smaller elements—buttons, for example. Adding it to your project follows the same process as the previous two icon styles. Copy, paste, and add in the utility classes. An SVG styled with the Heroicons class. The outline and solid SVG icons have a 24-by-24 view box, while for the mini icons, it’s 20-by-20. For any Heroicon style, you can also choose to remove the`text-color`class and add your own custom fill or stroke color. Keep in mind that if you’re adding a fill or stroke color, you can’t use either`fill-current`or`stroke-current`They’re conflicting attributes and will produce an error. ## Conclusion Icons have a big role on the web as well as the world at large. Everywhere you look, there’s a symbol with a much bigger meaning and purpose. When choosing icons for your next project, make sure that users can easily understand their function. Tailwind CSS makes building websites easier with its utility classes. It’s simple to learn and understand, and it has a pretty straightforward installation process. Tailwind CSS has utilities for every web element or component, but it doesn’t for icons. That’s where external libraries come in. Font Awesome is a well-known library containing hundreds of icons. All you have to do is link its cdn to your project and you’re in business. Once you find the icon you like, copy its HTML code and paste it where you want it. You can also copy its SVG code or download it as an image file. Font Awesome, however, is not entirely free to use. Heroicons, by the makers of Tailwind CSS, is free. It They offers a library of SVG icons in three different styles. There’s the outline icons and solid icons, which use the stroke and fill properties, respectively. These icons are used for regular web elements. Finally, we have the mini icons for smaller web elements. They all follow the same copy, paste, and add utilities format. The choice is yours now that you know how to use these icon libraries in Tailwind CSS. Which one will it be, and what can you create? This post was written by Oscar Jite-Orimiono. [Oscar](https://omj.netlify.app/) has a B.Eng in mechanical engineering, but now he’s a self-taught frontend web developer and technical writer. His skills include HTML, CSS, and JavaScript(Vanilla and jQuery). He builds websites with a focus on them being user-friendly, responsive, and having pleasing aesthetics. He’s also interested in data science, Python, and SQL. ## Subscribe for more CoderPad insights ## Trending Articles Previous slide Next slide [Development ## What is Prompt Engineering? Introducing AI tools such as ChatGPT and Bard helps increase the efficiency of tasks such as data generation, code generation and completion, text summarization, etc. How were these AI tools trained to answer almost every question you ask them? The answer, prompt engineering, is discussed in this blog post. Read the post](https://coderpad.io/blog/development/what-is-prompt-engineering/) [Development ## A Guide To Using React’s useCallback() Hook Are you looking to optimize your React applications? Have you heard of the useCallback hook? useCallback is a powerful React hook that helps you optimize your application by preventing unnecessary re-renders. In this post, we'll dive into React's useCallback() hook, define referential equality and callback functions and how to tie it all together. Read the post](https://coderpad.io/blog/development/a-guide-to-using-reacts-usecallback-hook/) [Development ## MySQL vs. PostgreSQL: How Do They Compare? A database is a convenient tool that allows users to access information, maintain records, and apply commonly used operations, such as insertion, modification, deletion, and data organization. Learn about MySQL vs PostgreSQL, their features, advantages, and disadvantages. Finally, check out which one is the best choice for you. Read the post](https://coderpad.io/blog/development/mysql-vs-postgresql-how-do-they-compare/) [Development ## PostgreSQL LIKE Operator: A Detailed Guide When using databases, searching for values that match a given pattern is a familiar necessity. Learn how you can retrieve entries with queries including a particular string using Postgres LIKE operator. Read the post](https://coderpad.io/blog/development/postgresql-like-operator-a-detailed-guide/) [Development ## How To Use DataProvider In TestNG With Examples When it comes to testing there are many tools and techniques available. In this post, we'll discuss how to use DataProvider with TestNG. Read the post](https://coderpad.io/blog/development/how-to-use-dataprovider-in-testng-with-examples/) [Development ## How To Get Up And Running With Django Migrations: A Guide Django migrations are a way of handling the application of changes to a database schema. By following the steps outlined in this guide, you can easily set up and use migrations in your Django projects. Read the post](https://coderpad.io/blog/development/how-to-get-up-and-running-with-django-migrations-a-guide/) [Development ## Writing A Parameterized Test In JUnit With Examples A JUnit parameterized test allows you to decouple data from structure, generating cleaner and more reliable tests. Learn more in this guide. Read the post](https://coderpad.io/blog/development/writing-a-parameterized-test-in-junit-with-examples/) [Development ## How To Use Assert In JUnit With Examples The JUnit Assert class is what you use to write unit testing assertions in JUnit. Learn more about it in this guide, full of examples. Read the post](https://coderpad.io/blog/development/how-to-use-assert-in-junit-with-examples/) [Development ## A Simple Guide To TypeORM: What It Is And How To Use It Considering current languages have object-oriented programming features, most database management systems are based on the relational model, with tables instead of objects. For these reasons, mapping relational objects is very important in development. In this article, you will learn what TypeORM, one of the main tools used today, is. Read the post](https://coderpad.io/blog/development/a-simple-guide-to-typeorm-what-it-is-and-how-to-use-it/) [Development ## Using PreparedStatement in JDBC With Examples In this post, we'll see why and how to work with JDBC and PreparedStatement. We will also learn along with examples using code. Read the post](https://coderpad.io/blog/development/using-preparedstatement-in-jdbc-with-examples/) [Development ## React vs React Native: The Differences Explained React and React Native are similar in that they both allow web developers to build applications based on the unique concept of components. But the two frameworks do this in radically different ways. In this post, we cover the key differences between react and react native frameworks, implementation, and which is an appropriate choice. Read the post](https://coderpad.io/blog/development/react-vs-react-native-the-differences-explained/) [Development ## Logging in Django The most challenging part of fixing a problem is identifying it. Unfortunately, this statement is exceptionally true when it comes to debugging. Learn how to use the power of logging into your Django applications to improve your debug process in this article. Read the post](https://coderpad.io/blog/development/logging-in-django/) ## Hire with confidence. See why engineering teams trust CoderPad to evaluate developers with realistic, AI-ready hiring workflows. [Request a demo](https://coderpad.io/sales/)