Icons

Supersaas templates use Nuxt Icon module to provide a collection of icons that you can use in your site. It is powered by Iconify engine, which provides over 120,000 open source icons.

Usage

To use an icon in your site, you can use the UIcon component or the Icon component.

<UIcon name="i-heroicons-arrow-right-circle-solid" />

<Icon name="lucide:activity" />

Customization

You can customize the icons by adding the class prop to the UIcon component. These are css classes based on the icon name and they are a <span> element, which means they are based on the text color and font size.

<UIcon
  name="i-heroicons-arrow-right-circle-solid"
  class="text-xl text-red-500"
/>

Finding the icons

There are two ways to find the icons:

1. Icones search engine a icon search engine Made by Anthony Fu.
2. Iconify - the official site to find the icons you need.