\r\n```\r\n\r\n2. If you want to have `\u003CIcon>` load an **SFC** that is nested in folders - that's easy:\r\n\r\n```js\r\n// Assuming: `components/global/CoolStuff/MyIcon.vue`\r\n\r\n\u003CIcon name=\"CoolStuffMyIcon\" /> \r\n```\r\n\r\n3. However, if you have an elaborate set of custom icons (`.svg` extension) that are organized in folders, you would currently need an individual `.vue` icon to go along with every single one.\r\n\r\n```js\r\n// Assuming: `{public|assets}/icons/brand/MyIcon.svg\r\n// Assuming: `components/global/icons/brand/MyIcon.vue`\r\n\r\n// Assuming: `{public|assets}/icons/brand/MyOtherIcon.svg\r\n// Assuming: `components/global/icons/brand/MyOtherIcon.vue`\r\n\r\n\u003CIcon name=\"IconsBrandMyIcon\" />\r\n\u003CIcon name=\"IconsBrandMyOtherIcon\" />\r\n\r\n// etc.\r\n```\r\n\r\nThis means you need to manage a folder of SVGs as well as their matching SFCs. \r\n\r\nIs there a solution?",[3139],{"name":3140,"color":3141},"enhancement","a2eeef",75,"nuxt","icon","open","Feature request: A way to manage custom SVGs that are nested inside folders.","2023-08-07T11:42:42Z","https://github.com/nuxt/icon/issues/75",0.7164608,{"description":3151,"labels":3152,"number":3160,"owner":3143,"repository":3161,"state":3162,"title":3163,"updated_at":3164,"url":3165,"score":3166},"### Description\n\nHi there. We are moving our app to NuxtUI and we are loving it so far! Really appreciative of all your hard work on this amazing package. Our stack is NuxtUI+Inertia+Rails.\n\nI spent part of my weekend digging into UIcon and Iconify. Pardon my ignorance if I've missed something obvious, I'm new to this part of the ecosystem... I thought it would be useful to put some thoughts in here and collect what I've learned.\n\n1. UIcon/Iconify always load icons from the network (`api.iconify.design`)\n2. It's not really possible to use NuxtUI without relying heavily on UIcon/Iconify due to various icon attributes in the components.\n3. I know unplug-icons and Nuxt have some support for bundled icons, but they don't apply if you are using Nuxt UI standalone.\n\nSee #4167 and others\n\nWe want to bundle our icons to avoid a dependency on api.iconify.design. I ended up writing a script that scanned our app for icon names and builds a custom `icons.json` file. I put some custom icons in there too using `@iconify/tools`... `icons.json` can be loaded into iconify with `addCollection()`. In dev I also warn on missing icons via `setCustomIconsLoader()`.\n\nDoes that sound correct? Are there solutions I'm missing?? I'd be happy to contribute doc updates or whatever if that would be helpful.\n\nThanks again!\n\n### Additional context\n\n_No response_",[3153,3154,3157],{"name":3140,"color":3141},{"name":3155,"color":3156},"v3","49DCB8",{"name":3158,"color":3159},"triage","ffffff",4481,"ui","closed","thoughts on UIcon/Iconify","2025-07-10T09:59:29Z","https://github.com/nuxt/ui/issues/4481",0.6797127,{"description":3168,"labels":3169,"number":3170,"owner":3143,"repository":3144,"state":3162,"title":3171,"updated_at":3172,"url":3173,"score":3174},"The Nuxt Icon module supports local bundling out-of-the-box, and the client bundle is enabled by default. However, when running `nuxt generate`, the icon bundles are still being loaded from the Iconify CDN instead of using the local bundles.\n\nThe documentation already mentions that when `ssr: false`, you need to set `provider: \"server\"` if you want to use local collections.\n\nSince `nuxt generate `is equivalent to `ssr: false` (as it's generating a static site), it would be helpful to mention this in the documentation explicitly.\n\nThis clarification would benefit both developers and tools like LLMs, helping to make the integration smoother.\n\n# Reproduce\n@nuxt/ui: 2.20.0 (which include @nuxt/icon 1.10.3)\nnuxt.config.ts\n```\nexport default defineNuxtConfig({\n modules: ['@nuxt/ui'],\n icon: {\n customCollections: [\n {\n prefix: 'postpilot',\n dir: resolve(__dirname, 'assets/postpilot-icons'),\n },\n ],\n },\n})\n```",[],403,"Docs: Highlight the need to use provider: 'server' when using 'nuxt generate'","2025-06-15T00:09:19Z","https://github.com/nuxt/icon/issues/403",0.69468904,{"description":3176,"labels":3177,"number":3178,"owner":3143,"repository":3144,"state":3162,"title":3179,"updated_at":3180,"url":3181,"score":3182},"Hello,\n\nI'm opening this issue because I have issue with Icons loading in my production environment. I'm building my Nuxt application in a docker image and then I deploy it on a server behind a reverse proxy Traefik.\n\nFirst attempt to go on a page of the app, icons appears, but after going on other pages, icons are missing. If i it F5 to refresh the page, icons appears.\nMy Nuxt app is running in SSR mode.\n\nAt the first attemps I see this in the log on the server : \n```\nclient | ⚙ [Icon] serving lucide:arrow-right,lucide:eye from bundled collection\n```\n\nHere is my `nuxt.config.ts` file : \n```\nexport default defineNuxtConfig({\n modules: ['@nuxt/ui', '@pinia/nuxt'],\n devtools: { enabled: false },\n css: ['~/assets/css/main.css'],\n runtimeConfig: {\n backendUrl: process.env.NUXT_BACKEND_URL,\n public: {\n backendUrl: process.env.NUXT_PUBLIC_BACKEND_URL,\n },\n },\n srcDir: 'app',\n compatibilityDate: '2024-11-01',\n nitro: {\n preset: 'bun',\n esbuild: {\n options: {\n target: 'es2022',\n },\n },\n },\n vite: {\n esbuild: {\n target: 'es2022',\n },\n ssr: {\n noExternal: ['@prisma/client'],\n },\n },\n icon: {\n serverBundle: 'local',\n },\n});\n```\n\nand in the browser console : \nFailed to load resource: the server responded with a status of 404 ()\nhttps://myapplication/api/_nuxt_icon/lucide.json?icons=align-justify%2Cbell%2Cchevron-down%2Clayout-dashboard%2Cpanel-right-close\n\nI am using Nuxt version 4.0.3 and Nuxt ui version 3.3.2\nAnd in my dependencies I have : \n```\n\"dependencies\": {\n \"@nuxt/ui\": \"^3.3.2\",\n \"@pinia/nuxt\": \"^0.11.1\",\n \"nuxt\": \"^4.0.3\",\n \"pinia\": \"^3.0.3\",\n \"quill\": \"^2.0.3\",\n \"vue\": \"^3.5.17\",\n \"vue-router\": \"^4.5.1\",\n \"@iconify-json/lucide\": \"^1.2.62\"\n },\n \"devDependencies\": {\n \"@nuxt/eslint-config\": \"^1.9.0\",\n \"eslint\": \"^9.33.0\",\n \"prettier\": \"^3.6.2\"\n }\n```\n\nHow can I solve the issue ?",[],422,"NuxtUI - Icons doesn't load correctly in Production server","2025-08-21T07:17:40Z","https://github.com/nuxt/icon/issues/422",0.69524527,{"description":3184,"labels":3185,"number":3186,"owner":3143,"repository":3144,"state":3162,"title":3187,"updated_at":3188,"url":3189,"score":3190},"### Motivation\r\n\r\nAs is, iconify is great for free, public icon sets. For commercial purposes, you may want to use commercially licensed icon pack - the most popular example being [Font Awesome Pro](https://fontawesome.com/icons). Iconify [already provides](https://iconify.design/docs/libraries/tools/examples/import-fa-pro.html) a way of converting custom icon packs into `IconifyJSON` definition. However, Including the whole `IconifyJSON` in the app is costly, it can easily weigh over 100 kB (raw). Therefore, iconify by default uses API provider to deliver only the requested icon definitions on demand. It is currently not possible to easily host your own icon packs definitions.\r\n\r\n### Feature Request\r\nSince nuxt already hosts server routes, it would be great if the module could provide a streamlined method of hosting Iconify API provider. This way, the end-user could easily use their non-free icon packs benefiting from the on-demand architecture of iconifi's `loadIcon`.\r\n\r\nExample module configuration could look like this:\r\n```ts\r\ndefineAppConfig({\r\n nuxtIcon: {\r\n customCollections: [\r\n resolve('./assets/icons/collections/my-icons.json')\r\n ]\r\n }\r\n})\r\n```\r\n\r\nTo achieve this, the module would have to expose http API conforming to the [Iconify API standard](https://iconify.design/docs/api/icon-data.html#query). The API is very straight forward\r\n\r\nExample definition:\r\n```json\r\n{\r\n \"prefix\": \"my-icons\",\r\n \"lastModified\": 1691181322,\r\n \"icons\": {\r\n \"a\": { \"body\": \"\u003Cpath d=\\\"_path_a_\\\"/>\" },\r\n \"b\": { \"body\": \"\u003Cpath d=\\\"_path_b_\\\"/>\" },\r\n \"c\": { \"body\": \"\u003Cpath d=\\\"_path_c_\\\"/>\" }\r\n },\r\n \"width\": 24,\r\n \"height\": 24,\r\n}\r\n```\r\n\r\nExample API response to `GET /api/iconify-provider/my-icons.json?icons=a,c`\r\n```json\r\n{\r\n \"prefix\": \"my-icons\",\r\n \"icons\": {\r\n \"a\": { \"body\": \"\u003Cpath d=\\\"_path_a_\\\"/>\" },\r\n \"c\": { \"body\": \"\u003Cpath d=\\\"_path_c_\\\"/>\" }\r\n },\r\n \"width\": 24,\r\n \"height\": 24,\r\n}\r\n```\r\n\r\nModule would have to register the custom provider with iconify library:\r\n```ts\r\nimport { addAPIProvider } from '@iconify/vue'\r\naddAPIProvider('nuxt', { resources: ['/api/iconify-provider'] })\r\n```\r\n\r\nAnd the icons should be usable as per example:\r\n```html\r\n\u003Cicon name=\"@nuxt:my-icons:a\"/>\r\n\u003Cicon name=\"@nuxt:my-icons:c\"/>\r\n```",[],97,"Feature Request: Built-in API provider for custom IconifyJSON","2024-10-25T16:58:25Z","https://github.com/nuxt/icon/issues/97",0.69539744,{"description":3192,"labels":3193,"number":3206,"owner":3143,"repository":3161,"state":3162,"title":3207,"updated_at":3208,"url":3209,"score":3210},"### Description\n\nHello.\n\nIs it possible to make a collection of local custom icons for Vue, as described in the documentation section for Nuxt?",[3194,3197,3198,3201,3204],{"name":3195,"color":3196},"question","d876e3",{"name":3155,"color":3156},{"name":3199,"color":3200},"vue","42b883",{"name":3202,"color":3203},"closed-by-bot","ededed",{"name":3205,"color":3203},"stale",4298,"Custom icon collection.","2025-08-20T02:08:20Z","https://github.com/nuxt/ui/issues/4298",0.7005707,{"description":3212,"labels":3213,"number":3214,"owner":3143,"repository":3144,"state":3162,"title":3215,"updated_at":3216,"url":3217,"score":3218},"url(\"data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M20 6c0-2.168-3.663-4-8-4S4 3.832 4 6v2c0 2.168 3.663 4 8 4s8-1.832 8-4V6zm-8 13c-4.337 0-8-1.832-8-4v3c0 2.168 3.663 4 8 4s8-1.832 8-4v-3c0 2.168-3.663 4-8 4z' fill='black'/%3E%3Cpath d='M20 10c0 2.168-3.663 4-8 4s-8-1.832-8-4v3c0 2.168 3.663 4 8 4s8-1.832 8-4v-3z' fill='black'/%3E%3C/svg%3E\")\r\n\r\nThe test environment is fine, but the production environment will not be able to display the icon. If I change the https in xmlns to http, it will display.\r\n\r\n\r\n\r\n",[],221,"[Bug] Icon cannot be displayed when used with nuxt-ui","2024-08-11T05:47:37Z","https://github.com/nuxt/icon/issues/221",0.7025322,{"description":3220,"labels":3221,"number":3231,"owner":3143,"repository":3143,"state":3162,"title":3232,"updated_at":3233,"url":3234,"score":3235},"\n### Environment\n\nNuxt project info: \n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.15.1\n- Nuxt Version: 3.13.2\n- CLI Version: 3.13.2\n- Nitro Version: 2.9.7\n- Package Manager: bun@1.1.8\n- Builder: -\n- User Config: experimental, runtimeConfig, build, devtools, nitro, routeRules, plugins, modules, eslint, pinia, site, delayHydration, i18n, icon, app, content, svgo, sitemap, googleFonts, image, mdc, htmlValidator, compatibilityDate\n- Runtime Modules: @nuxt/ui@2.18.4, @nuxt/image@1.8.0, @nuxt/content@2.13.2, @nuxt/eslint@0.5.7, @nuxtjs/google-fonts@3.2.0, @nuxtjs/fontaine@0.4.3, @nuxtjs/i18n@8.5.5, @nuxtjs/mdc@0.8.3, @nuxtjs/sitemap@6.1.0, @nuxtjs/html-validator@1.8.2, nuxt-delay-hydration@1.3.8, nuxt-svgo@4.0.6, @vueuse/nuxt@11.1.0, @vueuse/motion/nuxt@2.2.5, @pinia/nuxt@0.5.4, @nuxthq/studio@2.0.3, @nuxt/icon@1.5.1, @formkit/auto-animate/nuxt@0.8.2\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nGithub to reproduction: https://github.com/hoachnt/hoachnt-web\n\n### Describe the bug\n\nI don't know what problem is. I try to fix this bug 2 months and think that problem is in nuxt. And yep I saw in the official website of nuxt has same problem\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3222,3225,3228],{"name":3223,"color":3224},"pending triage","E99695",{"name":3226,"color":3227},"needs reproduction","FBCA04",{"name":3229,"color":3230},"possible regression","B90A42",29387,"Icons not rendering on production build when mounting","2024-10-15T06:27:30Z","https://github.com/nuxt/nuxt/issues/29387",0.7032349,{"description":3237,"labels":3238,"number":3244,"owner":3143,"repository":3143,"state":3162,"title":3245,"updated_at":3246,"url":3247,"score":3248},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.14.0\r\n- Nuxt Version: 3.6.2\r\n- Nitro Version: 2.5.2\r\n- Package Manager: pnpm@8.4.0\r\n- Builder: vite\r\n- User Config: nitro, typescript, runtimeConfig, devServerHandlers, modules, app, postcss, routeRules, i18n, schemaOrg, delayHydration, vite\r\n- Runtime Modules: nuxt-delay-hydration@1.2.1, nuxt-schema-org@2.2.0, @nuxtjs/i18n@8.0.0-beta.10\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-jaeoi1?file=components%2Ffoo.vue\n\n### Describe the bug\n\nHi,\r\n\r\nAfter upgrade to 3.6.2 : \r\n\r\n**After building** the application (no problem in dev) :\r\n\r\nThe icon's url in the inlined css is ok : \r\n```\r\n[data-icon=foo] {\r\n --icon-custom: url(/_nuxt/ic-ecurie.dfbfbb0a.svg);\r\n}\r\n```\r\n\r\nThe icon's url in the **entry.css gives a 404**\r\n```\r\n[data-icon=foo] {\r\n --icon-custom: url(./ic-ecurie.dfbfbb0a.svg);\r\n}\r\n```\r\n\r\nThere's no `_nuxt` in the url because the asset is in the same directory as the css but the browser consider it not and resolve with his path.\r\n\r\n\r\nMaybe i make something wrong but I see no problems in Nuxt 3.5.3 :thinking: \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3239,3242,3243],{"name":3240,"color":3241},"3.x","29bc7f",{"name":3223,"color":3224},{"name":3226,"color":3227},22086,"Bad path of assets after 3.6 upgrade","2023-07-19T06:47:37Z","https://github.com/nuxt/nuxt/issues/22086",0.71829456,{"description":3250,"labels":3251,"number":3254,"owner":3143,"repository":3161,"state":3162,"title":3255,"updated_at":3256,"url":3257,"score":3258},"### Description\n\nI'm using `@nuxt/ui` with Vue as this is what we are using at work and I was wondering how I can add custom collections to the `@nuxt/icon` module but it looks like there is no configuration available compared to the configuration when using Nuxt. Are there plans to support this or any workaround for now that I can use?",[3252,3253],{"name":3195,"color":3196},{"name":3155,"color":3156},4750,"Is there no way to use customCollections in Vue with nuxt/icon?","2025-08-19T07:39:24Z","https://github.com/nuxt/ui/issues/4750",0.7189768,["Reactive",3260],{},["Set"],["ShallowReactive",3263],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f8v_RlYXRuaob9zzkVe4AT7bUKUuv_k2RkgimwMC2eWc":-1},"/nuxt/ui/4541"]