Nuxt Icon

Icon module for Nuxt with 100,000+ ready to use icons from Iconify.

Features ✨

Add nuxt-icon dependency to your project:

npm install --save-dev nuxt-icon

# Using yarn
yarn add --dev nuxt-icon

Add it to the modules array in your nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-icon']
})

That’s it, you can now use the <Icon /> in your components!

✨ If you are using VS Code, you can use the Iconify IntelliSense extension by @antfu

Props:

You can use any name from the https://icones.js.org collection:

<Icon name="uil:github" />

<Icon name="?" />

<Icon name="NuxtIcon" />

Note that NuxtIcon needs to be inside components/global/ folder (see example).

To update the default size (1em) of the <Icon />, create an app.config.ts with the nuxtIcon.size property:

// app.config.ts
export default defineAppConfig({
  nuxtIcon: {
    size: '24px' // default <Icon> size applied
  }
})