NuxtIcons

nuxt-icons is an open-source Nuxt module I wrote and published to npm. It solves a small but persistent annoyance - SVG icons are supposed to behave like text - inherit color, scale with font-size, sit on the baseline - but out of the box they don't.

This module fixes it.

How it works

You drop SVG files into assets/icons/, and the module:

• Auto-registers everything in that folder so you can reference icons by filename: <nuxt-icon name="arrow-right" />
• Strips fixed widths and heights from the SVGs at build time, so they scale with font-size like text does
• Applies sensible defaults: width: 1em; height: 1em; vertical-align: middle - icons sit inline on the baseline without hacks
• Loads lazily - only icons you actually use end up in the bundle
• Supports nested folders for organization: icons/admin/badge.svg → <nuxt-icon name="admin/badge" />
• Preserves original colors when you want them: add the filled attribute and the SVG keeps its own fill colors instead of inheriting currentColor
• HMR-friendly - edit an SVG in dev mode and it reloads instantly

Installation

pnpm add nuxt-icons

npm install nuxt-icons

yarn add nuxt-icons

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

Then create assets/icons/ and drop your SVGs in.

Usage examples

<!-- Inherits current text color and font-size -->
<nuxt-icon name="arrow-right" />

<!-- Keeps original colors (brand logos, flags, etc.) -->
<nuxt-icon name="github" filled />

<!-- Nested folder structure -->
<nuxt-icon name="social/twitter" />

Styling happens via regular CSS - just target .nuxt-icon svg:

.nuxt-icon svg {
    font-size: 1.5rem;
    color: var(--color-primary);
    transition: color 0.2s;
}

Tech details

Written in Vue and TypeScript, currently at v4.0.0 with full Nuxt 4 support. Open source, MIT licensed, and used in most of my own Nuxt projects before @nuxt/icon became the mainstream solution.