Use an animated chevron icon component for Vue.js


vue-chevron can be used as an animated chevron icon in Vue.js projects.

Live demo page

To see how to implement Vue Chevron, follow the simple example below.


To start working with the component use the following command to install it:

npm install vue-chevron --save


yarn add vue-chevron

There are props and events below you can use to make it fit to your needs.


props: {
  // animation duration
  duration: {
    default: 300

  thickness: {
    default: 8

  angle: {
    default: 40

  round-edges: {
    default: true


Using some of the options above we can create the following example:

  <div class= 'chevron'>

import VueChevron from 'vue-chevron'

  export default {
    components: { VueChevron },
  data() {
    return {
      pointDown: true,
      thickness: 12,
      duration: 400,
      angle: 60,
      roundEdges: false
  methods: {
    toggle() {
      this.pointDown = !this.pointDown;

Using a simple class, here chevron you can use your preffered color and size:

.chevron {
  color: #b50c0c;
  font-size: 80px;

And there it is, a toggleable element content easy and fast.

Note there is also an option for Easings but are not included to keep the library size minimum. Pass in your own easing functions to get the desired effect.

This project is open source available on GitHub made by @irkopal