mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-19 06:21:46 +01:00
57 lines
1.0 KiB
Markdown
57 lines
1.0 KiB
Markdown
---
|
|
title: Icons
|
|
description: 'Nuxt UI integrates with Iconify to access over 200,000+ icons.'
|
|
framework: vue
|
|
links:
|
|
- label: 'Iconify'
|
|
to: https://iconify.design/
|
|
target: _blank
|
|
icon: i-simple-icons-iconify
|
|
navigation.icon: i-lucide-smile
|
|
---
|
|
|
|
::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](/components/icon) component with a `name` prop to display an icon:
|
|
|
|
::component-code{slug="icon"}
|
|
---
|
|
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](/components/button) for example:
|
|
|
|
::component-code{slug="button"}
|
|
---
|
|
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
|