Icon

Icons are used to visually represent actions and information. Click on any icon to copy its name.

Icon Usage

Use the name property to specify the icon. Click on any icon card to copy the code.

Import

Icon component supports on-demand import:

<script setup>
  import { UIcon } from 'ume-ui';
  import 'ume-ui/icon/index.css';
</script>

<template>
  <u-icon name="search" />
</template>

Basic Usage

<template>
  <u-icon name="search" size="20"></u-icon>
  <u-icon name="favorfill" size="20" color="#e6a23c"></u-icon>
  <u-icon name="roundclosefill" size="20" color="#f56c6c"></u-icon>
  <u-icon name="roundcheckfill" size="20" color="#67c23a"></u-icon>
</template>

Custom Size

Use the size property to set icon size.

<template>
  <u-icon name="favor" size="16"></u-icon>
  <u-icon name="favor" size="24"></u-icon>
  <u-icon name="favor" size="32"></u-icon>
  <u-icon name="favor" size="48"></u-icon>
</template>

Custom Color

Use the color property to set icon color.

<template>
  <u-icon name="favorfill" size="24" color="#409eff"></u-icon>
  <u-icon name="favorfill" size="24" color="#67c23a"></u-icon>
  <u-icon name="favorfill" size="24" color="#e6a23c"></u-icon>
  <u-icon name="favorfill" size="24" color="#f56c6c"></u-icon>
  <u-icon name="favorfill" size="24" color="#909399"></u-icon>
</template>

Icon Gallery

Click on any icon to copy <u-icon name="..." /> code.

notification

order

deliver

back

cascades

list

more

scan

settings

questionfill

question

form

pic

filter

top

pulldown

pullup

right

refresh

moreandroid

deletefill

cart

qrcode

remind

delete

home

cartfill

homefill

lock

unlock

activity

friend

square

round

roundaddfill

roundadd

add

notificationforbidfill

fold

appreciatefill

infofill

info

forwardfill

forward

voice

voicefill

wifi

share

barcode

searchlist

down

countdown

noticefill

pullleft

pullright

rankfill

rank

picfill

refresharrow

attentionfill

attention

cut

backwardfill

playfill

stop

tagfill

tag

post

radiobox

upload

writefill

write

radioboxfill

add1

move

recordfill

recordlight

record

sortlight

attentionforbid

attentionforbidfill

piclight

voicelight

full

mail

peoplelist

newsfill

newshotfill

newshot

videofill

video

exit

skinfill

skin

moneybag

subscription

home_light

my_light

community_light

cart_light

we_light

home_fill_light

cart_fill_light

my_fill_light

search_light

scan_light

people_list_light

close_light

add_light

friend_add_light

edit_light

camera_light

refresh_light

back_light

share_light

appreciate_light

message_fill_light

video_light

search_list_light

form_fill_light

favor_fill_light

delete_light

back_android

back_android_light

down_light

round_close_light

round_close_fill_light

group_light

location_light

attention_light

play_forward_fill

subscription_light

notice_forbid_fill

qr_code_light

settings_light

round_link_fill

warn_light

oppose_fill_light

oppose_light

return

appreciate

check

close

location

roundcheckfill

roundcheck

roundclosefill

roundclose

search

unfold

warnfill

warn

camerafill

camera

commentfill

comment

like

notificationfill

API

Property	Description	Type	Default
name	Icon name	string	''
size	Icon size (e.g., '20px', 24)	string | number	''
color	Icon color	string	''