Icons

YH-UI Icons now supports two usage styles. The existing Icon / YhIcon Iconify string API remains unchanged, and modern component library style icon components are also exported. Each icon can be imported and rendered as a regular Vue component.

Component Usage

Icon Components

Iconify Compatibility

The original API is still available. Use Icon with prefix:name when you need icons from multiple icon sets.

Iconify String Icons

Icon List

Click an icon card to copy its import statement and template usage.

All categoriesArrowBrandBusinessCommunicationDataDeviceEditFeedbackFileFoodMapMediaObjectSystemTimeUserWeather

292 component icons

On-Demand Import

<script setup lang="ts">
import { Search, Edit, Delete } from '@yh-ui/icons'
</script>

<template>
  <Search />
  <Edit :size="20" color="var(--yh-color-primary)" />
  <Delete />
</template>

Global Registration

If you want to use all icons directly in templates, register them in your app entry:

import { createApp } from 'vue'
import * as Icons from '@yh-ui/icons'
import App from './App.vue'

const app = createApp(App)

for (const [key, component] of Object.entries(Icons.iconComponents)) {
  app.component(key, component)
}

app.mount('#app')

API

All icon components support the same visual props as YhIcon:

Prop	Description	Type	Default
size	Icon size	number | string	undefined
color	Icon color	string	undefined
spin	Whether to rotate continuously	boolean	false
rotate	Static rotation angle	number	0