Icon

Semantic vector graphics.

List of icons

We use the SVG icons from Ant Design officially.

Directional Icons

<template>
  <div class="icons-list">
    <StepBackwardOutlined />
    <StepForwardOutlined />
    <FastBackwardOutlined />
    <FastForwardOutlined />
    <ShrinkOutlined />
    <ArrowsAltOutlined />
    <DownOutlined />
    <UpOutlined />
    <LeftOutlined />
    <RightOutlined />
    <CaretUpOutlined />
    <CaretDownOutlined />
    <CaretLeftOutlined />
    <CaretRightOutlined />
    <UpCircleOutlined />
    <DownCircleOutlined />
    <LeftCircleOutlined />
    <RightCircleOutlined />
    <DoubleRightOutlined />
    <DoubleLeftOutlined />
    <VerticalRightOutlined />
    <VerticalLeftOutlined />
    <VerticalAlignTopOutlined />
    <VerticalAlignMiddleOutlined />
    <VerticalAlignBottomOutlined />
    <ForwardOutlined />
    <BackwardOutlined />
    <RollbackOutlined />
    <EnterOutlined />
    <RetweetOutlined />
    <LoginOutlined />
    <LogoutOutlined />
    <MenuFoldOutlined />
    <MenuUnfoldOutlined />
  </div>
</template>

<script setup>
import {
  StepBackwardOutlined,
  StepForwardOutlined,
  FastBackwardOutlined,
  FastForwardOutlined,
  ShrinkOutlined,
  ArrowsAltOutlined,
  DownOutlined,
  UpOutlined,
  LeftOutlined,
  RightOutlined,
  CaretUpOutlined,
  CaretDownOutlined,
  CaretLeftOutlined,
  CaretRightOutlined,
  UpCircleOutlined,
  DownCircleOutlined,
  LeftCircleOutlined,
  RightCircleOutlined,
  DoubleRightOutlined,
  DoubleLeftOutlined,
  VerticalRightOutlined,
  VerticalLeftOutlined,
  VerticalAlignTopOutlined,
  VerticalAlignMiddleOutlined,
  VerticalAlignBottomOutlined,
  ForwardOutlined,
  BackwardOutlined,
  RollbackOutlined,
  EnterOutlined,
  RetweetOutlined,
  LoginOutlined,
  LogoutOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from '@ant-design/icons-vue'
</script>

<style scoped>
.icons-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.icons-list > * {
  font-size: 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.icons-list > *:hover {
  color: #1890ff;
}
</style>

Suggested Icons

<template>
  <div class="icons-list">
    <QuestionOutlined />
    <QuestionCircleOutlined />
    <PlusOutlined />
    <PlusCircleOutlined />
    <PauseOutlined />
    <PauseCircleOutlined />
    <MinusOutlined />
    <MinusCircleOutlined />
    <PlusSquareOutlined />
    <MinusSquareOutlined />
    <InfoOutlined />
    <InfoCircleOutlined />
    <ExclamationOutlined />
    <ExclamationCircleOutlined />
    <CloseOutlined />
    <CloseCircleOutlined />
    <CloseSquareOutlined />
    <CheckOutlined />
    <CheckCircleOutlined />
    <CheckSquareOutlined />
    <ClockCircleOutlined />
    <WarningOutlined />
    <IssuesCloseOutlined />
    <StopOutlined />
  </div>
</template>

<script setup>
import {
  QuestionOutlined,
  QuestionCircleOutlined,
  PlusOutlined,
  PlusCircleOutlined,
  PauseOutlined,
  PauseCircleOutlined,
  MinusOutlined,
  MinusCircleOutlined,
  PlusSquareOutlined,
  MinusSquareOutlined,
  InfoOutlined,
  InfoCircleOutlined,
  ExclamationOutlined,
  ExclamationCircleOutlined,
  CloseOutlined,
  CloseCircleOutlined,
  CloseSquareOutlined,
  CheckOutlined,
  CheckCircleOutlined,
  CheckSquareOutlined,
  ClockCircleOutlined,
  WarningOutlined,
  IssuesCloseOutlined,
  StopOutlined
} from '@ant-design/icons-vue'
</script>

<style scoped>
.icons-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.icons-list > * {
  font-size: 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.icons-list > *:hover {
  color: #1890ff;
}
</style>

API

Common Icon

Property	Description	Type	Default	Version
style	Style properties of icon, like fontSize and color	CSSProperties	-
spin	Rotate icon with animation	boolean	false
rotate	Rotate degrees (not working in IE9)	number	-
twoToneColor	Only supports the two-tone icon. Specify the primary color	string (hex color)	-

Custom Icon

Property	Description	Type	Default	Version
component	The component used for the root node	ComponentType<CustomIconComponentProps>	-
rotate	Rotate degrees (not working in IE9)	number	-
spin	Rotate icon with animation	boolean	false
style	Style properties of icon, like fontSize and color	CSSProperties	-
twoToneColor	Only supports the two-tone icon. Specify the primary color	string (hex color)	-