Icon

Element Plus provides a set of common icons.

WARNING

Element Plus team is replacing all Font Icon in the previously built components to SVG Icon, please keep you eyes on ChangeLog, for getting latest updates, Font Icon will be deprecated after the first stable release.

SvgIcon Usage

Installation

The current icon is only targeted to Vue3.

Using packaging manager

$ yarn add @element-plus/icons
# or
$ npm install @element-plus/icons

Simple usage

WARNING

Because HTML standard has already defined a tag named menu, so you need to use an alias in order to render the icon, if you register Menu directly it will not work.

<!-- Use el-icon to provide attributes to SVG icon -->
<template>
  <div>
    <el-icon :size="size" :color="color">
      <edit></edit>
    </el-icon>
    <!-- Or use it independently without derive attributes from parent -->
    <edit></edit>
  </div>
</template>

Combined with el-icon

el-icon provides extra attributes for raw SVG icon, for more detail, please read to the end.

<template>
  <p>
    with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2
    seconds, you can also override this
  </p>
  <el-icon :size="20">
    <edit />
  </el-icon>
  <el-icon color="#409EFC" class="no-inherit">
    <share />
  </el-icon>
  <el-icon>
    <delete />
  </el-icon>
  <el-icon class="is-loading">
    <loading />
  </el-icon>
  <el-button type="primary">
    <el-icon style="vertical-align: middle;">
      <search />
    </el-icon>
    <span style="vertical-align: middle;"> Search </span>
  </el-button>
</template>

with extra class is-loading, your icon is able to rotate 360 deg in 2 seconds, you can also override this

Using SVG icon directly

<template>
  <div style="font-size: 20px;">
    <!-- Since svg icons do not carry any attributes by default -->
    <!-- You need to provide attributes directly -->
    <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;" />
    <search style="width: 1em; height: 1em; margin-right: 8px;" />
  </div>
</template>

SVG Icons collection Available >= 1.0.2-beta.66

TIP

You can use SVG icon in any version as long as you install it

You can click the icon to copy it

  • Aim
  • AddLocation
  • Apple
  • AlarmClock
  • ArrowDown
  • ArrowDownBold
  • ArrowLeft
  • ArrowLeftBold
  • ArrowRightBold
  • ArrowUp
  • Back
  • Bell
  • Baseball
  • Bicycle
  • BellFilled
  • Basketball
  • Bottom
  • Box
  • Briefcase
  • BrushFilled
  • Bowl
  • Avatar
  • Brush
  • Burger
  • Camera
  • BottomLeft
  • Calendar
  • CaretBottom
  • CaretLeft
  • CaretRight
  • CaretTop
  • ChatDotSquare
  • Cellphone
  • ChatDotRound
  • ChatLineSquare
  • ChatLineRound
  • ChatRound
  • Check
  • ChatSquare
  • Cherry
  • Chicken
  • CircleCheckFilled
  • CircleCheck
  • Checked
  • CircleCloseFilled
  • CircleClose
  • ArrowRight
  • CirclePlus
  • Clock
  • CloseBold
  • Close
  • Cloudy
  • CirclePlusFilled
  • CoffeeCup
  • ColdDrink
  • Coin
  • ArrowUpBold
  • CollectionTag
  • BottomRight
  • Coffee
  • CameraFilled
  • Collection
  • Cpu
  • Crop
  • Coordinate
  • DArrowLeft
  • Compass
  • Connection
  • CreditCard
  • DataBoard
  • DArrowRight
  • Dessert
  • DeleteLocation
  • DCaret
  • Delete
  • Dish
  • DishDot
  • DocumentCopy
  • Discount
  • DocumentChecked
  • DocumentAdd
  • DocumentRemove
  • DataAnalysis
  • DeleteFilled
  • Download
  • Drizzling
  • Eleme
  • ElemeFilled
  • Edit
  • Failed
  • Expand
  • Female
  • Document
  • Film
  • Finished
  • DataLine
  • Filter
  • Flag
  • FolderChecked
  • FirstAidKit
  • FolderAdd
  • Fold
  • FolderDelete
  • DocumentDelete
  • Folder
  • Food
  • FolderOpened
  • Football
  • FolderRemove
  • Fries
  • FullScreen
  • ForkSpoon
  • Goblet
  • GobletFull
  • Goods
  • GobletSquareFull
  • GoodsFilled
  • Grid
  • Grape
  • GobletSquare
  • Headset
  • Comment
  • HelpFilled
  • Histogram
  • HomeFilled
  • Help
  • House
  • IceCreamRound
  • HotWater
  • IceCream
  • Files
  • IceCreamSquare
  • Key
  • IceTea
  • KnifeFork
  • Iphone
  • InfoFilled
  • Link
  • IceDrink
  • Lightning
  • Loading
  • Lollipop
  • LocationInformation
  • Lock
  • LocationFilled
  • Magnet
  • Male
  • Location
  • Menu
  • MagicStick
  • MessageBox
  • MapLocation
  • Mic
  • Message
  • Medal
  • MilkTea
  • Microphone
  • Minus
  • Money
  • MoonNight
  • Monitor
  • Moon
  • More
  • MostlyCloudy
  • MoreFilled
  • Mouse
  • Mug
  • Mute
  • NoSmoking
  • MuteNotification
  • Notification
  • Notebook
  • Odometer
  • OfficeBuilding
  • Operation
  • Opportunity
  • Orange
  • Open
  • Paperclip
  • Pear
  • PartlyCloudy
  • Phone
  • PictureFilled
  • PhoneFilled
  • PictureRounded
  • Guide
  • Place
  • Platform
  • PieChart
  • Pointer
  • Plus
  • Position
  • Postcard
  • Present
  • PriceTag
  • Promotion
  • Pouring
  • ReadingLamp
  • QuestionFilled
  • Printer
  • Picture
  • RefreshRight
  • Reading
  • RefreshLeft
  • Refresh
  • Refrigerator
  • RemoveFilled
  • Right
  • ScaleToOriginal
  • School
  • Remove
  • Scissor
  • Select
  • Management
  • Search
  • Sell
  • SemiSelect
  • Share
  • Setting
  • Service
  • Ship
  • SetUp
  • ShoppingBag
  • Shop
  • ShoppingCart
  • ShoppingCartFull
  • Soccer
  • SoldOut
  • Smoking
  • SortDown
  • Sort
  • SortUp
  • Star
  • Stamp
  • StarFilled
  • Stopwatch
  • SuccessFilled
  • Suitcase
  • Sugar
  • Sunny
  • Sunrise
  • Switch
  • Ticket
  • Sunset
  • Tickets
  • SwitchButton
  • TakeawayBox
  • ToiletPaper
  • Timer
  • Tools
  • TopLeft
  • Top
  • TopRight
  • TrendCharts
  • TurnOff
  • Unlock
  • Trophy
  • Umbrella
  • UploadFilled
  • UserFilled
  • Upload
  • User
  • Van
  • CopyDocument
  • VideoPause
  • VideoCameraFilled
  • View
  • Wallet
  • WarningFilled
  • Watch
  • VideoPlay
  • Watermelon
  • VideoCamera
  • WalletFilled
  • Warning
  • List
  • ZoomIn
  • ZoomOut
  • Rank
  • WindPower

Icon Attributes

AttributeDescriptionTypeAcceptable ValueDefault
colorSVG tag's fill attributePick<CSSProperties, 'color'>-inherit from color
sizeSVG icon size, size x sizenumber-inherit from font size

Icon Slots

NameDescription
customize default content