UIcon doesn't seem to change of svg

[grand smelt]

Hi @marsh elk. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

UIcon supports two render modes: svg and css. By default it renders SVGs, and many Iconify SVGs use stroke (not fill) for color. Applying fill-primary won’t affect stroke-based icons. Use a text color utility (e.g., text-primary) or switch the icon to CSS mode if needed. Example:

<UIcon name="i-lucide-lightbulb" class="size-5 text-primary" />

This uses the design-token-based class text-primary, which maps to the current primary color defined by Nuxt UI’s theme variables (and adapts in light/dark modes) (Icons usage, CSS variables colors).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@marsh elk Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Let me check the knowledge base for you again. One moment! :books:

---

If the problematic icon is a custom SVG used via Nuxt UI’s Iconify integration, ensure it’s provided as a custom collection so UIcon can render it consistently, and then use text color utilities (most Iconify icons are stroke-based, not fill-based).

Steps:

1. Add your SVGs as a custom collection and prefix:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  icon: {
    customCollections: [{
      prefix: 'custom',
      dir: './app/assets/icons' // place your SVG(s) here
    }]
  }
})

Use it like:

<UIcon name="i-custom-your-icon" class="size-6 text-primary" />

This applies the theme color via text-primary, which maps to your primary token and adapts to light/dark modes (Custom Local Collections, Icon component usage, CSS variables colors).

If your SVG paths use fill instead of stroke (or vice versa), match the utility:

• For stroke-based SVGs: use text-primary (Iconify sets stroke to currentColor).
• For fill-only paths that ignore currentColor: ensure the SVG doesn’t hardcode fill attributes, or switch to mode="css" and style with text-primary:

<UIcon name="i-custom-your-icon" mode="css" class="size-6 text-primary" />

This relies on currentColor to color the icon via CSS mode (Icon props).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@marsh elk Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Let me check the knowledge base for you again. One moment! :books:

---

Yes. Use the text-primary utility to color UIcon, since Iconify icons typically inherit currentColor (affecting stroke/fill accordingly). Example: <UIcon name="i-lucide-lightbulb" class="size-5 text-primary" /> (Icon usage, CSS variables colors).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: