ui/docs/content/1.getting-started/4.icons.md

description

description

Thanks to @nuxt/icon, add 200,000+ ready to use icons to your Nuxt application based on Iconify.

You can use any name from the https://icones.js.org collection such as the i- prefix (for example, i-heroicons-cog) with:

• any icon prop available across the components:

<template>
  <UButton icon="i-heroicons-magnifying-glass" />
</template>

• the UIcon component to use icons anywhere:

<template>
  <UIcon name="i-heroicons-moon" class="w-5 h-5 text-primary-500" />
</template>

Collections

It's highly recommended to install the icons collections locally with:

::code-group

pnpm i @iconify-json/{collection_name}

yarn add @iconify-json/{collection_name}

npm install @iconify-json/{collection_name}

::

For example, to use the i-uil-github icon, install it's collection with @iconify-json/uil. This way the icons can be served locally or from your serverless functions, which is faster and more reliable on both SSR and client-side.

::callout{icon="i-heroicons-light-bulb" to="https://github.com/nuxt/icon?tab=readme-ov-file#custom-local-collections" target="_blank"} Read more about custom collections in the @nuxt/icon documentation. ::

Theme

:icons-theme