<template>
  <el-icon :size="30" :color="color">
    <Edit />
  </el-icon>
</template>

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

const color = ref('#409EFC')
</script>

Combined with Components

<template>
  <el-button type="primary">
    <el-icon style="vertical-align: middle;">
      <Search />
    </el-icon>
    <span style="vertical-align: middle;">Search</span>
  </el-button>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
</script>

Loading Icon

<template>
  <el-icon class="is-loading">
    <Loading />
  </el-icon>
</template>

<script setup>
import { Loading } from '@element-plus/icons-vue'
</script>

Using SVG Directly

<template>
  <Edit style="width: 1em; height: 1em; margin-right: 8px;" />
  <Share style="width: 1em; height: 1em; margin-right: 8px;" />
  <Delete style="width: 1em; height: 1em; margin-right: 8px;" />
</template>

<script setup>
import { Edit, Share, Delete } from '@element-plus/icons-vue'
</script>

Global Registration

// main.ts
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

API Reference

Attributes

Name	Description	Type	Default
color	SVG fill color	`string`	inherit from parent
size	Icon size	`number \| string`	inherit from font size

Slots

Name	Description
default	SVG icon component

Icon Collection

Element Plus provides 300+ icons including:

Action icons: Edit, Delete, Share, Download, Upload
Arrow icons: ArrowLeft, ArrowRight, ArrowUp, ArrowDown
Status icons: SuccessFilled, WarningFilled, CircleCloseFilled, InfoFilled
Media icons: Picture, VideoCamera, Microphone
And many more...

Best Practices

Use el-icon wrapper for consistent sizing
Add is-loading class for loading animations
Import icons individually for tree-shaking

el-icon

Icon Component

When to Use

Installation

Basic Usage