---------------------- Nuxt UI already integrates Iconify for you via `@nuxt/icon`, and it’s designed to work well with Tailwind in Nuxt projects. [[Icons Nuxt](); [Intro]()] ### Is Iconify a good fit for Nuxt? Within the Nuxt UI ecosystem: - Nuxt UI “integrates with Nuxt Icon to access over 200,000+ icons from Iconify” and auto‑registers the module, so there’s no extra setup. [[Icons Nuxt]()] - It’s part of the “ecosystem integration” story (icons, fonts, color mode, etc.), so it’s a first‑class, recommended option rather than an afterthought. [[Key features]()] Based on the docs, Iconify via `@nuxt/icon` is the default and recommended way to handle icons in Nuxt UI projects. ### How to use Iconify with Tailwind in Nuxt UI Nuxt UI uses Tailwind and exposes icons in two main ways: #### 1. Using the `UIcon` component ```vue ``` You can use any Iconify icon name from [[Icon component](); [Icons Nuxt]()] Tailwind is used via classes like `size-5`, `h-5`, `w-5`, `text-*`, etc. #### 2. Using `icon` props on Nuxt UI components Many Nuxt UI components accept an `icon` prop that takes an Iconify name string: ```vue ``` [[Icons Nuxt]()] You then style the button and surrounding layout with Tailwind as usual. #### 3. Tailwind + dynamic icon names (important limitation)

Iconify with tailwind

Similar Threads

Similar Threads

Similar Threads