Nuxt UI Pro v1.0 is out with dashboard components! Discount ends 16 hours ago.

Components

Icon

Display any icon (100,000+) from Iconify.

Usage

Use the name prop by following this pattern: i-{collection_name}-{icon_name}. You can search any icon from Iconify using https://icones.js.org.

<template>
  <UIcon name="i-heroicons-light-bulb" />
</template>
You won't be able to use any icon in the name prop here as icons are bundled using egoist/tailwindcss-icons, read more about this in Theming.

Dynamic

You can use the dynamic prop to enable dynamic icon loading. This will use nuxt-icon instead and allow you to use any icon from Iconify as well as the {collection_name}:{icon_name} pattern.

This can be quite useful when using dynamic class names or for icons that are not bundled by default (fetched from a database for example).

<template>
  <UIcon name="i-ph-rocket-launch" dynamic />
</template>

You can also change the default behavior of the dynamic prop by setting the ui.icons.dynamic option in your app.config.ts.

app.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      dynamic: true
    }
  }
})

Props

namerequired
string
dynamic
boolean
false