Nuxt UI Icon size
I'm using the latest versions of Nuxt UI / Nuxt UI Pro, but I'm finding my icon sizes (and maybe my text too) are all considerably smaller than the Nuxt UI Pro Dashboard template. Is there any reason why this might be?
3 Replies
Hi @CT. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The knowledge sources do not explicitly mention a global default icon size for Nuxt UI or Nuxt UI Pro, nor do they provide details about differences in icon or text sizing between the Nuxt UI Pro Dashboard template and a fresh install. However, the documentation does show that icon sizes are typically controlled via utility classes (e.g.,
class="size-5") when using the <UIcon /> component or icon props in components like <UButton /> Nuxt UI Icon Usage.
If your icons appear smaller than those in the Nuxt UI Pro Dashboard template, possible reasons could include:
- Missing or different utility classes: The Dashboard template may apply larger size classes (like size-5, size-6, etc.) to icons, while your implementation might use smaller or no size classes.
- Custom theme or slot overrides: The Dashboard template could have custom slot or theme configurations that increase icon or text size. For example, slot classes like icon: 'shrink-0 size-5 self-center me-1.5' are used in the Dashboard Navbar component Dashboard Navbar Theme.
- Tailwind CSS configuration: If your Tailwind config differs from the template (e.g., custom font sizes or base styles), this could affect both icon and text sizing.
What you can do:
- Inspect the Dashboard template’s icon usage and compare the applied classes to your own.
- Check your theme configuration (e.g., app.config.ts) for any overrides or missing slot classes related to icon sizing.
- Ensure you are using the same utility classes for icon size as the template (e.g., size-5 for a 1.25rem icon).
If you want to match the Dashboard template, try applying the same size utility classes to your icons, or copy the relevant slot configuration from the template’s theme section.
If you need more specific guidance, please provide a code snippet or more details about your current setup.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1154808842241192016> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
I can't really see any differences between my code and the Dashboard example..
The tailwind in the browser is the same for mine and the dashboard
iconify i-lucide:panel-left-close shrink-0 size-5