Icons

Pohon UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.

Usage

Pohon UI automatically registers the @nuxt/icon module for you, so there's no additional setup required.

Icon component

You can use the Icon component with a name prop to display an icon:

name

class

<template>
  <PIcon name="i-lucide:lightbulb" class="size-5" />
</template>

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

Component props

Some components also have an icon prop to display an icon, like the Button for example:

icon

<template>
  <PButton icon="i-lucide:sun" variant="subtle">Button</PButton>
</template>

Collections

Iconify dataset

It's highly recommended to install the icon data locally with:

pnpm i @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.

Read more about this in the @nuxt/icon documentation.

Custom local collections

You can use local SVG files to create a custom Iconify collection.

For example, place your icons' SVG files under a folder of your choice, for example, ./app/assets/icons:

assets/icons
├── add.svg
└── remove.svg

In your nuxt.config.ts, add an item in icon.customCollections:

export default defineNuxtConfig({
  modules: ['pohon-ui'],
  icon: {
    customCollections: [{
      prefix: 'custom',
      dir: './app/assets/icons'
    }]
  }
});

Then you can use the icons like this:

<template>
  <PIcon name="custom-add" />
</template>

Read more about this in the @nuxt/icon documentation.

Theme

You can change the default icons used by components in your app.config.ts:

app.config.ts

export default defineAppConfig({
  pohon: {
    icons: {
      arrowDown: 'i-lucide:arrow-down',
      arrowLeft: 'i-lucide:arrow-left',
      arrowRight: 'i-lucide:arrow-right',
      arrowUp: 'i-lucide:arrow-up',
      caution: 'i-lucide:circle-alert',
      check: 'i-lucide:check',
      chevronDoubleLeft: 'i-lucide:chevrons-left',
      chevronDoubleRight: 'i-lucide:chevrons-right',
      chevronDown: 'i-lucide:chevron-down',
      chevronLeft: 'i-lucide:chevron-left',
      chevronRight: 'i-lucide:chevron-right',
      chevronUp: 'i-lucide:chevron-up',
      close: 'i-lucide:x',
      copy: 'i-lucide:copy',
      copyCheck: 'i-lucide:copy-check',
      dark: 'i-lucide:moon',
      drag: 'i-lucide-grip-vertical',
      ellipsis: 'i-lucide:ellipsis',
      error: 'i-lucide:circle-x',
      external: 'i-lucide:arrow-up-right',
      eye: 'i-lucide:eye',
      eyeOff: 'i-lucide:eye-off',
      file: 'i-lucide:file',
      folder: 'i-lucide:folder',
      folderOpen: 'i-lucide:folder-open',
      hash: 'i-lucide:hash',
      info: 'i-lucide:info',
      light: 'i-lucide:sun',
      loading: 'i-lucide:loader-circle',
      menu: 'i-lucide:menu',
      minus: 'i-lucide:minus',
      panelClose: 'i-lucide:panel-left-close',
      panelOpen: 'i-lucide:panel-left-open',
      plus: 'i-lucide:plus',
      reload: 'i-lucide:rotate-ccw',
      search: 'i-lucide:search',
      stop: 'i-lucide:square',
      success: 'i-lucide:circle-check',
      system: 'i-lucide:monitor',
      tip: 'i-lucide:lightbulb',
      upload: 'i-lucide:upload',
      warning: 'i-lucide:triangle-alert'
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    pohon({
      pohon: {
        icons: {
          arrowDown: 'i-lucide:arrow-down',
          arrowLeft: 'i-lucide:arrow-left',
          arrowRight: 'i-lucide:arrow-right',
          arrowUp: 'i-lucide:arrow-up',
          caution: 'i-lucide:circle-alert',
          check: 'i-lucide:check',
          chevronDoubleLeft: 'i-lucide:chevrons-left',
          chevronDoubleRight: 'i-lucide:chevrons-right',
          chevronDown: 'i-lucide:chevron-down',
          chevronLeft: 'i-lucide:chevron-left',
          chevronRight: 'i-lucide:chevron-right',
          chevronUp: 'i-lucide:chevron-up',
          close: 'i-lucide:x',
          copy: 'i-lucide:copy',
          copyCheck: 'i-lucide:copy-check',
          dark: 'i-lucide:moon',
          drag: 'i-lucide-grip-vertical',
          ellipsis: 'i-lucide:ellipsis',
          error: 'i-lucide:circle-x',
          external: 'i-lucide:arrow-up-right',
          eye: 'i-lucide:eye',
          eyeOff: 'i-lucide:eye-off',
          file: 'i-lucide:file',
          folder: 'i-lucide:folder',
          folderOpen: 'i-lucide:folder-open',
          hash: 'i-lucide:hash',
          info: 'i-lucide:info',
          light: 'i-lucide:sun',
          loading: 'i-lucide:loader-circle',
          menu: 'i-lucide:menu',
          minus: 'i-lucide:minus',
          panelClose: 'i-lucide:panel-left-close',
          panelOpen: 'i-lucide:panel-left-open',
          plus: 'i-lucide:plus',
          reload: 'i-lucide:rotate-ccw',
          search: 'i-lucide:search',
          stop: 'i-lucide:square',
          success: 'i-lucide:circle-check',
          system: 'i-lucide:monitor',
          tip: 'i-lucide:lightbulb',
          upload: 'i-lucide:upload',
          warning: 'i-lucide:triangle-alert'
        }
      }
    })
  ]
})

Components

Learn how to customize Pohon UI components with the UnoCSS Variants API for advanced, flexible, and maintainable styling.

Fonts

Pohon UI integrates with Nuxt Fonts to provide plug-and-play font optimization.