The folks from tailwindcss have a couple of side-projects. One of them, named heroicons offers free icons that you can use on your website. These icons are less elaborate than the icons found on the noun project but they are the most common icons you'll need on most websites.
What's particularily nice is that the website allows you to copy the icons directly as a SVG that can be copied and pasted directly into a website.
For example, the academic-cap example can be copied such that these
contents are in your clipboard.
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
If these were to render in the browser, it'd look like this:
Feel free to have a peek, it's a very useful project!
Back to main.