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 template, which provides over 120,000 open source icons.

Usage

To use an icon in your site, you can use the UIcon component, which are used under the hood by Nuxt UI Components, these need to be defined in out nuxt config or heroicons are used by default.

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

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"
/>

Dynamic Icons

There is a way to use dynamic icons in your site. You can use the Icon component with the name. These render the svg directly on DOM, so the classes applied to customize can be as below

<Icon name="lucide:activity" class="h-6 w-6" />

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.