Icon

Icon component enhanced based on Element Plus Icon with support for Iconify icons.

Icon Usage

There are multiple ways to use icons:

1. Direct Iconify Usage (Recommended)

You can directly use Tabler Icons from Iconify without any installation. See Basic Usage for examples.

2. Install Icon Sets with UnoCSS

Install your preferred Iconify icon collection and use with UnoCSS:

pnpm add -D @iconify-json/mdi

Then use with i- prefix:

<ep-icon icon="i-mdi:home" />

3. Element Plus Icons

Install and use Element Plus icon collection:

pnpm add @element-plus/icons-vue

<script setup>
import { Edit } from "@element-plus/icons-vue"
</script>

<template>
  <el-icon><Edit /></el-icon>
</template>

Basic Usage

Display icons using Iconify icon names.

Use icon prop with Iconify icon name (e.g., 'tabler:home'). The component automatically adds the 'i-' prefix if not present.

<template>
  <div class="icon-example">
    <ep-icon icon="tabler:number-1-small" size="50" />
    <ep-icon icon="tabler:number-2-small" size="50" />
    <ep-icon icon="tabler:number-3-small" size="50" />
    <ep-icon icon="tabler:number-4-small" size="50" />
    <ep-icon icon="tabler:number-5-small" size="50" />
  </div>
</template>
<script lang="ts" setup>
defineOptions({
  name: "basic"
})
</script>
<style scoped>
.icon-example {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
</style>

Hide Source

Icon API

Icon Attributes

Name	Description	Type	Default
icon	Iconify icon name	string	—

Element Plus Icon Attributes

Name	Description	Type	Default
color	SVG tag's fill attribute	string	inherit from color
size	SVG icon size, size x size	number / string	inherit from font size

Icon Slots

Name	Description
default	customize default content