ui/docs/content/1.getting-started/4.icons/2.vue.md

title, description, framework, links

title	description	framework	links
Icons	Nuxt UI integrates with Iconify to access over 200,000+ icons.	vue	label to target icon Iconify https://iconify.design/ _blank i-simple-icons-iconify

::callout{to="/getting-started/icons/nuxt" icon="i-logos-nuxt-icon" class="hidden"} Looking for the Nuxt version? ::

Usage

Icon Component

You can use the Icon component with a name prop to display an icon:

::component-code

props: name: 'i-lucide-lightbulb' class: 'size-5'

::

::note You can use any name from the https://icones.js.org collection. ::

Component Props

Some components also have an icon prop to display an icon, like the Button for example:

::component-code

ignore:

• color
• variant props: icon: i-lucide-sun variant: subtle slots: default: Button

---

::

Theme

You can change the default icons used by Nuxt UI components in your vite.config.ts:

:icons-theme