UnaUI integrates Iconify to provide a wide variety of icons from multiple collections. Iconify ensures a consistent icon usage across different collections.
By default, UnaUI includes the following icon collections:
To add more icon collections, follow these steps:
Install the desired icon collection using your preferred package manager:
pnpm add -D @iconify-icons/[collection-name]
yarn add -D @iconify-icons/[collection-name]
npm install -D @iconify-icons/[collection-name]
Read more in Unocss Icons Preset
<template>
<div class="flex flex-wrap items-center gap-4">
<NIcon name="i-heroicons-bell" />
<NIcon
name="i-logos-adobe-illustrator"
size="2xl"
class="text-primary"
/>
<NIcon
name="i-logos-adobe-xd"
size="2xl"
class="text-primary"
/>
<NIcon
name="i-logos-linux-tux"
size="6xl"
/>
<NIcon
name="i-logos-airbnb"
size="6xl"
/>
<NIcon name="i-heroicons-sun-20-solid dark:i-heroicons-moon-20-solid" />
<NIcon
name="i-twemoji-black-heart hover:i-twemoji-beating-heart"
size="hover:xl"
/>
<NIcon name="i-twemoji-backhand-index-pointing-left" />
<span>
Hover
</span>
</div>
</template>
These icons are configured by default. They are used globally in the components such as NInput, NAlert, NButton, and more.
shortcuts/config/icons.ts
export const staticIcons = {
'i-loading': 'i-tabler-loader-2',
'i-warning': 'i-tabler-alert-triangle-filled',
'i-error': 'i-tabler-exclamation-circle-filled',
'i-success': 'i-tabler-circle-check-filled',
'i-info': 'i-tabler-info-circle-filled',
'i-close': 'i-tabler-x',
'i-check': 'i-tabler-check',
'i-dot': 'i-tabler-circle-filled',
}
<template>
<div class="flex flex-wrap items-center gap-4" size="2xl">
<NIcon name="i-info" class="text-info" />
<NIcon name="i-success" class="text-success" />
<NIcon name="i-warning" class="text-warning" />
<NIcon name="i-error" class="text-error" />
<NIcon name="i-loading" class="animate-spin text-muted" />
<NIcon name="i-close" />
<NIcon name="i-check" />
</div>
</template>
type IconPrefix = 'icon'
export const staticIcon: Record<`${IconPrefix}-${string}`, string> = {
// base
'icon-base': 'flex-none',
}
export const dynamicIcon: [RegExp, (params: RegExpExecArray) => string][] = []
export const icon = [
...dynamicIcon,
staticIcon,
]
import type { HTMLAttributes } from 'vue'
export interface NIconProps {
/**
* Icon name
*
* @example
* 'i-heroicons-chevron-up'
*/
name: HTMLAttributes['class']
}
<script setup lang="ts">
import type { NIconProps } from '../../types'
defineProps<NIconProps>()
</script>
<template>
<span icon-base :class="name" />
</template>