Skip to content
On this page

Icon

Vuse provides a set of common icons.

Basic Usage

vue
<v-icon name="icon-name" />

Examples

Click the following icon to copy the component.

alert
arrow-down
arrow-left
arrow-right
arrow-up
blank
check-indeterminate
check
chevron-down
chevron-left
chevron-right
chevron-up
delete-alt
delete
filter
grab
hide
menu
overflow
plus
search
show
spinner
triangle-down
triangle-left
triangle-right
triangle-up
upload

Size

Size
Use the size attribute to customize the icon size. Use the title attribute to display the prompt text.
<template>
  <div style="display: flex; align-items: center">
    <v-icon name="alert" title="Alert1" :size="16" />
    <v-icon name="alert" title="Alert2" :size="32" />
    <v-icon name="alert" title="Alert3" :size="48" />
    <v-icon name="alert" title="Alert4" :size="64" />
  </div>
</template>

Color

Color
Use the color attribute to customize the icon color.
<template>
  <div style="display: flex; align-items: center">
    <v-icon name="upload" title="upload1" color="red" />
    <v-icon name="upload" title="upload1" color="pink" />
    <v-icon name="upload" title="upload2" color="rgb(0, 128, 0)" />
    <v-icon name="upload" title="upload4" color="#333" />
  </div>
</template>