Back to top

Icon

The <Icon /> component comes from Nuxt Icon module. You can view list of available icons here.

Usage

View Code 
<template>
  <Icon name="ri:home-line" />
</template>

Sizes

To change the icon size, use the size prop.

View Code 
<template>
  <Icon name="ri:search-line" size="20" />
  <Icon name="ri:search-line" size="24" />
  <Icon name="ri:search-line" size="30" />
  <Icon name="ri:search-line" size="60" />
  <Icon name="ri:search-line" size="100" />
</template>

Colors

To change to icon color, you can use Tailwind text color utility.

View Code 
<template>
  <Icon name="ri:search-line" size="24" class="text-primary-500" />
  <Icon name="ri:search-line" size="24" class="text-warning-500" />
  <Icon name="ri:search-line" size="24" class="text-error-500" />
</template>