Go to documentation

Just a simple integration for @phosphor-icons in Nuxt

Nuxt Phosphor Icons

npm versionnpm downloadsNuxt

Just a simple integration for phosphor-icons in Nuxt


  • A <PhosphorIcon /> component (the name can be changed) — this renders the icons

Quick Setup

  1. Add nuxt-phosphor-icons dependency to your project
# Using pnpm
pnpm add -D nuxt-phosphor-icons

# Using yarn
yarn add --dev nuxt-phosphor-icons

# Using npm
npm install --save-dev nuxt-phosphor-icons
  1. Add nuxt-phosphor-icons to the modules section of nuxt.config.ts
export default defineNuxtConfig({
  modules: ["nuxt-phosphor-icons"],

  // Optionally change the default prefix - PhosphorIcon
  phosphor: {
    prefix: "your-prefix",

That's it! You can now use nuxt-phosphor-icons in your Nuxt app ✨


This module exposes a <PhosphorIcon /> that you can use in your Nuxt app.

  <!-- This uses the defaults -->
  <PhosphorIconAirplane />

  <!-- This overrides the defaults -->
  <PhosphorIconAirplane size="40" color="green" />


  1. To find out more about props for the component, refer to
  2. To find the list of icons, refer to


# Install dependencies
pnpm install

# Generate type stubs
pnpm dev:prepare

# Develop with the playground
pnpm dev

# Build the playground
pnpm dev:build

# Run ESLint
pnpm lint

# Release new version
pnpm release