Icon
Last updated:2026-02-03 15:51:56
Component Feature
A component for displaying icons with 68 built-in commonly used icons (as shown below), supporting custom configuration of size and color.
Basic Usage
Specify the icon name by name, set the icon size by size, and set the icon color by color.
Template example:
<Icon name="check-circle" size="lg" color="#00A870" />
Effect display as follows:
Attribute Description
Property Name | Type | Description | Default value |
name ★ | string | Icon name (see available icon list below) | - |
color | string | Icon color (CSS color value) | - |
size | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | Icon size | "md" |
Note:
★ Marked with required attribute.
Available Icon List (68 in Total)
Common Icon
agent - Intelligent agentanalytics - analyticsatom - atombatch - batch processingbolt - lightningbug - debugcheck - checkcheck-circle - check circlecheck-circle-filled - check circle filledclose - closecompass - compassconfetti - confetticube - cubedot - dotdots-horizontal - horizontal dotsdots-vertical - vertical dotsempty-circle - empty circleexternal-link - external linkinfo - infolifesaver - lifesaverlightbulb - lightbulbplay - playplus - plus signreload - reloadsearch - searchsparkle - sparklesparkle-double - double sparklestar - starstar-filled - star-filledDirection Icon
chevron-down - chevron downchevron-left - chevron leftchevron-right - chevron rightchevron-up - chevron upchevron-up-down - chevron up and downDocuments and Content
book-clock - book clockbook-closed - closed bookbook-open - open bookcalendar - calendarchart - chartdocument - documentimages - imagesnotebook - notebooknotebook-pencil - notebook pencilpage-blank - blank pageMap and Location
globe - globemap-pin - map markermaps - mapsDevice
desktop - desktopmobile - mobile devicephone - phoneUser and Identity
name - nameprofile - personal informationprofile-card - personal profileuser - userDevelopment and Code
keys - keylab - labsettings-slider - settings slidersquare-code - square codesquare-image - square imagesquare-text - square textOther
circle-question - circle question markmail - mailsuitcase - suitcasewreath - wreath
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No
Feedback