Icon
Element Plus provides a set of common icons.
Simple Usage
ElIcon provides size and color attributes for the SVG icon. An icon can also be used on its own.
Combined with ElIcon
ElIcon gives raw SVG icons extra attributes. Add the is-loading class to make an icon rotate 360 degrees in 2 seconds; you can override this animation.
通过添加额外的类名 is-loading，你的图标就可以在 2 秒内旋转 360 度，当然你也可以自己改写想要的动画。
Using SVG icon directly
SVG icons do not carry any attributes by default. Provide width / height or a class when using them directly.
Icon Collection
All 293 official icons are generated from @element-plus/icons-vue; the SVG data matches the official icons byte for byte.
Copy icon code
System
- Plus
- Minus
- CirclePlus
- Search
- Female
- Male
- Aim
- House
- FullScreen
- Loading
- Link
- Service
- Pointer
- Star
- Notification
- Connection
- ChatDotRound
- Setting
- Clock
- Position
- Discount
- Odometer
- ChatSquare
- ChatRound
- ChatLineRound
- ChatLineSquare
- ChatDotSquare
- View
- Hide
- Unlock
- Lock
- RefreshRight
- RefreshLeft
- Refresh
- Bell
- MuteNotification
- User
- Check
- CircleCheck
- Warning
- CircleClose
- Close
- PieChart
- More
- Compass
- Filter
- Switch
- Select
- SemiSelect
- CloseBold
- EditPen
- Edit
- Message
- MessageBox
- TurnOff
- Finished
- Delete
- Crop
- SwitchButton
- Operation
- Open
- Remove
- ZoomOut
- ZoomIn
- InfoFilled
- CircleCheckFilled
- SuccessFilled
- WarningFilled
- CircleCloseFilled
- QuestionFilled
- WarnTriangleFilled
- UserFilled
- MoreFilled
- Tools
- HomeFilled
- Menu
- UploadFilled
- Avatar
- HelpFilled
- Share
- StarFilled
- Comment
- Histogram
- Grid
- Promotion
- DeleteFilled
- RemoveFilled
- CirclePlusFilled
Arrow
- ArrowLeft
- ArrowUp
- ArrowRight
- ArrowDown
- ArrowLeftBold
- ArrowUpBold
- ArrowRightBold
- ArrowDownBold
- DArrowRight
- DArrowLeft
- Download
- Upload
- Top
- Bottom
- Back
- Right
- TopRight
- TopLeft
- BottomRight
- BottomLeft
- Sort
- SortUp
- SortDown
- Rank
- CaretLeft
- CaretTop
- CaretRight
- CaretBottom
- DCaret
- Expand
- Fold
Document
- DocumentAdd
- Document
- Notebook
- Tickets
- Memo
- Collection
- Postcard
- ScaleToOriginal
- SetUp
- DocumentDelete
- DocumentChecked
- DataBoard
- DataAnalysis
- CopyDocument
- FolderChecked
- Files
- Folder
- FolderDelete
- FolderRemove
- FolderOpened
- DocumentCopy
- DocumentRemove
- FolderAdd
- FirstAidKit
- Reading
- DataLine
- Management
- Checked
- Ticket
- Failed
- TrendCharts
- List
Media
- Microphone
- Mute
- Mic
- VideoPause
- VideoCamera
- VideoPlay
- Headset
- Monitor
- Film
- Camera
- Picture
- PictureRounded
- Iphone
- Cellphone
- VideoCameraFilled
- PictureFilled
- Platform
- CameraFilled
- BellFilled
Traffic
- Location
- LocationInformation
- DeleteLocation
- Coordinate
- Bicycle
- OfficeBuilding
- School
- Guide
- AddLocation
- MapLocation
- Place
- LocationFilled
- Van
Food
- Watermelon
- Pear
- NoSmoking
- Smoking
- Mug
- GobletSquareFull
- GobletFull
- KnifeFork
- Sugar
- Bowl
- MilkTea
- Lollipop
- Coffee
- Chicken
- Dish
- IceTea
- ColdDrink
- CoffeeCup
- DishDot
- IceDrink
- IceCream
- Dessert
- IceCreamSquare
- ForkSpoon
- IceCreamRound
- Food
- HotWater
- Grape
- Fries
- Apple
- Burger
- Goblet
- GobletSquare
- Orange
- Cherry
Items
- Printer
- Calendar
- CreditCard
- Box
- Money
- Refrigerator
- Cpu
- Football
- Brush
- Suitcase
- SuitcaseLine
- Umbrella
- AlarmClock
- Medal
- GoldMedal
- Present
- Mouse
- Watch
- QuartzWatch
- Magnet
- Help
- Soccer
- ToiletPaper
- ReadingLamp
- Paperclip
- MagicStick
- Basketball
- Baseball
- Coin
- Goods
- Sell
- SoldOut
- Key
- ShoppingCart
- ShoppingCartFull
- ShoppingTrolley
- Phone
- Scissor
- Handbag
- ShoppingBag
- Trophy
- TrophyBase
- Stopwatch
- Timer
- CollectionTag
- TakeawayBox
- PriceTag
- Wallet
- Opportunity
- PhoneFilled
- WalletFilled
- GoodsFilled
- Flag
- BrushFilled
- Briefcase
- Stamp
Weather
- Sunrise
- Sunny
- Ship
- MostlyCloudy
- PartlyCloudy
- Sunset
- Drizzling
- Pouring
- Cloudy
- Moon
- MoonNight
- Lightning
Other
- ChromeFilled
- Eleme
- ElemeFilled
- ElementPlus
- Shop
- SwitchFilled
- WindPower
API
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| size | SVG icon size, size x size | number / string | inherit from font size |
| color | SVG tag's fill attribute | string | inherit from color |