Go to documentation

Just a simple integration for Bootstrap Icons

Nuxt Bootstrap Icons

npm versionnpm downloadsNuxt

Just a simple integration for bootstrap-icons


  • A <BootstrapIcon /> component (the name can be changed) — this renders the icons
  • Different rendering modes for the icons — inline and component


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

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

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

  // Optionally, customize the way of rendering icons
  bootstrapIcons: {
    renderType: "component", // or 'inline' (which is the default)


There are 2 ways of rendering icons:

  1. inline rendering: In this, you choose the icon to display using a name prop, for example:
      <BootstrapIcon name="xbox" />
  2. component rendering: Here the components are prefixed with BootstrapIcon and the name of the icon, for example:
      <BootstrapIconXbox />

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


# Install dependencies
pnpm install

# Setup/sync icon components
pnpm setup

# 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