SVG icons are a great way to guide users. When you are working with TailwindCSS, it’s good to have SVG code instead of importing a PNG image as an icon. Here are FREE SVG icons that you can use with TailwindCSS.
1. Heroicons
You might not know that the heroicons is also a project of the tailwind lab. These beautiful hand-crafted SVG icons are open-source and free to use. Heroicons includes over 290 icons with 3 different variants so that you can pick whichever suits your application.
| FREE | Yes |
|---|---|
| Can Copy SVG Code | Yes |
| Can Download | No |
| Available as Package | Yes |
| Open Source | Yes |
| Website | https://heroicons.com/ |
2. Tabler Icons
The second one in the list of Icons for TailwindCSS is tabler icons. The list of tabler icons is quite big as it consists of over 4000 FREE icons. These icons are not only available to copy the SVG code but also can be downloaded as a svg or png file. You also have the option to use them as a package in any modern framework like React, Vue or angular. Unlike heroicons, it offers to change size and strokes before using.
| FREE | Yes |
|---|---|
| Can Copy SVG Code | Yes |
| Can Download | Yes |
| Available as Package | Yes |
| Open Source | Yes |
| Website | https://tabler-icons.io/ |
Conclusion
There are a couple of resources for FREE icons in SVG format to use on your website with TailwindCSS. One is to use heroicons but if you can’t find the icon you are looking for, try tabler-icons. Both are open-source and free to use.