\n\n\u003Cimg width=\"912\" height=\"578\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/71fb37a4-3959-413f-9076-74f63eee0108\" />\n\nNormal button:\n```html\n\u003CUButton\n color=\"info\"\n variant=\"soft\"\n size=\"xl\"\n icon=\"i-heroicons-question-mark-circle\"\n class=\"rounded-full\"\n aria-label=\"Show keyboard shortcuts\"\n />\n```\n\nIm using Nuxt4 and NuxtUI 3",[],416,"nuxt","icon","open","NuxtUI icons forced to width and height 1em!","2025-07-22T16:50:58Z","https://github.com/nuxt/icon/issues/416",0.6889726,{"description":3148,"labels":3149,"number":3150,"owner":3140,"repository":3141,"state":3142,"title":3151,"updated_at":3152,"url":3153,"score":3154},"I want to share common icons between projects using nuxt layers. I would prefer to keep my icons in svg files. Unfortunately, the `nuxt-icons` module does not meet my expectations (import all icons), so I decided to use your solution.\r\n\r\nWhen I hold the icon in `/components/global` everything works great. Unfortunately, when I keep this icon in a nuxt layer, I get a string with the name instead of the icon.\r\n\r\nI would also love to be able to use `param-case` in the `name` property.\r\n\r\nReproduction: https://stackblitz.com/edit/github-qddkmm?file=base/nuxt.config.ts",[],48,"Can't use svg icons from nuxt layer","2024-05-07T08:36:47Z","https://github.com/nuxt/icon/issues/48",0.7047628,{"description":3156,"labels":3157,"number":3164,"owner":3140,"repository":3165,"state":3142,"title":3166,"updated_at":3167,"url":3168,"score":3169},"### Description\n\nThis is a follow up to this: https://github.com/nuxt/ui/issues/4498\n\nI'm using NuxtUi and not the NuxtJS framework (inertiajs), and I would to do something like this:\n\n```js\n{\n icon: {\n provider: 'server', // \u003C-- own server here\n customCollections: [\n {\n prefix: 'my-icon',\n dir: './assets/my-icons'\n },\n ],\n },\n}\n```\n\nThe original bug report suggests workaround that aren't that plug-and-play. For example, it may be possible to use an Laravel instance that pushes the icon-set to S3, and nuxt-ui using the S3-instance (e.g. https://s3.example.org/icons/) as a base for the icon collection(s).\n\n### Additional context\n\n_No response_",[3158,3161],{"name":3159,"color":3160},"enhancement","a2eeef",{"name":3162,"color":3163},"triage","ffffff",4541,"ui","Custom Icon server path","2025-07-16T14:22:40Z","https://github.com/nuxt/ui/issues/4541",0.70484906,{"description":3171,"labels":3172,"number":3182,"owner":3140,"repository":3140,"state":3183,"title":3184,"updated_at":3185,"url":3186,"score":3187},"\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_",[3173,3176,3179],{"name":3174,"color":3175},"pending triage","E99695",{"name":3177,"color":3178},"needs reproduction","FBCA04",{"name":3180,"color":3181},"possible regression","B90A42",29387,"closed","Icons not rendering on production build when mounting","2024-10-15T06:27:30Z","https://github.com/nuxt/nuxt/issues/29387",0.667538,{"description":3189,"labels":3190,"number":3191,"owner":3140,"repository":3141,"state":3183,"title":3192,"updated_at":3193,"url":3194,"score":3195},"When I used the latest [Nuxt UI Pro Docs Theme](https://github.com/nuxt-ui-pro/docs) and added Nuxt Scripts, I encountered some missing icons.\r\n\r\n**To reproduce:**\r\n\r\n- Clone \"Nuxt UI Pro Docs\"\r\n- Add Nuxt Scripts as dependency\r\n- Deploy to Vercel with `npx nuxi generate`\r\n- Find missing Icons \r\n\r\n\r\n**Missing Icons when Client Side Rendering:**\r\n\u003Cimg width=\"940\" alt=\"image\" src=\"https://github.com/user-attachments/assets/acdfa7df-ded1-4811-8305-320ca99303c2\">\r\n\r\n**Cannot Find icons:**\r\n\u003Cimg width=\"1179\" alt=\"image\" src=\"https://github.com/user-attachments/assets/fe1135ff-9ef2-4157-bd58-dc7e00f566c1\">\r\n\r\n**Server Rendered:** \r\n\u003Cimg width=\"810\" alt=\"image\" src=\"https://github.com/user-attachments/assets/4f5d37a0-b5f1-4521-b566-f0a74c034427\">\r\n\r\nMaybe this is also interesting for you @benjamincanac, @harlan-zw",[],220,"Issues when Prerender with `nuxt generate`","2024-07-30T17:48:07Z","https://github.com/nuxt/icon/issues/220",0.6800136,{"description":3197,"labels":3198,"number":3199,"owner":3140,"repository":3141,"state":3183,"title":3200,"updated_at":3201,"url":3202,"score":3203},"\r\nhttps://github.com/user-attachments/assets/a864645c-c0eb-4581-885e-effce6bc8ca9\r\nThis SVG file cannot be displayed\r\nBut using this module( https://nuxt.com.cn/modules/icons )Can display normally\r\n",[],242,"Some SVG cannot be displayed","2024-08-27T10:33:55Z","https://github.com/nuxt/icon/issues/242",0.6818048,{"description":3205,"labels":3206,"number":3207,"owner":3140,"repository":3141,"state":3183,"title":3208,"updated_at":3209,"url":3210,"score":3211},"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.68355286,{"description":3213,"labels":3214,"number":3215,"owner":3140,"repository":3216,"state":3183,"title":3217,"updated_at":3218,"url":3219,"score":3220},"I believe there is an Cloudflare error (`ERROR 9422: Free unique transformations by account has been exhausted`) with the image in the [showcase of Nuxt framework](https://nuxt.com/showcase).\n\nThe error was found by directly opening the src url: [https://nuxt.com/cdn-cgi/image/w=488,h=366/assets/websites/cometby-perplexity-ai.png](https://nuxt.com/cdn-cgi/image/w=488,h=366/assets/websites/cometby-perplexity-ai.png)\n\n\u003Cimg width=\"1865\" height=\"956\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/db3465fb-b5f2-444c-bab3-1eaaa3eaf974\" />\n\nTested on multiple devices, doesn't work on any of them.\n\nError in js console writes: `Failed to load resource: the server responded with a status of 429 ()`",[],1967,"nuxt.com","Showcase - Perplexity Comet - thumbnail not displaying","2025-07-16T08:42:07Z","https://github.com/nuxt/nuxt.com/issues/1967",0.6838918,{"description":3222,"labels":3223,"number":3224,"owner":3140,"repository":3141,"state":3183,"title":3225,"updated_at":3226,"url":3227,"score":3228},"Reproduction: https://stackblitz.com/edit/nuxt-starter-cmr8kq?file=pnpm-lock.yaml\r\n\r\nMost likely a Nuxt Islands limitation but issue here for tracking ",[],52,"Nuxt Islands can't render \u003CIcon>","2023-05-01T06:43:12Z","https://github.com/nuxt/icon/issues/52",0.6841107,{"description":3230,"labels":3231,"number":3241,"owner":3140,"repository":3165,"state":3183,"title":3242,"updated_at":3243,"url":3244,"score":3245},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.13.0`\n- Nuxt Version: `3.15.4`\n- CLI Version: `3.21.1`\n- Nitro Version: `2.10.4`\n- Package Manager: `npm@10.9.2`\n- Builder: `-`\n- User Config: `devtools`, `extends`, `runtimeConfig`, `css`, `build`, `modules`, `piniaPluginPersistedstate`, `googleFonts`, `colorMode`, `site`, `robots`, `gtag`, `routeRules`, `icon`, `compatibilityDate`\n- Runtime Modules: `@nuxtjs/google-fonts@3.2.0`, `@nuxt/eslint@1.0.1`, `@vueuse/nuxt@12.7.0`, `@pinia/nuxt@0.10.1`, `pinia-plugin-persistedstate/nuxt@4.2.0`, `@nuxt/image@1.9.0`, `@nuxt/ui@2.21.0`, `nuxt-gtag@3.0.2`, `@nuxtjs/robots@5.2.2`, `@nuxtjs/sitemap@7.2.5`, `@nuxt/content@3.1.1`, `@nuxt/icon@1.10.3`\n- Build Modules: `-`\n\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.15.4\n\n### Reproduction\n\nI don't know how to reproduce this since it works in my local environment, however, this is the website: https://www.storysprout.me/\n\nI did try adding:\n```ts\n icon: {\n clientBundle: {\n scan: true,\n }\n },\n```\nto the `nuxt.config.ts` file, but that didn't help.\n\nI also installed the packages for the icons:\n\n```json\n \"dependencies\": {\n \"@iconify-json/fluent-emoji-high-contrast\": \"^1.2.3\",\n \"@iconify-json/heroicons\": \"^1.2.2\",\n }\n```\n\n### Description\n\nHi, \n\nSince I deployed to Vercel yesterday, I have encountered issues with the icons on my website.\n\nSome of them load correctly, while others do not work at all. I get a few console and network errors when loading the icons.\n\nFor example, I am using the component `UColorModeButton` and then I see this error:\n```\n[Icon] failed to load icon `heroicons:moon-20-solid`\n```\n\nIt happens similarly with other icons I have added for example when using the `items` prop to some of the other components like `UDropDown`.\n\nThe Network Error is a 404 on:\n`https://www.storysprout.me/api/_nuxt_icon/heroicons.json?icons=moon-20-solid`\n\nThank you!\n\n### Additional context\n\nI can provide any additional context if necessary.\n\n### Logs\n\n```shell-script\n\n```",[3232,3235,3238],{"name":3233,"color":3234},"bug","d73a4a",{"name":3236,"color":3237},"v3","49DCB8",{"name":3239,"color":3240},"upstream","78bddb",3347,"failed to load icon `heroicons:moon-20-solid` on Vercel deployment","2025-08-07T11:29:01Z","https://github.com/nuxt/ui/issues/3347",0.687737,["Reactive",3247],{},["Set"],["ShallowReactive",3250],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fRHLMStsP7Wm0uZLwLyp4lcvDh1ks4zD95yV1wzAKAc0":-1},"/nuxt/icon/221"]