Icon 图标

Element Plus 提供了一套常用的图标集合。

WARNING

⚠️ Font Icon has been removed, since version 1.2.0-beta.1.

Icon Usage

安装

Using packaging manager

# Choose a package manager you like.

# NPM
$ npm install @element-plus/icons
# Yarn
$ yarn add @element-plus/icons
# pnpm
$ pnpm 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>

通过添加额外的类名 is-loading,你的图标就可以在 2 秒内旋转 360 度,但让你也可以自己改写想要的动画。

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>

Icon Collection

TIP

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

You can click the icon to copy it

Copy icon code
  • 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

属性说明类型可选值默认值
colorsvg 的 fill 颜色Pick<CSSProperties, 'color'>-inherit
sizeSVG 图标的大小,size x sizenumber/string-

Icon Slots

名称说明
自定义默认内容