Icons are a great way to add visual elements to your page. They can be used to represent actions, objects, or even just to add some flair to your design.
Heroicons are a set of free, MIT-licensed high-quality SVG icons for you to use in your web projects. You can find them at https://heroicons.com.
By default, icons are displayed with the size-5 Tailwind
class to set the width and height. This can be overridden
without using the ! Tailwind modifier
because we utilize the :where() pseudo-class to ensure that
our default classes have the lowest CSS specificity possible.
The icon color will inherit the text color of the parent element.
Additionally, if it's more convenient for your purposes, you can pass the
icon as a keyword argument using the icon: option instead of
the first positional argument.
You can customize the size, color, and other properties of the icons using standard Tailwind classes.
