#Change svg fill color of Uicon

27 messages · Page 1 of 1 (latest)

placid pythonBOT
#

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

#

Nuxt UI’s UIcon renders Iconify icons. To change an icon’s color, set a CSS color on the element (icons inherit currentColor), or use the size/mode props if needed.

Quick options:

  • Inline class (Tailwind):

    <UIcon name="i-lucide-lightbulb" class="text-blue-500" />

    (UIcon uses Iconify; icons follow currentColor) (Icon).

  • Global default icon mapping (if you want to change which icon is used, not its color):

    // app.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      close: 'i-lucide-x'
    }
  }
})

    (Icons theme).

Notes:

  • If you use collections not pre-bundled, install them locally for reliable SSR:
    pnpm i @iconify-json/{collection}
    e.g., @iconify-json/lucide (Iconify dataset).

If you need to change “fill” specifically, most Iconify SVGs are stroke icons (e.g., lucide). Use a filled icon variant or switch collection; otherwise, you can force fill with CSS utilities like fill-current and set text color:

<UIcon name="i-some-filled-icon" class="fill-current text-emerald-500" />

(behavior still follows currentColor) (Icon).

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

#

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

quiet nymph
#

But what if the icons are local, and not from iconify?

@placid python

placid pythonBOT
#

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

#

If your icons are local SVGs, add them as a custom Iconify collection and use them via UIcon. They’ll still inherit currentColor, so you can change color with CSS (e.g., Tailwind text- classes or fill-current).

  • Register local SVGs:

    // nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  icon: {
    customCollections: [{
      prefix: 'custom',
      dir: './app/assets/icons' // your local SVGs
    }]
  }
})

    Then use them:

    <UIcon name="i-custom-add" class="text-emerald-500" />

    (Custom local collections) (Icons > Iconify dataset).

  • Color the SVG:

    <UIcon name="i-custom-add" class="text-blue-600 fill-current" />

    UIcon displays Iconify icons and supports styling via CSS; icons follow currentColor, so text-* classes change the icon color. Use fill-current if your SVG uses fill (Icon component usage) (Icon).

Tip: Install needed icon data locally for reliability in SSR (applies to Iconify sets; custom collections are local by design) (Iconify dataset).

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

#

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

quiet nymph
#

@placid python
Yeah, I already tried this option, but it doesn't seem to work.
Can you check ti yourself somehow?
Maybe I made a typo somewhere.

placid pythonBOT
#

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

#

I can’t access your repo directly here, but here’s a precise checklist to make local SVGs work with UIcon and allow color changes. Please compare with your project and share any diffs.

  1. Register your local SVGs as a custom collection
  • Folder with SVGs:
    • app/assets/icons/add.svg (example)
  • nuxt.config.ts:
    export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  icon: {
    customCollections: [{
      prefix: 'custom',
      dir: './app/assets/icons'
    }]
  }
})
    Then use:
    <UIcon name="i-custom-add" class="size-6 text-emerald-500" />
    This is the documented way to use local SVGs with Nuxt UI’s UIcon (Custom local collections).
  1. Ensure color can be controlled
  • UIcon icons follow currentColor, so text- classes change color (e.g., text-blue-600). If your SVG paths use fill rather than stroke, add fill-current:
    <UIcon name="i-custom-add" class="text-blue-600 fill-current" />
    UIcon is the Iconify-based icon component; styling via CSS is supported (Icon).
#
  1. Common pitfalls to check
  • Wrong dir: dir is relative to project root; use ./app/assets/icons if your icons live there (not ~/).
  • Prefix mismatch: name must be i-{prefix}-{iconName}. For add.svg under prefix custom: i-custom-add.
  • SVG content overrides currentColor: if your SVG has hardcoded fill="#000" or stroke="#000", replace with fill="currentColor"/stroke="currentColor", or rely on fill-current with Tailwind if supported by the generated markup.
  • Not reloading after config change: restart dev server after editing nuxt.config.ts so the custom collection is picked up.
  • Using Vue version of docs instead of Nuxt version: ensure you’re following the Nuxt icons guide (UI auto-registers @nuxt/icon) (Icons usage).
  1. Minimal working example
  • app/assets/icons/logo.svg
  • nuxt.config.ts as above
  • component:
    <template>
  <UIcon name="i-custom-logo" class="size-8 text-pink-600 fill-current" />
</template>

If this still doesn’t colorize, please paste:

  • nuxt.config.ts icon.customCollections block
  • the SVG file content (first path showing fill/stroke)
  • the exact UIcon usage line

I’ll pinpoint the mismatch based on the docs above. (Custom local collections guide: Icons > Iconify dataset; UIcon usage: Icon).

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

#

@quiet nymph 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:

#

Thanks — your setup looks almost correct. Two likely causes why the color doesn’t change:

  1. The SVG has hard-coded fill/stroke colors
  • If the path has fill="#000" (or any color), it won’t inherit currentColor. Edit your SVG so paths use fill="currentColor" (or no fill so it inherits), e.g.:
    <path d="…" fill="currentColor" />
  • Then your UIcon with class="text-pink-600" (and optionally fill-current) will color it. UIcon icons follow currentColor styling (use text-* utilities; add fill-current when the SVG uses fill) (Icon).
  1. Name/prefix or collection registration mismatch
  • Your nuxt.config.ts custom collection looks right for app/assets/icons with prefix custom, so i-custom-logo is the correct name. Make sure the file is app/assets/icons/logo.svg, restart dev server after changing nuxt.config.ts, and use:
    <UIcon name="i-custom-logo" class="text-pink-600 fill-current size-8" />
    (Custom local collections) (Custom local collections).

Quick checks:

  • Ensure no hard-coded stroke colors either. If your SVG is stroke-based, set stroke="currentColor" (or add stroke-current class and set text-* color).
  • Confirm there’s no CSS in the SVG (e.g., .fil0 { fill: #000 }) that overrides currentColor. If present, change it to .fil0 { fill: currentColor } or remove the style.
  • Verify the icon renders (try class="text-red-500" to see if it changes).
  • After editing the SVG file, fully reload Vite/nuxt dev server to bust caching.

Minimal working example:

  • logo.svg:
    <svg … viewBox="0 0 …">
    <path d="…" fill="currentColor"/>
    </svg>
  • Component:
    <UIcon name="i-custom-logo" class="text-emerald-600 fill-current size-8" />
#

Docs used: UIcon usage and styling with currentColor, and registering local custom collections (UI auto-registers @nuxt/icon) (Icon, Custom local collections).

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

#

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

quiet nymph
#

@placid python
So should I put color name "currentColor", when editing the svg?
Once again, I use svgs and not paths

placid pythonBOT
#

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

#

Yes. For local SVGs used via UIcon, set the SVG’s paint attributes to currentColor so they inherit the CSS color you apply:

  • If your SVG uses fills, set fill="currentColor" (or the class it uses should resolve to fill: currentColor).
  • If it uses strokes, set stroke="currentColor".
  • Then control the color from your Vue/Tailwind classes, e.g. class="text-pink-600". If the SVG relies on fill, add fill-current; if it relies on stroke, add stroke-current as needed.

Example:

  • In logo.svg:
    <svg ...>
    <path d="..." fill="currentColor" />
    </svg>

  • In your component:
    <UIcon name="i-custom-logo" class="text-pink-600 fill-current" />

This follows Nuxt UI’s UIcon behavior: icons inherit currentColor and can be styled via CSS classes; local SVGs are supported through custom collections in nuxt.config.ts (registering them as i-custom-...). Refer to the Icon component usage and custom local collections docs (UIcon inherits currentColor; custom collections setup) (Icon, Custom local collections).

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

#

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

placid pythonBOT
#

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

#

Yes. Make your local SVG inherit color by using currentColor in its paint attributes (or its embedded CSS), then control the color from UIcon with text- utilities.

Two options:

  1. Direct attributes on elements
  • If shapes are filled:
    • Use fill="currentColor"
  • If shapes are stroked:
    • Use stroke="currentColor"

Example:

<svg viewBox="0 0 10 10" xmlns="<http://www.w3.org/2000/svg">>
  <path d="M9.99,1.3H1.49..." fill="currentColor"/>
</svg>

Then:

<UIcon name="i-custom-logo" class="text-pink-600 fill-current size-8" />

(UIcon icons inherit currentColor; style with CSS classes) (Icon).

  1. If the SVG uses classes (like .fil0) or embedded styles
  • Ensure those styles use currentColor:
    • .fil0 { fill: currentColor; }
  • Remove any hardcoded fill="#000" or stroke="#000".

And confirm your local collection setup:

  • nuxt.config.ts with icon.customCollections and prefix
  • Use name="i-{prefix}-{filename}" (e.g., i-custom-logo)
    (Custom local collections) (Custom local collections).

If your file has only paths with fills, you don’t need extra attributes on the <svg> tag—setting fill="currentColor" on each path (or via its class) is sufficient.

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

#

@quiet nymph 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, that’s acceptable. Using a class with fill: currentColor inside the SVG makes the shapes inherit the color you apply to UIcon (e.g., text-pink-600). Then use it like:

<UIcon name="i-custom-logo" class="text-pink-600 size-8" />

This follows Nuxt UI’s approach: local SVGs can be registered as a custom Iconify collection, and icons inherit currentColor so you can style them via CSS classes (register via icon.customCollections; style via text-* utilities) (Custom local collections, Icon).

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

#

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

trail forge
# 
-  <defs>
-   <style>
-     .st0 {
-       fill: currentColor;
-     }
-   </style>
- </defs>
  <g id="Layer_x5F_1">
-   <path class="st0" d="...">
+   <path fill="currentColor" d="...">
  </g>
</svg>"```
@quiet nymph