Icon

This is a wrapper component for Heroicons by TailwindCSS that includes additional properties and features. Its purpose is to unify icon usage across the design system and simplify the process for developers. With this wrapper component, there’s no need to import each icon individually, but it comes at the cost of a larger bundle size, so use it responsibly.

Heroicons

You can find full list of available icons on official Heroicons page.

Color

The icon color is inherited from the parent text color. You can change the icon color by adding a style or class to the Icon component:

<Icon class="text-blue-600"></Icon>